@hipay/hipay-material-ui 2.0.0-beta.60 → 2.0.0-beta.62

package/HiSelect/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -11,16 +13,46 @@ Object.defineProperty(exports, "default", {
     return _HiSelect.default;
   }
 });
+Object.defineProperty(exports, "HiNestedSelect", {
+  enumerable: true,
+  get: function get() {
+    return _HiNestedSelect.default;
+  }
+});
 Object.defineProperty(exports, "HiSelectField", {
   enumerable: true,
   get: function get() {
     return _HiSelectField.default;
   }
 });
-Object.defineProperty(exports, "SelectInput", {
+Object.defineProperty(exports, "HiSelectInput", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectInput.default;
+  }
+});
+Object.defineProperty(exports, "HiSelectContent", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectContent.default;
+  }
+});
+Object.defineProperty(exports, "HiNestedSelectContent", {
+  enumerable: true,
+  get: function get() {
+    return _HiNestedSelectContent.default;
+  }
+});
+Object.defineProperty(exports, "findFinalItemRecursively", {
+  enumerable: true,
+  get: function get() {
+    return _HiNestedSelectContent.findFinalItemRecursively;
+  }
+});
+Object.defineProperty(exports, "getRecursiveFinalItemIdList", {
   enumerable: true,
   get: function get() {
-    return _SelectInput.default;
+    return _HiNestedSelectContent.getRecursiveFinalItemIdList;
   }
 });
 Object.defineProperty(exports, "HiSuggestSelect", {
@@ -38,9 +70,15 @@ Object.defineProperty(exports, "HiSuggestSelectField", {
 
 var _HiSelect = _interopRequireDefault(require("./HiSelect"));
 
+var _HiNestedSelect = _interopRequireDefault(require("./HiNestedSelect"));
+
 var _HiSelectField = _interopRequireDefault(require("./HiSelectField"));
 
-var _SelectInput = _interopRequireDefault(require("./SelectInput"));
+var _HiSelectInput = _interopRequireDefault(require("./HiSelectInput"));
+
+var _HiSelectContent = _interopRequireDefault(require("./HiSelectContent"));
+
+var _HiNestedSelectContent = _interopRequireWildcard(require("./HiNestedSelectContent"));
 
 var _HiSuggestSelect = _interopRequireDefault(require("./HiSuggestSelect"));
 

package/HiSelectableList/HiSelectableList.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,6 +35,8 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var styles = function styles() {
   return {
     root: {
@@ -42,6 +46,8 @@ var styles = function styles() {
 };
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
+ * - la navigation au clavier est gérée par l'event KeyDown
+ * - le premier focus est géré sur le DidMount
  */
 
 
@@ -71,6 +77,23 @@ function (_React$PureComponent) {
       };
     };
 
+    _this.handleKeyDown = function (event) {
+      var nextItem;
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -103,7 +126,8 @@ function (_React$PureComponent) {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
-
+        ,
+        item: item
       }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
@@ -112,6 +136,10 @@ function (_React$PureComponent) {
     };
 
     _this.compareItem = function (a, b) {
+      if (_this.props.comparItemFunc) {
+        return _this.props.comparItemFunc(a, b);
+      }
+
       if (a.label === undefined || b.label === undefined) {
         return 0;
       }
@@ -133,6 +161,24 @@ function (_React$PureComponent) {
   }
 
   (0, _createClass2.default)(HiSelectableList, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
+        var item = this.props.overlay.getElementsByTagName('li')[0];
+        var value = (0, _typeof2.default)(this.props.value) === 'object' ? this.props.value[0] : this.props.value;
+
+        if (value) {
+          if (typeof this.props.value[0] === 'string') {
+            item = this.props.overlay.getElementsByTagName('li')[value];
+          } else if (typeof this.props.value[0] === 'number') {
+            item = this.props.overlay.getElementsByTagName('li')[value - 1];
+          }
+        }
+
+        item.focus();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -147,7 +193,11 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement(_List.default, {
-        className: classes.root
+        className: classes.root,
+        onKeyDown: this.handleKeyDown,
+        innerRef: function innerRef(el) {
+          _this2.el = el;
+        }
       }, itemList.filter(function (item) {
         return !(item.displayed === false);
       }) // don't remove if undefined
@@ -184,6 +234,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: _propTypes.default.object,
 
+  /**
+   * Fonction de comparaison utilisée pour les tris
+   */
+  comparItemFunc: _propTypes.default.func,
+
   /**
    * Désactive la listes
    */
@@ -222,6 +277,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSelect: _propTypes.default.func.isRequired,
 
+  /**
+   * Overlay récupéré au niveau de la div précédant le HiSelectInput
+   */
+  overlay: _propTypes.default.object,
+
   /**
    * Liste des id des éléments sélectionnés
    */
@@ -235,7 +295,12 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Liste des éléments à placer en premier, peu import le tri
    */
-  sortAppendList: _propTypes.default.array
+  sortAppendList: _propTypes.default.array,
+
+  /**
+   * Value(s) du select
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiSelectableList/HiSelectableListItem.js

@@ -47,6 +47,8 @@ var _helpers = require("../utils/helpers");
 
 var _pure = _interopRequireDefault(require("recompose/pure"));
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
 var PureListItem = (0, _pure.default)(_ListItem.default);
 
@@ -98,9 +100,6 @@ var styles = function styles(theme) {
       cursor: 'default',
       opacity: 'inherit'
     },
-    selected: {
-      backgroundColor: theme.palette.action.selected
-    },
     pinned: {
       display: 'inherit',
       marginRight: 8,
@@ -198,6 +197,7 @@ var styles = function styles(theme) {
 };
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
+ * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
 
@@ -222,6 +222,20 @@ function (_React$PureComponent) {
       };
     };
 
+    _this.handleKeyDown = function (item) {
+      return function (event) {
+        var key = (0, _keycode.default)(event);
+
+        if (key === 'space' || key === 'enter') {
+          event.preventDefault();
+
+          if (item) {
+            _this.props.onSelect(null, item);
+          }
+        }
+      };
+    };
+
     _this.state = {
       hover: false
     };
@@ -292,8 +306,6 @@ function (_React$PureComponent) {
           fallbackImage = _this$props2.fallbackImage,
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
-          onKeyDown = _this$props2.onKeyDown,
-          onKeyUp = _this$props2.onKeyUp,
           indeterminate = _this$props2.indeterminate,
           indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
@@ -309,7 +321,8 @@ function (_React$PureComponent) {
           secondaryLabel = _this$props2.secondaryLabel,
           thin = _this$props2.thin,
           type = _this$props2.type,
-          color = _this$props2.color; // Return simple loader list item
+          color = _this$props2.color,
+          item = _this$props2.item; // Return simple loader list item
 
       if (type === 'loader') {
         return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
@@ -335,14 +348,13 @@ function (_React$PureComponent) {
         classes: {
           root: classes.root
         },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
         disabled: disabled
       }, disabled || {
         onClick: onSelect,
         onMouseEnter: this.setHover(true),
         onMouseLeave: this.setHover(false),
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
+        onKeyDown: this.handleKeyDown(item)
       }, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
@@ -350,7 +362,7 @@ function (_React$PureComponent) {
       }), _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
       }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
-        tabIndex: onKeyDown ? '-1' : 0,
+        tabIndex: 0,
         classes: {
           root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
         },

package/README.md

@@ -78,6 +78,18 @@ https://reactjs.org/docs/reconciliation.html
 - Attention aux refs et aux mutations
 ex: ne pas passer une arrow fonction directement dans les props d'un composant. Même pour y inclure un index ou une valeur contextuelle !
 
+#### Gestion des événements clavier
+
+- **Evénement capturé** : on part sur le _KeyDown_, c'est le seul à capturer toutes les touches du clavier ([source](https://www.w3schools.com/jsref/event_onkeypress.asp))
+
+- **Capturing** : il s'agit de la première phase par laquelle passe un événement lors de sa capture, durant celle-ci, il descend dans l’arborescence HTML en partant de l'élément racine (en React : Parent => Enfant, on peut le capturer avec _onKeyDownCapture_)
+
+- **Bubbling** : c'est la deuxième phase par laquelle passe un événement et celle capturée par défaut lorsque l'on fait un _onKeyDown_. A ce moment, l'événement remonte vers l'élément HTML racine (en React : Enfant => Parent)
+
+- **PreventDefault** : on l'utilisera à chaque fois qu'il faudra éviter un comportement par défaut du navigateur.
+
+- **StopPropagation** : il permet de stopper la capture dès qu'il est appelé. Couplé au Capturing on peut, par exemple, éviter qu'un événement soit capturé dans un composant enfant.
+
 ## Contribuer
 
 #### A savoir
@@ -300,3 +312,6 @@ au lieu de
 Attention aux index.js.
 La bonne syntaxe est :
 export { default as MyComponente } from './MyComponente';
+
+
+[source]: https://www.w3schools.com/jsref/event_onkeypress.asp

package/es/HiDatePicker/HiDatePicker.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
+import moment from 'moment-timezone';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import HiLocaleUtils from './hiLocaleUtils';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
@@ -20,9 +21,18 @@ import styles from './stylesheet';
 class HiDatePicker extends React.Component {
   constructor(props) {
     super();
+
+    this.handleKeyDown = name => event => {
+      if (event.key === 'Escape' && !event.shiftKey) {
+        this.datePickerInput.hideDayPicker();
+        event.stopPropagation();
+      }
+    };
+
+    const today = moment().tz(props.timezoneName);
     this.state = {
       openedPanel: 'calendar',
-      currentMonth: props.value ? props.value : new Date()
+      currentMonth: props.value ? props.value : new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
     }; // this.formatDate = this.formatDate.bind(this);
 
     this.handleCalendarClick = this.handleCalendarClick.bind(this);
@@ -46,15 +56,16 @@ class HiDatePicker extends React.Component {
     clearTimeout(this.timeout);
   }
 
-  handleReset() {
-    this.handleCurrentMonthChange(new Date());
-    this.props.onReset();
-  }
-
   handleInputChange(event) {
     this.props.onChange(event.target.value);
   }
 
+  handleReset() {
+    const today = moment().tz(this.props.timezoneName);
+    this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
+    this.props.onReset();
+  }
+
   handleDayChange(day, modifiers) {
     if (day) {
       if (modifiers.selected) {
@@ -198,11 +209,12 @@ class HiDatePicker extends React.Component {
     const {
       currentMonth
     } = this.state;
+    const today = moment().tz(this.props.timezoneName);
 
     const effectiveDisabledDays = _objectSpread({}, disablePastDays && {
-      before: new Date()
+      before: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
     }, disableFutureDays && {
-      after: new Date()
+      after: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
     }, disabledDays);
 
     const modifiersStyles = {
@@ -229,7 +241,8 @@ class HiDatePicker extends React.Component {
       fromMonth: minimumDate,
       modifiers: {
         disabled: effectiveDisabledDays,
-        selected: value
+        selected: value,
+        [classes.currentDay]: new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
       },
       modifiersStyles,
       month: currentMonth
@@ -248,7 +261,8 @@ class HiDatePicker extends React.Component {
     });
 
     return React.createElement("div", {
-      className: classes.root
+      className: classes.root,
+      onKeyDown: this.handleKeyDown()
     }, React.createElement(DayPickerInput, {
       ref: el => {
         this.datePickerInput = el;
@@ -279,6 +293,7 @@ HiDatePicker.defaultProps = {
   locale: 'fr-FR',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'today'
   }
@@ -347,6 +362,11 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSubmit: PropTypes.func,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: PropTypes.string,
+
   /**
    * Traductions
    */

package/es/HiDatePicker/HiDateRangePicker.js

@@ -3,6 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
+import moment from 'moment-timezone';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import HiLocaleUtils from './hiLocaleUtils';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
@@ -17,7 +18,6 @@ import NavBar from './NavBar';
 import Weekday from './Weekday';
 import { HiTextField } from '../HiForm';
 import styles from './stylesheet';
-import moment from 'moment';
 import HiFormControl from '../HiForm/HiFormControl';
 
 class HiDateRangePicker extends React.Component {
@@ -58,8 +58,10 @@ class HiDateRangePicker extends React.Component {
 
     this.onDayToClick = day => {
       let change = moment(day) >= moment(this.props.from);
+      const today = moment().tz(this.props.timezoneName);
+      const todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
 
-      if (change && this.props.disableFutureDays && moment(day).utc() > moment().utc().endOf('day')) {
+      if (change && day > todayDate) {
         change = false;
       }
 
@@ -85,11 +87,13 @@ class HiDateRangePicker extends React.Component {
 
     this.handleChange = (name, day) => {
       const {
-        translations
+        translations,
+        timezoneName
       } = this.props;
       let date;
       let error;
-      const now = new Date();
+      const today = moment().tz(timezoneName);
+      const now = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
       const {
         minimumDate,
         disableFutureDays,
@@ -115,8 +119,8 @@ class HiDateRangePicker extends React.Component {
           error = translations.to_superior_from;
         } else if (moment(date).utc() < moment(minimumDate).utc().startOf('day')) {
           error = translations.date_inferior_min_date.replace('%s', moment(minimumDate).format(format));
-        } else if (disableFutureDays && moment(date).utc() > moment(now).utc().endOf('day')) {
-          error = translations.date_superior_max_date.replace('%s', moment().format(format));
+        } else if (disableFutureDays && date > now) {
+          error = translations.date_superior_max_date.replace('%s', moment().tz(timezoneName).format(format));
         }
 
         if (!this.props.enableTime) {
@@ -165,15 +169,11 @@ class HiDateRangePicker extends React.Component {
 
     this.handleReset = name => {
       this.handleChange(name, undefined);
-      this.setState(prevState => ({
-        keyFrom: prevState.keyFrom === 1 ? 2 : 1,
-        keyTo: prevState.keyTo === 1 ? 2 : 1
-      }));
     };
 
     this.handleKeyDown = name => event => {
       if (event.key === 'Tab' && !event.shiftKey) {
-        let nodeName = document.activeElement.nodeName;
+        const nodeName = document.activeElement.nodeName;
 
         if (this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
           document.activeElement.nextSibling.focus();
@@ -191,6 +191,14 @@ class HiDateRangePicker extends React.Component {
             document.activeElement.blur();
           }, 1);
         }
+      } else if (event.key === 'Escape' && !event.shiftKey) {
+        if (name === 'from') {
+          this.fromInput.hideDayPicker();
+        } else if (name === 'to') {
+          this.toInput.hideDayPicker();
+        }
+
+        event.stopPropagation();
       }
     };
 
@@ -276,12 +284,12 @@ class HiDateRangePicker extends React.Component {
       }, yearPickerProps, propsOverlay));
     };
 
+    const _today = moment().tz(this.props.timezoneName);
+
     this.state = {
-      currentMonth: new Date(),
+      currentMonth: new Date(_today.year(), _today.month(), _today.date()),
       focusedInput: '',
-      openedPanel: 'calendar',
-      keyFrom: 1,
-      keyTo: 1
+      openedPanel: 'calendar'
     };
   }
 
@@ -313,14 +321,17 @@ class HiDateRangePicker extends React.Component {
       errorText,
       hasSelector,
       helperIcon,
-      helperText
+      helperText,
+      timezoneName
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
+          props = _objectWithoutProperties(_this$props, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText", "timezoneName"]);
 
-    const now = new Date();
+    const today = moment().tz(timezoneName);
+    const now = new Date(today.year(), today.month(), today.date(), 23, 59, 59, 999);
     const modifiers = {
       start: from,
-      end: to
+      end: to,
+      [classes.currentDay]: new Date(today.year(), today.month(), today.date())
     };
     const modifiersStyles = {
       start: {
@@ -440,7 +451,7 @@ class HiDateRangePicker extends React.Component {
       onFocus: () => this.handleDayPickerFocus('from'),
       onKeyDown: this.handleKeyDown('from')
     }, React.createElement("div", null, React.createElement(DayPickerInput, {
-      key: this.state.keyFrom,
+      key: '1',
       ref: el => {
         this.fromInput = el;
       },
@@ -461,7 +472,7 @@ class HiDateRangePicker extends React.Component {
       onBlur: () => this.handleDayPickerBlur('to'),
       onKeyDown: this.handleKeyDown('to')
     }, React.createElement(DayPickerInput, {
-      key: this.state.keyTo,
+      key: '1',
       ref: el => {
         this.toInput = el;
       },
@@ -505,6 +516,7 @@ HiDateRangePicker.defaultProps = {
   locale: 'fr-FR',
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
+  timezoneName: 'Europe/Paris',
   translations: {
     today: 'today',
     hour: 'Hour',
@@ -636,6 +648,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   staticPosition: PropTypes.bool,
 
+  /**
+   * Timezone de l'utilisateur
+   */
+  timezoneName: PropTypes.string,
+
   /**
    * Date de fin sélectionnée
    */

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -6,7 +6,7 @@ import moment from 'moment-timezone';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '../styles/withStyles';
-import HiSelectField from '../HiSelectNew/HiSelectField';
+import HiSelectField from '../HiSelect/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
 import HiFormControl from '../HiForm/HiFormControl';
 export function findSeparator(format) {
@@ -187,18 +187,7 @@ class HiDateRangeSelector extends React.Component {
         [name]: value,
         key: prevState.key === 1 ? 2 : 1
       }));
-      const selectedOption = this.options.find(option => 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);
-      }
+      this.updateDates(value);
     };
 
     this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName));
@@ -226,10 +215,32 @@ class HiDateRangeSelector extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.timezoneName !== this.props.timezoneName) {
+      this.options = this.props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, this.props.translations, this.props.format, this.props.timezoneName));
+      this.updateDates(this.state.selectedPreset);
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.timeout); // TODO : supprimer ?
   }
 
+  updateDates(value) {
+    const selectedOption = this.options.find(option => 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);
+    }
+  }
+
   render() {
     const _this$props = this.props,
           {