@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/HiDatePicker/HiDatePicker.js

@@ -1,389 +0,0 @@
-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);