@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/es/HiChip/HiChipSwitch.js

@@ -138,7 +138,6 @@ class HiChipSwitch extends React.PureComponent {
 
     render() {
         const {
-            id,
             label,
             classes,
             activeIcon,
@@ -164,7 +163,6 @@ class HiChipSwitch extends React.PureComponent {
         return React.createElement(
             'div',
             {
-                id: id,
                 className: classNames(classes.root, {
                     [classes.active]: !!active,
                     [classes.inactive]: !active
@@ -225,10 +223,6 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
-    /**
-     * Identifiant de l'élément
-     */
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
      * Label qu'affiche le ChipFilter
      */

package/es/HiColoredLabel/HiColoredLabel.js

@@ -6,10 +6,10 @@ import { getContrastedTextColor, fade } from '../styles/colorManipulator';
 
 export const styles = theme => ({
     root: {
-        display: 'inline-block',
+        display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: '100%',
-        padding: '2px 8px',
+        padding: '2px 4px',
         borderRadius: 2,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
@@ -32,7 +32,7 @@ export const styles = theme => ({
  * Label with background color & text color
  */
 function HiColoredLabel(props) {
-    const { classes, className, label, color, active, beta } = props;
+    const { classes, label, color, active, beta } = props;
     let fontWeight = 400;
     if (beta) {
         fontWeight = 600;
@@ -42,7 +42,7 @@ function HiColoredLabel(props) {
     return React.createElement(
         'div',
         {
-            className: classNames(classes.root, { [classes.beta]: beta }, className),
+            className: classNames(classes.root, { [classes.beta]: beta }),
             style: {
                 backgroundColor: active ? color : fade(color, 0.08),
                 color: active ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : color,
@@ -67,10 +67,6 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
-    /**
-     * Surcharge les classes du composant
-     */
-    className: PropTypes.string,
     /**
      * Couleur du text & du background
      */
@@ -78,12 +74,11 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false,
-    color: '#737373'
+    active: false
 };
 
 export default withStyles(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/es/HiDatePicker/HiDatePicker.js

@@ -40,7 +40,6 @@ class HiDatePicker extends React.Component {
         this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
         this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
         this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
-        this.handleInputChange = this.handleInputChange.bind(this);
     }
 
     componentWillUnmount() {
@@ -52,33 +51,27 @@ class HiDatePicker extends React.Component {
         this.props.onReset();
     }
 
-    handleInputChange(event) {
-        this.props.onChange(event.target.value);
-    }
-
     handleDayChange(day, modifiers) {
-        if (day) {
-            if (modifiers.selected) {
-                // Deselect day
-                this.props.onChange(undefined);
-            } else {
-                // Keep Time if set
-                if (this.props.enableTime && day !== undefined) {
-                    if (this.props.value) {
-                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                    } else {
-                        day.setHours(0, 0);
-                    }
+        if (modifiers.selected) {
+            // Deselect day
+            this.props.onChange(undefined);
+        } else {
+            // Keep Time if set
+            if (this.props.enableTime && day !== undefined) {
+                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');
             }
+            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');
         }
     }
 
@@ -212,7 +205,7 @@ class HiDatePicker extends React.Component {
             captionElement: this.renderCaption,
             classNames: classes,
             disabledDays: effectiveDisabledDays,
-            selectedDays: typeof value === 'object' ? value : undefined,
+            selectedDays: value,
             locale,
             firstDayOfWeek: 1,
             fromMonth: minimumDate,
@@ -228,9 +221,7 @@ class HiDatePicker extends React.Component {
             onReset: this.handleReset
         }, {
             onBlur: this.handleBlur
-        }, props, {
-            onChange: this.handleInputChange
-        });
+        }, props);
 
         return React.createElement(
             'div',
@@ -323,6 +314,6 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date sélectionnée
      */
-    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])
+    value: PropTypes.instanceOf(Date)
 } : {};
 export default withStyles(styles, { name: 'HmuiHiDatePicker' })(HiDatePicker);

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
      */