@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530-2

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -1,17 +1,52 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
-import { findDOMNode } from 'react-dom';
-import Grid from '@material-ui/core/Grid';
-import { withStyles } from '@material-ui/core/styles';
-import HiSelectField from '../HiSelect/HiSelectField';
-import HiDateRangePicker from './HiDateRangePicker';
-import HiFormControl from '../HiForm/HiFormControl';
-import { isMobile } from 'react-device-detect';
-export function findSeparator(format) {
-  let str = '';
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSeparator = findSeparator;
+exports.yearAndMonth = yearAndMonth;
+exports.yearAndQuarter = yearAndQuarter;
+exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
+var _reactDom = require("react-dom");
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiSelectField = _interopRequireDefault(require("../HiSelect/HiSelectField"));
+
+var _HiDateRangePicker = _interopRequireDefault(require("./HiDateRangePicker"));
+
+var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
+var _reactDeviceDetect = require("react-device-detect");
+
+function findSeparator(format) {
+  var str = '';
 
   if (format.search('[/]') >= 0) {
     str = '/';
@@ -23,44 +58,47 @@ export function findSeparator(format) {
 
   return str;
 }
-export function yearAndMonth(format, date) {
-  const findY = el => {
+
+function yearAndMonth(format, date) {
+  var findY = function findY(el) {
     return el.toUpperCase().search('Y') >= 0;
   };
 
-  const findM = el => {
+  var findM = function findM(el) {
     return el.toUpperCase().search('M') >= 0;
   };
 
-  const s = findSeparator(format);
-  const split = format.split(s);
-  const indexY = split.findIndex(findY);
-  const indexM = split.findIndex(findM);
+  var s = findSeparator(format);
+  var split = format.split(s);
+  var indexY = split.findIndex(findY);
+  var indexM = split.findIndex(findM);
   return indexY < indexM ? date.format(split[indexY] + s + split[indexM]) : date.format(split[indexM] + s + split[indexY]);
 }
-export function yearAndQuarter(format, date, t) {
-  const findY = el => {
+
+function yearAndQuarter(format, date, t) {
+  var findY = function findY(el) {
     return el.toUpperCase().search('Y') >= 0;
   };
 
-  const findM = el => {
+  var findM = function findM(el) {
     return el.toUpperCase().search('M') >= 0;
   };
 
-  const s = findSeparator(format);
-  const split = format.split(s);
-  const indexY = split.findIndex(findY);
-  const indexM = split.findIndex(findM);
-  return indexY < indexM ? date.format(`${split[indexY]}${s}[${t.short_quarter}]Q`) : date.format(`[${t.short_quarter}]Q${s}${split[indexY]}`);
+  var s = findSeparator(format);
+  var split = format.split(s);
+  var indexY = split.findIndex(findY);
+  var indexM = split.findIndex(findM);
+  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]));
 }
-export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
-  let from;
-  let label;
-  let info;
-  let to;
-  let type; // set first day of week as Monday
-
-  moment.updateLocale('en', {
+
+function buildDateRangeOptionByKey(key, t, format, timezoneName) {
+  var from;
+  var label;
+  var info;
+  var to;
+  var type;
+
+  _momentTimezone.default.updateLocale('en', {
     week: {
       dow: 1
     }
@@ -69,72 +107,72 @@ export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
-      from = moment().tz(timezoneName).subtract(15, 'day').startOf('day');
-      to = moment().tz(timezoneName).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 = moment().tz(timezoneName).startOf('day');
-      to = moment().tz(timezoneName).endOf('day');
-      info = `${from.format(format)}`;
+      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 = moment().tz(timezoneName).subtract(1, 'day').startOf('day');
-      to = moment().tz(timezoneName).subtract(1, 'day').endOf('day');
-      info = `${from.format(format)}`;
+      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 = moment().tz(timezoneName).startOf('week');
-      to = moment().tz(timezoneName);
-      info = `${t.short_week}${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
+      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 = moment().tz(timezoneName).subtract(1, 'week').startOf('week');
-      to = moment().tz(timezoneName).subtract(1, 'week').endOf('week');
-      info = `${t.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
+      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 = moment().tz(timezoneName).startOf('month');
-      to = moment().tz(timezoneName);
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
+      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 = moment().tz(timezoneName).subtract(1, 'month').startOf('month');
-      to = moment().tz(timezoneName).subtract(1, 'month').endOf('month');
-      info = `${yearAndMonth(format, from)}, ${from.daysInMonth()} ${t.days}`;
+      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 = moment().tz(timezoneName).startOf('quarter');
-      to = moment().tz(timezoneName);
-      info = `${yearAndQuarter(format, from, t)}, ${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
+      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 = moment().tz(timezoneName).subtract(1, 'quarter').startOf('quarter');
-      to = moment().tz(timezoneName).subtract(1, 'quarter').endOf('quarter');
-      info = `${yearAndQuarter(format, from, t)}, ${to.diff(from, 'days') + 1} ${t.days}`;
+      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 = moment().tz(timezoneName).startOf('year');
-      to = moment().tz(timezoneName);
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
+      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;
 
     default:
@@ -143,210 +181,256 @@ export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
 
   return {
     id: key,
-    from,
-    info,
-    label,
-    to,
-    type
+    from: from,
+    info: info,
+    label: label,
+    to: to,
+    type: type
   };
 }
-export const styles = () => ({
-  root: {
-    maxWidth: 500,
-    alignItems: 'flex-start'
-  },
-  dateSelect: {
-    paddingTop: 1,
-    marginTop: 1
-  },
-  dateRangePicker: {
-    width: 'calc(100% + 8px)',
-    marginTop: 0
-  },
-  smSelect: {
-    padding: 4
-  },
-  smRangePicker: {}
-});
 
-class HiDateRangeSelector extends React.Component {
-  constructor(props) {
-    super();
-    this.options = [];
+var styles = function styles() {
+  return {
+    root: {
+      maxWidth: 500,
+      alignItems: 'flex-start',
+      display: 'flex',
+      '@media(max-width: 700px)': {
+        flexDirection: 'column'
+      }
+    },
+    dateRangePicker: {
+      width: 'calc(100% + 8px)',
+      marginTop: 0
+    },
+    smSelect: {
+      padding: 4
+    },
+    smRangePicker: {},
+    select: {
+      '@media(max-width: 700px)': {
+        width: '100%',
+        paddingBottom: 8
+      },
+      '@media(min-width: 700px)': {
+        minWidth: 'calc(100% / 3)',
+        paddingRight: 8
+      }
+    },
+    input: {
+      '@media(max-width: 700px)': {
+        width: '100%'
+      },
+      '@media(min-width: 700px)': {
+        width: 'calc(100% / 3 * 2)'
+      }
+    },
+    formControlLabel: {
+      top: 20
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiDateRangeSelector =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
 
-    this.handleBlur = event => {
-      if (event instanceof Object && this.props.onblur) {
-        this.props.onBlur(event);
+  function HiDateRangeSelector(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDateRangeSelector);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangeSelector).call(this));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "options", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (event) {
+      if (event instanceof Object && _this.props.onblur) {
+        _this.props.onBlur(event);
       }
-    };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReset", function (name) {
+      _this.props.onChange(name, undefined);
 
-    this.handleReset = name => {
-      this.props.onChange(name, undefined);
-      this.props.onChange(`${name}Error`, undefined);
-    };
+      _this.props.onChange("".concat(name, "Error"), undefined);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectChange", function (name) {
+      return function (event, value) {
+        _this.setState(function (prevState) {
+          var _ref;
 
-    this.handleSelectChange = name => (event, value) => {
-      this.setState(prevState => ({
-        [name]: value,
-        key: prevState.key === 1 ? 2 : 1
-      }));
-      this.updateDates(value);
-    };
+          return _ref = {}, (0, _defineProperty2.default)(_ref, name, value), (0, _defineProperty2.default)(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
+        });
 
-    this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName));
-    this.state = {
+        _this.updateDates(value);
+      };
+    });
+    _this.options = props.availableOptionKeys.map(function (key) {
+      return buildDateRangeOptionByKey(key, props.translations, props.format, props.timezoneName);
+    });
+    _this.state = {
       selectedPreset: props.defaultPreset,
       containerWidth: 0
     };
+    return _this;
   }
 
-  static getDerivedStateFromProps(props) {
-    if (props.returnSelectValue) {
-      return {
-        selectedPreset: props.defaultPreset
-      };
+  (0, _createClass2.default)(HiDateRangeSelector, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.container) {
+        this.setState({
+          containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth - 5
+        });
+      }
     }
-
-    return null;
-  }
-
-  componentDidMount() {
-    if (this.container) {
-      this.setState({
-        containerWidth: findDOMNode(this.container).clientWidth - 5
-      });
+  }, {
+    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);
+      }
     }
-  }
-
-  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);
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout); // TODO : supprimer ?
     }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout); // TODO : supprimer ?
-  }
+  }, {
+    key: "updateDates",
+    value: function updateDates(value) {
+      var selectedOption = this.options.find(function (option) {
+        return option.id === value;
+      });
 
-  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 (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);
+      }
     }
-
-    if (this.props.returnSelectValue === true) {
-      this.props.onChange('period', value);
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          enableTime = _this$props.enableTime,
+          errorText = _this$props.errorText,
+          fromError = _this$props.fromError,
+          toError = _this$props.toError,
+          helperIcon = _this$props.helperIcon,
+          helperText = _this$props.helperText,
+          idRange = _this$props.idRange,
+          idSelect = _this$props.idSelect,
+          minimumDate = _this$props.minimumDate,
+          label = _this$props.label,
+          from = _this$props.from,
+          onChange = _this$props.onChange,
+          required = _this$props.required,
+          to = _this$props.to,
+          translations = _this$props.translations,
+          classes = _this$props.classes,
+          selectProps = _this$props.selectProps,
+          staticPosition = _this$props.staticPosition,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+      var _this$state = this.state,
+          selectedPreset = _this$state.selectedPreset,
+          containerWidth = _this$state.containerWidth;
+      var hiSelectableListProps = {
+        hideCheckbox: true
+      };
+      return _react.default.createElement(_HiFormControl.default, {
+        disabled: disabled,
+        helperIcon: helperIcon,
+        helperText: helperText,
+        errorText: errorText,
+        error: !!(fromError || toError),
+        label: ' ' // TODO => Uncomment ?? psyche-717 MR Alexandre
+        // InputLabelProps={{
+        // className: classes.formControlLabel
+        // }}
+
+      }, _react.default.createElement("div", {
+        className: classes.root,
+        ref: function ref(container) {
+          _this3.container = container;
+        }
+      }, _react.default.createElement("div", {
+        className: classes.select,
+        style: containerWidth < 364 ? {
+          width: '100%',
+          paddingBottom: 8
+        } : {}
+      }, _react.default.createElement(_HiSelectField.default, (0, _extends2.default)({
+        disabled: disabled,
+        id: idSelect,
+        label: label,
+        hideCheckbox: true,
+        hiSelectableListProps: hiSelectableListProps,
+        name: 'selectedPreset',
+        options: this.options,
+        onChange: this.handleSelectChange('selectedPreset'),
+        required: required,
+        translations: translations,
+        value: selectedPreset,
+        containerWidth: this.state.containerWidth,
+        staticPosition: staticPosition,
+        onSubmit: this.props.onSubmit
+      }, selectProps))), (_reactDeviceDetect.isMobile && selectedPreset === 'custom' || !_reactDeviceDetect.isMobile) && _react.default.createElement("div", {
+        className: classes.input,
+        style: containerWidth < 364 ? {
+          width: '100%'
+        } : {}
+      }, _react.default.createElement(_HiDateRangePicker.default, (0, _extends2.default)({
+        key: this.state.key,
+        classes: {
+          root: classes.dateRangePicker
+        },
+        id: idRange,
+        from: selectedPreset ? from : undefined,
+        to: selectedPreset ? to : undefined,
+        enableTime: enableTime,
+        onChange: onChange,
+        toError: toError,
+        fromError: fromError,
+        minimumDate: minimumDate,
+        errorText: null,
+        onReset: this.handleReset,
+        disabled: disabled || selectedPreset !== 'custom',
+        translations: translations,
+        staticPosition: staticPosition,
+        onBlur: this.handleBlur,
+        hasSelector: true
+      }, props)))));
     }
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      disabled,
-      enableTime,
-      errorText,
-      fromError,
-      toError,
-      helperIcon,
-      helperText,
-      idRange,
-      idSelect,
-      minimumDate,
-      label,
-      from,
-      onChange,
-      required,
-      to,
-      translations,
-      classes,
-      selectProps,
-      staticPosition
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
-
-    const {
-      selectedPreset
-    } = this.state;
-    const hiSelectableListProps = {
-      hideCheckbox: true
-    };
-    return React.createElement(HiFormControl, {
-      disabled: disabled,
-      helperIcon: helperIcon,
-      helperText: helperText,
-      errorText: errorText,
-      error: !!(fromError || toError),
-      label: ' '
-    }, React.createElement(Grid, {
-      container: true,
-      spacing: 8,
-      className: classes.root,
-      ref: container => {
-        this.container = container;
-      }
-    }, React.createElement(Grid, {
-      item: true,
-      xs: 12,
-      sm: 4,
-      classes: {
-        'grid-sm-4': classes.smSelect
-      }
-    }, React.createElement(HiSelectField, _extends({
-      disabled: disabled,
-      id: idSelect,
-      label: label,
-      hideCheckbox: true,
-      hiSelectableListProps: hiSelectableListProps,
-      name: 'selectedPreset',
-      options: this.options,
-      onChange: this.handleSelectChange('selectedPreset'),
-      required: required,
-      translations: translations,
-      value: selectedPreset,
-      containerWidth: this.state.containerWidth,
-      classes: {
-        root: classes.dateSelect
-      },
-      staticPosition: staticPosition,
-      onSubmit: this.props.onSubmit
-    }, selectProps))), (isMobile && selectedPreset === 'custom' || !isMobile) && React.createElement(Grid, {
-      item: true,
-      xs: 12,
-      sm: 8,
-      classes: {
-        'grid-sm-8': classes.smRangePicker
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props) {
+      if (props.returnSelectValue) {
+        return {
+          selectedPreset: props.defaultPreset
+        };
       }
-    }, React.createElement(HiDateRangePicker, _extends({
-      key: this.state.key,
-      classes: {
-        root: classes.dateRangePicker
-      },
-      id: idRange,
-      from: selectedPreset ? from : undefined,
-      to: selectedPreset ? to : undefined,
-      enableTime: enableTime,
-      onChange: onChange,
-      toError: toError,
-      fromError: fromError,
-      minimumDate: minimumDate,
-      errorText: null,
-      onReset: this.handleReset,
-      disabled: disabled || selectedPreset !== 'custom',
-      translations: translations,
-      staticPosition: staticPosition,
-      onBlur: this.handleBlur,
-      hasSelector: true
-    }, props)))));
-  }
 
-}
+      return null;
+    }
+  }]);
+  return HiDateRangeSelector;
+}(_react.default.Component);
 
-HiDateRangeSelector.defaultProps = {
+(0, _defineProperty2.default)(HiDateRangeSelector, "defaultProps", {
   availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
   enableTime: false,
   returnSelectValue: false,
@@ -387,133 +471,10 @@ HiDateRangeSelector.defaultProps = {
     missing_date_from: 'Missing date from',
     missing_date_to: 'Missing date to'
   }
-};
-HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Liste des ids des options disponibles
-   */
-  availableOptionKeys: PropTypes.array,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Valeur du select par default
-   */
-  defaultPreset: PropTypes.string,
-
-  /**
-   * Si `true`, l'input sera inactif.
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Ajoute la gestion de l'heure
-   */
-  enableTime: PropTypes.bool,
-
-  /**
-   * Si `true`, le champs sera en erreur.
-   */
-  error: PropTypes.bool,
-
-  /**
-   * Texte de l'erreur
-   */
-  errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
-  /**
-   * Format de date utilisé
-   */
-  format: PropTypes.string,
-
-  /**
-   * Date de début sélectionnée
-   */
-  from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-  /**
-   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
-   */
-  helperIcon: PropTypes.bool,
-
-  /**
-   * Texte de l'aide
-   */
-  helperText: PropTypes.string,
-
-  /**
-   * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
-   */
-  idRange: PropTypes.string.isRequired,
-
-  /**
-   * id du champs select
-   */
-  idSelect: PropTypes.string.isRequired,
-
-  /**
-   * Label du champs
-   */
-  label: PropTypes.string,
-
-  /**
-   * Locale utilisée
-   */
-  locale: PropTypes.string,
-
-  /**
-   * Date minimale sélectionnable
-   */
-  minimumDate: PropTypes.instanceOf(Date),
-
-  /**
-   * Callback à la sélection d'une date
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * Callback lorsque l'utilisateur tape sur "Entrée"
-   */
-  onSubmit: PropTypes.func,
-
-  /**
-   * true si champs obligatoire
-   */
-  required: PropTypes.bool,
-
-  /**
-   * Retourne la valeur du select de la période au change du select
-   */
-  returnSelectValue: PropTypes.bool,
-
-  /**
-   * Props passées au HiSelectField
-   */
-  selectProps: PropTypes.object,
-
-  /**
-   * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
-   */
-  staticPosition: PropTypes.bool,
-
-  /**
-   * Timezone de l'utilisateur
-   */
-  timezoneName: PropTypes.string,
-
-  /**
-   * Date de fin sélectionnée
-   */
-  to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-  /**
-   * Traductions
-   */
-  translations: PropTypes.object
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   name: 'HmuiHiDateRangeSelector'
-})(HiDateRangeSelector);
+})(HiDateRangeSelector);
+
+exports.default = _default;