feat(TextField): handle onChange event

kradio3 · Jan 20, 2017 · f153cf0 · f153cf0
1 parent e2c0729
commit f153cf0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mdc-web",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React web components for Material Design",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",

diff --git a/src/Textfield/Input.js b/src/Textfield/Input.js
@@ -7,8 +7,8 @@ class Input extends React.PureComponent {
 
   static propTypes = {
     disabled: PropTypes.bool,
-    onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
   }
 
   constructor(props) {
@@ -23,12 +23,14 @@ class Input extends React.PureComponent {
   }
 
   render() {
+    const { disabled, ...otherProps } = this.props;
     return (
       <input
         className={classnames(Input.ROOT)}
-        disabled={this.props.disabled}
+        disabled={disabled}
         type="text"
         ref={this.registerListeners}
+        {...otherProps}
       />
     );
   }

diff --git a/src/Textfield/Span.js b/src/Textfield/Span.js
@@ -2,16 +2,17 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
 const propTypes = {
-  focused: PropTypes.bool,
   children: PropTypes.node,
+  focused: PropTypes.bool,
+  value: PropTypes.string,
 };
 
 const ROOT = 'mdc-textfield__label';
 const LABEL_FLOAT_ABOVE = `${ROOT}--float-above`;
 
-const Span = ({ focused, children }) => {
+const Span = ({ focused, children, value }) => {
   const classes = {};
-  classes[LABEL_FLOAT_ABOVE] = focused;
+  classes[LABEL_FLOAT_ABOVE] = focused || value;
 
   return (
     <span

diff --git a/src/Textfield/Textfield.js b/src/Textfield/Textfield.js
@@ -6,8 +6,9 @@ import Input from './Input';
 class Textfield extends React.PureComponent {
 
   static propTypes = {
-    floatingLabel: PropTypes.string,
     disabled: PropTypes.bool,
+    floatingLabel: PropTypes.string,
+    value: PropTypes.string,
   }
 
   constructor(props) {
@@ -25,10 +26,9 @@ class Textfield extends React.PureComponent {
     this.setState({ focus: false });
   }
 
-
   render() {
     const { focus } = this.state;
-    const { floatingLabel, disabled } = this.props;
+    const { floatingLabel, disabled, value, ...otherProps } = this.props;
     return (
       <Label
         disabled={disabled}
@@ -38,8 +38,15 @@ class Textfield extends React.PureComponent {
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          value={value}
+          {...otherProps}
         />
-        <Span focused={focus}>{floatingLabel}</Span>
+        <Span
+          focused={focus}
+          value={value}
+        >
+          {floatingLabel}
+        </Span>
       </Label>
     );
   }