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

package/HiColoredLabel/HiColoredLabel.js

@@ -106,11 +106,12 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {
-    active: false
+    active: false,
+    color: '#737373'
 };
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/HiDatePicker/HiDatePicker.js

@@ -107,6 +107,7 @@ 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);
@@ -130,33 +131,26 @@ var HiDatePicker = function (_React$Component) {
     }, {
         key: 'handleDayChange',
         value: function handleDayChange(day, modifiers) {
-            var _this2 = this;
-
-            this.timeout = setTimeout(function () {
-                if (_this2.datePickerInput && _this2.datePickerInput.getInput()) {
-                    _this2.datePickerInput.getInput().focus();
-                }
-            }, 0);
-
-            if (modifiers.disabled) {
-                return; // TODO: delete ??
-            }
-
-            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);
-                        }
+            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);
                 }
+                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');
             }
         }
     }, {
@@ -188,6 +182,14 @@ 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) {
@@ -235,7 +237,7 @@ var HiDatePicker = function (_React$Component) {
         value: function renderTimePickerOverlay(propsOverlay) {
             var timePickerProps = {
                 value: this.props.value,
-                onChange: this.props.onChange,
+                onChange: this.handleTimeChange,
                 onCalendarClick: this.handleCalendarClick
             };
             return _react2.default.createElement(_TimePickerOverlay2.default, (0, _extends3.default)({ key: 'time-picker-overlay' }, timePickerProps, propsOverlay));
@@ -253,7 +255,7 @@ var HiDatePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this3 = this;
+            var _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -291,7 +293,7 @@ var HiDatePicker = function (_React$Component) {
                 navbarElement: function navbarElement(props2) {
                     return _react2.default.createElement(_Navbar2.default, (0, _extends3.default)({
                         showClockButton: enableTime,
-                        onClockClick: _this3.handleClockClick
+                        onClockClick: _this2.handleClockClick
                     }, props2));
                 },
                 captionElement: this.renderCaption,
@@ -320,7 +322,7 @@ var HiDatePicker = function (_React$Component) {
                 { className: classes.root },
                 _react2.default.createElement(_DayPickerInput2.default, {
                     ref: function ref(el) {
-                        _this3.datePickerInput = el;
+                        _this2.datePickerInput = el;
                     },
                     value: value,
                     hideOnDayClick: hideOnDayClick,
@@ -393,8 +395,10 @@ 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,
+    onChange: _propTypes2.default.func.isRequired,
     /**
      * Callback au reset de l'input
      */

package/HiDatePicker/HiDateRangePicker.js

@@ -194,11 +194,11 @@ var HiDateRangePicker = function (_React$Component) {
             // else focus current input
             if (!this.props.enableTime) {
                 if (day instanceof Date) {
-                    this.timeout = setTimeout(function () {
-                        if (_this4.toInput && _this4.toInput.getInput()) {
-                            _this4.toInput.getInput().focus();
-                        }
-                    }, 0);
+                    if (name === 'from' && this.toInput) {
+                        this.toInput.getInput().focus();
+                    } else if (name === 'to') {
+                        document.activeElement.blur();
+                    }
                 }
             } else {
                 this.timeout = setTimeout(function () {
@@ -317,9 +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();
             }
         }
     }, {

package/HiDatePicker/HiDateRangeSelector.js

@@ -85,7 +85,7 @@ function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
+            label = t.today;
             from = (0, _moment2.default)().subtract(1, 'day');
             to = (0, _moment2.default)();
             info = from.calendar() + ' ' + t.to_now;
@@ -164,7 +164,9 @@ var styles = exports.styles = function styles(theme) {
         },
         dateRangePicker: {
             width: 'calc(100% + 8px)'
-        }
+        },
+        smSelect: {},
+        smRangePicker: {}
     };
 };
 
@@ -189,6 +191,9 @@ var HiDateRangeSelector = function (_React$Component) {
                     if (selectedOption) {
                         _this.props.onChange('from', selectedOption.from.toDate());
                         _this.props.onChange('to', selectedOption.to.toDate());
+                        if (_this.props.returnSelectValue === true) {
+                            _this.props.onChange('period', value);
+                        }
                     }
                 }
             };
@@ -246,7 +251,8 @@ var HiDateRangeSelector = function (_React$Component) {
                 to = _props.to,
                 translations = _props.translations,
                 classes = _props.classes,
-                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
+                selectProps = _props.selectProps,
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
             var selectedPreset = this.state.selectedPreset;
 
 
@@ -262,8 +268,8 @@ var HiDateRangeSelector = function (_React$Component) {
                 },
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 4 },
-                    _react2.default.createElement(_HiSelect.HiSelectField, {
+                    { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
+                    _react2.default.createElement(_HiSelect.HiSelectField, (0, _extends3.default)({
                         disabled: disabled,
                         error: error,
                         errorText: errorText,
@@ -279,11 +285,11 @@ var HiDateRangeSelector = function (_React$Component) {
                         value: selectedPreset,
                         containerWidth: this.state.containerWidth,
                         classes: { root: classes.dateSelect }
-                    })
+                    }, selectProps))
                 ),
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 8 },
+                    { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                     _react2.default.createElement(_HiDateRangePicker2.default, (0, _extends3.default)({
                         classes: { root: classes.dateRangePicker },
                         id: idRange,
@@ -306,22 +312,20 @@ HiDateRangeSelector.defaultProps = {
     availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
     defaultPreset: 'cd',
     enableTime: false,
+    returnSelectValue: 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',
@@ -402,6 +406,14 @@ 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,
     /**
      * Date de fin sélectionnée
      */

package/HiDatePicker/ListPicker.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -33,6 +37,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _reactCustomScrollbars = require('react-custom-scrollbars');
 
 var _Menu = require('material-ui/Menu');
@@ -43,6 +51,8 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+//  weak
+
 var styles = exports.styles = function styles(theme) {
     return {
         itemRoot: {
@@ -56,9 +66,12 @@ var styles = exports.styles = function styles(theme) {
         },
         itemCentered: {
             margin: 'auto'
+        },
+        currentDateItem: {
+            color: theme.palette.business.primary.normal + ' !important'
         }
     };
-}; //  weak
+};
 
 var ListPicker = function (_React$PureComponent) {
     (0, _inherits3.default)(ListPicker, _React$PureComponent);
@@ -71,7 +84,9 @@ var ListPicker = function (_React$PureComponent) {
     (0, _createClass3.default)(ListPicker, [{
         key: 'componentDidMount',
         value: function componentDidMount() {
-            if (this.props.initAtMiddleScroll && this.scrollbars) {
+            if (this.position && this.scrollbars) {
+                this.scrollbars.scrollTop((this.position - 2) * 40);
+            } else if (this.props.initAtMiddleScroll && this.scrollbars) {
                 this.scrollbars.scrollTop((this.scrollbars.getScrollHeight() - this.scrollbars.getClientHeight()) / 2 + 20);
             }
         }
@@ -84,8 +99,12 @@ var ListPicker = function (_React$PureComponent) {
                 classes = _props.classes,
                 itemList = _props.itemList,
                 onItemClick = _props.onItemClick,
-                selectedItem = _props.selectedItem;
+                selectedItem = _props.selectedItem,
+                type = _props.type;
+
 
+            this.position = itemList.indexOf(selectedItem);
+            var now = new Date();
 
             return _react2.default.createElement(
                 _reactCustomScrollbars.Scrollbars,
@@ -98,7 +117,9 @@ var ListPicker = function (_React$PureComponent) {
                 _react2.default.createElement(
                     _Menu.MenuList,
                     null,
-                    itemList.map(function (item) {
+                    itemList.map(function (item, index) {
+                        var labelClass = (0, _classnames2.default)(classes.itemCentered, (0, _defineProperty3.default)({}, classes.currentDateItem, type === 'year' && now.getFullYear() === item || type === 'month' && now.getMonth() === index));
+
                         return _react2.default.createElement(
                             _Menu.MenuItem,
                             {
@@ -114,7 +135,7 @@ var ListPicker = function (_React$PureComponent) {
                             },
                             _react2.default.createElement(
                                 'span',
-                                { className: classes.itemCentered },
+                                { className: labelClass },
                                 item
                             )
                         );
@@ -127,7 +148,7 @@ var ListPicker = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 ListPicker.defaultProps = {
-    initAtMiddleScroll: false
+    initAtMiddleScroll: true
 };
 ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -149,6 +170,10 @@ ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Item sélectionné
      */
-    selectedItem: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    selectedItem: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    /**
+     * Type des données dans la liste
+     */
+    type: _propTypes2.default.oneOf(['year', 'month'])
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiListPicker' })(ListPicker);

package/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -89,13 +89,17 @@ var MonthPickerOverlay = function (_React$Component) {
                 props = (0, _objectWithoutProperties3.default)(_props, ['value', 'translations']);
 
 
+            var now = new Date();
+            var currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
+
             return _react2.default.createElement(
                 _CustomOverlayLayout2.default,
                 (0, _extends3.default)({ headerElement: translations.month }, props),
                 _react2.default.createElement(_ListPicker2.default, {
                     itemList: this.months,
                     onItemClick: this.handleMonthClick,
-                    selectedItem: value ? value.getMonth() : null
+                    selectedItem: currentMonth,
+                    type: 'month'
                 })
             );
         }

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -116,7 +116,8 @@ var YearPickerOverlay = function (_React$Component) {
                 _react2.default.createElement(_ListPicker2.default, {
                     itemList: this.years,
                     onItemClick: this.handleYearClick,
-                    selectedItem: value ? value.getFullYear() : null
+                    selectedItem: value ? value.getFullYear() : null,
+                    type: 'year'
                 })
             );
         }

package/HiDotsStepper/HiDot.js

@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _ButtonBase = require('../ButtonBase');
+
+var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        dot: {
+            backgroundColor: theme.palette.dot.neutral,
+            borderRadius: '100%',
+            width: 12,
+            height: 12,
+            '&:hover': {
+                transform: 'scale(1.2)'
+            },
+            marginLeft: 12
+        },
+        dotActive: {
+            marginTop: 4,
+            marginLeft: 4,
+            '&:hover': {
+                transform: 'scale(1)'
+            }
+        },
+        dotValidated: {
+            backgroundColor: theme.palette.status[116]
+        },
+        dotRefused: {
+            backgroundColor: theme.palette.error.main
+        },
+        dotAround: {
+            backgroundColor: 'transparent',
+            borderRadius: '100%',
+            width: 24,
+            height: 24,
+            marginLeft: 6,
+            border: '2px solid ' + theme.palette.dot.neutral,
+            '&:hover': {
+                transform: 'scale(1.2)'
+            }
+        },
+        dotAroundValidated: {
+            border: '2px solid ' + theme.palette.status[116]
+        },
+        dotAroundRefused: {
+            border: '2px solid ' + theme.palette.error.main
+        }
+    };
+};
+
+var HiDot = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiDot, _React$PureComponent);
+
+    function HiDot() {
+        (0, _classCallCheck3.default)(this, HiDot);
+        return (0, _possibleConstructorReturn3.default)(this, (HiDot.__proto__ || (0, _getPrototypeOf2.default)(HiDot)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiDot, [{
+        key: 'render',
+        value: function render() {
+            var _classnames, _classnames2;
+
+            var _props = this.props,
+                active = _props.active,
+                status = _props.status,
+                classes = _props.classes,
+                onClick = _props.onClick;
+
+
+            var dotAroundClass = (0, _classnames4.default)(classes.dotAround, (_classnames = {}, (0, _defineProperty3.default)(_classnames, classes.dotAroundValidated, status === 'validated'), (0, _defineProperty3.default)(_classnames, classes.dotAroundRefused, status === 'refused'), _classnames));
+
+            var dotClassName = (0, _classnames4.default)(classes.dot, (_classnames2 = {}, (0, _defineProperty3.default)(_classnames2, classes.dotActive, active), (0, _defineProperty3.default)(_classnames2, classes.dotRefused, status === 'refused'), (0, _defineProperty3.default)(_classnames2, classes.dotValidated, status === 'validated'), _classnames2));
+
+            return _react2.default.createElement(
+                _ButtonBase2.default,
+                { disableRipple: true, role: 'button', onClick: onClick },
+                active ? _react2.default.createElement(
+                    'div',
+                    { className: dotAroundClass },
+                    _react2.default.createElement('div', { className: dotClassName })
+                ) : _react2.default.createElement('div', { className: dotClassName })
+            );
+        }
+    }]);
+    return HiDot;
+}(_react2.default.PureComponent);
+
+HiDot.defaultProps = {
+    active: false,
+    status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+    active: _propTypes2.default.bool,
+    classes: _propTypes2.default.object,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string,
+    onClick: _propTypes2.default.func,
+    status: _propTypes2.default.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiHiDot' })(HiDot);