@hipay/hipay-material-ui 3.12.1 → 3.12.3-beta.0

package/src/HiForm/HiForm.md

@@ -1,1318 +0,0 @@
-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/>
-```