@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiDatePicker/HiDatePicker.js

@@ -0,0 +1,389 @@
+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 { withStyles } from '@material-ui/core/styles';
+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/HiTextField';
+import styles from './stylesheet';
+import { isMobile } from 'react-device-detect';
+import HiDatePickerMobile from './HiDatePickerMobile';
+
+class HiDatePicker extends React.Component {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * ReactDayPicker prop
+         * Définie les jours non sélectionnables
+         */
+        disabledDays: PropTypes.oneOfType([
+            PropTypes.array,
+            PropTypes.object,
+            PropTypes.instanceOf(Date),
+        ]),
+        /**
+         * Uniquement la sélection de date antérieures à aujourd'hui (inclus)
+         */
+        disableFutureDays: PropTypes.bool,
+        /**
+         * Uniquement la sélection de date postérieures à aujourd'hui (inclus)
+         */
+        disablePastDays: PropTypes.bool,
+        /**
+         * Ajoute la gestion de l'heure
+         */
+        enableTime: PropTypes.bool,
+        /**
+         * Format des dates affichées
+         */
+        format: PropTypes.string,
+        /**
+         * Si true : ferme la popup quand on sélectionne une date
+         */
+        hideOnDayClick: PropTypes.bool,
+        /**
+         * Locale utilisée
+         */
+        locale: PropTypes.string,
+        /**
+         * Date minimale sélectionnable
+         */
+        minimumDate: PropTypes.instanceOf(Date),
+        /**
+         * Callback à la sélection d'une date
+         *
+         * @param {Date} date sélectionnée
+         */
+        onChange: PropTypes.func.isRequired,
+        /**
+         * Callback au reset de l'input
+         */
+        onReset: PropTypes.func,
+        /**
+         * Callback lorsque l'utilisateur tape sur "Entrée"
+         */
+        onSubmit: PropTypes.func,
+        /**
+         * Traductions
+         */
+        translations: PropTypes.object,
+        /**
+         * Date sélectionnée
+         */
+        value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    };
+
+    static defaultProps = {
+        disabledDays: [],
+        disablePastDays: false,
+        disableFutureDays: false,
+        enableTime: false,
+        format: 'YYYY-DD-MM',
+        hideOnDayClick: false,
+        locale: 'fr-FR',
+        minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
+        translations: {
+            today: 'today',
+        },
+    };
+
+    constructor(props) {
+        super();
+        const today = moment();
+        this.state = {
+            openedPanel: 'calendar',
+            currentMonth: props.value ? props.value : new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()),
+        };
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout);
+    }
+
+    handleInputChange = (event) => {
+        this.props.onChange(event.target.value);
+    };
+
+    handleKeyDown = name => event => {
+        if (event.key === 'Escape' && !event.shiftKey) {
+            this.datePickerInput.hideDayPicker();
+            event.stopPropagation();
+        }
+    };
+
+    handleReset = () => {
+        const today = moment();
+        this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
+        this.props.onReset();
+    };
+
+    handleDayChange = (day, modifiers) => {
+        if (day) {
+            if (modifiers.selected) {
+                // Deselect day
+                this.props.onChange(undefined);
+            } else {
+                // Keep Time if set
+                if (this.props.enableTime) {
+                    if (this.props.value) {
+                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                    } else {
+                        day.setHours(0, 0);
+                    }
+                }
+                this.props.onChange(day);
+            }
+            if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+                // Hide overlay & remove focus on input
+                document.activeElement.blur();
+            } else if (
+                day instanceof Date &&
+                this.props.enableTime &&
+                modifiers.selected !== true
+            ) {
+                // Open Time panel after date selection
+                this.openPanel('time');
+            }
+        }
+    };
+
+    handleChangeMobile = event => {
+        let date;
+        if (event.target.value) {
+            date = new Date(event.target.value);
+        }
+        this.props.onChange(date);
+    };
+
+
+    handleCalendarClick = () => {
+        this.openPanel('calendar');
+    };
+
+    handleClockClick = () => {
+        this.openPanel('time');
+    };
+
+    handleMonthClick = () => {
+        this.openPanel('months');
+    };
+
+    handleYearClick = () => {
+        this.openPanel('years');
+    };
+
+    handleCurrentMonthChange = (day) => {
+        this.setState({
+            // Current Month can't be anterior to minimumDate
+            currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
+            openedPanel: 'calendar',
+        });
+    };
+
+    handleTimeChange = (date, precision) => {
+        this.props.onChange(date);
+        if (date instanceof Date && precision === 'minute') {
+            document.activeElement.blur();
+        }
+    };
+
+    openPanel = (panel) => {
+        this.setState({
+            openedPanel: panel,
+        });
+    };
+
+    renderCaption = (propsCaption) => {
+        return (
+            <Caption
+                onMonthClick={this.handleMonthClick}
+                onYearClick={this.handleYearClick}
+                {...propsCaption}
+            />
+        );
+    };
+
+    renderOverlay = (propsOverlay) => {
+        switch (this.state.openedPanel) {
+            case 'time':
+                return this.renderTimePickerOverlay(propsOverlay);
+            case 'months':
+                return this.renderMonthPickerOverlay(propsOverlay);
+            case 'years':
+                return this.renderYearPickerOverlay(propsOverlay);
+            case 'calendar':
+            default:
+                return <Overlay {...propsOverlay} />;
+        }
+    };
+
+    renderMonthPickerOverlay = (propsOverlay) => {
+        const monthPickerProps = {
+            value: this.state.currentMonth,
+            onChange: this.handleCurrentMonthChange,
+        };
+
+        return (
+            <MonthPickerOverlay
+                key={'month-picker-overlay'}
+                {...monthPickerProps}
+                {...propsOverlay}
+            />
+        );
+    };
+
+    renderTimePickerOverlay = (propsOverlay) => {
+        const timePickerProps = {
+            value: this.props.value,
+            onChange: this.handleTimeChange,
+            onCalendarClick: this.handleCalendarClick,
+        };
+        return (
+            <TimePickerOverlay key={'time-picker-overlay'} {...timePickerProps} {...propsOverlay} />
+        );
+    };
+
+    renderYearPickerOverlay = (propsOverlay) => {
+        const yearPickerProps = {
+            value: this.state.currentMonth,
+            onChange: this.handleCurrentMonthChange,
+            disableFutureDays: this.props.disableFutureDays,
+            minimumDate: this.props.minimumDate,
+        };
+
+        return (
+            <YearPickerOverlay key={'year-picker-overlay'} {...yearPickerProps} {...propsOverlay} />
+        );
+    };
+
+    render() {
+        const {
+            classes,
+            disabledDays,
+            disablePastDays,
+            disableFutureDays,
+            enableTime,
+            format,
+            locale,
+            minimumDate,
+            onReset,
+            translations,
+            value,
+            hideOnDayClick,
+            ...props
+        } = this.props;
+
+        const { currentMonth } = this.state;
+
+        const today = moment();
+
+        const effectiveDisabledDays = {
+            ...(disablePastDays && {
+                before: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()),
+            }),
+            ...(disableFutureDays && {
+                after: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()),
+            }),
+            ...disabledDays,
+        };
+
+        const modifiersStyles = {
+            selected: {
+                borderRadius: '50%',
+            },
+        };
+        const dayPickerProps = {
+            todayButton: translations.today,
+            onTodayButtonClick: this.handleCurrentMonthChange,
+            weekdayElement: Weekday,
+            navbarElement: props2 => (
+                <NavBar
+                    showClockButton={enableTime}
+                    onClockClick={this.handleClockClick}
+                    {...props2}
+                    localeUtils={HiLocaleUtils}
+                />
+            ),
+            captionElement: this.renderCaption,
+            classNames: classes,
+            disabledDays: effectiveDisabledDays,
+            selectedDays: typeof value === 'object' ? value : undefined,
+            firstDayOfWeek: 1,
+            fromMonth: minimumDate,
+            modifiers: {
+                disabled: effectiveDisabledDays,
+                selected: value,
+                [classes.currentDay]: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()),
+            },
+            modifiersStyles,
+            month: currentMonth,
+            ...props,
+            locale,
+            localeUtils: HiLocaleUtils,
+        };
+
+        const inputProps = {
+            ...(onReset && {
+                onReset: this.handleReset,
+            }),
+            ...props,
+            onChange: this.handleInputChange,
+            HiInputProps: {onSubmit: this.props.onSubmit},
+        };
+
+        return (
+            <div className={classes.root}
+                 onKeyDown={this.handleKeyDown()}
+            >
+                {!isMobile ? <DayPickerInput
+                    ref={el => {
+                        this.datePickerInput = el;
+                    }}
+                    value={value}
+                    hideOnDayClick={hideOnDayClick}
+                    overlayComponent={this.renderOverlay}
+                    dayPickerProps={dayPickerProps}
+                    component={HiTextField}
+                    inputProps={inputProps}
+                    placeholder={''}
+                    format={enableTime ? `${format} HH:mm` : format}
+                    formatDate={MomentLocaleUtils.formatDate}
+                    parseDate={MomentLocaleUtils.parseDate}
+                    onDayChange={this.handleDayChange}
+                /> :
+                <HiDatePickerMobile
+                    id={this.props.id}
+                    label={this.props.label}
+                    required={this.props.required}
+                    disabled={this.props.disabled}
+                    error={this.props.error}
+                    errorText={this.props.errorText}
+                    helperText={this.props.helperText}
+                    helperIcon={this.props.helperIcon}
+                    enableTime={enableTime}
+                    value={value}
+                    onChange={this.handleChangeMobile}
+                    disablePastDays={disablePastDays}
+                    disableFutureDays={disableFutureDays}
+                    today={today}
+                    minimumDate={minimumDate}
+                    format={enableTime ? `${format} HH:mm` : format}
+                />
+                  }
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { name: 'HmuiHiDatePicker' })(HiDatePicker);