@hipay/hipay-material-ui 3.11.1 → 3.12.0

package/src/HiForm/HiForm.md

@@ -0,0 +1,1318 @@
+HiForm example :
+
+```js
+import React from 'react';
+import HiSelectField from '../HiSelect/HiSelectField';
+import HiTextField from './HiTextField';
+
+const selectOptions = [
+              { id: 'two', label: 'Two' },
+              { id: 'one', label: 'One' },
+              { id: 'three', label: 'Three' },
+          ];
+
+class CompleteForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            inputOne: 'one',
+            inputTwo: 'two',
+            selectOne: ['one'],
+        };
+        
+        this.handleChangeInputOne = this.handleChangeInputOne.bind(this);
+        this.handleResetInputOne = this.handleResetInputOne.bind(this);
+        this.handleChangeInputTwo = this.handleChangeInputTwo.bind(this);
+        this.handleResetInputTwo = this.handleResetInputTwo.bind(this);
+        this.handleChangeSelectOne = this.handleChangeSelectOne.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+    }
+
+    handleChangeInputOne(event) {
+        this.setState({ inputOne: event.target.value });
+    }
+    
+    handleResetInputOne () {
+        this.setState({ test: '' });
+    }
+
+    handleChangeInputTwo(event) {
+        this.setState({ inputTwo: event.target.value });
+    }
+    
+    handleResetInputTwo () {
+        this.setState({ test: '' });
+    }
+
+
+    handleChangeSelectOne(event, value) {
+        this.setState({ selectOne: value });
+    }
+
+    handleSubmit () {
+        alert('SUBMIT FORM : ' + JSON.stringify(this.state));
+    }
+
+    render() {
+        const {
+            inputOne,
+            inputTwo,
+            selectOne,
+        } = this.state;
+
+        return (
+            <div
+                style={{width: '100%'}}
+                tabIndex={-1}
+            >
+                <form style={{marginTop: 12, width: 500, margin: '0 auto'}} onSubmit={this.handleSubmit}>
+                    <HiTextField
+                        id="inputOne"
+                        name="inputOne"
+                        label="Input One"
+                        value={inputOne}
+                        onChange={this.handleChangeInputOne}
+                        onReset={this.handleResetInputOne}
+                    />
+
+                    <HiSelectField
+                        id="selectOne"
+                        name="selectOne"
+                        label="Select One"
+                        value={selectOne}
+                        options={selectOptions}
+                        onChange={this.handleChangeSelectOne}
+                        onSubmit={this.handleSubmit}
+                        multiple
+                    />
+
+                    <HiTextField
+                        id="inputTwo"
+                        name="inputTwo"
+                        label="Input Two"
+                        value={inputTwo}
+                        onChange={this.handleChangeInputTwo}
+                        onReset={this.handleResetInputTwo}
+                    />
+                </form>
+            </div>
+        );
+    }
+};<CompleteForm/>
+```
+
+HiAddressField example :
+```js
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiAddressField from './HiAddressField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiSwitch from '../HiSwitch';
+
+class HiAddressFields extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            exactOnly: false,
+            value: '',
+        };
+        this.handleSearch = this.handleSearch.bind(this);
+        this.handleSelect = this.handleSelect.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+    }
+
+    handleReset() {
+        this.setState({ value: '' });
+    }
+
+    handleSearch(event) {
+        this.setState({ value: event.target.value });
+    }
+
+    handleSelect(event, value) {
+        this.setState({ value });
+    }
+
+    render() {
+        const { exactOnly, value } = this.state;
+
+        return (
+            <div style={{ marginTop: 12, width: 500 }}>
+                <HiAddressField
+                    name={'address'}
+                    id="address"
+                    translations={{
+                        all: 'Tous les pays',
+                        no_result_match: 'Aucun résultat correspondant',
+                        search: 'Recherche',
+                        n_items_selected: '%s pays sélectionnés',
+                        one_item_selected: '%s pays sélectionné',
+                    }}
+                    onSelect={this.handleSelect}
+                    onSearch={this.handleSearch}
+                    onReset={this.handleReset}
+                    exactOnly={exactOnly}
+                    label={'Adresse'}
+                    value={value}
+                />
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={exactOnly}
+                                onChange={(event, checked) => this.setState({ exactOnly: checked })}
+                            />
+                        }
+                        label="Adresse exacte"
+                    />
+                </FormGroup>
+            </div>
+        );
+    }
+}
+;<HiAddressFields/>
+```
+
+HiEmailField example : 
+```js
+import React from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiEmailField from './HiEmailField';
+import HiSwitch from '../HiSwitch';
+
+class TextField extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            fullWidth: true,
+            email: '',
+            clearIcon: undefined,
+            error: false,
+            helperText: '',
+            helperIcon: false,
+            helperOpen: false,
+            leftIcon: '',
+            rightIcon: '',
+            required: true,
+            disabled: false,
+        };
+
+        this.handleReset = this.handleReset.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleLeftIconClick = this.handleLeftIconClick.bind(this);
+        this.handleError = this.handleError.bind(this);
+    }
+
+    handleReset() {
+        this.setState({
+            email: '',
+            error: false,
+            errorText: '',
+        });
+    };
+
+    handleChange(event) {
+        this.setState({ email: event.target.value });
+
+        if (event.target.value === '') {
+            if (this.state.error) {
+                this.setState({
+                    error: false,
+                    helperOpen: true,
+                });
+            }
+        }
+    }
+
+    handleLeftIconClick() {
+        // eslint-disable-next-line no-alert
+        alert('Waou ! Les icônes sont clicables !');
+    }
+
+    handleError() {
+        this.setState({
+            error: true,
+            errorText: 'It is not a valid email !',
+        });
+    };
+
+    render() {
+        const { classes } = this.props;
+        const {
+            fullWidth,
+            clearIcon,
+            leftIcon,
+            rightIcon,
+            error,
+            errorText,
+            email,
+            required,
+            helperText,
+            helperIcon,
+            helperOpen,
+            disabled,
+        } = this.state;
+        const helperTextLong =
+            'Veuillez saisir votre email.<br>Il ne doit contenir que des caractères alphanumériques, un "@" et un ou plusieurs ".".<br><a href="#">link</a>';
+        const helperTextShort = 'Veuillez saisir votre prénom.';
+
+        return (
+            <div style={{ marginTop: 12, width: 500 }}>
+                <HiEmailField
+                    id="email"
+                    name="email"
+                    label="Email"
+                    value={email}
+                    disabled={disabled}
+                    error={error}
+                    errorText={errorText}
+                    fullWidth={fullWidth}
+                    onChange={this.handleChange}
+                    onReset={clearIcon}
+                    required={required}
+                    helperText={helperText}
+                    helperIcon={helperIcon}
+                    placeholder="john.doe@hipay.com"
+                    helperOpen={helperOpen}
+                    onLeftIconClick={this.handleLeftIconClick}
+                    onError={this.handleError}
+                    HiInputProps={{
+                        startAdornment: leftIcon,
+                        endAdornment: rightIcon,
+                    }}
+                />
+
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={fullWidth}
+                                onChange={(event, checked) => this.setState({ fullWidth: checked })}
+                            />
+                        }
+                        label="FullWidth"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={error}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        error: checked,
+                                        errorText: checked ? 'Default error' : '',
+                                    })
+                                }
+                            />
+                        }
+                        label="Error"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={typeof clearIcon !== 'undefined'}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        clearIcon: checked ? this.handleReset : undefined,
+                                    })
+                                }
+                            />
+                        }
+                        label="Clear icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={required}
+                                onChange={(event, checked) => this.setState({ required: checked })}
+                            />
+                        }
+                        label="Required"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={helperText !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState(prevState => {
+                                        if (checked) {
+                                            return {
+                                                helperText: prevState.helperIcon
+                                                    ? helperTextLong
+                                                    : helperTextShort,
+                                            };
+                                        }
+                                        return {
+                                            helperText: '',
+                                        };
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper text"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={helperIcon}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        helperIcon: checked,
+                                        helperText: checked ? helperTextLong : helperTextShort,
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper icon"
+                    />
+                </FormGroup>
+            </div>
+        );
+    }
+}
+;<TextField/>
+```
+
+HiInput example :
+```js
+import React from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiInput from './HiInput';
+import HiSwitch from '../HiSwitch';
+import Home from 'mdi-material-ui/Home';
+
+class HiInputs extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            firstname: '',
+            clearIcon: this.handleReset,
+            error: false,
+            leftIcon: '',
+            rightIcon: 'visibility',
+            startAdornmentColor: '',
+            spellcheck: false,
+            autoComplete: false,
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+    }
+
+    handleSubmit() {
+        // eslint-disable-next-line no-alert
+        alert('Formulaire soumis');
+    };
+
+    handleChange(event) {
+        this.setState({
+            firstname: event.target.value,
+        });
+    };
+
+    handlePaste(event) {
+        event.persist();
+        console.log(
+            "Handle Paste",
+            'firstname',
+            event.clipboardData.getData('text/plain'),
+        );
+    };
+
+    handleFocus() {
+        console.log('focus');
+    };
+
+    handleReset() {
+        this.setState({ firstname: '' });
+    };
+
+    render() {
+        const { clearIcon, leftIcon, rightIcon, error, firstname, disabled, startAdornmentColor, autoComplete, spellcheck } = this.state;
+
+        return (
+            <div style={{ display: 'flex', flexWrap: 'wrap', margin: 20, 
+            padding: 50, width: 500, backgroundColor: '#F8F9FB' }}>
+                <HiInput
+                    name="firstname"
+                    placeholder="Your firstname"
+                    value={firstname}
+                    searchIcon={false}
+                    onChange={this.handleChange}
+                    inputProps={{
+                        onPaste: this.handlePaste,
+                    }}
+                    onReset={clearIcon}
+                    startAdornment={leftIcon}
+                    startAdornmentColor={startAdornmentColor}
+                    endAdornment={rightIcon}
+                    error={error}
+                    clearIcon={clearIcon}
+                    disabled={disabled}
+                    onFocus={this.handleFocus}
+                    onSubmit={this.handleSubmit}
+                    spellcheck={spellcheck}
+                    autoComplete={autoComplete ? "on" : "off"}
+                />
+
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={error}
+                                onChange={(event, checked) => this.setState({ error: checked })}
+                                color="primary"
+                            />
+                        }
+                        label="Error"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={leftIcon !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState({ leftIcon: checked ? 'fa-gear' : '' })
+                                }
+                                color="primary"
+                            />
+                        }
+                        label="Left icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={startAdornmentColor === 'positive'}
+                                onChange={(event, checked) =>
+                                    this.setState({ startAdornmentColor: checked ? 'positive' : '' })
+                                }
+                                color="primary"
+                            />
+                        }
+                        label="Left icon positive"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={startAdornmentColor === 'negative'}
+                                onChange={(event, checked) =>
+                                    this.setState({ startAdornmentColor: checked ? 'negative' : '' })
+                                }
+                                color="primary"
+                            />
+                        }
+                        label="Left icon negative"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={rightIcon !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState({ rightIcon: checked ? 'visibility' : '' })
+                                }
+                                color="primary"
+                            />
+                        }
+                        label="Right icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={typeof clearIcon !== 'undefined'}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        clearIcon: checked ? this.handleReset : undefined,
+                                    })
+                                }
+                                color="primary"
+                            />
+                        }
+                        label="Clear icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={disabled}
+                                onChange={(event, checked) => this.setState({ disabled: checked })}
+                                color="primary"
+                            />
+                        }
+                        label="Disabled"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={autoComplete}
+                                onChange={(event, checked) => this.setState({ autoComplete: checked })}
+                                color="primary"
+                            />
+                        }
+                        label="AutoComplete"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={spellcheck}
+                                onChange={(event, checked) => this.setState({ spellcheck: checked })}
+                                color="primary"
+                            />
+                        }
+                        label="Spellcheck"
+                    />
+                </FormGroup>
+            </div>
+        );
+    }
+}
+;<HiInputs/>
+```
+
+HiPasswordField example :
+```js
+import React from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiPasswordField from './HiPasswordField';
+import HiSwitch from '../HiSwitch';
+
+class HiPasswordFields extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            fullWidth: true,
+            password: '',
+            clearIcon: undefined,
+            error: false,
+            errorText: '',
+            helperText: '',
+            helperIcon: false,
+            helperOpen: false,
+            leftIcon: '',
+            rightIcon: '',
+            required: true,
+            disabled: false,
+            placeholder: false,
+        };
+
+        this.handleReset = this.handleReset.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ password: event.target.value });
+        if (event.target.value === '') {
+            this.setState({ error: false });
+        }
+    };
+
+    handleReset() {
+        this.setState({ password: '' });
+    };
+
+    render() {
+        const {
+            fullWidth,
+            clearIcon,
+            leftIcon,
+            rightIcon,
+            error,
+            errorText,
+            password,
+            required,
+            helperText,
+            helperIcon,
+            helperOpen,
+            disabled,
+            placeholder,
+        } = this.state;
+        const helperTextLong = 'Must have at least 6 characters';
+        const helperTextShort = 'Must have at least 6 characters';
+
+        return (
+            <div style={{marginTop: 12, width: 500}}>
+                <HiPasswordField
+                    id="password"
+                    name="password"
+                    label="Password"
+                    value={password}
+                    disabled={disabled}
+                    error={error}
+                    errorText={errorText}
+                    fullWidth={fullWidth}
+                    onChange={this.handleChange}
+                    onReset={clearIcon}
+                    required={required}
+                    helperText={helperText}
+                    helperIcon={helperIcon}
+                    helperOpen={helperOpen}
+                    HiInputProps={{
+                        startAdornment: leftIcon,
+                        endAdornment: rightIcon,
+                        ...(placeholder && { placeholder : "Password"})
+                    }}
+                />
+
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={fullWidth}
+                                onChange={(event, checked) => this.setState({ fullWidth: checked })}
+                            />
+                        }
+                        label="FullWidth"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={error}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        error: checked,
+                                        errorText: checked ? 'Must have at least 6 characters' : '',
+                                    })
+                                }
+                            />
+                        }
+                        label="Error"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={leftIcon !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState({ leftIcon: checked ? 'hi_all' : '' })
+                                }
+                            />
+                        }
+                        label="Left icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={typeof clearIcon !== 'undefined'}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        clearIcon: checked ? this.handleReset : undefined,
+                                    })
+                                }
+                            />
+                        }
+                        label="Clear icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={required}
+                                onChange={(event, checked) => this.setState({ required: checked })}
+                            />
+                        }
+                        label="Required"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={helperText !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState(prevState => {
+                                        if (checked) {
+                                            return {
+                                                helperText: prevState.helperIcon
+                                                    ? helperTextLong
+                                                    : helperTextShort,
+                                            };
+                                        }
+                                        return {
+                                            helperText: '',
+                                        };
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper text"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={helperIcon}
+                                onChange={(event, checked) =>
+                                    this.setState(() => {
+                                        if (checked) {
+                                            return {
+                                                helperIcon: true,
+                                                helperText: helperTextLong,
+                                            };
+                                        }
+                                        return {
+                                            helperIcon: false,
+                                            helperText: helperTextLong,
+                                        };
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper icon"
+                    />
+
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={disabled}
+                                onChange={(event, checked) => this.setState({ disabled: checked })}
+                            />
+                        }
+                        label="Disabled"
+                    />
+
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={placeholder}
+                                onChange={(event, checked) => this.setState({ placeholder: checked })}
+                            />
+                        }
+                        label="Palceholder"
+                    />
+                </FormGroup>
+            </div>
+        );
+    }
+}
+;<HiPasswordFields/>
+```
+
+HiSlider example :
+```js
+import React from 'react';
+import HiSlider from './HiSlider';
+
+class HiSliders extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: -75,
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(value) {
+        this.setState({ value });
+    };
+
+    render() {
+        return (
+            <div style={{marginTop: 12, width: 500}}>
+                <HiSlider
+                    rightLabel={'Txt droite'}
+                    leftLabel={'Txt gauche'}
+                    min={-100}
+                    max={-50}
+                    step={5}
+                    suffix={'€'}
+                    label={'Risk'}
+                    id={'slider'}
+                    onChange={this.handleChange}
+                    value={this.state.value}
+                />
+            </div>
+        );
+    }
+}
+;<HiSliders/>
+
+```
+
+HiTextField example :
+```js
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiTextField from './HiTextField';
+import HiSwitch from '../HiSwitch';
+
+class TextField extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            fullWidth: true,
+            firstname: '',
+            clearIcon: undefined,
+            error: false,
+            errorText: '',
+            helperText: '',
+            helperIcon: false,
+            helperOpen: false,
+            leftIcon: '',
+            rightIcon: '',
+            required: true,
+            disabled: false,
+            rows: 4,
+            onlyNumbers: false,
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ firstname: event.target.value });
+        if (event.target.value === '') {
+            this.setState({ error: false });
+        }
+    };
+
+    handleReset() {
+        this.setState({ firstname: '' });
+    };
+
+    handleBlur() {
+        const matches = this.state.firstname.match(/\d+/g);
+        if (matches != null) {
+            this.setState({
+                error: true,
+                errorText: 'Ne doit pas contenir de chiffres !',
+            });
+        } else {
+            this.setState({
+                error: false,
+                errorText: '',
+            });
+        }
+    };
+
+    render() {
+        const {
+            onlyNumbers,
+            fullWidth,
+            rows,
+            clearIcon,
+            leftIcon,
+            rightIcon,
+            error,
+            errorText,
+            firstname,
+            required,
+            helperText,
+            helperIcon,
+            helperOpen,
+            disabled,
+        } = this.state;
+        const helperTextLong =
+            'Veuillez saisir votre prénom.<br/>' +
+            "Celui indiqué sur votre carte d'identité.<br/>" +
+            'Il ne doit contenir que des caractères alphabétiques.';
+        const helperTextShort = 'Veuillez saisir votre prénom.';
+
+        return (
+            <div style={{marginTop: 12, width: 500}}>
+                <HiTextField
+                    id="firstname"
+                    name="firstname"
+                    label="Firstname"
+                    value={firstname}
+                    disabled={disabled}
+                    error={error}
+                    errorText={errorText}
+                    fullWidth={fullWidth}
+                    onBlur={this.handleBlur}
+                    onChange={this.handleChange}
+                    onReset={clearIcon}
+                    required={required}
+                    helperText={helperText}
+                    helperIcon={helperIcon}
+                    helperOpen={helperOpen}
+                    placeholder="John"
+                    rows={rows}
+                    HiInputProps={{
+                        startAdornment: leftIcon,
+                        endAdornment: rightIcon,
+                        clearIcon,
+                        onlyNumbers,
+                    }}
+                />
+
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                color="primary"
+                                checked={fullWidth}
+                                onChange={(event, checked) => this.setState({ fullWidth: checked })}
+                            />
+                        }
+                        label="FullWidth"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                color="negative"
+                                checked={error}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        error: checked,
+                                        errorText: checked ? 'Error label' : '',
+                                    })
+                                }
+                            />
+                        }
+                        label="Error"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={leftIcon !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState({ leftIcon: checked ? 'fa-archive' : '' })
+                                }
+                            />
+                        }
+                        label="Left icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={rightIcon !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState({ rightIcon: checked ? 'fa-archive' : '' })
+                                }
+                            />
+                        }
+                        label="Right icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={typeof clearIcon !== 'undefined'}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        clearIcon: checked ? this.handleReset : undefined,
+                                    })
+                                }
+                            />
+                        }
+                        label="Clear icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                color="middle"
+                                checked={required}
+                                onChange={(event, checked) => this.setState({ required: checked })}
+                            />
+                        }
+                        label="Required"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                color="positive"
+                                checked={helperText !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState(prevState => {
+                                        if (checked) {
+                                            return {
+                                                helperText: prevState.helperIcon
+                                                    ? helperTextLong
+                                                    : helperTextShort,
+                                                helperIcon: prevState.helperIcon,
+                                            };
+                                        }
+                                        return {
+                                            helperIcon: false,
+                                        };
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper text"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                color="positive"
+                                checked={helperIcon}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        helperIcon: checked,
+                                        helperText: checked ? helperTextLong : helperTextShort,
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={disabled}
+                                onChange={(event, checked) => this.setState({ disabled: checked })}
+                            />
+                        }
+                        label="Disabled"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={onlyNumbers}
+                                onChange={(event, checked) =>
+                                    this.setState({ onlyNumbers: checked })
+                                }
+                            />
+                        }
+                        label="onlyNumbers"
+                    />
+                </FormGroup>
+            </div>
+        );
+    }
+}
+;<TextField/>
+
+```
+
+HiUploadFiles example :
+```js
+import React from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import HiSwitch from '../HiSwitch';
+import HiUploadField from './HiUploadField';
+import HiSelectField from '../HiSelect/HiSelectField';
+
+class HiUploadFiles extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            helperText: '',
+            helperIcon: false,
+            seeFile: false,
+            src: '',
+            values: [],
+            nbInputs: '1',
+            required: true,
+        };
+        this.handleChange = this.handleChange.bind(this);
+        this.handleChangeNbInputs = this.handleChangeNbInputs.bind(this);
+        this.handleDeleteFile = this.handleDeleteFile.bind(this);
+        this.handleSeeFile = this.handleSeeFile.bind(this);
+    }
+
+    handleChange(value, index) {
+        this.setState(function(prevState) {
+            const oldValues = [...prevState.values];
+            oldValues.splice(index, 1, value);
+            return {
+                values: oldValues,
+            };
+        });
+    };
+
+    handleChangeNbInputs(event, value) {
+        this.setState(function() {
+            let values;
+            if (value === '1') {
+                values = [undefined];
+            } else if (value === '2') {
+                values = [undefined, undefined];
+            } else {
+                values = [];
+            }
+            return {
+                nbInputs: value,
+                values,
+            };
+        });
+    };
+
+    handleDeleteFile(index) {
+        this.setState(function(prevState) {
+            const oldValues = [...prevState.values];
+            if (prevState.nbInputs === 'unlimited') {
+                oldValues.splice(index, 1);
+            } else {
+                oldValues.splice(index, 1, undefined);
+            }
+            return {
+                values: oldValues,
+            };
+        });
+    };
+
+    handleSeeFile(file) {
+        const reader = new FileReader();
+        reader.addEventListener('load', (function() { this.setState({ src: reader.result }); }), false);
+        reader.readAsDataURL(file);
+    };
+
+    render() {
+        const {
+            helperIcon,
+            helperText,
+            seeFile,
+            src,
+            values,
+            nbInputs,
+            required,
+        } = this.state;
+
+        let fullWidth = false;
+        let inputs = [
+            {
+                id: 1,
+                placeholder: 'recto de votre carte d\'identité (taille max : 2,5Mo)',
+                maxSize: 2500000,
+            },
+        ];
+
+        for (let i = 0; i < values.length; i += 1) {
+            if (values[i]) {
+                fullWidth = true;
+            }
+        }
+
+        if (nbInputs === '2') {
+            fullWidth = true;
+            inputs = [
+                {
+                    id: 1,
+                    placeholder: 'recto de votre carte d\'identité (taille max : 2,5Mo)',
+                    maxSize: 2500000,
+                },
+                {
+                    id: 2,
+                    placeholder: 'verso de votre carte d\'identité (PDF uniquement)',
+                    acceptedTypes: ['application/pdf'],
+                    maxSize: 2500000000,
+                },
+            ];
+        } else if (nbInputs === 'unlimited') {
+            inputs = [];
+        }
+
+        const translationsUpload = {
+            errorSize: " L'envoi du message a été bloqué, la pièce jointe ne doit pas excéder maxSizeMo.",
+            errorDropMultiple: " L'envoi du message a été bloqué, veuillez envoyer une seule pièce jointe.",
+            errorType: " L'envoi du message a été bloqué, le format de la pièce jointe doit être aux formats .png ou .jpg.",
+            errorDragEnter: " L'envoi du message a été bloqué, le contenu est incorrecte.",
+        };
+
+        let docViewer;
+
+        if (src !== '') {
+            docViewer = (
+                // @ToDo replace by HiFileReader
+                <div>
+                    <img src={src} alt={'preview'} />
+                    {/* <HiPdfReader file={src}/> */}
+                </div>
+            );
+        }
+
+        const helperTextLong =
+            'Veuillez importer un fichier image du recto de votre carte, puis un fichier image du verso. ' +
+            'Nous acceptons le formats .pdf pour le verso et jusqu’à 2.5Mo pour le recto. Votre pièce d’identité doit être valide (non expirée) et en couleur.';
+        const helperTextShort = 'Veuillez importer le recto et le verso de votre carte d\'identité.';
+
+        return (
+            <div style={{marginTop: 12, width: 500}}>
+                <HiUploadField
+                    onChange={this.handleChange}
+                    onDeleteFile={this.handleDeleteFile}
+                    inputs={inputs}
+                    values={values}
+                    label={'test'}
+                    helperIcon={helperIcon}
+                    helperText={helperText}
+                    onSeeFile={this.handleSeeFile}
+                    seeFile={seeFile}
+                    translations={translationsUpload}
+                    fullWidth={fullWidth}
+                    required={required}
+                />
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={helperText !== ''}
+                                onChange={(event, checked) =>
+                                    this.setState(prevState => {
+                                        if (checked) {
+                                            if (prevState.helperIcon) {
+                                                return { helperText: helperTextLong };
+                                            }
+                                            return { helperText: helperTextShort };
+                                        }
+                                        return { helperText: '' };
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper text"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={helperIcon}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        helperIcon: checked,
+                                        helperText: checked ? helperTextLong : helperTextShort,
+                                    })
+                                }
+                            />
+                        }
+                        label="Helper icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                color="middle"
+                                checked={required}
+                                onChange={(event, checked) => this.setState({ required: checked })}
+                            />
+                        }
+                        label="Required"
+                    />
+                    <FormControlLabel
+                        control={
+                            <HiSwitch
+                                checked={seeFile}
+                                onChange={(event, checked) =>
+                                    this.setState({
+                                        seeFile: checked,
+                                    })
+                                }
+                            />
+                        }
+                        label="Handle seeFile"
+                    />
+                    <HiSelectField
+                        id="nb_inputes"
+                        name="nb_inputes"
+                        onChange={this.handleChangeNbInputs}
+                        options={[{ id: '1', label: '1' }, { id: '2', label: '2' }, { id: 'unlimited', label: 'Unlimited' }]}
+                        value={nbInputs}
+                        label="Nb inputs"
+                        multiple={false}
+                        hiSelectableListProps={{ hideCheckbox: true }}
+                    />
+                </FormGroup>
+                {docViewer}
+            </div>
+        );
+    }
+}
+;<HiUploadFiles/>
+```