@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/HiDatePicker/HiDateRangeSelector.js

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