[TextField] Make component controlled + do some cleanup

src/Icon/Icon.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withTheme } from '../styles';
 
 /**
- * @summary Uniformise l'application des props de couleur et dimension à son unique enfant.
+ * @summary Uniformise l'application des props de couleur et dimension à son unique enfant
  *
  * Uniformise l'application des props de couleur et dimension à son unique enfant.
  *

src/TextField/TextField.js

@@ -6,14 +6,11 @@ import { withStyles } from '../styles';
 import styles from './TextField.styles';
 
 /**
- * TextField permet à l'utilisateur de rentrer du texte dans un champ.
- *
- * Utilisé en général dans les formulaires.
+ * @summary Champ de texte avec label superposable
  */
 class TextField extends Component {
   state = {
-    focused: false,
-    defaultValue: this.props.defaultValue || this.props.value
+    focused: false
   };
 
   render() {
@@ -21,19 +18,15 @@ class TextField extends Component {
       classes,
       className: classNameProp,
       disabled,
+      disableUnderline,
       error,
-      name,
       fullWidth,
+      label,
+      placeholder,
       readOnly,
       required,
       type,
-      label,
-      placeholder,
-      onKeyDown,
-      onKeyUp,
-      disableUnderline,
-      defaultValue, // Keep this line
-      value, // Keep this line
+      value,
       ...otherProps
     } = this.props;
 
@@ -56,9 +49,7 @@ class TextField extends Component {
     const labelClassName = classNames(classes.label, {
       [classes.error]: error,
       [classes.labelUp]:
-        (this.state.defaultValue !== '' &&
-          this.state.defaultValue !== null &&
-          this.state.defaultValue !== undefined) ||
+        (value !== '' && value !== null && value !== undefined) ||
         this.state.focused ||
         type === 'date' ||
         type === 'time'
@@ -74,13 +65,9 @@ class TextField extends Component {
           className={inputClassName}
           aria-invalid={error}
           disabled={disabled}
-          name={name}
-          defaultValue={this.state.defaultValue}
+          value={value}
           onBlur={this.handleBlur}
-          onChange={this.handleChange}
           onFocus={this.handleFocus}
-          onKeyDown={onKeyDown}
-          onKeyUp={onKeyUp}
           placeholder={placeholder}
           readOnly={readOnly}
           required={required}
@@ -108,15 +95,6 @@ class TextField extends Component {
       this.props.onBlur(event);
     }
   };
-
-  handleChange = event => {
-    this.setState({
-      defaultValue: event.target.value
-    });
-    if (this.props.onChange) {
-      this.props.onChange(event.target.value);
-    }
-  };
 }
 
 TextField.propTypes = {
@@ -126,59 +104,74 @@ TextField.propTypes = {
   className: PropTypes.string,
 
   /**
-   * Enlève le soulignement pour un design plus simple
+   * Objet permettant de modifier les classes utilisées par le composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Désactive le champ
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Enlève le soulignement
    */
   disableUnderline: PropTypes.bool,
 
   /**
-   * Permet au composant de prendre la largeur total de son parent
+   * Si le champ contient une erreur
    */
-  fullWidth: PropTypes.bool,
+  error: PropTypes.bool,
 
   /**
-   * Fonction de callback quand le contenu du champ est modifié
+   * Permet au composant de prendre la largeur total de son parent
    */
-  onChange: PropTypes.func,
+  fullWidth: PropTypes.bool,
 
   /**
-   * Permet de changer le label affiché sur le champ
+   * Label affiché sur le champ (ou au dessus lorsqu'il n'est pas vide)
    */
   label: PropTypes.string,
 
   /**
-   * Type de l'input : text, date, time, multiline, ...
+   * Fonction appelée lorsque le champ perd le focus
    */
-  type: PropTypes.string,
+  onBlur: PropTypes.func,
 
   /**
-   * Désactivé
+   * Fonction appelée lorsque la valeur du champ est modifiée
    */
-  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
 
   /**
-   * Valeur par défaut
+   * Fonction appelée lorsque le champ prend le focus
    */
-  defaultValue: PropTypes.string,
+  onFocus: PropTypes.func,
 
   /**
-   * Placeholder du champs de texte
+   * Valeur s'affichant lorsque le champ est vide
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Rend l'edition impossible
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Champ requis ou non
    */
   required: PropTypes.bool,
 
   /**
-   * Rend l'edition impossible
+   * Type de l'input : text, date, time, multiline, ...
    */
-  readOnly: PropTypes.bool,
+  type: PropTypes.string,
 
   /**
-   * Si le champ contient une erreur
+   * Valeur du champ
    */
-  error: PropTypes.bool
+  value: PropTypes.string
 };
 
 TextField.defaultProps = {

src/TextField/demos/TextFieldProps.js

 import React, { Fragment } from 'react';
+import { createCachedFunction } from '@webf/core';
 
-import { Col, Row, withStyles } from '@webf/react';
-import TextField from '@webf/react/TextField';
+import { Col, Row, TextField } from '@webf/react';
 
-const styles = theme => ({});
+class TextFieldProps extends React.Component {
+  state = {
+    prenomField: '',
+    errorField: 'Hello world !',
+    disabledField: '',
+    questionField: 'Réponse'
+  };
 
-function TextFieldProps({ classes, ...props }) {
-  return (
-    <Fragment>
-      <Row>
-        <Col sm={3}>
-          <TextField label='Prenom' />
-        </Col>
-        <Col sm={3}>
-          <TextField label='Error' defaultValue='Faux' error />
-        </Col>
-        <Col sm={3}>
-          <TextField label='Disabled' disabled defaultValue='Hello world' />
-        </Col>
-        <Col sm={3}>
-          <TextField
-            label='Question ?'
-            defaultValue='Réponse'
-            disableUnderline
-          />
-        </Col>
-      </Row>
-    </Fragment>
-  );
+  handleChange = createCachedFunction((name, event) => {
+    this.setState({
+      [name]: event.target.value
+    });
+  });
+
+  render() {
+    const {
+      prenomField,
+      errorField,
+      disabledField,
+      questionField
+    } = this.state;
+
+    return (
+      <Fragment>
+        <Row>
+          <Col sm={3}>
+            <TextField
+              label='Prenom'
+              value={prenomField}
+              onChange={this.handleChange('prenomField')}
+            />
+          </Col>
+          <Col sm={3}>
+            <TextField
+              label='Error'
+              value={errorField}
+              error
+              onChange={this.handleChange('errorField')}
+            />
+          </Col>
+          <Col sm={3}>
+            <TextField
+              label='Disabled'
+              disabled
+              value={disabledField}
+              onChange={this.handleChange('disabledField')}
+            />
+          </Col>
+          <Col sm={3}>
+            <TextField
+              label='Question ?'
+              value={questionField}
+              disableUnderline
+              onChange={this.handleChange('questionField')}
+            />
+          </Col>
+        </Row>
+      </Fragment>
+    );
+  }
 }
 
-export default withStyles(styles)(TextFieldProps);
+export default TextFieldProps;

src/index.js

@@ -33,6 +33,7 @@ export { default as Row } from './Row';
 export { default as Slide } from './Slide';
 export { default as SmartLayout, withCloseSidemenu } from './SmartLayout';
 export { default as Text } from './Text';
+export { default as TextField } from './TextField';
 export { default as ToggleInput } from './ToggleInput';
 export { default as Toolbar, FlexibleSpace } from './Toolbar';