@hipay/hipay-material-ui 3.11.2 → 3.12.0

package/src/HiDatePicker/HiDateRangePicker.js

@@ -0,0 +1,712 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment-timezone';
+import MomentLocaleUtils from 'react-day-picker/moment';
+import HiLocaleUtils from './hiLocaleUtils';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import classNames from 'classnames';
+import withStyles from '@mui/styles/withStyles';
+import Caption from './Caption';
+import Overlay from './Overlays/Overlay';
+import TimePickerOverlay from './Overlays/TimePickerOverlay';
+import MonthPickerOverlay from './Overlays/MonthPickerOverlay';
+import YearPickerOverlay from './Overlays/YearPickerOverlay';
+import NavBar from './NavBar';
+import Weekday from './Weekday';
+import { HiTextField } from '../HiForm';
+import styles from './stylesheet';
+import HiFormControl from '../HiForm/HiFormControl';
+import { isMobile } from 'react-device-detect';
+import HiDatePickerMobile from './HiDatePickerMobile';
+
+class HiDateRangePicker extends React.Component {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Inactif
+         */
+        disabled: PropTypes.bool,
+        /**
+         * http://react-day-picker.js.org/api/DayPicker#disabledDays
+         */
+        disabledDays: PropTypes.object,
+        /**
+         * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
+         */
+        disableFutureDays: PropTypes.bool,
+        /**
+         * Ajoute la gestion de l'heure
+         */
+        enableTime: PropTypes.bool,
+        /**
+         * Texte de l'erreur
+         */
+        errorText: PropTypes.string,
+        /**
+         * Format des dates affichées
+         */
+        format: PropTypes.string,
+        /**
+         * Date de début sélectionnée
+         */
+        from: PropTypes.instanceOf(Date), // from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+        /**
+         * Erreur sur date from
+         */
+        fromError: PropTypes.bool,
+        /**
+         * @ignore
+         * Si true, on n'enveloppe pas le composant avec un HiFormControl
+         */
+        hasSelector: PropTypes.bool,
+        /**
+         * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+         */
+        helperIcon: PropTypes.bool,
+        /**
+         * Texte de l'aide
+         */
+        helperText: PropTypes.string,
+        /**
+         * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+         */
+        id: PropTypes.string.isRequired,
+        /**
+         * Label du champs de début
+         */
+        labelFrom: PropTypes.string,
+        /**
+         * Label du champs de fin
+         */
+        labelTo: PropTypes.string,
+        /**
+         * Locale utilisée
+         */
+        locale: PropTypes.string,
+        /**
+         * Date minimale sélectionnable
+         */
+        minimumDate: PropTypes.instanceOf(Date),
+        /**
+         * Callback à la sélection d'une date
+         * @param {string} nom de l'input
+         */
+        onBlur: PropTypes.func,
+        /**
+         * Callback à la sélection d'une date
+         * @param {string} nom du champs
+         * @param {string} nouvelle valeur du champs
+         */
+        onChange: PropTypes.func.isRequired,
+        /**
+         * Callback au reset de l'input
+         * @param {string} nom du champs réinitialisé
+         */
+        onReset: PropTypes.func,
+        /**
+         * Callback lorsque l'utilisateur tape sur "Entrée"
+         */
+        onSubmit: PropTypes.func,
+        /**
+         * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+         */
+        staticPosition: PropTypes.bool,
+        /**
+         * Date de fin sélectionnée
+         */
+        to: PropTypes.instanceOf(Date),
+        /**
+         * Erreur sur date to
+         */
+        toError: PropTypes.bool,
+        /**
+         * Traductions
+         */
+        translations: PropTypes.object,
+    };
+
+    static defaultProps = {
+        disabledDays: {},
+        disableFutureDays: true,
+        staticPosition: false,
+        enableTime: false,
+        hasSelector: false,
+        format: 'YYYY-MM-DD',
+        labelFrom: 'Start',
+        labelTo: 'End',
+        locale: 'fr-FR',
+        minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
+        translations: {
+            today: 'today',
+            hour: 'Hour',
+            minute: 'Minute',
+            month: 'Month',
+            year: 'Year',
+            invalid_format: 'The date format is not valid',
+            to_superior_from: 'Date from cannot be greater than date to',
+            missing_date_from: 'Missing date from',
+            missing_date_to: 'Missing date to',
+            date_superior_max_date: 'Date from cannot be greater than %s',
+            date_inferior_min_date: 'Date from cannot be before than %s',
+        },
+    };
+
+    constructor(props) {
+        super(props);
+
+        const today = moment();
+
+        this.state = {
+            currentMonth: new Date(today.year(), today.month(), today.date()),
+            focusedInput: '',
+            openedPanel: 'calendar',
+        };
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout);
+    }
+
+    handleDayChange = (name, day) => {
+        if (day) {
+            // if time disabled, focus TO input
+            // else focus current input
+            if (!this.props.enableTime) {
+                if (day instanceof Date) {
+                    if (name === 'from' && this.toInput) {
+                        this.toInput.getInput().focus();
+                    }
+                }
+            } else {
+                this.timeout = setTimeout(() => {
+                    if (this[`${name}Input`].getInput()) {
+                        this[`${name}Input`].getInput().focus();
+                    }
+                }, 10);
+            }
+
+            if (this.props.onChange) {
+                this.handleChange(name, day);
+            }
+
+            if (this.props.enableTime) {
+                this.openPanel('time');
+            }
+        }
+    };
+
+    handleInputChange = inputName => event => {
+        this.handleChange(inputName, event.target.value);
+    };
+
+    onDayToClick = day => {
+        let change = moment(day) >= moment(this.props.from);
+        const today = moment();
+        const todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
+        if (change && day > todayDate) {
+            change = false;
+        }
+        if (change) {
+            this.handleDayChange('to', day);
+            document.activeElement.blur();
+        }
+    };
+
+    handleTimeChange = (name, date, precision) => {
+        this.handleChange(name, date);
+        if (name === 'from' && precision === 'minute') {
+            this.fromInput.hideDayPicker();
+            this.toInput.getInput().focus();
+            this.toInput.showDayPicker();
+            this.openPanel('calendar');
+        } else if (name === 'to' && precision === 'minute') {
+            this.toInput.hideDayPicker();
+            document.activeElement.blur();
+        }
+    };
+
+    handleChange = (name, day) => {
+        const { translations } = this.props;
+        let date;
+        let error;
+
+        const today = moment();
+        const now = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
+
+        const { minimumDate, disableFutureDays, format } = this.props;
+        if (day instanceof Date) {
+            date = day;
+        } else if (day) {
+            const parsedValue = moment(day, this.props.format, true);
+            if (parsedValue.isValid()) {
+                date = parsedValue.toDate();
+            } else {
+                error = translations.invalid_format;
+            }
+        }
+
+        if (date) {
+            const comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
+            if ((name === 'to' && comparativeDate > moment(date))
+                || (name === 'from' && comparativeDate < moment(date))) {
+                error = translations.to_superior_from;
+            } else if (moment(date).utc() < moment(minimumDate).utc().startOf('day')) {
+                error = translations.date_inferior_min_date.replace('%s', moment(minimumDate).format(format));
+            } else if (disableFutureDays && date > now) {
+                error = translations.date_superior_max_date.replace('%s', moment().format(format));
+            }
+
+            if (!this.props.enableTime) {
+                if (name === 'from') {
+                    date.setHours(0, 0, 0);
+                } else {
+                    date.setHours(23, 59, 59);
+                }
+            }
+        }
+
+        this.props.onChange(name, date);
+        this.props.onChange(`${name}Error`, error);
+    };
+
+    handleChangeMobile = inputName => event => {
+        let date;
+        if (event.target.value) {
+            date = new Date(event.target.value);
+        }
+        this.props.onChange(inputName, date);
+    };
+
+    handleCurrentMonthChange = day => {
+        this.setState({
+            currentMonth: day,
+            openedPanel: 'calendar',
+        });
+    };
+
+    handleDayPickerFocus = name => {
+        this.setState({ focusedInput: name });
+    };
+
+    handleDayPickerBlur = name => {
+        this.setState({ focusedInput: '' });
+        if (this.props.onBlur) {
+            this.props.onBlur(name);
+        }
+
+        this.timeout = setTimeout(() => {
+            if (!['from', 'to'].includes(this.state.focusedInput)) {
+                this.setState({
+                    openedPanel: 'calendar',
+                });
+            }
+        }, 100);
+    };
+
+    handleReset = (name) => {
+        this.handleChange(name, undefined);
+    };
+
+    /**
+     * Navigate to next focusable dom element with `Tab`
+     *
+     * @param name
+     */
+    handleKeyDown = name => event => {
+        if (event.key === 'Tab' && !event.shiftKey) {
+            const nodeName = document.activeElement.nodeName;
+            if (this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
+                document.activeElement.nextSibling.focus();
+            } else if (name === 'from') {
+                this.handleDayPickerBlur('from');
+                this.handleDayPickerFocus('to');
+                this.toInput.handleInputFocus();
+                setTimeout(() => {
+                    document.getElementById(`${this.props.id}-to`).focus();
+                }, 1);
+            } else if (name === 'to') {
+                this.handleDayPickerBlur('to');
+                this.toInput.handleInputBlur(event);
+                setTimeout(() => {
+                    document.activeElement.blur();
+                }, 1);
+            }
+        } else if (event.key === 'Escape' && !event.shiftKey) {
+            if (name === 'from') {
+                this.fromInput.hideDayPicker();
+            } else if (name === 'to') {
+                this.toInput.hideDayPicker();
+            }
+            event.stopPropagation();
+        }
+    };
+
+    openPanel = panel => {
+        this.setState({
+            openedPanel: panel,
+        });
+    };
+
+    renderCaption = propsCaption => {
+        return (
+            <Caption
+                onMonthClick={() => this.openPanel('months')}
+                onYearClick={() => this.openPanel('years')}
+                {...propsCaption}
+            />
+        );
+    };
+
+    renderNavBar = propsNavBar => {
+        return (
+            <NavBar
+                showClockButton={this.props.enableTime}
+                onClockClick={() => this.openPanel('time')}
+                {...propsNavBar}
+            />
+        );
+    };
+
+    renderOverlay = (name, propsOverlay, staticPosition) => {
+        const rangeOverlayProps = {
+            ...propsOverlay,
+            side: name,
+            staticPosition,
+        };
+
+        switch (this.state.openedPanel) {
+            case 'time':
+                return this.renderTimePickerOverlay(name, rangeOverlayProps);
+            case 'months':
+                return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+            case 'years':
+                return this.renderYearPickerOverlay(name, rangeOverlayProps);
+            case 'calendar':
+            default:
+                return <Overlay {...rangeOverlayProps} />;
+        }
+    };
+
+    renderOverlayFrom = propsOverlay => {
+        return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+    };
+
+    renderOverlayTo = propsOverlay => {
+        return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+    };
+
+    renderMonthPickerOverlay = (name, propsOverlay) => {
+        const monthPickerProps = {
+            value: this.state.currentMonth,
+            onChange: this.handleCurrentMonthChange,
+        };
+
+        return (
+            <MonthPickerOverlay
+                key={`${name}-month-picker-overlay`}
+                {...monthPickerProps}
+                {...propsOverlay}
+            />
+        );
+    };
+
+    renderTimePickerOverlay = (name, propsOverlay) => {
+        const timePickerProps = {
+            value: this.props[name],
+            onChange: (date, precision) => this.handleTimeChange(name, date, precision),
+            onCalendarClick: () => this.openPanel('calendar'),
+        };
+        return (
+            <TimePickerOverlay
+                key={`${name}-time-picker-overlay`}
+                {...timePickerProps}
+                {...propsOverlay}
+            />
+        );
+    };
+
+    renderYearPickerOverlay = (name, propsOverlay) => {
+        const yearPickerProps = {
+            value: this.state.currentMonth,
+            onChange: this.handleCurrentMonthChange,
+            disableFutureDays: this.props.disableFutureDays,
+        };
+
+        return (
+            <YearPickerOverlay
+                key={`${name}-year-picker-overlay`}
+                {...yearPickerProps}
+                {...propsOverlay}
+            />
+        );
+    };
+
+    render() {
+        const {
+            classes,
+            disabled,
+            disabledDays,
+            disableFutureDays,
+            enableTime,
+            labelFrom,
+            labelTo,
+            locale,
+            format,
+            from,
+            fromError,
+            minimumDate,
+            onReset,
+            to,
+            toError,
+            translations,
+            id,
+            staticPosition,
+            errorText,
+            hasSelector,
+            helperIcon,
+            helperText,
+            ...props
+        } = this.props;
+
+        const today = moment();
+        const now = new Date(today.year(), today.month(), today.date(), 23, 59, 59, 999);
+
+        const modifiers = {
+            start: from,
+            end: to,
+            [classes.currentDay]: new Date(today.year(), today.month(), today.date()),
+        };
+
+        const modifiersStyles = {
+            start: {
+                borderTopLeftRadius: '50%',
+                borderBottomLeftRadius: '50%',
+            },
+            end: {
+                borderTopRightRadius: '50%',
+                borderBottomRightRadius: '50%',
+            },
+        };
+
+        const selectedDays = [];
+        const selected = {};
+        if (from instanceof Date) {
+            selectedDays.push(from);
+            selected.from = from;
+        }
+        if (to instanceof Date) {
+            selectedDays.push(to);
+            selected.to = to;
+        }
+        if (Object.values(selected).length > 0) {
+            selectedDays.push(selected);
+        }
+
+        const dayPickerProps = {
+            classNames: classes,
+            disabledDays,
+            firstDayOfWeek: 1,
+            fromMonth: minimumDate,
+            locale,
+            modifiers,
+            modifiersStyles,
+            // Both are required ?
+            selectedDays,
+            todayButton: translations.today,
+            weekdayElement: Weekday,
+            ...props,
+        };
+
+        const fromDayPickerProps = {
+            ...dayPickerProps,
+            onTodayButtonClick: this.handleCurrentMonthChange,
+            navbarElement: this.renderNavBar,
+            captionElement: this.renderCaption,
+            disabledDays: {
+                ...dayPickerProps.disabledDays,
+                before: minimumDate,
+                ...(disableFutureDays && {
+                    after: now,
+                }),
+                ...(to && {
+                    after: to,
+                }),
+            },
+            locale,
+            localeUtils: HiLocaleUtils,
+            month: this.state.currentMonth,
+            modifiers: {
+                ...modifiers,
+            },
+        };
+
+        const toDayPickerProps = {
+            ...dayPickerProps,
+            onTodayButtonClick: this.handleCurrentMonthChange,
+            navbarElement: this.renderNavBar,
+            onDayClick: this.onDayToClick,
+            captionElement: this.renderCaption,
+            disabledDays: {
+                ...dayPickerProps.disabledDays,
+                before: minimumDate,
+                ...(disableFutureDays && {
+                    after: now,
+                }),
+                ...(from && {
+                    before: from,
+                }),
+            },
+            locale,
+            localeUtils: HiLocaleUtils,
+            month: this.state.currentMonth,
+            modifiers: {
+                ...modifiers,
+            },
+        };
+
+        // From & To InputProps
+
+        const fromInputProps = {
+            ...(onReset && {
+                onReset: () => this.handleReset('from'),
+            }),
+            ...props,
+            ...(fromError && {
+                error: true,
+            }),
+            ...(labelFrom && {
+                label: labelFrom,
+            }),
+            id: `${id}-from`,
+            onChange: this.handleInputChange('from'),
+            disabled,
+            HiInputProps: { onSubmit: this.props.onSubmit },
+        };
+
+        const toInputProps = {
+            ...(onReset && {
+                onReset: () => this.handleReset('to'),
+            }),
+            ...props,
+            ...(toError && {
+                error: true,
+            }),
+            ...(labelTo && {
+                label: labelTo,
+            }),
+            id: `${id}-to`,
+            onChange: this.handleInputChange('to'),
+            disabled,
+            HiInputProps: { onSubmit: this.props.onSubmit },
+        };
+
+        const toClass = classNames(classes.toInput, {
+            [classes.absolute]: !isMobile && staticPosition === true && this.state.focusedInput === 'from',
+            [classes.right4]: !isMobile && staticPosition === true && this.state.focusedInput === 'from',
+        });
+
+        let content = (
+            <div className={classNames(classes.root, classes.rangePickerContainer)}>
+                <div
+                    className={classes.fromInput}
+                    onFocus={!isMobile ? () => this.handleDayPickerFocus('from') : undefined}
+                    onKeyDown={!isMobile ? this.handleKeyDown('from') : undefined}
+                >
+                    <div>
+                        {!isMobile ? <DayPickerInput
+                            key={'1'}
+                            ref={el => {
+                                this.fromInput = el;
+                            }}
+                            value={from}
+                            hideOnDayClick={false}
+                            overlayComponent={this.renderOverlayFrom}
+                            dayPickerProps={fromDayPickerProps}
+                            component={HiTextField}
+                            inputProps={fromInputProps}
+                            format={enableTime ? `${format} HH:mm` : format}
+                            formatDate={MomentLocaleUtils.formatDate}
+                            parseDate={MomentLocaleUtils.parseDate}
+                            onDayChange={(day) => this.handleDayChange('from', day)}
+                            placeholder={''}
+                        /> :
+                        <HiDatePickerMobile
+                            id={this.props.id}
+                            label={labelFrom}
+                            range
+                            required={this.props.required}
+                            enableTime={enableTime}
+                            value={from}
+                            onChange={this.handleChangeMobile('from')}
+                            disablePastDays={this.props.disablePastDays}
+                            disableFutureDays={disableFutureDays}
+                            today={today}
+                            minimumDate={minimumDate}
+                            format={enableTime ? `${format} HH:mm` : format} />
+                        }
+                    </div>
+                </div>
+                <div
+                    className={toClass}
+                    onFocus={!isMobile ? () => this.handleDayPickerFocus('to') : undefined}
+                    onBlur={!isMobile ? () => this.handleDayPickerBlur('to') : undefined}
+                    onKeyDown={!isMobile ? this.handleKeyDown('to') : undefined}
+                >
+                    {!isMobile ? <DayPickerInput
+                        key={'1'}
+                        ref={el => {
+                            this.toInput = el;
+                        }}
+                        value={to}
+                        hideOnDayClick={false}
+                        overlayComponent={this.renderOverlayTo}
+                        dayPickerProps={toDayPickerProps}
+                        component={HiTextField}
+                        inputProps={toInputProps}
+                        format={enableTime ? `${format} HH:mm` : format}
+                        formatDate={MomentLocaleUtils.formatDate}
+                        parseDate={MomentLocaleUtils.parseDate}
+                        placeholder={''}
+                    /> :
+                        <HiDatePickerMobile
+                            id={this.props.id}
+                            label={labelTo}
+                            range
+                            required={this.props.required}
+                            enableTime={enableTime}
+                            value={to}
+                            onChange={this.handleChangeMobile('to')}
+                            disablePastDays={this.props.disablePastDays}
+                            disableFutureDays={disableFutureDays}
+                            today={today}
+                            minimumDate={minimumDate}
+                            format={enableTime ? `${format} HH:mm` : format}
+                        />
+                    }
+                </div>
+            </div>
+        );
+
+        if (!hasSelector) {
+            content = (
+                    <HiFormControl
+                        disabled={disabled}
+                        helperIcon={helperIcon}
+                        helperText={helperText}
+                        errorText={errorText}
+                        error={fromError || toError}
+                        label={' '}
+                    >
+                        {content}
+                    </HiFormControl>
+            );
+        }
+
+        return content;
+    }
+}
+
+export default withStyles(styles, { name: 'HmuiHiDateRangePicker' })(HiDateRangePicker);