Commit 9c9ced90 authored by Lucas Breton's avatar Lucas Breton Committed by Mickaël Bourgier
Browse files

[TextField] Make component controlled + do some cleanup

parent 66c96481
...@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; ...@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { withTheme } from '../styles'; 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. * Uniformise l'application des props de couleur et dimension à son unique enfant.
* *
......
...@@ -6,14 +6,11 @@ import { withStyles } from '../styles'; ...@@ -6,14 +6,11 @@ import { withStyles } from '../styles';
import styles from './TextField.styles'; import styles from './TextField.styles';
/** /**
* TextField permet à l'utilisateur de rentrer du texte dans un champ. * @summary Champ de texte avec label superposable
*
* Utilisé en général dans les formulaires.
*/ */
class TextField extends Component { class TextField extends Component {
state = { state = {
focused: false, focused: false
defaultValue: this.props.defaultValue || this.props.value
}; };
render() { render() {
...@@ -21,19 +18,15 @@ class TextField extends Component { ...@@ -21,19 +18,15 @@ class TextField extends Component {
classes, classes,
className: classNameProp, className: classNameProp,
disabled, disabled,
disableUnderline,
error, error,
name,
fullWidth, fullWidth,
label,
placeholder,
readOnly, readOnly,
required, required,
type, type,
label, value,
placeholder,
onKeyDown,
onKeyUp,
disableUnderline,
defaultValue, // Keep this line
value, // Keep this line
...otherProps ...otherProps
} = this.props; } = this.props;
...@@ -56,9 +49,7 @@ class TextField extends Component { ...@@ -56,9 +49,7 @@ class TextField extends Component {
const labelClassName = classNames(classes.label, { const labelClassName = classNames(classes.label, {
[classes.error]: error, [classes.error]: error,
[classes.labelUp]: [classes.labelUp]:
(this.state.defaultValue !== '' && (value !== '' && value !== null && value !== undefined) ||
this.state.defaultValue !== null &&
this.state.defaultValue !== undefined) ||
this.state.focused || this.state.focused ||
type === 'date' || type === 'date' ||
type === 'time' type === 'time'
...@@ -74,13 +65,9 @@ class TextField extends Component { ...@@ -74,13 +65,9 @@ class TextField extends Component {
className={inputClassName} className={inputClassName}
aria-invalid={error} aria-invalid={error}
disabled={disabled} disabled={disabled}
name={name} value={value}
defaultValue={this.state.defaultValue}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onChange={this.handleChange}
onFocus={this.handleFocus} onFocus={this.handleFocus}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
placeholder={placeholder} placeholder={placeholder}
readOnly={readOnly} readOnly={readOnly}
required={required} required={required}
...@@ -108,15 +95,6 @@ class TextField extends Component { ...@@ -108,15 +95,6 @@ class TextField extends Component {
this.props.onBlur(event); this.props.onBlur(event);
} }
}; };
handleChange = event => {
this.setState({
defaultValue: event.target.value
});
if (this.props.onChange) {
this.props.onChange(event.target.value);
}
};
} }
TextField.propTypes = { TextField.propTypes = {
...@@ -126,59 +104,74 @@ TextField.propTypes = { ...@@ -126,59 +104,74 @@ TextField.propTypes = {
className: PropTypes.string, 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, 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, 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, placeholder: PropTypes.string,
/**
* Rend l'edition impossible
*/
readOnly: PropTypes.bool,
/** /**
* Champ requis ou non * Champ requis ou non
*/ */
required: PropTypes.bool, 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 = { TextField.defaultProps = {
......
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { createCachedFunction } from '@webf/core';
import { Col, Row, withStyles } from '@webf/react'; import { Col, Row, TextField } from '@webf/react';
import TextField from '@webf/react/TextField';
const styles = theme => ({}); class TextFieldProps extends React.Component {
state = {
prenomField: '',
errorField: 'Hello world !',
disabledField: '',
questionField: 'Réponse'
};
handleChange = createCachedFunction((name, event) => {
this.setState({
[name]: event.target.value
});
});
render() {
const {
prenomField,
errorField,
disabledField,
questionField
} = this.state;
function TextFieldProps({ classes, ...props }) {
return ( return (
<Fragment> <Fragment>
<Row> <Row>
<Col sm={3}> <Col sm={3}>
<TextField label='Prenom' /> <TextField
label='Prenom'
value={prenomField}
onChange={this.handleChange('prenomField')}
/>
</Col> </Col>
<Col sm={3}> <Col sm={3}>
<TextField label='Error' defaultValue='Faux' error /> <TextField
label='Error'
value={errorField}
error
onChange={this.handleChange('errorField')}
/>
</Col> </Col>
<Col sm={3}> <Col sm={3}>
<TextField label='Disabled' disabled defaultValue='Hello world' /> <TextField
label='Disabled'
disabled
value={disabledField}
onChange={this.handleChange('disabledField')}
/>
</Col> </Col>
<Col sm={3}> <Col sm={3}>
<TextField <TextField
label='Question ?' label='Question ?'
defaultValue='Réponse' value={questionField}
disableUnderline disableUnderline
onChange={this.handleChange('questionField')}
/> />
</Col> </Col>
</Row> </Row>
</Fragment> </Fragment>
); );
}
} }
export default withStyles(styles)(TextFieldProps); export default TextFieldProps;
...@@ -33,6 +33,7 @@ export { default as Row } from './Row'; ...@@ -33,6 +33,7 @@ export { default as Row } from './Row';
export { default as Slide } from './Slide'; export { default as Slide } from './Slide';
export { default as SmartLayout, withCloseSidemenu } from './SmartLayout'; export { default as SmartLayout, withCloseSidemenu } from './SmartLayout';
export { default as Text } from './Text'; export { default as Text } from './Text';
export { default as TextField } from './TextField';
export { default as ToggleInput } from './ToggleInput'; export { default as ToggleInput } from './ToggleInput';
export { default as Toolbar, FlexibleSpace } from './Toolbar'; export { default as Toolbar, FlexibleSpace } from './Toolbar';
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment