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

package/src/HiDatePicker/HiDatePicker.md

@@ -1,558 +0,0 @@
-HiDatePicker Example: 
-
-```js
-import React from 'react';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiDatePicker from './HiDatePicker';
-import HiFormLabel from '../HiForm/HiFormLabel';
-import HiSwitch from '../HiSwitch';
-import HiSelectField from '../HiSelect/HiSelectField';
-
-class HiDatePickers extends React.Component {
-    
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: new Date(2018, 0, 1),
-            // DayPicker props
-            disabledDays: false,
-            hideOnDayClick: false,
-            disableFutureDays: false,
-            disablePastDays: false,
-            enableTime: false,
-            fixedWeeks: true,
-            format: 'DD-MM-YYYY',
-            showWeekNumbers: false,
-            // Input props
-            disabled: false,
-            error: false,
-            helperIcon: false,
-            helperOpen: false,
-            leftIcon: 'event',
-            required: true,
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-    }
-
-    handleChange(value) {
-        this.setState({ value });
-    }
-
-    handleReset() {
-        this.setState({
-            value: undefined,
-        });
-    }
-
-    handleSubmit() {
-        // eslint-disable-next-line no-alert
-        alert('Formulaire soumis');
-    };
-
-    render() {
-        const {
-            value,
-            disabledDays,
-            hideOnDayClick,
-            disableFutureDays,
-            disablePastDays,
-            enableTime,
-            fixedWeeks,
-            format,
-            showWeekNumbers,
-            disabled,
-            error,
-            helperIcon,
-            helperOpen,
-            leftIcon,
-            required,
-        } = this.state;
-
-        const helperText = 'Veuillez sélectionner une date.';
-        const errorText = 'Date incorrecte';
-
-        const options = {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-        };
-
-        return (
-            <div style={{ marginTop: 12, minWidth: 252, maxWidth: 500, width: '100%' }}>
-                <HiDatePicker
-                    value={value}
-                    // DayPicker props
-                    disabledDays={disabledDays ? { daysOfWeek: [2] } : null}
-                    disableFutureDays={disableFutureDays}
-                    disablePastDays={disablePastDays}
-                    enableTime={enableTime}
-                    fixedWeeks={fixedWeeks}
-                    format={format}
-                    hideOnDayClick={hideOnDayClick}
-                    showWeekNumbers={showWeekNumbers}
-                    // TextField props
-                    id="single-day"
-                    label={'Pick a day !'}
-                    disabled={disabled}
-                    error={error}
-                    errorText={errorText}
-                    helperText={helperIcon ? helperText : ''}
-                    helperIcon={helperIcon}
-                    helperOpen={helperOpen}
-                    onChange={this.handleChange}
-                    onReset={this.handleReset}
-                    onSubmit={this.handleSubmit}
-                    required={required}
-                    HiInputProps={{
-                        startAdornment: leftIcon,
-                    }}
-                />
-
-                <p>
-                    Selected Date:{' '}
-                    {value && value instanceof Date && value.toLocaleDateString('fr-FR', options)}
-                </p>
-
-                <FormGroup>
-                    <HiFormLabel label={'Disable Custom Days (Tuesday)'}>
-                        <HiSwitch
-                            checked={disabledDays}
-                            onChange={(event, checked) => this.setState({ disabledDays: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Hide on day click'}>
-                        <HiSwitch
-                            checked={hideOnDayClick}
-                            onChange={(event, checked) =>
-                                this.setState({ hideOnDayClick: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Disable Future Days'}>
-                        <HiSwitch
-                            checked={disableFutureDays}
-                            onChange={(event, checked) =>
-                                this.setState({ disableFutureDays: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Disable Past Days'}>
-                        <HiSwitch
-                            checked={disablePastDays}
-                            onChange={(event, checked) =>
-                                this.setState({ disablePastDays: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Display Time'}>
-                        <HiSwitch
-                            checked={enableTime}
-                            onChange={(event, checked) => this.setState({ enableTime: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Fixed Weeks'}>
-                        <HiSwitch
-                            checked={fixedWeeks}
-                            onChange={(event, checked) => this.setState({ fixedWeeks: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Formats  DD-MM-YYYY / YYYY-MM-DD'}>
-                        <HiSwitch
-                            checked={format === 'YYYY-MM-DD'}
-                            onChange={(event, checked) =>
-                                this.setState({ format: checked ? 'YYYY-MM-DD' : 'DD-MM-YYYY' })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Show Week Numbers'}>
-                        <HiSwitch
-                            checked={showWeekNumbers}
-                            onChange={(event, checked) =>
-                                this.setState({ showWeekNumbers: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    {/* Input props */}
-                    <HiFormLabel label={'Disabled'}>
-                        <HiSwitch
-                            checked={disabled}
-                            onChange={(event, checked) => this.setState({ disabled: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Error'}>
-                        <HiSwitch
-                            checked={error}
-                            onChange={(event, checked) => this.setState({ error: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Left Icon'}>
-                        <HiSwitch
-                            checked={leftIcon !== ''}
-                            onChange={(event, checked) =>
-                                this.setState({ leftIcon: checked ? 'event' : '' })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Helper Icon'}>
-                        <HiSwitch
-                            checked={helperIcon !== ''}
-                            onChange={(event, checked) =>
-                                this.setState({ helperIcon: checked ? 'event' : '' })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Required'}>
-                        <HiSwitch
-                            checked={required}
-                            onChange={(event, checked) => this.setState({ required: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<HiDatePickers/>
-```
-
-DateRangePicker example :
-```js
-import React from 'react';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiDateRangePicker from './HiDateRangePicker';
-import HiFormLabel from '../HiForm/HiFormLabel';
-import HiSwitch from '../HiSwitch';
-import HiSelectField from '../HiSelect/HiSelectField';
-
-class DateRangePicker extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            from: undefined,
-            to: undefined,
-            fromError: undefined,
-            toError: undefined,
-            enableTime: false,
-            disabled: false,
-            disableFutureDays: true,
-            staticPosition: false,
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-    }
-
-    handleChange(name, value) {
-        this.setState({
-            [name]: value,
-        });
-    }
-
-    handleReset(name) {
-        this.setState({
-            [name]: undefined,
-            [`${name}Error`]: undefined,
-        });
-    }
-
-    handleSubmit() {
-        // eslint-disable-next-line no-alert
-        alert('Formulaire soumis');
-    };
-
-    render() {
-        const {
-            from,
-            to,
-            fromError,
-            toError,
-            enableTime,
-            disabled,
-            disableFutureDays,
-            staticPosition,
-        } = this.state;
-
-        const options = {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-        };
-
-        return (
-            <div style={{ marginTop: 12, minWidth: 252, maxWidth: 500, width: '100%' }}>
-                <HiDateRangePicker
-                    id="range-date"
-                    from={from}
-                    to={to}
-                    fromError={fromError}
-                    toError={toError}
-                    errorText={(fromError || toError) ? 'ERREUR' : ''}
-                    enableTime={enableTime}
-                    disabled={disabled}
-                    disableFutureDays={disableFutureDays}
-                    minimumDate={new Date(2016, 4, 1)}
-                    onChange={this.handleChange}
-                    onReset={this.handleReset}
-                    onSubmit={this.handleSubmit}
-                    staticPosition={staticPosition}
-                />
-
-                <p> From: {from && from.toLocaleDateString('fr-FR', options)}{fromError && fromError}</p>
-                <p>To: {to && to.toLocaleDateString('fr-FR', options)}{toError && toError}</p>
-
-                <FormGroup>
-                    <HiFormLabel label={'Display Time'}>
-                        <HiSwitch
-                            checked={enableTime}
-                            onChange={(event, checked) => this.setState({ enableTime: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'disabled'}>
-                        <HiSwitch
-                            checked={disabled}
-                            onChange={(event, checked) => this.setState({ disabled: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'disableFutureDays'}>
-                        <HiSwitch
-                            checked={disableFutureDays}
-                            onChange={(event, checked) => this.setState({ disableFutureDays: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Static position'}>
-                        <HiSwitch
-                            checked={staticPosition}
-                            onChange={(event, checked) =>
-                                this.setState({ staticPosition: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'From Error'}>
-                        <HiSwitch
-                            checked={fromError}
-                            onChange={(event, checked) =>
-                                this.setState({ fromError: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'To Error'}>
-                        <HiSwitch
-                            checked={toError}
-                            onChange={(event, checked) =>
-                                this.setState({ toError: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<DateRangePicker/>
-```
-
-
-DateRangeSelector example :
-```js
-import React from 'react';
-import HiDateRangeSelector from './HiDateRangeSelector';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiFormLabel from '../HiForm/HiFormLabel';
-import HiSwitch from '../HiSwitch';
-import HiSelectField from '../HiSelect/HiSelectField';
-
-class DateRangeSelector extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            from: new Date(),
-            to: new Date(),
-            fromError: false,
-            toError: false,
-            disabled: false,
-            disableFutureDays: true,
-            enableTime: false,
-            format: 'YYYY-MM-DD',
-            helperIcon: false,
-            required: true,
-            staticPosition: false,
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(name, value) {
-        this.setState({
-            [name]: value,
-        });
-    }
-
-    handleSubmit() {
-        // eslint-disable-next-line no-alert
-        alert('Formulaire soumis');
-    };
-
-    render() {
-        const { 
-            from,
-            fromError,
-            to,
-            toError,
-            disabled,
-            disableFutureDays,
-            disablePastDays,
-            enableTime,
-            format,
-            helperIcon,
-            required,
-            staticPosition,
-        } = this.state;
-
-        const helperText = 'Veuillez sélectionner une date.';
-
-        const options = {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-        };
-
-        return (
-            <div style={{ marginTop: 12, minWidth: 252, maxWidth: 500, width: '100%' }}>
-                <HiDateRangeSelector
-                    disabled={disabled}
-                    disableFutureDays={disableFutureDays}
-                    disablePastDays={disablePastDays}
-                    enableTime={enableTime}
-                    toError={toError}
-                    fromError={fromError}
-                    format={format}
-                    from={from}
-                    helperIcon={helperIcon}
-                    helperText={helperText}
-                    minimumDate={new Date(2016, 4, 1)}
-                    idRange="simple-date-range-selector"
-                    idSelect="simple-date-range-date"
-                    label={'Order date'}
-                    onChange={this.handleChange}
-                    onReset={this.handleReset}
-                    required={required}
-                    to={to}
-                    // classes={{ smSelect: classes.red, smRangePicker: classes.blue }}
-                    staticPosition={staticPosition}
-                    errorText={fromError || toError}
-                    onSubmit={this.handleSubmit}
-                />
-
-                <p> From:{' '}
-                    {from && from instanceof Date && from.toLocaleDateString('fr-FR', options)}{fromError && fromError}
-                </p>
-                <p>To: {to && to instanceof Date && to.toLocaleDateString('fr-FR', options)}{toError && toError}</p>
-
-                <FormGroup>
-                    <HiFormLabel label={'Disabled'}>
-                        <HiSwitch
-                            checked={disabled}
-                            onChange={(event, checked) => this.setState({ disabled: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Disable Future Days'}>
-                        <HiSwitch
-                            checked={disableFutureDays}
-                            onChange={(event, checked) =>
-                                this.setState({ disableFutureDays: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Display Time'}>
-                        <HiSwitch
-                            checked={enableTime}
-                            onChange={(event, checked) => this.setState({ enableTime: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Error From'}>
-                        <HiSwitch
-                            checked={fromError}
-                            onChange={(event, checked) => this.setState({ fromError: checked ? 'Invalid' : undefined })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Error To'}>
-                        <HiSwitch
-                            checked={toError}
-                            onChange={(event, checked) => this.setState({ toError: checked ? 'Invalid' : undefined })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Formats  DD-MM-YYYY / YYYY-MM-DD'}>
-                        <HiSwitch
-                            checked={format === 'YYYY-MM-DD'}
-                            onChange={(event, checked) =>
-                                this.setState({ format: checked ? 'YYYY-MM-DD' : 'DD-MM-YYYY' })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Helper Icon'}>
-                        <HiSwitch
-                            checked={helperIcon}
-                            onChange={(event, checked) => this.setState({ helperIcon: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Required'}>
-                        <HiSwitch
-                            checked={required}
-                            onChange={(event, checked) => this.setState({ required: checked })}
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                    <HiFormLabel label={'Static position'}>
-                        <HiSwitch
-                            checked={staticPosition}
-                            onChange={(event, checked) =>
-                                this.setState({ staticPosition: checked })
-                            }
-                            color="primary"
-                        />
-                    </HiFormLabel>
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<DateRangeSelector/>
-```