@hipay/hipay-material-ui 1.0.0-beta.1

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -0,0 +1,337 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+//  weak
+// @inheritedComponent HiDateRangePicker
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { findDOMNode } from 'react-dom';
+import Grid from 'material-ui/Grid';
+import { withStyles } from '../styles';
+import { HiSelectField } from '../HiSelect';
+import HiDateRangePicker from './HiDateRangePicker';
+
+export function buildDateRangeOptionByKey(key, t, format) {
+    let from;
+    let label;
+    let info;
+    let to;
+    let type;
+
+    moment.updateLocale('en', { week: { dow: 1 } });
+
+    switch (key) {
+        case 'custom':
+            label = t.custom_period;
+            type = 'primary-highlight';
+            break;
+        case 'cd':
+            label = t.last_24h;
+            from = moment().subtract(1, 'day');
+            to = moment();
+            info = `${from.calendar()} ${t.to_now}`;
+            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 = `${t.week} ${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
+            break;
+        case 'pw':
+            label = t.previous_week;
+            from = moment().subtract(1, 'week').startOf('week');
+            to = moment().subtract(1, 'week').endOf('week');
+            info = `${t.week} ${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
+            break;
+        case 'cm':
+            label = t.current_month;
+            from = moment().startOf('month');
+            to = moment();
+            info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+            break;
+        case 'pm':
+            label = t.previous_month;
+            from = moment().subtract(1, 'month').startOf('month');
+            to = moment().subtract(1, 'month').endOf('month');
+            info = `${from.format('YYYY-MM')}, ${to.diff(from, 'days')} ${t.days}`;
+            break;
+        case 'cq':
+            label = t.current_quarter;
+            from = moment().startOf('quarter');
+            to = moment();
+            info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+            break;
+        case 'pq':
+            label = t.previous_quarter;
+            from = moment().subtract(1, 'quarter').startOf('quarter');
+            to = moment().subtract(1, 'quarter').endOf('quarter');
+            info = `${from.format('YYYY')}-Q${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
+            break;
+        case 'cy':
+            label = t.current_year;
+            from = moment().startOf('year');
+            to = moment();
+            info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+            break;
+        default:
+            break;
+    }
+
+    return {
+        id: key,
+        from,
+        info,
+        label,
+        to,
+        type
+    };
+}
+
+export const styles = theme => ({
+    root: {
+        maxWidth: 500,
+        marginLeft: -4
+    },
+    dateSelect: {
+        paddingTop: 1,
+        marginTop: 1
+    },
+    dateRangePicker: {
+        width: 'calc(100% + 8px)'
+    }
+});
+
+class HiDateRangeSelector extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.options = [];
+
+        this.handleSelectChange = name => (event, value) => {
+            this.setState({
+                [name]: value
+            });
+
+            if (value !== 'custom') {
+                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.state = {
+            selectedPreset: props.defaultPreset,
+            containerWidth: 0
+        };
+
+        this.handleReset = this.handleReset.bind(this);
+        this.handleSelectChange = this.handleSelectChange.bind(this);
+
+        this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
+    }
+
+    componentDidMount() {
+        if (this.container) {
+            this.setState({ containerWidth: findDOMNode(this.container).clientWidth });
+        }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout); // TODO : supprimer ?
+    }
+
+    handleReset(name) {
+        this.props.onChange(name, undefined);
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            disabled,
+            enableTime,
+            error,
+            errorText,
+            helperIcon,
+            helperText,
+            idRange,
+            idSelect,
+            label,
+            from,
+            onChange,
+            required,
+            to,
+            translations,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
+
+        const { selectedPreset } = this.state;
+
+        return React.createElement(
+            Grid,
+            {
+                container: true,
+                spacing: 8,
+                className: classes.root,
+                ref: container => this.container = container
+            },
+            React.createElement(
+                Grid,
+                { item: true, xs: 12, sm: 4 },
+                React.createElement(HiSelectField, {
+                    disabled: disabled,
+                    error: error,
+                    errorText: errorText,
+                    helperIcon: helperIcon,
+                    helperText: helperText,
+                    id: idSelect,
+                    label: label,
+                    name: 'selectedPreset',
+                    options: this.options,
+                    onChange: this.handleSelectChange('selectedPreset'),
+                    required: required,
+                    translations: translations,
+                    value: selectedPreset,
+                    containerWidth: this.state.containerWidth,
+                    classes: { root: classes.dateSelect }
+                })
+            ),
+            React.createElement(
+                Grid,
+                { item: true, xs: 12, sm: 8 },
+                React.createElement(HiDateRangePicker, _extends({
+                    classes: { root: classes.dateRangePicker },
+                    id: idRange,
+                    from: from,
+                    to: to,
+                    enableTime: enableTime,
+                    onChange: onChange,
+                    onReset: this.handleReset,
+                    disabled: disabled || selectedPreset !== 'custom',
+                    translations: translations
+                }, props))
+            )
+        );
+    }
+}
+
+HiDateRangeSelector.defaultProps = {
+    availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
+    defaultPreset: 'cd',
+    enableTime: false,
+    locale: 'fr-FR',
+    format: 'YYYY-DD-MM',
+    translations: {
+        today: 'today',
+        hour: 'Hour',
+        minute: 'Minute',
+        month: 'Month',
+        quarter: 'Quarter',
+        week: 'Week',
+        year: 'Year',
+
+        days: 'days',
+
+        custom_period: 'Custom Period',
+        yesterday: 'Yesterday',
+        last_24h: 'Last 24h',
+        to: 'to',
+        to_now: 'to now',
+        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'
+    }
+};
+HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Liste des ids des options disponibles
+     */
+    availableOptionKeys: PropTypes.array,
+    /**
+     * 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.string,
+    /**
+     * Format de date utilisé
+     */
+    format: PropTypes.string,
+    /**
+     * Date de début sélectionnée
+     */
+    from: PropTypes.instanceOf(Date),
+    /**
+     * 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,
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: PropTypes.func.isRequired,
+    /**
+     * true si champs obligatoire
+     */
+    required: PropTypes.bool,
+    /**
+     * Date de fin sélectionnée
+     */
+    to: PropTypes.instanceOf(Date),
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiDateRangeSelector' })(HiDateRangeSelector);

package/es/HiDatePicker/HiWeekPicker.js

@@ -0,0 +1,296 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { formatDate, parseDate } from 'react-day-picker/moment';
+
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+
+import withStyles from '../styles/withStyles';
+
+import Caption from './Caption';
+import Overlay from './Overlays/Overlay';
+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';
+
+class HiWeekPicker extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.state = {
+            openedPanel: 'calendar',
+            currentMonth: props.from ? props.from : new Date()
+        };
+
+        this.formatDate = this.formatDate.bind(this);
+        this.handleCalendarClick = this.handleCalendarClick.bind(this);
+        this.handleClockClick = this.handleClockClick.bind(this);
+        this.handleMonthClick = this.handleMonthClick.bind(this);
+        this.handleYearClick = this.handleYearClick.bind(this);
+        this.handleDayChange = this.handleDayChange.bind(this);
+        this.handleWeekClick = this.handleWeekClick.bind(this);
+        this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+        this.openPanel = this.openPanel.bind(this);
+        this.renderCaption = this.renderCaption.bind(this);
+        this.renderOverlay = this.renderOverlay.bind(this);
+        this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
+        this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout);
+    }
+
+    formatDate(date) {
+        const day = moment(date).isoWeekday(1); // start week on monday
+        return `${day.year()}-W${day.isoWeek()}`;
+    }
+
+    handleDayChange(day, modifiers) {
+        this.timeout = setTimeout(() => {
+            if (this.datePickerInput.getInput()) {
+                this.datePickerInput.getInput().focus();
+            }
+        }, 0);
+
+        if (modifiers.disabled) {
+            return;
+        }
+
+        if (this.props.onChange) {
+            const date = moment(day).isoWeekday(1); // start week on monday
+            this.props.onChange('from', date.startOf('isoWeek').toDate());
+            this.props.onChange('to', date.endOf('isoWeek').toDate());
+        }
+    }
+
+    handleWeekClick(week, days) {
+        if (this.props.onChange) {
+            this.props.onChange('from', days[0]);
+            this.props.onChange('to', days[6]);
+        }
+    }
+
+    handleCalendarClick() {
+        this.openPanel('calendar');
+    }
+
+    handleClockClick() {
+        this.openPanel('time');
+    }
+
+    handleMonthClick() {
+        this.openPanel('months');
+    }
+
+    handleYearClick() {
+        this.openPanel('years');
+    }
+
+    handleCurrentMonthChange(day) {
+        this.setState({
+            currentMonth: day,
+            openedPanel: 'calendar'
+        });
+    }
+
+    handleReset() {
+        this.props.onReset('from');
+        this.props.onReset('to');
+    }
+
+    openPanel(panel) {
+        this.setState({
+            openedPanel: panel
+        });
+    }
+
+    renderCaption(propsCaption) {
+        return React.createElement(Caption, _extends({
+            onMonthClick: this.handleMonthClick,
+            onYearClick: this.handleYearClick
+        }, propsCaption));
+    }
+
+    renderOverlay(propsOverlay) {
+        switch (this.state.openedPanel) {
+            case 'months':
+                return this.renderMonthPickerOverlay(propsOverlay);
+            case 'years':
+                return this.renderYearPickerOverlay(propsOverlay);
+            case 'calendar':
+            default:
+                return React.createElement(Overlay, propsOverlay);
+        }
+    }
+
+    renderMonthPickerOverlay(propsOverlay) {
+        const monthPickerProps = {
+            value: this.state.currentMonth,
+            onChange: this.handleCurrentMonthChange
+        };
+
+        return React.createElement(MonthPickerOverlay, _extends({
+            key: 'month-picker-overlay'
+        }, monthPickerProps, propsOverlay));
+    }
+
+    renderYearPickerOverlay(propsOverlay) {
+        const yearPickerProps = {
+            value: this.state.currentMonth,
+            onChange: this.handleCurrentMonthChange
+        };
+
+        return React.createElement(YearPickerOverlay, _extends({ key: 'year-picker-overlay' }, yearPickerProps, propsOverlay));
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            classes,
+            disabledDays,
+            disablePastDays,
+            disableFutureDays,
+            format,
+            locale,
+            onReset,
+            translations,
+            from,
+            to
+        } = _props,
+              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'format', 'locale', 'onReset', 'translations', 'from', 'to']);
+
+        const { currentMonth } = this.state;
+
+        const modifiers = {
+            start: from,
+            end: to
+        };
+
+        const modifiersStyles = {
+            start: {
+                borderTopLeftRadius: '50%',
+                borderBottomLeftRadius: '50%'
+            },
+            end: {
+                borderTopRightRadius: '50%',
+                borderBottomRightRadius: '50%'
+            }
+        };
+
+        const dayPickerProps = _extends({
+            classNames: classes,
+            disabledDays,
+            locale,
+            modifiers,
+            modifiersStyles,
+            // Both are required ?
+            selectedDays: [from, { from, to }],
+            todayButton: translations.today,
+            onTodayButtonClick: this.handleCurrentMonthChange,
+            weekdayElement: Weekday,
+            navbarElement: Navbar,
+            captionElement: this.renderCaption,
+            firstDayOfWeek: 1
+
+        }, props, {
+
+            month: currentMonth,
+            showWeekNumbers: true,
+            onWeekClick: this.handleWeekClick
+        });
+
+        const inputProps = _extends({}, onReset && {
+            onReset: this.handleReset
+        }, props);
+
+        return React.createElement(
+            'div',
+            { className: classes.root },
+            React.createElement(DayPickerInput, {
+                ref: el => {
+                    this.datePickerInput = el;
+                },
+                value: from,
+                hideOnDayClick: false,
+                overlayComponent: this.renderOverlay,
+                dayPickerProps: dayPickerProps,
+                component: HiTextField,
+                inputProps: inputProps,
+                placeholder: '',
+                format: format,
+                formatDate: formatDate,
+                parseDate: parseDate,
+                onDayChange: this.handleDayChange
+            })
+        );
+    }
+}
+
+HiWeekPicker.defaultProps = {
+    disabledDays: [],
+    disablePastDays: false,
+    disableFutureDays: false,
+    format: 'YYYY-DD-MM',
+    locale: 'fr-FR',
+    translations: {
+        today: 'today'
+    }
+};
+HiWeekPicker.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * 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 (inclu)
+     */
+    disableFutureDays: PropTypes.bool,
+    /**
+     * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+     */
+    disablePastDays: PropTypes.bool,
+    /**
+     * Format des dates affichées
+     */
+    format: PropTypes.string,
+    /**
+     * Date de début sélectionnée
+     */
+    from: PropTypes.instanceOf(Date),
+    /**
+     * Locale utilisée
+     */
+    locale: PropTypes.string,
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: PropTypes.func,
+    /**
+     * Callback au reset de l'input
+     */
+    onReset: PropTypes.func,
+    /**
+     * Date de fin sélectionnée
+     */
+    to: PropTypes.instanceOf(Date),
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiWeekPicker' })(HiWeekPicker);