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

package/HiDatePicker/HiDateRangePicker.js

@@ -50,6 +50,10 @@ 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);
@@ -92,6 +96,8 @@ 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);
 
@@ -100,11 +106,16 @@ 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(),
-            toOpenedPanel: 'calendar',
-            toCurrentMonth: props.to ? props.to : new Date()
+            toCurrentMonth: props.to ? props.to : new Date(),
+            focusedInput: ''
         };
 
         _this.handleReset = _this.handleReset.bind(_this);
@@ -128,6 +139,8 @@ 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);
 
@@ -194,11 +207,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,11 +330,18 @@ 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) {
@@ -365,9 +385,10 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }, {
         key: 'renderOverlay',
-        value: function renderOverlay(name, propsOverlay) {
+        value: function renderOverlay(name, propsOverlay, staticPosition) {
             var rangeOverlayProps = (0, _extends3.default)({}, propsOverlay, {
-                side: name
+                side: name,
+                staticPosition: staticPosition
             });
 
             switch (this.state[name + 'OpenedPanel']) {
@@ -385,12 +406,12 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'renderOverlayFrom',
         value: function renderOverlayFrom(propsOverlay) {
-            return this.renderOverlay('from', propsOverlay);
+            return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
         }
     }, {
         key: 'renderOverlayTo',
         value: function renderOverlayTo(propsOverlay) {
-            return this.renderOverlay('to', propsOverlay);
+            return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
         }
     }, {
         key: 'renderMonthPickerOverlay',
@@ -437,7 +458,8 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this6 = this;
+            var _this6 = this,
+                _classNames;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -455,7 +477,8 @@ var HiDateRangePicker = function (_React$Component) {
                 to = _props.to,
                 translations = _props.translations,
                 id = _props.id,
-                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', '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']);
             var _state = this.state,
                 fromCurrentMonth = _state.fromCurrentMonth,
                 toCurrentMonth = _state.toCurrentMonth;
@@ -573,32 +596,47 @@ 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 },
+                { className: (0, _classnames2.default)(classes.root, classes.rangePickerContainer) },
                 _react2.default.createElement(
                     'div',
-                    { 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: ''
-                    })
+                    {
+                        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: ''
+                        })
+                    )
                 ),
                 _react2.default.createElement(
                     'div',
-                    { className: classes.toInput },
+                    {
+                        className: toClass,
+                        onFocus: this.handleDayPickerFocus('to'),
+                        onBlur: this.handleDayPickerBlur
+                    },
                     _react2.default.createElement(_DayPickerInput2.default, {
                         ref: function ref(el) {
                             _this6.toInput = el;
@@ -620,12 +658,13 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }]);
     return HiDateRangePicker;
-}(_react2.default.Component); //  weak
+}(_react2.default.Component);
 
 HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
+    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -701,6 +740,10 @@ 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,10 +85,10 @@ function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
-            from = (0, _moment2.default)().subtract(1, 'day');
-            to = (0, _moment2.default)();
-            info = from.calendar() + ' ' + t.to_now;
+            label = t.today;
+            from = (0, _moment2.default)().startOf('day');
+            to = (0, _moment2.default)().endOf('day');
+            info = '' + from.format(format);
             break;
         case 'pd':
             label = t.yesterday;
@@ -156,7 +156,8 @@ var styles = exports.styles = function styles(theme) {
     return {
         root: {
             maxWidth: 500,
-            marginLeft: -4
+            marginLeft: -4,
+            alignItems: 'flex-start'
         },
         dateSelect: {
             paddingTop: 1,
@@ -164,7 +165,9 @@ var styles = exports.styles = function styles(theme) {
         },
         dateRangePicker: {
             width: 'calc(100% + 8px)'
-        }
+        },
+        smSelect: {},
+        smRangePicker: {}
     };
 };
 
@@ -191,6 +194,9 @@ var HiDateRangeSelector = function (_React$Component) {
                         _this.props.onChange('to', selectedOption.to.toDate());
                     }
                 }
+                if (_this.props.returnSelectValue === true) {
+                    _this.props.onChange('period', value);
+                }
             };
         };
 
@@ -246,7 +252,9 @@ 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,
+                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']);
             var selectedPreset = this.state.selectedPreset;
 
 
@@ -262,8 +270,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,
@@ -278,12 +286,13 @@ var HiDateRangeSelector = function (_React$Component) {
                         translations: translations,
                         value: selectedPreset,
                         containerWidth: this.state.containerWidth,
-                        classes: { root: classes.dateSelect }
-                    })
+                        classes: { root: classes.dateSelect },
+                        staticPosition: staticPosition
+                    }, 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,
@@ -293,7 +302,8 @@ var HiDateRangeSelector = function (_React$Component) {
                         onChange: onChange,
                         onReset: this.handleReset,
                         disabled: disabled || selectedPreset !== 'custom',
-                        translations: translations
+                        translations: translations,
+                        staticPosition: staticPosition
                     }, props))
                 )
             );
@@ -306,22 +316,21 @@ 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',
@@ -402,6 +411,18 @@ 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
      */

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/CustomOverlayLayout.js

@@ -98,9 +98,11 @@ var CustomOverlayLayout = function CustomOverlayLayout(_ref) {
 
     var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
 
+    var paperProps = (0, _extends3.default)({}, props);
+
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass },
+        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

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/Overlay.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -34,10 +42,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles() {
     return {
         paper: {
-            position: 'absolute',
             width: '100%',
             zIndex: 10
         },
+        absolute: {
+            position: 'absolute'
+        },
+        relative: {
+            position: 'relative'
+        },
         left: {
             width: '200%',
             left: 0
@@ -57,13 +70,18 @@ var Overlay = function Overlay(_ref) {
 
     var classes = _ref.classes,
         children = _ref.children,
-        side = _ref.side;
+        side = _ref.side,
+        staticPosition = _ref.staticPosition,
+        props = (0, _objectWithoutProperties3.default)(_ref, ['classes', 'children', 'side', 'staticPosition']);
+
+
+    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty3.default)(_classNames, classes.relative, staticPosition === true), _classNames));
 
-    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
+    var paperProps = (0, _extends3.default)({}, props);
 
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass },
+        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

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/HiDatePicker/stylesheet.js

@@ -31,6 +31,17 @@ exports.default = function (theme) {
             width: 'calc(50% - 4px)',
             marginLeft: 4
         },
+        absolute: {
+            position: 'absolute'
+        },
+        dayPickerMargin: {
+            top: -337,
+            width: 'calc(100% - 4px)'
+        },
+        rangePickerContainer: {
+            display: 'flex',
+            alignItems: 'flex-start'
+        },
         // The container element
         container: {
             width: '100%',