@hipay/hipay-material-ui 1.0.0-beta.28 → 1.0.0-beta.3

package/es/HiDatePicker/HiDateRangePicker.js

@@ -1,4 +1,3 @@
-import _Object$values from 'babel-runtime/core-js/object/values';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import _extends from 'babel-runtime/helpers/extends';
 //  weak
@@ -7,8 +6,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { formatDate, parseDate } from 'react-day-picker/moment';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import classNames from 'classnames';
-
 import withStyles from '../styles/withStyles';
 import { capitalizeFirstLetter } from '../utils/helpers';
 import Caption from './Caption';
@@ -26,26 +23,11 @@ class HiDateRangePicker extends React.Component {
     constructor(props) {
         super();
 
-        this.handleInputChange = inputName => event => {
-            this.event = event;
-            this.props.onChange(inputName, event.target.value);
-        };
-
-        this.handleDayPickerFocus = name => () => {
-            this.setState({ focusedInput: name });
-        };
-
-        this.handleDayPickerBlur = name => () => {
-            this.setState({ focusedInput: '' });
-            if (this.props.onBlur) {
-                this.props.onBlur(name);
-            }
-        };
-
         this.state = {
+            fromOpenedPanel: 'calendar',
             fromCurrentMonth: props.from ? props.from : new Date(),
-            toCurrentMonth: props.to ? props.to : new Date(),
-            focusedInput: ''
+            toOpenedPanel: 'calendar',
+            toCurrentMonth: props.to ? props.to : new Date()
         };
 
         this.handleReset = this.handleReset.bind(this);
@@ -69,9 +51,6 @@ class HiDateRangePicker extends React.Component {
         this.handleYearClick = this.handleYearClick.bind(this);
         this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
         this.handleYearClickTo = this.handleYearClickTo.bind(this);
-        this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
-        this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
-        this.handleInputChange = this.handleInputChange.bind(this);
 
         this.openPanel = this.openPanel.bind(this);
 
@@ -108,7 +87,11 @@ class HiDateRangePicker extends React.Component {
     }
 
     handleReset(name) {
-        this.handleCurrentMonthChange(name, new Date());
+        if (name === 'from') {
+            this.handleCurrentMonthChange(name, new Date());
+        } else {
+            this.handleCurrentMonthChange(name, this.props.from);
+        }
 
         this.timeout = setTimeout(() => {
             if (this.props.onReset) {
@@ -118,45 +101,38 @@ class HiDateRangePicker extends React.Component {
     }
 
     handleDayChange(name, day, modifiers) {
-        if (day) {
-            // if time disabled, focus TO input
-            // else focus current input
-            if (!this.props.enableTime) {
-                if (day instanceof Date) {
-                    if (name === 'from' && this.toInput) {
-                        this.toInput.getInput().focus();
-                    } else if (name === 'to') {
-                        if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
-                            // trigger blur only if user clicks on date into calendar
-                            // else keep focus to see day selection into calendar
-                            document.activeElement.blur();
-                        }
-                        delete this.event;
-                    }
+        // if time disabled, focus TO input
+        // else focus current input
+        if (!this.props.enableTime) {
+            if (day instanceof Date) {
+                if (name === 'from' && this.toInput) {
+                    this.toInput.getInput().focus();
+                } else if (name === 'to') {
+                    document.activeElement.blur();
                 }
-            } else {
-                this.timeout = setTimeout(() => {
-                    if (this[`${name}Input`].getInput()) {
-                        this[`${name}Input`].getInput().focus();
-                    }
-                }, 10);
             }
-
-            if (this.props.onChange) {
-                // Keep Time if set
-                if (this.props.enableTime) {
-                    if (this.props[name]) {
-                        day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
-                    } else {
-                        day.setHours(0, 0);
-                    }
+        } else {
+            this.timeout = setTimeout(() => {
+                if (this[`${name}Input`].getInput()) {
+                    this[`${name}Input`].getInput().focus();
                 }
-                this.props.onChange(name, day);
-            }
+            }, 10);
+        }
 
+        if (this.props.onChange) {
+            // Keep Time if set
             if (this.props.enableTime) {
-                this.openPanel(name, 'time');
+                if (this.props[name]) {
+                    day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
+                } else {
+                    day.setHours(0, 0);
+                }
             }
+            this.props.onChange(name, day);
+        }
+
+        if (this.props.enableTime) {
+            this.openPanel(name, 'time');
         }
     }
     handleDayChangeFrom(day, modifiers) {
@@ -263,10 +239,9 @@ class HiDateRangePicker extends React.Component {
         return this.renderNavbar('to', propsNavbar);
     }
 
-    renderOverlay(name, propsOverlay, staticPosition) {
+    renderOverlay(name, propsOverlay) {
         const rangeOverlayProps = _extends({}, propsOverlay, {
-            side: name,
-            staticPosition
+            side: name
         });
 
         switch (this.state[`${name}OpenedPanel`]) {
@@ -282,10 +257,10 @@ class HiDateRangePicker extends React.Component {
         }
     }
     renderOverlayFrom(propsOverlay) {
-        return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+        return this.renderOverlay('from', propsOverlay);
     }
     renderOverlayTo(propsOverlay) {
-        return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+        return this.renderOverlay('to', propsOverlay);
     }
 
     renderMonthPickerOverlay(name, propsOverlay) {
@@ -340,10 +315,9 @@ class HiDateRangePicker extends React.Component {
             onReset,
             to,
             translations,
-            id,
-            staticPosition
+            id
         } = _props,
-              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
+              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
 
         const { fromCurrentMonth, toCurrentMonth } = this.state;
 
@@ -365,20 +339,6 @@ class HiDateRangePicker extends React.Component {
             }
         };
 
-        let selectedDays = [];
-        let selected = {};
-        if (from instanceof Date) {
-            selectedDays.push(from);
-            selected.from = from;
-        }
-        if (to instanceof Date) {
-            selectedDays.push(to);
-            selected.to = to;
-        }
-        if (_Object$values(selected).length > 0) {
-            selectedDays.push(selected);
-        }
-
         const dayPickerProps = _extends({
             classNames: classes,
             disabledDays,
@@ -388,7 +348,7 @@ class HiDateRangePicker extends React.Component {
             modifiers,
             modifiersStyles,
             // Both are required ?
-            selectedDays,
+            selectedDays: [from, { from, to }],
             todayButton: translations.today,
             weekdayElement: Weekday
         }, props);
@@ -397,9 +357,9 @@ class HiDateRangePicker extends React.Component {
         // Disable days after 'to' date if define
 
         let after;
-        if (to instanceof Date && disableFutureDays) {
+        if (to && disableFutureDays) {
             after = to < now ? now : to;
-        } else if (to instanceof Date) {
+        } else if (to) {
             after = to;
         } else if (disableFutureDays) {
             after = now;
@@ -426,9 +386,9 @@ class HiDateRangePicker extends React.Component {
         // Disable days before 'from' date if define
 
         let before;
-        if (from instanceof Date && disablePastDays) {
+        if (from && disablePastDays) {
             before = from < now ? now : from;
-        } else if (from instanceof Date) {
+        } else if (from) {
             before = from;
         } else if (disablePastDays) {
             before = now;
@@ -458,8 +418,7 @@ class HiDateRangePicker extends React.Component {
         }, props, labelFrom && {
             label: labelFrom
         }, {
-            id: `${id}-from`,
-            onChange: this.handleInputChange('from')
+            id: `${id}-from`
         });
 
         const toInputProps = _extends({}, onReset && {
@@ -467,53 +426,35 @@ class HiDateRangePicker extends React.Component {
         }, props, labelTo && {
             label: labelTo
         }, {
-            id: `${id}-to`,
-            onChange: this.handleInputChange('to')
-        });
-
-        let toClass = classNames(classes.toInput, {
-            [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from',
-            [classes.right4]: staticPosition === true && this.state.focusedInput === 'from'
+            id: `${id}-to`
         });
 
         return React.createElement(
             'div',
-            { className: classNames(classes.root, classes.rangePickerContainer) },
+            { className: classes.root },
             React.createElement(
                 'div',
-                {
-                    className: classes.fromInput,
-                    onFocus: this.handleDayPickerFocus('from'),
-                    onBlur: this.handleDayPickerBlur('from')
-                },
-                React.createElement(
-                    'div',
-                    null,
-                    React.createElement(DayPickerInput, {
-                        ref: el => {
-                            this.fromInput = el;
-                        },
-                        value: from,
-                        hideOnDayClick: false,
-                        overlayComponent: this.renderOverlayFrom,
-                        dayPickerProps: fromDayPickerProps,
-                        component: HiTextField,
-                        inputProps: fromInputProps,
-                        format: enableTime ? `${format} HH:mm` : format,
-                        formatDate: formatDate,
-                        parseDate: parseDate,
-                        onDayChange: this.handleDayChangeFrom,
-                        placeholder: ''
-                    })
-                )
+                { className: classes.fromInput },
+                React.createElement(DayPickerInput, {
+                    ref: el => {
+                        this.fromInput = el;
+                    },
+                    value: from,
+                    hideOnDayClick: false,
+                    overlayComponent: this.renderOverlayFrom,
+                    dayPickerProps: fromDayPickerProps,
+                    component: HiTextField,
+                    inputProps: fromInputProps,
+                    format: enableTime ? `${format} HH:mm` : format,
+                    formatDate: formatDate,
+                    parseDate: parseDate,
+                    onDayChange: this.handleDayChangeFrom,
+                    placeholder: ''
+                })
             ),
             React.createElement(
                 'div',
-                {
-                    className: toClass,
-                    onFocus: this.handleDayPickerFocus('to'),
-                    onBlur: this.handleDayPickerBlur('to')
-                },
+                { className: classes.toInput },
                 React.createElement(DayPickerInput, {
                     ref: el => {
                         this.toInput = el;
@@ -539,7 +480,6 @@ HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
-    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -586,7 +526,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    from: PropTypes.instanceOf(Date),
     /**
      * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
      */
@@ -609,28 +549,16 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: PropTypes.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
-     * @param {string} nom de l'input
-     */
-    onBlur: PropTypes.func,
-    /**
-     * Callback à la sélection d'une date
-     * @param {string} nom du champs
-     * @param {string} nouvelle valeur du champs
      */
     onChange: PropTypes.func,
     /**
      * Callback au reset de l'input
-     * @param {string} nom du champs réinitialisé
      */
     onReset: PropTypes.func,
-    /**
-     * 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]),
+    to: PropTypes.instanceOf(Date),
     /**
      * Traductions
      */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -27,10 +27,10 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.today;
-            from = moment().startOf('day');
-            to = moment().endOf('day');
-            info = `${from.format(format)}`;
+            label = t.last_24h;
+            from = moment().subtract(1, 'day');
+            to = moment();
+            info = `${from.calendar()} ${t.to_now}`;
             break;
         case 'pd':
             label = t.yesterday;
@@ -42,13 +42,13 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = moment().startOf('week');
             to = moment();
-            info = `${t.short_week}${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
+            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.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
+            info = `${t.week} ${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
             break;
         case 'cm':
             label = t.current_month;
@@ -72,7 +72,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.previous_quarter;
             from = moment().subtract(1, 'quarter').startOf('quarter');
             to = moment().subtract(1, 'quarter').endOf('quarter');
-            info = `${from.format('YYYY')}-${t.short_quarter}${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
+            info = `${from.format('YYYY')}-Q${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
             break;
         case 'cy':
             label = t.current_year;
@@ -97,8 +97,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
 export const styles = theme => ({
     root: {
         maxWidth: 500,
-        marginLeft: -4,
-        alignItems: 'flex-start'
+        marginLeft: -4
     },
     dateSelect: {
         paddingTop: 1,
@@ -106,9 +105,7 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    },
-    smSelect: {},
-    smRangePicker: {}
+    }
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -129,47 +126,18 @@ class HiDateRangeSelector extends React.Component {
                     this.props.onChange('from', selectedOption.from.toDate());
                     this.props.onChange('to', selectedOption.to.toDate());
                 }
-            } else {
-                this.setState({
-                    defaultFrom: undefined,
-                    defaultTo: undefined
-                });
-            }
-            if (this.props.returnSelectValue === true) {
-                this.props.onChange('period', value);
             }
         };
 
-        this.handleReset = this.handleReset.bind(this);
-        this.handleSelectChange = this.handleSelectChange.bind(this);
-
-        this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
-
-        let from;
-        let to;
-        if (props.defaultPreset !== 'custom') {
-            const selectedOption = this.options.find(option => option.id === props.defaultPreset);
-            if (selectedOption) {
-                from = selectedOption.from.toDate();
-                to = selectedOption.to.toDate();
-            }
-        }
-
         this.state = {
             selectedPreset: props.defaultPreset,
-            containerWidth: 0,
-            defaultFrom: from,
-            defaultTo: to
+            containerWidth: 0
         };
-    }
 
-    static getDerivedStateFromProps(props, state) {
-        if (props.defaultPreset && props.returnSelectValue) {
-            return {
-                selectedPreset: props.defaultPreset
-            };
-        }
-        return null;
+        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() {
@@ -203,13 +171,11 @@ class HiDateRangeSelector extends React.Component {
             required,
             to,
             translations,
-            classes,
-            selectProps,
-            staticPosition
+            classes
         } = _props,
-              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
+              props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
 
-        const { defaultFrom, defaultTo, selectedPreset } = this.state;
+        const { selectedPreset } = this.state;
 
         return React.createElement(
             Grid,
@@ -221,8 +187,8 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
-                React.createElement(HiSelectField, _extends({
+                { item: true, xs: 12, sm: 4 },
+                React.createElement(HiSelectField, {
                     disabled: disabled,
                     error: error,
                     errorText: errorText,
@@ -237,24 +203,22 @@ class HiDateRangeSelector extends React.Component {
                     translations: translations,
                     value: selectedPreset,
                     containerWidth: this.state.containerWidth,
-                    classes: { root: classes.dateSelect },
-                    staticPosition: staticPosition
-                }, selectProps))
+                    classes: { root: classes.dateSelect }
+                })
             ),
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
+                { item: true, xs: 12, sm: 8 },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
-                    from: from || defaultFrom,
-                    to: to || defaultTo,
+                    from: from,
+                    to: to,
                     enableTime: enableTime,
                     onChange: onChange,
                     onReset: this.handleReset,
                     disabled: disabled || selectedPreset !== 'custom',
-                    translations: translations,
-                    staticPosition: staticPosition
+                    translations: translations
                 }, props))
             )
         );
@@ -265,23 +229,22 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
-    returnSelectValue: false,
-    staticPosition: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
-        today: 'Today',
+        today: 'today',
         hour: 'Hour',
         minute: 'Minute',
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
-        short_week: 'W',
-        short_quarter: 'Q',
         year: 'Year',
+
         days: 'days',
+
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
+        last_24h: 'Last 24h',
         to: 'to',
         to_now: 'to now',
         current_week: 'Current Week',
@@ -329,7 +292,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    from: PropTypes.instanceOf(Date),
     /**
      * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
      */
@@ -362,22 +325,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: PropTypes.bool,
-    /**
-     * Retourne la valeur du select de la période au change du select
-     */
-    returnSelectValue: PropTypes.bool.isRequired,
-    /**
-     * 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]),
+    to: PropTypes.instanceOf(Date),
     /**
      * Traductions
      */

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -70,11 +70,9 @@ const CustomOverlayLayout = (_ref) => {
         [classes.right]: side === 'to'
     });
 
-    let paperProps = _extends({}, props);
-
     return React.createElement(
         Paper,
-        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
+        { className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/Overlays/Overlay.js

@@ -1,5 +1,3 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 //  weak
 
 import React from 'react';
@@ -11,15 +9,10 @@ import withStyles from '../../styles/withStyles';
 
 export const styles = () => ({
     paper: {
+        position: 'absolute',
         width: '100%',
         zIndex: 10
     },
-    absolute: {
-        position: 'absolute'
-    },
-    relative: {
-        position: 'relative'
-    },
     left: {
         width: '200%',
         left: 0
@@ -33,22 +26,15 @@ export const styles = () => ({
     }
 });
 
-const Overlay = (_ref) => {
-    let { classes, children, side, staticPosition } = _ref,
-        props = _objectWithoutProperties(_ref, ['classes', 'children', 'side', 'staticPosition']);
-
+const Overlay = ({ classes, children, side }) => {
     const paperClass = classNames(classes.paper, {
         [classes.left]: side === 'from',
-        [classes.right]: side === 'to',
-        [classes.absolute]: staticPosition !== true,
-        [classes.relative]: staticPosition === true
+        [classes.right]: side === 'to'
     });
 
-    let paperProps = _extends({}, props);
-
     return React.createElement(
         Paper,
-        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
+        { className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },
@@ -80,7 +66,7 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
      * ReactDayPicker prop
      * The currently selected day or selected days
      */
-    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+    selectedDay: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     /**
      * Définit comment construire le Paper dans le cas d'un double input
      */

package/es/HiDatePicker/stylesheet.js

@@ -19,20 +19,6 @@ export default (theme => ({
         width: 'calc(50% - 4px)',
         marginLeft: 4
     },
-    absolute: {
-        position: 'absolute'
-    },
-    right4: {
-        right: 4
-    },
-    dayPickerMargin: {
-        top: -337,
-        width: 'calc(100% - 4px)'
-    },
-    rangePickerContainer: {
-        display: 'flex',
-        alignItems: 'flex-start'
-    },
     // The container element
     container: {
         width: '100%',