@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiDatePicker/HiDateRangeSelector.js

@@ -0,0 +1,676 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment-timezone';
+import { findDOMNode } from 'react-dom';
+import withStyles from '@mui/styles/withStyles';
+import HiSelectField from '../HiSelect/HiSelectField';
+import HiDateRangePicker from './HiDateRangePicker';
+import HiFormControl from '../HiForm/HiFormControl';
+import { isMobile } from 'react-device-detect';
+import Calendar from 'mdi-material-ui/Calendar';
+import CalendarBlank from 'mdi-material-ui/CalendarBlank';
+import CalendarArrowRight from 'mdi-material-ui/CalendarArrowRight';
+
+export function findSeparator(format) {
+    let str = '';
+    if (format.search('[/]') >= 0) {
+        str = '/';
+    } else if (format.search('[-]') >= 0) {
+        str = '-';
+    } else if (format.search('[.]') >= 0) {
+        str = '.';
+    }
+    return str;
+}
+
+export function yearAndMonth(format, date) {
+    const findY = (el) => { return el.toUpperCase().search('Y') >= 0; };
+    const findM = (el) => { return el.toUpperCase().search('M') >= 0; };
+    const s = findSeparator(format);
+    const split = format.split(s);
+    const indexY = split.findIndex(findY);
+    const indexM = split.findIndex(findM);
+
+    return (indexY < indexM) ?
+        date.format(split[indexY] + s + split[indexM]) :
+        date.format(split[indexM] + s + split[indexY]);
+}
+
+export function yearAndQuarter(format, date, t) {
+    const findY = (el) => { return el.toUpperCase().search('Y') >= 0; };
+    const findM = (el) => { return el.toUpperCase().search('M') >= 0; };
+    const s = findSeparator(format);
+    const split = format.split(s);
+    const indexY = split.findIndex(findY);
+    const indexM = split.findIndex(findM);
+
+    return (indexY < indexM) ?
+        date.format(`${split[indexY]}${s}[${t.short_quarter}]Q`) :
+        date.format(`[${t.short_quarter}]Q${s}${split[indexY]}`);
+}
+
+export function buildDateRangeInfo(t, from, to, format, options={}) {
+    const {
+        prefix = null,
+        toNow = false,
+        toToday = false,
+        displayDays = true,
+        displayDayName = false,
+    } = options;
+
+    // From
+    let info = `${t.from} ${from.format(format)} `;
+
+    // Display day name
+    if (displayDayName) {
+        info = `${t.from} ${from.format('dddd')}  ${from.format(format)} `;
+    }
+
+    // To
+    if (toToday) {
+        info += `${t.to_today}`;
+    } else if (toNow) {
+        info += `${t.to_now}`;
+    } else {
+        info += `${t.to} ${to.format(format)}`;
+    }
+
+    // Prefix
+    switch(prefix) {
+        case "week":
+            info = `${t.short_week}${from.format('w')}, ${info}`;
+            break;
+        case "quarter":
+            info = `${t.short_quarter}${from.format('Q')}, ${info}`;
+            break;
+        default:
+            break;
+    }
+
+    // Display number of days
+    if(displayDays) {
+        let days = Math.ceil(to.diff(from, 'days', true));
+        info = `${days} ${days === 1 ? t.day : t.days}, ${info}`
+    }
+
+    return info;
+}
+
+export function buildDateRangeOptionByKey(key, t, format) {
+    let from;
+    let label;
+    let info;
+    let to;
+    let days;
+
+    switch (key) {
+        case 'custom':
+            label = t.custom_period;
+            from = moment()
+                .subtract(15, 'day')
+                .startOf('day');
+            to = moment()
+                .endOf('day');
+            info = t.custom_period_info;
+            break;
+        case 'cd':
+            label = t.today;
+            from = moment().startOf('day');
+            to = moment();
+            info = `${from.format(format)}`;
+            break;
+        case 'pd':
+            label = t.yesterday;
+            from = moment()
+                .subtract(1, 'day')
+                .startOf('day');
+            to = moment()
+                .subtract(1, 'day')
+                .endOf('day');
+            info = `${from.format(format)}`;
+            break;
+        case 'cw':
+            label = t.current_week;
+            from = moment().startOf('week');
+            to = moment();
+            info = buildDateRangeInfo(t, from, to, format, {
+                prefix: "week",
+                toNow: true,
+                displayDays: true,
+            });
+            break;
+        case 'pw':
+            label = t.previous_week;
+            from = moment()
+                .subtract(1, 'week')
+                .startOf('week');
+            to = moment()
+                .subtract(1, 'week')
+                .endOf('week');
+            info = buildDateRangeInfo(t, from, to, format, {
+                prefix: "week",
+                toNow: false,
+                displayDays: true,
+            });
+            break;
+        case 'cm':
+            label = t.current_month;
+            from = moment().startOf('month');
+            to = moment();
+            info = buildDateRangeInfo(t, from, to, format, {
+                prefix: null,
+                toNow: true,
+                displayDays: true,
+            });
+            break;
+        case 'pm':
+            label = t.previous_month;
+            from = moment()
+                .subtract(1, 'month')
+                .startOf('month');
+            to = moment()
+                .subtract(1, 'month')
+                .endOf('month');
+            days = from.daysInMonth();
+            info = `${days} ${days === 1 ? t.day : t.days}, ${yearAndMonth(format, from)}`;
+            break;
+
+        case 'cq':
+            label = t.current_quarter;
+            from = moment().startOf('quarter');
+            to = moment();
+            info = buildDateRangeInfo(t, from, to, format, {
+                prefix: "quarter",
+                toNow: true,
+                displayDays: true,
+            });
+            break;
+        case 'pq':
+            label = t.previous_quarter;
+            from = moment()
+                .subtract(1, 'quarter')
+                .startOf('quarter');
+            to = moment()
+                .subtract(1, 'quarter')
+                .endOf('quarter');
+            info = buildDateRangeInfo(t, from, to, format, {
+                prefix: "quarter",
+                toNow: false,
+                displayDays: true,
+            });
+            break;
+        case 'cy':
+            label = t.current_year;
+            from = moment().startOf('year');
+            to = moment();
+            info = buildDateRangeInfo(t, from, to, format, {
+                prefix: null,
+                toNow: true,
+                displayDays: true,
+            });
+            break;
+        case "1":
+            label = "24h";
+            from = moment().subtract(1, 'day');
+            to = moment();
+            info = `${t.from} ${from.format("HH:mm")} ${t.yesterday.toLowerCase()} ${t.to_now}`;
+            break;
+
+        default:
+            if (parseInt(key) > 0) {
+                label = `${key} ${key === 1 ? t.day : t.days}`;
+                from = moment().subtract(parseInt(key), 'day');
+                to = moment();
+                info = buildDateRangeInfo(t, from, to, format, {
+                    prefix: null,
+                    toNow: true,
+                    toToday: key === 1,
+                    displayDays: false,
+                    displayDayName: true,
+                });
+            }
+            break;
+    }
+
+    return {
+        id: key,
+        from,
+        info,
+        label,
+        to,
+    };
+}
+
+export const styles = (theme) => ({
+    root: {
+        maxWidth: 500,
+        alignItems: 'flex-start',
+        display: 'flex',
+        '@media(max-width: 700px)': {
+            flexDirection: 'column',
+        },
+    },
+    dateRangePicker: {
+        width: '100%',
+        marginTop: 0,
+    },
+    smSelect: {
+        padding: theme.spacing(1),
+    },
+    smRangePicker: {},
+    select: {
+        '@media(max-width: 700px)': {
+            width: '100%',
+            paddingBottom: theme.spacing(2),
+        },
+        '@media(min-width: 700px)': {
+            minWidth: 200,
+            width: 'calc(100% - 244px)',
+            marginRight: theme.spacing(2),
+        }
+    },
+    input: {
+        '@media(max-width: 700px)': {
+            width: '100%',
+        },
+        '@media(min-width: 700px)': {
+            width: 236,
+        }
+    },
+    formControlLabel: {
+        top: theme.spacing(5),
+        overflow: "unset",
+    },
+});
+
+const PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy'];
+const SLIDING_PERIOD_LIST = ['1', '7', '30', '365'];
+const CUSTOM_PERIOD_LIST = ['custom'];
+
+class HiDateRangeSelector extends React.Component {
+    static propTypes = {
+        /**
+         * Liste des ids des options disponibles
+         */
+        availableOptionKeys: PropTypes.array,
+        /**
+         * Apply className to root component
+         */
+        className: PropTypes.object,
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Valeur du select par default
+         */
+        defaultPreset: PropTypes.string,
+        /**
+         * Si `true`, l'input sera inactif.
+         */
+        disabled: PropTypes.bool,
+        /**
+         * Ajoute la gestion de l'heure
+         */
+        enableTime: PropTypes.bool,
+        /**
+         * Si `true`, le champs sera en erreur.
+         */
+        error: PropTypes.bool,
+        /**
+         * Texte de l'erreur
+         */
+        errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        /**
+         * Format de date utilisé
+         */
+        format: PropTypes.string,
+        /**
+         * Date de début sélectionnée
+         */
+        from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+        /**
+         * 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"
+         */
+        idRange: PropTypes.string.isRequired,
+        /**
+         * id du champs select
+         */
+        idSelect: PropTypes.string.isRequired,
+        /**
+         * Label du champs
+         */
+        label: PropTypes.string,
+        /**
+         * Locale utilisée
+         */
+        locale: PropTypes.string,
+        /**
+         * Date minimale sélectionnable
+         */
+        minimumDate: PropTypes.instanceOf(Date),
+        /**
+         * Callback à la sélection d'une date
+         */
+        onChange: PropTypes.func.isRequired,
+        /**
+         * Callback lorsque l'utilisateur tape sur "Entrée"
+         */
+        onSubmit: PropTypes.func,
+        /**
+         * true si champs obligatoire
+         */
+        required: PropTypes.bool,
+        /**
+         * Retourne la valeur du select de la période au change du select
+         */
+        returnSelectValue: PropTypes.bool,
+        /**
+         * Props passées au HiSelectField
+         */
+        selectProps: PropTypes.object,
+        /**
+         * 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.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+        /**
+         * Traductions
+         */
+        translations: PropTypes.object,
+    };
+
+    static defaultProps = {
+        availableOptionKeys: [
+            ...PRESET_PERIOD_LIST,
+            // ...SLIDING_PERIOD_LIST,
+            ...CUSTOM_PERIOD_LIST,
+        ],
+        enableTime: false,
+        returnSelectValue: false,
+        staticPosition: false,
+        locale: 'fr-FR',
+        format: 'YYYY-DD-MM',
+        minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
+        translations: {
+            today: 'Today',
+            hour: 'Hour',
+            minute: 'Minute',
+            month: 'Month',
+            quarter: 'Quarter',
+            week: 'Week',
+            short_week: 'W',
+            short_quarter: 'Q',
+            yearAndMonth: 'YYYY[-]MM',
+            yearAndQuarter: 'YYYY[-Q]Q',
+            year: 'Year',
+            day: 'day',
+            days: 'days',
+            custom_period: 'Custom Period',
+            yesterday: 'Yesterday',
+            from: 'from',
+            to: 'to',
+            to_now: 'to now',
+            to_today: 'to today',
+            current_week: 'Current Week',
+            previous_week: 'Previous Week',
+            current_month: 'Current Month',
+            previous_month: 'Previous Month',
+            current_quarter: 'Current Quarter',
+            previous_quarter: 'Previous Quarter',
+            current_year: 'Current Year',
+            year_on_year: "Last twelve months",
+            invalid_format: 'The date format is not valid',
+            to_superior_from: 'Date from cannot be greater than date to',
+            date_superior_max_date: 'Date from cannot be greater than %s',
+            date_inferior_min_date: 'Date from cannot be before than %s',
+            missing_date_from: 'Missing date from',
+            missing_date_to: 'Missing date to',
+            preset_periods: 'Preset periods',
+            custom_periods: 'Custom periods',
+            custom_period_info: "Select a custom period",
+            sliding_periods: 'Sliding periods',
+        },
+    };
+
+    options = [];
+
+    constructor(props) {
+        super();
+
+        this.options = props.availableOptionKeys.map(key => {
+            return buildDateRangeOptionByKey(key, props.translations, props.format);
+        });
+
+        this.state = {
+            selectedPreset: props.defaultPreset,
+            containerWidth: 0,
+        };
+    }
+
+    static getDerivedStateFromProps(props) {
+        if (props.returnSelectValue) {
+            return {
+                selectedPreset: props.defaultPreset,
+            };
+        }
+        return null;
+    }
+
+    componentDidMount() {
+        if (this.container) {
+            this.setState({ containerWidth: findDOMNode(this.container).clientWidth - 5 });
+        }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout); // TODO : supprimer ?
+    }
+
+    handleBlur = (event) => {
+        if (event instanceof Object && this.props.onblur) {
+            this.props.onBlur(event);
+        }
+    };
+
+    handleReset = name => {
+        this.props.onChange(name, undefined);
+        this.props.onChange(`${name}Error`, undefined);
+    };
+
+    handleSelectChange = name => (event, value) => {
+        this.setState(prevState => ({
+            [name]: value,
+            key: prevState.key === 1 ? 2 : 1,
+        }));
+
+        this.updateDates(value);
+    };
+
+    updateDates(value) {
+        const selectedOption = this.options.find(option => option.id === value);
+        if (selectedOption) {
+            this.props.onChange('from', selectedOption.from.toDate());
+            this.props.onChange('to', selectedOption.to.toDate());
+            this.props.onChange('fromError', false);
+            this.props.onChange('toError', false);
+        }
+        if (this.props.returnSelectValue === true) {
+            this.props.onChange('period', value);
+        }
+    }
+
+    buildOptions() {
+        const {
+            availableOptionKeys,
+            translations,
+        } = this.props;
+
+        const {
+            selectedPreset,
+        } = this.state;
+
+        const options = [];
+
+        const presetOptionsAvailable = availableOptionKeys.filter(
+            option => PRESET_PERIOD_LIST.includes(option)
+        );
+        const slidingOptionsAvailable = availableOptionKeys.filter(
+            option => SLIDING_PERIOD_LIST.includes(option)
+        );
+        const customOptionsAvailable = availableOptionKeys.filter(
+            option => CUSTOM_PERIOD_LIST.includes(option)
+        );
+
+        if (customOptionsAvailable.length) {
+            options.push({
+                id: "custom_periods_subheader",
+                type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+                icon: <CalendarBlank/>,
+                label: translations.custom_periods,
+                children: this.options.filter(o => customOptionsAvailable.includes(o.id)),
+                collapseParent: true,
+            });
+        }
+
+        if (presetOptionsAvailable.length) {
+            options.push({
+                id: "preset_periods_subheader",
+                type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+                icon: <Calendar/>,
+                label: translations.preset_periods,
+                children: this.options.filter(o => presetOptionsAvailable.includes(o.id)),
+                collapseParent: true,
+            });
+        }
+
+        if (slidingOptionsAvailable.length) {
+            options.push({
+                id: "sliding_periods_subheader",
+                type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+                icon: <CalendarArrowRight/>,
+                label: translations.sliding_periods,
+                children: this.options.filter(o => slidingOptionsAvailable.includes(o.id)),
+                collapseParent: true,
+            });
+        }
+
+        return options;
+    }
+
+    render() {
+        const {
+            availableOptionKeys,
+            disabled,
+            enableTime,
+            errorText,
+            fromError,
+            toError,
+            helperIcon,
+            helperText,
+            idRange,
+            idSelect,
+            minimumDate,
+            label,
+            from,
+            onChange,
+            required,
+            to,
+            translations,
+            classes,
+            selectProps,
+            staticPosition,
+            className,
+            ...props
+        } = this.props;
+
+        const { selectedPreset, containerWidth } = this.state;
+
+        const hiSelectableListProps = {
+            secondaryInline: false,
+            hideCheckbox: true,
+            lazy: false,
+            collapseParent: true,
+            noPadding: true,
+        };
+
+        let options = this.buildOptions();
+
+        return (
+            <HiFormControl
+                disabled={disabled}
+                helperIcon={helperIcon}
+                helperText={helperText}
+                errorText={errorText}
+                error={!!(fromError || toError)}
+                label={' '}
+                className={className}
+                InputLabelProps={{
+                    className: classes.formControlLabel
+                }}
+            >
+                <div
+                    className={classes.root}
+                    style={containerWidth<364 ? {flexDirection: 'column'} : {}}
+                    ref={container => { this.container = container; }}
+                >
+                    <div className={classes.select} style={containerWidth<364 ? {minWidth: '100%', paddingBottom: 8, paddingRight: 0} : {}}>
+                        <HiSelectField
+                            disabled={disabled}
+                            id={idSelect}
+                            label={label}
+                            hideCheckbox
+                            hiSelectableListProps={hiSelectableListProps}
+                            name={'selectedPreset'}
+                            options={options}
+                            onChange={this.handleSelectChange('selectedPreset')}
+                            required={required}
+                            translations={translations}
+                            value={selectedPreset}
+                            containerWidth={this.state.containerWidth}
+                            staticPosition={staticPosition}
+                            onSubmit={this.props.onSubmit}
+                            {...selectProps}
+                        />
+                    </div>
+                    {((isMobile && selectedPreset === 'custom') || !isMobile) &&
+                    <div className={classes.input} style={containerWidth<364 ? {width: '100%'} : {}}>
+                        <HiDateRangePicker
+                            key={this.state.key}
+                            classes={{ root: classes.dateRangePicker }}
+                            id={idRange}
+                            from={selectedPreset ? from : undefined}
+                            to={selectedPreset ? to : undefined}
+                            enableTime={enableTime}
+                            onChange={onChange}
+                            toError={toError}
+                            fromError={fromError}
+                            minimumDate={minimumDate}
+                            errorText={null}
+                            onReset={this.handleReset}
+                            disabled={disabled || selectedPreset !== 'custom'}
+                            translations={translations}
+                            staticPosition={staticPosition}
+                            onBlur={this.handleBlur}
+                            hasSelector
+                            {...props}
+                        />
+                    </div>}
+                </div>
+            </HiFormControl>
+        );
+    }
+}
+
+export default withStyles(styles, { name: 'HmuiHiDateRangeSelector' })(HiDateRangeSelector);