Commit b6429263 authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

Merge branch 'refactor-textfield' into 'master'

Remove default value from TextField

See merge request !1
parents 66c96481 9c9ced90
......@@ -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.
*
......
......@@ -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 = {
......
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;
......@@ -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';
......
Markdown is supported
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