@hipay/hipay-material-ui 2.0.0-beta.59 → 2.0.0-beta.61

package/HiDatePicker/HiDateRangeSelector.js

@@ -27,13 +27,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 
 var _reactDom = require("react-dom");
 
@@ -93,14 +91,14 @@ function yearAndQuarter(format, date, t) {
   return indexY < indexM ? date.format("".concat(split[indexY]).concat(s, "[").concat(t.short_quarter, "]Q")) : date.format("[".concat(t.short_quarter, "]Q").concat(s).concat(split[indexY]));
 }
 
-function buildDateRangeOptionByKey(key, t, format) {
+function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   var from;
   var label;
   var info;
   var to;
   var type;
 
-  _moment.default.updateLocale('en', {
+  _momentTimezone.default.updateLocale('en', {
     week: {
       dow: 1
     }
@@ -109,71 +107,71 @@ function buildDateRangeOptionByKey(key, t, format) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
-      from = (0, _moment.default)().subtract(15, 'day').startOf('day');
-      to = (0, _moment.default)().endOf('day');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(15, 'day').startOf('day');
+      to = (0, _momentTimezone.default)().tz(timezoneName).endOf('day');
       type = 'primary-highlight';
       break;
 
     case 'cd':
       label = t.today;
-      from = (0, _moment.default)().startOf('day');
-      to = (0, _moment.default)().endOf('day');
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('day');
+      to = (0, _momentTimezone.default)().tz(timezoneName).endOf('day');
       info = "".concat(from.format(format));
       break;
 
     case 'pd':
       label = t.yesterday;
-      from = (0, _moment.default)().subtract(1, 'day').startOf('day');
-      to = (0, _moment.default)().subtract(1, 'day').endOf('day');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'day').startOf('day');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'day').endOf('day');
       info = "".concat(from.format(format));
       break;
 
     case 'cw':
       label = t.current_week;
-      from = (0, _moment.default)().startOf('week');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('week');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(t.short_week).concat(from.format('w'), ", \n ").concat(from.format(format), " ").concat(t.to_now);
       break;
 
     case 'pw':
       label = t.previous_week;
-      from = (0, _moment.default)().subtract(1, 'week').startOf('week');
-      to = (0, _moment.default)().subtract(1, 'week').endOf('week');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'week').startOf('week');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'week').endOf('week');
       info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(from.format(format), " ").concat(t.to, " ").concat(to.format(format));
       break;
 
     case 'cm':
       label = t.current_month;
-      from = (0, _moment.default)().startOf('month');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('month');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'pm':
       label = t.previous_month;
-      from = (0, _moment.default)().subtract(1, 'month').startOf('month');
-      to = (0, _moment.default)().subtract(1, 'month').endOf('month');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'month').startOf('month');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'month').endOf('month');
       info = "".concat(yearAndMonth(format, from), ", ").concat(from.daysInMonth(), " ").concat(t.days);
       break;
 
     case 'cq':
       label = t.current_quarter;
-      from = (0, _moment.default)().startOf('quarter');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('quarter');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(yearAndQuarter(format, from, t), ", ").concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'pq':
       label = t.previous_quarter;
-      from = (0, _moment.default)().subtract(1, 'quarter').startOf('quarter');
-      to = (0, _moment.default)().subtract(1, 'quarter').endOf('quarter');
+      from = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
+      to = (0, _momentTimezone.default)().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
       info = "".concat(yearAndQuarter(format, from, t), ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
     case 'cy':
       label = t.current_year;
-      from = (0, _moment.default)().startOf('year');
-      to = (0, _moment.default)();
+      from = (0, _momentTimezone.default)().tz(timezoneName).startOf('year');
+      to = (0, _momentTimezone.default)().tz(timezoneName);
       info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
       break;
 
@@ -245,29 +243,12 @@ function (_React$Component) {
           return _ref = {}, (0, _defineProperty2.default)(_ref, name, value), (0, _defineProperty2.default)(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
         });
 
-        var selectedOption = _this.options.find(function (option) {
-          return option.id === value;
-        });
-
-        if (selectedOption) {
-          _this.props.onChange('from', selectedOption.from.toDate());
-
-          _this.props.onChange('to', selectedOption.to.toDate());
-
-          _this.props.onChange('fromError', false);
-
-          _this.props.onChange('toError', false);
-        }
-
-        if (_this.props.returnSelectValue === true) {
-          _this.props.onChange('period', value);
-        }
+        _this.updateDates(value);
       };
     };
 
-    _this.handleSelectChange = _this.handleSelectChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.options = props.availableOptionKeys.map(function (key) {
-      return buildDateRangeOptionByKey(key, props.translations, props.format);
+      return buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName);
     });
     _this.state = {
       selectedPreset: props.defaultPreset,
@@ -285,15 +266,45 @@ function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      if (prevProps.timezoneName !== this.props.timezoneName) {
+        this.options = this.props.availableOptionKeys.map(function (key) {
+          return buildDateRangeOptionByKey(key, _this2.props.translations, _this2.props.format, _this2.props.timezoneName);
+        });
+        this.updateDates(this.state.selectedPreset);
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       clearTimeout(this.timeout); // TODO : supprimer ?
     }
+  }, {
+    key: "updateDates",
+    value: function updateDates(value) {
+      var selectedOption = this.options.find(function (option) {
+        return option.id === value;
+      });
+
+      if (selectedOption) {
+        this.props.onChange('from', new Date(selectedOption.from.format('YYYY-MM-DD HH:mm:ss')));
+        this.props.onChange('to', new Date(selectedOption.to.format('YYYY-MM-DD HH:mm:ss')));
+        this.props.onChange('fromError', false);
+        this.props.onChange('toError', false);
+      }
+
+      if (this.props.returnSelectValue === true) {
+        this.props.onChange('period', value);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props = this.props,
           disabled = _this$props.disabled,
@@ -332,7 +343,7 @@ function (_React$Component) {
         spacing: 8,
         className: classes.root,
         ref: function ref(container) {
-          _this2.container = container;
+          _this3.container = container;
         }
       }, _react.default.createElement(_Grid.default, {
         item: true,
@@ -357,7 +368,8 @@ function (_React$Component) {
         classes: {
           root: classes.dateSelect
         },
-        staticPosition: staticPosition
+        staticPosition: staticPosition,
+        onSubmit: this.props.onSubmit
       }, selectProps))), _react.default.createElement(_Grid.default, {
         item: true,
         xs: 12,
@@ -411,6 +423,7 @@ HiDateRangeSelector.defaultProps = {
   format: 'YYYY-DD-MM',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'Today',
     hour: 'Hour',
@@ -529,6 +542,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: _propTypes.default.func.isRequired,
 
+  /**
+   * Callback lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * true si champs obligatoire
    */
@@ -549,6 +567,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   staticPosition: _propTypes.default.bool,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: _propTypes.default.string,
+
   /**
    * Date de fin sélectionnée
    */

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -43,8 +43,15 @@ function (_React$Component) {
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(YearPickerOverlay).call(this, props));
     _this.years = [];
     _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    var minDate = props.minimumDate;
+
+    if (!minDate) {
+      var today = new Date();
+      minDate = new Date(today.getFullYear() - 5, today.getMonth(), today.getDate()); // by default 5 years from now
+    }
+
     var currentYear = new Date().getFullYear();
-    var minimumYear = props.minimumDate.getFullYear();
+    var minimumYear = minDate.getFullYear();
     _this.years = [currentYear]; // get years from minimum date to now
 
     if (!props.disablePastDays && currentYear > minimumYear) {
@@ -95,8 +102,6 @@ function (_React$Component) {
 }(_react.default.Component);
 
 YearPickerOverlay.defaultProps = {
-  minimumDate: new Date(2013, 4, 1),
-  // by default 1 May 2013
   translations: {
     year: 'Year'
   }

package/HiDatePicker/stylesheet.js

@@ -184,23 +184,22 @@ var _default = function _default(theme) {
 
     /* default modifiers */
     // Added to the day's cell for the current day
-    today: {
-      // color: theme.palette.primary.light,
-      position: 'relative',
-      borderRadius: '50%',
-      color: "".concat(theme.palette.neutral.dark, " !important"),
-      fontWeight: theme.typography.fontWeightMedium,
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        display: 'inline-block',
-        width: '100%',
-        height: '100%',
-        borderRadius: '50%',
-        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
-      }
+    today: {// color: theme.palette.primary.light,
+      // position: 'relative',
+      // borderRadius: '50%',
+      // color: `${theme.palette.neutral.dark} !important`,
+      // fontWeight: theme.typography.fontWeightMedium,
+      // '&:before': {
+      //     content: '""',
+      //     position: 'absolute',
+      //     top: 0,
+      //     left: 0,
+      //     display: 'inline-block',
+      //     width: '100%',
+      //     height: '100%',
+      //     borderRadius: '50%',
+      //     boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`,
+      // },
     },
     // Added to the day's cell outside the current month
     outside: {
@@ -228,6 +227,22 @@ var _default = function _default(theme) {
       color: theme.palette.primary.contrastText,
       borderRadius: '0%',
       border: 'none'
+    },
+    currentDay: {
+      position: 'relative',
+      color: "".concat(theme.palette.neutral.dark, " !important"),
+      fontWeight: theme.typography.fontWeightMedium,
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'inline-block',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
+      }
     }
   };
 };

package/HiForm/HiFormControl.js

@@ -59,13 +59,11 @@ var styles = function styles(theme) {
       marginTop: 2
     },
     iconButton: {
-      position: 'absolute',
-      right: 5,
       cursor: 'pointer',
       zIndex: 1,
-      top: '-5px',
-      height: 24,
-      width: 24,
+      height: 20,
+      width: 20,
+      marginLeft: 3,
       '&$iconButtonError': {
         color: theme.palette.negative.main
       },
@@ -74,11 +72,18 @@ var styles = function styles(theme) {
       },
       '&$iconButtonInfoActive': {
         color: theme.palette.primary.main
+      },
+      '&$iconFullWidth': {
+        position: 'absolute',
+        right: 5,
+        marginLeft: 0,
+        bottom: 0
       }
     },
     iconButtonError: {},
     iconButtonInfo: {},
     iconButtonInfoActive: {},
+    iconFullWidth: {},
     errorDiv: (0, _extends2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
@@ -97,8 +102,15 @@ var styles = function styles(theme) {
       borderTop: '4px solid #000',
       position: 'absolute',
       bottom: -4,
-      right: 13
+      '&$arrowNotFullWidth': {
+        left: 8
+      },
+      '&$arrowFullWidth': {
+        right: 13
+      }
     },
+    arrowNotFullWidth: {},
+    arrowFullWidth: {},
     errorDivArrowDown: {
       borderTopColor: theme.palette.negative.main
     },
@@ -118,7 +130,8 @@ var styles = function styles(theme) {
       borderTopColor: '#ffffff'
     },
     icon: {
-      position: 'absolute'
+      position: 'absolute',
+      fontSize: 19
     }
   };
 };
@@ -197,6 +210,8 @@ function (_React$PureComponent) {
   (0, _createClass2.default)(HiFormControl, [{
     key: "render",
     value: function render() {
+      var _classNames2;
+
       var _this$props = this.props,
           children = _this$props.children,
           classes = _this$props.classes,
@@ -229,7 +244,7 @@ function (_React$PureComponent) {
       }, others), error && errorText && helperOpen && _react.default.createElement("div", {
         className: classes.errorDiv
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown)
+        className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
       }), _react.default.createElement("span", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -238,7 +253,7 @@ function (_React$PureComponent) {
       })), helperIcon && helperText && !error && helperOpen && _react.default.createElement("div", {
         className: classes.helperDiv
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown)
+        className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
       }), _react.default.createElement("span", {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
@@ -251,12 +266,12 @@ function (_React$PureComponent) {
         disabled: disabled,
         focused: !disabled && (focused || hovered)
       }, InputLabelProps), error && errorText && _react.default.createElement(_HiIconButton.default, {
-        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError, (0, _defineProperty2.default)({}, classes.iconFullWidth, fullWidth)),
         onClick: this.handleHelperClick
       }, _react.default.createElement(_Warning.default, {
         className: (0, _classnames.default)(classes.icon)
       })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
-        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconButtonInfoActive, helperOpen), (0, _defineProperty2.default)(_classNames2, classes.iconFullWidth, fullWidth), _classNames2)),
         onClick: this.handleHelperClick
       }, _react.default.createElement(_Info.default, {
         className: (0, _classnames.default)(classes.icon)

package/HiForm/HiFormLabel.js

@@ -45,7 +45,9 @@ var styles = function styles(theme) {
       },
       '&$error': {
         color: theme.palette.negative.main
-      }
+      },
+      display: 'flex',
+      alignItems: 'center'
     }),
     optional: {
       fontSize: 11,

package/HiForm/HiInput.js

@@ -29,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _index = _interopRequireDefault(require("keycode/index"));
+
 var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
@@ -170,6 +172,18 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiInput);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiInput).call(this));
 
+    _this.handleKeyDown = function (event) {
+      var key = (0, _index.default)(event);
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+
+      if (key === 'enter' && _this.props.onSubmit) {
+        _this.props.onSubmit(event);
+      }
+    };
+
     _this.handleClick = function () {
       if (_this.props.onClick) {
         _this.props.onClick();
@@ -387,7 +401,7 @@ function (_React$PureComponent) {
         value: value,
         placeholder: placeholder,
         onFocus: this.handleFocus,
-        onKeyDown: this.props.onKeyDown,
+        onKeyDown: this.handleKeyDown,
         onClick: this.handleClick,
         onBlur: this.handleBlur,
         inputRef: this.getInputElement,
@@ -562,6 +576,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onRightIconClick: _propTypes.default.func,
 
+  /**
+   * Fonction de callback appelée lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: _propTypes.default.func,
+
   /**
    * Passe une ref callback au composant div parent
    */