@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/HiDatePicker/HiDateRangeSelector.js

@@ -0,0 +1,609 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSeparator = findSeparator;
+exports.yearAndMonth = yearAndMonth;
+exports.yearAndQuarter = yearAndQuarter;
+exports.buildDateRangeInfo = buildDateRangeInfo;
+exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+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");
+
+var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
+
+var _CalendarBlank = _interopRequireDefault(require("mdi-material-ui/CalendarBlank"));
+
+function findSeparator(format) {
+  var str = '';
+
+  if (format.search('[/]') >= 0) {
+    str = '/';
+  } else if (format.search('[-]') >= 0) {
+    str = '-';
+  } else if (format.search('[.]') >= 0) {
+    str = '.';
+  }
+
+  return str;
+}
+
+function yearAndMonth(format, date) {
+  var findY = function findY(el) {
+    return el.toUpperCase().search('Y') >= 0;
+  };
+
+  var findM = function findM(el) {
+    return el.toUpperCase().search('M') >= 0;
+  };
+
+  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]);
+}
+
+function yearAndQuarter(format, date, t) {
+  var findY = function findY(el) {
+    return el.toUpperCase().search('Y') >= 0;
+  };
+
+  var findM = function findM(el) {
+    return el.toUpperCase().search('M') >= 0;
+  };
+
+  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]));
+}
+
+function buildDateRangeInfo(t, from, to, format) {
+  var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var _options$prefix = options.prefix,
+      prefix = _options$prefix === void 0 ? null : _options$prefix,
+      _options$toNow = options.toNow,
+      toNow = _options$toNow === void 0 ? false : _options$toNow,
+      _options$displayDays = options.displayDays,
+      displayDays = _options$displayDays === void 0 ? true : _options$displayDays; // From
+
+  var info = "".concat(t.from, " ").concat(from.format(format), " "); // To
+
+  if (toNow) {
+    info += "".concat(t.to_now);
+  } else {
+    info += "".concat(t.to, " ").concat(to.format(format));
+  } // Prefix
+
+
+  switch (prefix) {
+    case "week":
+      info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(info);
+      break;
+
+    case "quarter":
+      info = "".concat(t.short_quarter).concat(from.format('Q'), ", ").concat(info);
+      break;
+
+    default:
+      break;
+  } // Display number of days
+
+
+  if (displayDays) {
+    var days = Math.ceil(to.diff(from, 'days', true));
+    info = "".concat(days, " ").concat(t.days, ", ").concat(info);
+  }
+
+  return info;
+}
+
+function buildDateRangeOptionByKey(key, t, format) {
+  var from;
+  var label;
+  var info;
+  var to;
+
+  switch (key) {
+    case 'custom':
+      label = t.custom_period;
+      from = (0, _momentTimezone.default)().subtract(15, 'day').startOf('day');
+      to = (0, _momentTimezone.default)().endOf('day');
+      info = t.custom_period_info;
+      break;
+
+    case 'cd':
+      label = t.today;
+      from = (0, _momentTimezone.default)().startOf('day');
+      to = (0, _momentTimezone.default)();
+      info = "".concat(from.format(format));
+      break;
+
+    case 'pd':
+      label = t.yesterday;
+      from = (0, _momentTimezone.default)().subtract(1, 'day').startOf('day');
+      to = (0, _momentTimezone.default)().subtract(1, 'day').endOf('day');
+      info = "".concat(from.format(format));
+      break;
+
+    case 'cw':
+      label = t.current_week;
+      from = (0, _momentTimezone.default)().startOf('week');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "week",
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    case 'pw':
+      label = t.previous_week;
+      from = (0, _momentTimezone.default)().subtract(1, 'week').startOf('week');
+      to = (0, _momentTimezone.default)().subtract(1, 'week').endOf('week');
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "week",
+        toNow: false,
+        displayDays: true
+      });
+      break;
+
+    case 'cm':
+      label = t.current_month;
+      from = (0, _momentTimezone.default)().startOf('month');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    case 'pm':
+      label = t.previous_month;
+      from = (0, _momentTimezone.default)().subtract(1, 'month').startOf('month');
+      to = (0, _momentTimezone.default)().subtract(1, 'month').endOf('month');
+      info = "".concat(from.daysInMonth(), " ").concat(t.days, ", ").concat(yearAndMonth(format, from));
+      break;
+
+    case 'cq':
+      label = t.current_quarter;
+      from = (0, _momentTimezone.default)().startOf('quarter');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "quarter",
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    case 'pq':
+      label = t.previous_quarter;
+      from = (0, _momentTimezone.default)().subtract(1, 'quarter').startOf('quarter');
+      to = (0, _momentTimezone.default)().subtract(1, 'quarter').endOf('quarter');
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "quarter",
+        toNow: false,
+        displayDays: true
+      });
+      break;
+
+    case 'cy':
+      label = t.current_year;
+      from = (0, _momentTimezone.default)().startOf('year');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    case 'yy':
+      label = t.year_on_year;
+      from = (0, _momentTimezone.default)().subtract(1, 'years');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    default:
+      break;
+  }
+
+  return {
+    id: key,
+    from: from,
+    info: info,
+    label: label,
+    to: to
+  };
+}
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      maxWidth: 500,
+      alignItems: 'flex-start',
+      display: 'flex',
+      '@media(max-width: 700px)': {
+        flexDirection: 'column'
+      }
+    },
+    dateRangePicker: {
+      width: '100%',
+      marginTop: 0
+    },
+    smSelect: {
+      padding: theme.spacing(1)
+    },
+    smRangePicker: {},
+    select: {
+      '@media(max-width: 700px)': {
+        width: '100%',
+        paddingBottom: theme.spacing(2)
+      },
+      '@media(min-width: 700px)': {
+        minWidth: 200,
+        width: 'calc(100% - 244px)',
+        marginRight: theme.spacing(2)
+      }
+    },
+    input: {
+      '@media(max-width: 700px)': {
+        width: '100%'
+      },
+      '@media(min-width: 700px)': {
+        width: 236
+      }
+    },
+    formControlLabel: {
+      top: theme.spacing(5)
+    }
+  };
+};
+
+exports.styles = styles;
+var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
+var CUSTOM_PERIOD_LIST = ['custom'];
+
+var _ref2 = _react.default.createElement(_Calendar.default, null);
+
+var _ref3 = _react.default.createElement(_CalendarBlank.default, null);
+
+var HiDateRangeSelector =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
+
+  function HiDateRangeSelector(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDateRangeSelector);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangeSelector).call(this));
+    _this.options = [];
+
+    _this.handleBlur = function (event) {
+      if (event instanceof Object && _this.props.onblur) {
+        _this.props.onBlur(event);
+      }
+    };
+
+    _this.handleReset = function (name) {
+      _this.props.onChange(name, undefined);
+
+      _this.props.onChange("".concat(name, "Error"), undefined);
+    };
+
+    _this.handleSelectChange = function (name) {
+      return function (event, value) {
+        _this.setState(function (prevState) {
+          var _ref;
+
+          return _ref = {}, (0, _defineProperty2.default)(_ref, name, value), (0, _defineProperty2.default)(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
+        });
+
+        _this.updateDates(value);
+      };
+    };
+
+    _this.options = props.availableOptionKeys.map(function (key) {
+      return buildDateRangeOptionByKey(key, props.translations, props.format);
+    });
+    _this.state = {
+      selectedPreset: props.defaultPreset,
+      containerWidth: 0
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDateRangeSelector, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.container) {
+        this.setState({
+          containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth - 5
+        });
+      }
+    }
+  }, {
+    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', 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);
+      }
+    }
+  }, {
+    key: "buildOptions",
+    value: function buildOptions() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          availableOptionKeys = _this$props.availableOptionKeys,
+          translations = _this$props.translations;
+      var selectedPreset = this.state.selectedPreset;
+      var options = [];
+      var presetOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return PRESET_PERIOD_LIST.includes(option);
+      });
+      var customOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return CUSTOM_PERIOD_LIST.includes(option);
+      });
+
+      if (presetOptionsAvailable) {
+        options.push({
+          id: "preset_periods_subheader",
+          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          pinned: true,
+          icon: _ref2,
+          label: translations.preset_periods
+        });
+        presetOptionsAvailable.forEach(function (option) {
+          options.push(_this2.options.find(function (_option) {
+            return _option.id === option;
+          }));
+        });
+      }
+
+      if (customOptionsAvailable) {
+        options.push({
+          id: "custom_periods_subheader",
+          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          pinned: true,
+          icon: _ref3,
+          label: translations.custom_periods
+        });
+        customOptionsAvailable.forEach(function (option) {
+          options.push(_this2.options.find(function (_option) {
+            return _option.id === option;
+          }));
+        });
+      }
+
+      return options;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          availableOptionKeys = _this$props2.availableOptionKeys,
+          disabled = _this$props2.disabled,
+          enableTime = _this$props2.enableTime,
+          errorText = _this$props2.errorText,
+          fromError = _this$props2.fromError,
+          toError = _this$props2.toError,
+          helperIcon = _this$props2.helperIcon,
+          helperText = _this$props2.helperText,
+          idRange = _this$props2.idRange,
+          idSelect = _this$props2.idSelect,
+          minimumDate = _this$props2.minimumDate,
+          label = _this$props2.label,
+          from = _this$props2.from,
+          onChange = _this$props2.onChange,
+          required = _this$props2.required,
+          to = _this$props2.to,
+          translations = _this$props2.translations,
+          classes = _this$props2.classes,
+          selectProps = _this$props2.selectProps,
+          staticPosition = _this$props2.staticPosition,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "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 = {
+        secondaryInline: false,
+        hideCheckbox: true,
+        lazy: false
+      };
+      var options = this.buildOptions();
+      return _react.default.createElement(_HiFormControl.default, {
+        disabled: disabled,
+        helperIcon: helperIcon,
+        helperText: helperText,
+        errorText: errorText,
+        error: !!(fromError || toError),
+        label: ' ',
+        InputLabelProps: {
+          className: classes.formControlLabel
+        }
+      }, _react.default.createElement("div", {
+        className: classes.root,
+        style: containerWidth < 364 ? {
+          flexDirection: 'column'
+        } : {},
+        ref: function ref(container) {
+          _this3.container = container;
+        }
+      }, _react.default.createElement("div", {
+        className: classes.select,
+        style: containerWidth < 364 ? {
+          minWidth: '100%',
+          paddingBottom: 8,
+          paddingRight: 0
+        } : {}
+      }, _react.default.createElement(_HiSelectField.default, (0, _extends2.default)({
+        disabled: disabled,
+        id: idSelect,
+        label: label,
+        hideCheckbox: true,
+        hiSelectableListProps: hiSelectableListProps,
+        name: 'selectedPreset',
+        options: 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)))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props) {
+      if (props.returnSelectValue) {
+        return {
+          selectedPreset: props.defaultPreset
+        };
+      }
+
+      return null;
+    }
+  }]);
+  return HiDateRangeSelector;
+}(_react.default.Component);
+
+HiDateRangeSelector.defaultProps = {
+  availableOptionKeys: [].concat(PRESET_PERIOD_LIST, CUSTOM_PERIOD_LIST),
+  enableTime: false,
+  returnSelectValue: false,
+  staticPosition: false,
+  locale: 'fr-FR',
+  format: 'YYYY-DD-MM',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
+  translations: {
+    today: 'Today',
+    hour: 'Hour',
+    minute: 'Minute',
+    month: 'Month',
+    quarter: 'Quarter',
+    week: 'Week',
+    short_week: 'W',
+    short_quarter: 'Q',
+    yearAndMonth: 'YYYY[-]MM',
+    yearAndQuarter: 'YYYY[-Q]Q',
+    year: 'Year',
+    days: 'days',
+    custom_period: 'Custom Period',
+    yesterday: 'Yesterday',
+    from: 'from',
+    to: 'to',
+    to_now: 'to now',
+    current_week: 'Current Week',
+    previous_week: 'Previous Week',
+    current_month: 'Current Month',
+    previous_month: 'Previous Month',
+    current_quarter: 'Current Quarter',
+    previous_quarter: 'Previous Quarter',
+    current_year: 'Current Year',
+    year_on_year: "Last twelve months",
+    invalid_format: 'The date format is not valid',
+    to_superior_from: 'Date from cannot be greater than date to',
+    date_superior_max_date: 'Date from cannot be greater than %s',
+    date_inferior_min_date: 'Date from cannot be before than %s',
+    missing_date_from: 'Missing date from',
+    missing_date_to: 'Missing date to',
+    preset_periods: 'Preset periods',
+    custom_periods: 'Custom periods',
+    custom_period_info: "Select a custom period"
+  }
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiHiDateRangeSelector'
+})(HiDateRangeSelector);
+
+exports.default = _default;