@hipay/hipay-material-ui 1.0.0-beta.19 → 1.0.0-beta.2

package/HiCheckbox/HiCheckbox.js

@@ -65,10 +65,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var styles = exports.styles = function styles(theme) {
     return {
-        root: {
-            marginRight: 12,
-            marginLeft: 12
-        },
+        root: {},
         checked: {
             color: theme.palette.business.primary.normal
         },

package/HiChip/HiChip.js

@@ -124,12 +124,12 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
         img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 20
         }),
         _react2.default.createElement(
             'span',
@@ -140,13 +140,13 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 20
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 20
         })
     );
 }

package/HiChip/HiChipSwitch.js

@@ -213,8 +213,7 @@ var HiChipSwitch = function (_React$PureComponent) {
                 active = _props.active,
                 onClick = _props.onClick,
                 onSelectionClick = _props.onSelectionClick,
-                selection = _props.selection,
-                selectionTitle = _props.selectionTitle;
+                selection = _props.selection;
 
             var selectionProps = {
                 tabIndex: '-1'
@@ -224,8 +223,7 @@ var HiChipSwitch = function (_React$PureComponent) {
                     onClick: this.handleClickSelection,
                     role: 'button',
                     tabIndex: '0',
-                    onKeyDown: this.handleKeyDownSelection,
-                    title: selectionTitle
+                    onKeyDown: this.handleKeyDownSelection
                 };
             }
 
@@ -269,8 +267,7 @@ var HiChipSwitch = function (_React$PureComponent) {
 HiChipSwitch.defaultProps = {
     activeIcon: 'check',
     active: false,
-    selection: null,
-    selectionTitle: ''
+    selection: null
 };
 HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -304,10 +301,6 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * nombre de valeurs selectionnées.
      */
-    selection: _propTypes2.default.number,
-    /**
-     * Title de la selection.
-     */
-    selectionTitle: _propTypes2.default.string
+    selection: _propTypes2.default.number
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiChipSwitch' })(HiChipSwitch);

package/HiColoredLabel/HiColoredLabel.js

@@ -60,7 +60,6 @@ var styles = exports.styles = function styles(theme) {
  */
 function HiColoredLabel(props) {
     var classes = props.classes,
-        className = props.className,
         label = props.label,
         color = props.color,
         active = props.active,
@@ -75,7 +74,7 @@ function HiColoredLabel(props) {
     return _react2.default.createElement(
         'div',
         {
-            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta), className),
+            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta)),
             style: {
                 backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
                 color: active ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : color,
@@ -100,10 +99,6 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: _propTypes2.default.object,
-    /**
-     * Surcharge les classes du composant
-     */
-    className: _propTypes2.default.string,
     /**
      * Couleur du text & du background
      */
@@ -111,12 +106,11 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]).isRequired
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false,
-    color: '#737373'
+    active: false
 };
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/HiDatePicker/HiDatePicker.js

@@ -107,7 +107,6 @@ var HiDatePicker = function (_React$Component) {
         _this.handleDayChange = _this.handleDayChange.bind(_this);
         _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind(_this);
         _this.handleReset = _this.handleReset.bind(_this);
-        _this.handleTimeChange = _this.handleTimeChange.bind(_this);
         _this.openPanel = _this.openPanel.bind(_this);
         _this.renderCaption = _this.renderCaption.bind(_this);
         _this.renderOverlay = _this.renderOverlay.bind(_this);
@@ -131,26 +130,33 @@ var HiDatePicker = function (_React$Component) {
     }, {
         key: 'handleDayChange',
         value: function handleDayChange(day, modifiers) {
-            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);
-                    }
+            var _this2 = this;
+
+            this.timeout = setTimeout(function () {
+                if (_this2.datePickerInput && _this2.datePickerInput.getInput()) {
+                    _this2.datePickerInput.getInput().focus();
                 }
-                this.props.onChange(day);
+            }, 0);
+
+            if (modifiers.disabled) {
+                return; // TODO: delete ??
             }
-            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');
+
+            if (this.props.onChange) {
+                if (modifiers.selected) {
+                    // Deselect day
+                    this.props.onChange(undefined);
+                } else {
+                    // Keep Time if set
+                    if (this.props.enableTime) {
+                        if (this.props.value) {
+                            day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                        } else {
+                            day.setHours(0, 0);
+                        }
+                    }
+                    this.props.onChange(day);
+                }
             }
         }
     }, {
@@ -182,14 +188,6 @@ var HiDatePicker = function (_React$Component) {
                 openedPanel: 'calendar'
             });
         }
-    }, {
-        key: 'handleTimeChange',
-        value: function handleTimeChange(date, precision) {
-            this.props.onChange(date);
-            if (date instanceof Date && precision === 'minute') {
-                document.activeElement.blur();
-            }
-        }
     }, {
         key: 'openPanel',
         value: function openPanel(panel) {
@@ -237,7 +235,7 @@ var HiDatePicker = function (_React$Component) {
         value: function renderTimePickerOverlay(propsOverlay) {
             var timePickerProps = {
                 value: this.props.value,
-                onChange: this.handleTimeChange,
+                onChange: this.props.onChange,
                 onCalendarClick: this.handleCalendarClick
             };
             return _react2.default.createElement(_TimePickerOverlay2.default, (0, _extends3.default)({ key: 'time-picker-overlay' }, timePickerProps, propsOverlay));
@@ -255,7 +253,7 @@ var HiDatePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -293,7 +291,7 @@ var HiDatePicker = function (_React$Component) {
                 navbarElement: function navbarElement(props2) {
                     return _react2.default.createElement(_Navbar2.default, (0, _extends3.default)({
                         showClockButton: enableTime,
-                        onClockClick: _this2.handleClockClick
+                        onClockClick: _this3.handleClockClick
                     }, props2));
                 },
                 captionElement: this.renderCaption,
@@ -322,7 +320,7 @@ var HiDatePicker = function (_React$Component) {
                 { className: classes.root },
                 _react2.default.createElement(_DayPickerInput2.default, {
                     ref: function ref(el) {
-                        _this2.datePickerInput = el;
+                        _this3.datePickerInput = el;
                     },
                     value: value,
                     hideOnDayClick: hideOnDayClick,
@@ -395,10 +393,8 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: _propTypes2.default.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
-     *
-     * @param {Date} date sélectionnée
      */
-    onChange: _propTypes2.default.func.isRequired,
+    onChange: _propTypes2.default.func,
     /**
      * Callback au reset de l'input
      */

package/HiDatePicker/HiDateRangePicker.js

@@ -50,10 +50,6 @@ var _DayPickerInput = require('react-day-picker/DayPickerInput');
 
 var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -96,8 +92,6 @@ var _stylesheet2 = _interopRequireDefault(_stylesheet);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-//  weak
-
 var HiDateRangePicker = function (_React$Component) {
     (0, _inherits3.default)(HiDateRangePicker, _React$Component);
 
@@ -106,16 +100,11 @@ var HiDateRangePicker = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
 
-        _this.handleDayPickerFocus = function (name) {
-            return function () {
-                _this.setState({ focusedInput: 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);
@@ -139,8 +128,6 @@ var HiDateRangePicker = function (_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.openPanel = _this.openPanel.bind(_this);
 
@@ -207,11 +194,11 @@ var HiDateRangePicker = function (_React$Component) {
             // 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();
-                    }
+                    this.timeout = setTimeout(function () {
+                        if (_this4.toInput && _this4.toInput.getInput()) {
+                            _this4.toInput.getInput().focus();
+                        }
+                    }, 0);
                 }
             } else {
                 this.timeout = setTimeout(function () {
@@ -330,18 +317,11 @@ var HiDateRangePicker = function (_React$Component) {
             this.props.onChange(name, date);
             if (name === 'from' && precision === 'minute') {
                 this.fromInput.hideDayPicker();
-                this.toInput.getInput().focus();
                 this.toInput.showDayPicker();
             } else if (name === 'to' && precision === 'minute') {
                 this.toInput.hideDayPicker();
-                document.activeElement.blur();
             }
         }
-    }, {
-        key: 'handleDayPickerBlur',
-        value: function handleDayPickerBlur() {
-            this.setState({ focusedInput: '' });
-        }
     }, {
         key: 'openPanel',
         value: function openPanel(name, panel) {
@@ -385,10 +365,9 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }, {
         key: 'renderOverlay',
-        value: function renderOverlay(name, propsOverlay, staticPosition) {
+        value: function renderOverlay(name, propsOverlay) {
             var rangeOverlayProps = (0, _extends3.default)({}, propsOverlay, {
-                side: name,
-                staticPosition: staticPosition
+                side: name
             });
 
             switch (this.state[name + 'OpenedPanel']) {
@@ -406,12 +385,12 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'renderOverlayFrom',
         value: function renderOverlayFrom(propsOverlay) {
-            return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+            return this.renderOverlay('from', propsOverlay);
         }
     }, {
         key: 'renderOverlayTo',
         value: function renderOverlayTo(propsOverlay) {
-            return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+            return this.renderOverlay('to', propsOverlay);
         }
     }, {
         key: 'renderMonthPickerOverlay',
@@ -458,8 +437,7 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this6 = this,
-                _classNames;
+            var _this6 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -477,8 +455,7 @@ var HiDateRangePicker = function (_React$Component) {
                 to = _props.to,
                 translations = _props.translations,
                 id = _props.id,
-                staticPosition = _props.staticPosition,
-                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
             var _state = this.state,
                 fromCurrentMonth = _state.fromCurrentMonth,
                 toCurrentMonth = _state.toCurrentMonth;
@@ -596,47 +573,32 @@ var HiDateRangePicker = function (_React$Component) {
                 id: id + '-to'
             });
 
-            var fromClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'to'), (0, _defineProperty3.default)(_classNames, classes.dayPickerMargin, staticPosition === true && this.state.focusedInput === 'to'), _classNames));
-            var toClass = (0, _classnames2.default)(classes.toInput, (0, _defineProperty3.default)({}, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'));
-
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
                 _react2.default.createElement(
                     'div',
-                    {
-                        className: classes.fromInput,
-                        onFocus: this.handleDayPickerFocus('from'),
-                        onBlur: this.handleDayPickerBlur
-                    },
-                    _react2.default.createElement(
-                        'div',
-                        { className: fromClass },
-                        _react2.default.createElement(_DayPickerInput2.default, {
-                            ref: function ref(el) {
-                                _this6.fromInput = el;
-                            },
-                            value: from,
-                            hideOnDayClick: false,
-                            overlayComponent: this.renderOverlayFrom,
-                            dayPickerProps: fromDayPickerProps,
-                            component: _HiForm.HiTextField,
-                            inputProps: fromInputProps,
-                            format: enableTime ? format + ' HH:mm' : format,
-                            formatDate: _moment.formatDate,
-                            parseDate: _moment.parseDate,
-                            onDayChange: this.handleDayChangeFrom,
-                            placeholder: ''
-                        })
-                    )
+                    { className: classes.fromInput },
+                    _react2.default.createElement(_DayPickerInput2.default, {
+                        ref: function ref(el) {
+                            _this6.fromInput = el;
+                        },
+                        value: from,
+                        hideOnDayClick: false,
+                        overlayComponent: this.renderOverlayFrom,
+                        dayPickerProps: fromDayPickerProps,
+                        component: _HiForm.HiTextField,
+                        inputProps: fromInputProps,
+                        format: enableTime ? format + ' HH:mm' : format,
+                        formatDate: _moment.formatDate,
+                        parseDate: _moment.parseDate,
+                        onDayChange: this.handleDayChangeFrom,
+                        placeholder: ''
+                    })
                 ),
                 _react2.default.createElement(
                     'div',
-                    {
-                        className: toClass,
-                        onFocus: this.handleDayPickerFocus('to'),
-                        onBlur: this.handleDayPickerBlur
-                    },
+                    { className: classes.toInput },
                     _react2.default.createElement(_DayPickerInput2.default, {
                         ref: function ref(el) {
                             _this6.toInput = el;
@@ -658,13 +620,12 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }]);
     return HiDateRangePicker;
-}(_react2.default.Component);
+}(_react2.default.Component); //  weak
 
 HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
-    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -740,10 +701,6 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
      * Callback au reset de l'input
      */
     onReset: _propTypes2.default.func,
-    /**
-     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
-     */
-    staticPosition: _propTypes2.default.bool,
     /**
      * Date de fin sélectionnée
      */

package/HiDatePicker/HiDateRangeSelector.js

@@ -85,7 +85,7 @@ function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.today;
+            label = t.last_24h;
             from = (0, _moment2.default)().subtract(1, 'day');
             to = (0, _moment2.default)();
             info = from.calendar() + ' ' + t.to_now;
@@ -164,9 +164,7 @@ var styles = exports.styles = function styles(theme) {
         },
         dateRangePicker: {
             width: 'calc(100% + 8px)'
-        },
-        smSelect: {},
-        smRangePicker: {}
+        }
     };
 };
 
@@ -193,9 +191,6 @@ var HiDateRangeSelector = function (_React$Component) {
                         _this.props.onChange('to', selectedOption.to.toDate());
                     }
                 }
-                if (_this.props.returnSelectValue === true) {
-                    _this.props.onChange('period', value);
-                }
             };
         };
 
@@ -251,9 +246,7 @@ var HiDateRangeSelector = function (_React$Component) {
                 to = _props.to,
                 translations = _props.translations,
                 classes = _props.classes,
-                selectProps = _props.selectProps,
-                staticPosition = _props.staticPosition,
-                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
             var selectedPreset = this.state.selectedPreset;
 
 
@@ -269,8 +262,8 @@ var HiDateRangeSelector = function (_React$Component) {
                 },
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
-                    _react2.default.createElement(_HiSelect.HiSelectField, (0, _extends3.default)({
+                    { item: true, xs: 12, sm: 4 },
+                    _react2.default.createElement(_HiSelect.HiSelectField, {
                         disabled: disabled,
                         error: error,
                         errorText: errorText,
@@ -285,13 +278,12 @@ var HiDateRangeSelector = function (_React$Component) {
                         translations: translations,
                         value: selectedPreset,
                         containerWidth: this.state.containerWidth,
-                        classes: { root: classes.dateSelect },
-                        staticPosition: staticPosition
-                    }, selectProps))
+                        classes: { root: classes.dateSelect }
+                    })
                 ),
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
+                    { item: true, xs: 12, sm: 8 },
                     _react2.default.createElement(_HiDateRangePicker2.default, (0, _extends3.default)({
                         classes: { root: classes.dateRangePicker },
                         id: idRange,
@@ -301,8 +293,7 @@ var HiDateRangeSelector = function (_React$Component) {
                         onChange: onChange,
                         onReset: this.handleReset,
                         disabled: disabled || selectedPreset !== 'custom',
-                        translations: translations,
-                        staticPosition: staticPosition
+                        translations: translations
                     }, props))
                 )
             );
@@ -315,21 +306,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',
         year: 'Year',
+
         days: 'days',
+
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
+        last_24h: 'Last 24h',
         to: 'to',
         to_now: 'to now',
         current_week: 'Current Week',
@@ -410,18 +402,6 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * true si champs obligatoire
      */
     required: _propTypes2.default.bool,
-    /**
-     * Retourne la valeur du select de la période au change du select
-     */
-    returnSelectValue: _propTypes2.default.bool.isRequired,
-    /**
-     * Props passées au HiSelectField
-     */
-    selectProps: _propTypes2.default.object,
-    /**
-     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
-     */
-    staticPosition: _propTypes2.default.bool,
     /**
      * Date de fin sélectionnée
      */