@jetbrains/ring-ui-built 6.0.31 → 6.0.32

package/components/date-picker/date-picker.js

@@ -1,7 +1,4 @@
-import { _ as _defineProperty, j as _slicedToArray, l as _createForOfIteratorHelper, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, d as _objectSpread2, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.object.values.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -26,40 +23,18 @@ import DatePopup from './date-popup.js';
 import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import formats from './formats.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.regexp.to-string.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../global/data-tests.js';
-import 'core-js/modules/es.array.reduce.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
-import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../global/typescript-utils.js';
@@ -68,7 +43,6 @@ import '@jetbrains/icons/chevron-10px';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
@@ -83,7 +57,6 @@ import 'date-fns/isBefore';
 import 'date-fns/startOfDay';
 import 'date-fns';
 import './date-input.js';
-import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 import './months.js';
 import 'date-fns/addMonths';
@@ -112,17 +85,16 @@ import 'date-fns/isThisYear';
 import 'date-fns/setYear';
 import './weekdays.js';
 
-var _excluded = ["hidden", "className", "popupRef", "onClear", "datePopupProps", "onComplete"],
-  _excluded2 = ["className", "popupClassName", "clear", "inline", "dropdownProps", "translations"];
-var PopupComponent = function PopupComponent(_ref) {
-  var _ref$hidden = _ref.hidden,
-    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-    className = _ref.className,
-    popupRef = _ref.popupRef,
-    onClear = _ref.onClear,
-    datePopupProps = _ref.datePopupProps,
-    onComplete = _ref.onComplete,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+const PopupComponent = _ref => {
+  let {
+    hidden = false,
+    className,
+    popupRef,
+    onClear,
+    datePopupProps,
+    onComplete,
+    ...restProps
+  } = _ref;
   return /*#__PURE__*/React.createElement(Popup, _extends({
     hidden: hidden,
     className: className,
@@ -145,259 +117,232 @@ PopupComponent.propTypes = {
 /**
  * @name Date Picker
  */
-var DatePicker = /*#__PURE__*/function (_PureComponent) {
-  function DatePicker() {
-    var _this;
-    _classCallCheck(this, DatePicker);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DatePicker, [].concat(args));
-    _defineProperty(_this, "handleChange", function (change) {
-      var _this$props = _this.props,
-        onChange = _this$props.onChange,
-        withTime = _this$props.withTime,
-        applyTimeInput = _this$props.applyTimeInput;
-      var adjustedChange = withTime && !(change instanceof Date) && (change === null || change === void 0 ? void 0 : change.date) != null ? applyTimeInput(change.date, change.time) : change;
-      onChange(adjustedChange);
-    });
-    _defineProperty(_this, "clear", function () {
-      var change = null;
-      if (_this.props.range) {
-        change = {
-          from: null,
-          to: null
-        };
-      }
-      _this.handleChange(change);
-    });
-    _defineProperty(_this, "popup", void 0);
-    _defineProperty(_this, "popupRef", function (el) {
-      _this.popup = el;
-    });
-    _defineProperty(_this, "closePopup", function () {
-      var _this$popup;
-      (_this$popup = _this.popup) === null || _this$popup === void 0 || _this$popup._onCloseAttempt();
-    });
-    _defineProperty(_this, "parse", memoize(function (date) {
-      var parseDateInput = _this.props.parseDateInput;
-      if (date instanceof Date) {
-        return date;
-      }
-      if (typeof date === 'number') {
-        return new Date(date);
-      }
-      return parseDateInput(date);
-    }));
-    _defineProperty(_this, "getAnchorText", function () {
-      var _this$props2 = _this.props,
-        range = _this$props2.range,
-        datePlaceholder = _this$props2.datePlaceholder,
-        dateTimePlaceholder = _this$props2.dateTimePlaceholder,
-        rangePlaceholder = _this$props2.rangePlaceholder,
-        withTime = _this$props2.withTime,
-        displayFormat = _this$props2.displayFormat,
-        displayMonthFormat = _this$props2.displayMonthFormat,
-        displayDayFormat = _this$props2.displayDayFormat,
-        translations = _this$props2.translations,
-        locale = _this$props2.locale;
-      var translate = _this.context.translate;
-      var date = _this.parse(_this.props.date);
-      var from = _this.parse(_this.props.from);
-      var to = _this.parse(_this.props.to);
-      var time = _this.formatTime();
-      if (!range && !withTime) {
-        var _ref2;
-        return date ? displayFormat(date, locale) : (_ref2 = datePlaceholder !== null && datePlaceholder !== void 0 ? datePlaceholder : translations === null || translations === void 0 ? void 0 : translations.setDate) !== null && _ref2 !== void 0 ? _ref2 : translate('setDate');
-      } else if (!range && withTime) {
-        if (!date && !time) {
-          var _ref3;
-          return (_ref3 = dateTimePlaceholder !== null && dateTimePlaceholder !== void 0 ? dateTimePlaceholder : translations === null || translations === void 0 ? void 0 : translations.setDateTime) !== null && _ref3 !== void 0 ? _ref3 : translate('setDateTime');
-        } else {
-          return "".concat(date && displayFormat(date, locale) || '—', ", ").concat(time || '—');
-        }
-      } else if (from && to) {
-        if (!isSameYear(from, to)) {
-          return "".concat(displayFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
-        } else if (!isSameMonth(from, to)) {
-          return "".concat(displayMonthFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
-        } else if (!isSameDay(from, to)) {
-          return "".concat(displayDayFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
-        } else {
-          return "".concat(displayFormat(to, locale));
-        }
-      } else if (from) {
-        return "".concat(displayFormat(from, locale), " \u2014");
-      } else if (to) {
-        return "\u2014 ".concat(displayFormat(to, locale));
-      } else {
-        var _ref4;
-        return (_ref4 = rangePlaceholder !== null && rangePlaceholder !== void 0 ? rangePlaceholder : translations === null || translations === void 0 ? void 0 : translations.setPeriod) !== null && _ref4 !== void 0 ? _ref4 : translate('setPeriod');
-      }
-    });
-    return _this;
-  }
-  _inherits(DatePicker, _PureComponent);
-  return _createClass(DatePicker, [{
-    key: "formatTime",
-    value: function formatTime() {
-      var _this$props3 = this.props,
-        displayTimeFormat = _this$props3.displayTimeFormat,
-        locale = _this$props3.locale;
-      var date = this.parse(this.props.date);
-      if (date != null) {
-        return displayTimeFormat(date, locale);
-      }
-      return null;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$disabled, _this$props$disabled2;
-      var anchorContent = /*#__PURE__*/React.createElement("div", {
-        className: modules_0c7b7d96.anchorContent
-      }, /*#__PURE__*/React.createElement(Icon, {
-        glyph: calendarIcon,
-        className: modules_0c7b7d96.calendarIcon
-      }), this.getAnchorText(), /*#__PURE__*/React.createElement(Icon, {
-        glyph: chevronDownIcon,
-        className: modules_0c7b7d96.chevronDownIcon
-      }));
-      var _this$props4 = this.props,
-        className = _this$props4.className,
-        popupClassName = _this$props4.popupClassName,
-        clear = _this$props4.clear,
-        inline = _this$props4.inline,
-        dropdownProps = _this$props4.dropdownProps,
-        translations = _this$props4.translations,
-        datePopupProps = _objectWithoutProperties(_this$props4, _excluded2);
-      var classes = classNames(modules_0c7b7d96.datePicker, className, modules_0c7b7d96["size".concat(this.props.size)], {
-        [modules_0c7b7d96.inline]: inline
-      });
-      return /*#__PURE__*/React.createElement(Dropdown, _extends({
-        className: classes,
-        disabled: this.props.disabled,
-        anchor: inline ? /*#__PURE__*/React.createElement(Link, {
-          "data-test-ring-dropdown-anchor": true,
-          className: modules_0c7b7d96.anchor,
-          disabled: (_this$props$disabled = this.props.disabled) !== null && _this$props$disabled !== void 0 ? _this$props$disabled : false,
-          pseudo: true
-        }, this.getAnchorText()) : /*#__PURE__*/React.createElement(Button, {
-          "data-test-ring-dropdown-anchor": true,
-          className: modules_0c7b7d96.anchor,
-          text: false,
-          disabled: (_this$props$disabled2 = this.props.disabled) !== null && _this$props$disabled2 !== void 0 ? _this$props$disabled2 : false
-        }, anchorContent)
-      }, dropdownProps), /*#__PURE__*/React.createElement(PopupComponent, {
-        className: popupClassName,
-        popupRef: this.popupRef,
-        onClear: clear ? this.clear : null,
-        datePopupProps: _objectSpread2(_objectSpread2({}, datePopupProps), {}, {
-          translations,
-          onChange: this.handleChange,
-          parseDateInput: this.parse,
-          time: this.formatTime()
-        }),
-        onComplete: this.closePopup
-      }));
-    }
-  }]);
-}(PureComponent);
-_defineProperty(DatePicker, "propTypes", {
-  className: PropTypes.string,
-  popupClassName: PropTypes.string,
-  date: dateType,
-  withTime: PropTypes.bool,
-  range: PropTypes.bool,
-  from: dateType,
-  to: dateType,
-  clear: PropTypes.bool,
-  inline: PropTypes.bool,
-  displayFormat: PropTypes.func,
-  displayMonthFormat: PropTypes.func,
-  displayDayFormat: PropTypes.func,
-  displayTimeFormat: PropTypes.func,
-  parseDateInput: PropTypes.func,
-  applyTimeInput: PropTypes.func,
-  datePlaceholder: PropTypes.string,
-  dateTimePlaceholder: PropTypes.string,
-  rangePlaceholder: PropTypes.string,
-  onChange: PropTypes.func,
-  dropdownProps: PropTypes.object,
-  disabled: PropTypes.bool,
-  minDate: dateType,
-  maxDate: dateType,
-  translations: PropTypes.object,
-  locale: PropTypes.object,
-  size: PropTypes.oneOf(Object.values(Size))
-});
-_defineProperty(DatePicker, "defaultProps", {
-  className: '',
-  date: null,
-  withTime: false,
-  range: false,
-  from: null,
-  to: null,
-  clear: false,
-  inline: false,
-  size: Size.M,
-  displayFormat: function displayFormat(date, locale) {
-    return date ? format(date, 'd MMM yyyy', {
+class DatePicker extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    popupClassName: PropTypes.string,
+    date: dateType,
+    withTime: PropTypes.bool,
+    range: PropTypes.bool,
+    from: dateType,
+    to: dateType,
+    clear: PropTypes.bool,
+    inline: PropTypes.bool,
+    displayFormat: PropTypes.func,
+    displayMonthFormat: PropTypes.func,
+    displayDayFormat: PropTypes.func,
+    displayTimeFormat: PropTypes.func,
+    parseDateInput: PropTypes.func,
+    applyTimeInput: PropTypes.func,
+    datePlaceholder: PropTypes.string,
+    dateTimePlaceholder: PropTypes.string,
+    rangePlaceholder: PropTypes.string,
+    onChange: PropTypes.func,
+    dropdownProps: PropTypes.object,
+    disabled: PropTypes.bool,
+    minDate: dateType,
+    maxDate: dateType,
+    translations: PropTypes.object,
+    locale: PropTypes.object,
+    size: PropTypes.oneOf(Object.values(Size))
+  };
+  static defaultProps = {
+    className: '',
+    date: null,
+    withTime: false,
+    range: false,
+    from: null,
+    to: null,
+    clear: false,
+    inline: false,
+    size: Size.M,
+    displayFormat: (date, locale) => date ? format(date, 'd MMM yyyy', {
       locale
-    }) : '';
-  },
-  displayMonthFormat: function displayMonthFormat(date, locale) {
-    return date ? format(date, 'd MMM', {
+    }) : '',
+    displayMonthFormat: (date, locale) => date ? format(date, 'd MMM', {
       locale
-    }) : '';
-  },
-  displayDayFormat: function displayDayFormat(date, locale) {
-    return date ? format(date, 'd', {
+    }) : '',
+    displayDayFormat: (date, locale) => date ? format(date, 'd', {
       locale
-    }) : '';
-  },
-  displayTimeFormat: function displayTimeFormat(date, locale) {
-    return date ? format(date, 'HH:mm', {
+    }) : '',
+    displayTimeFormat: (date, locale) => date ? format(date, 'HH:mm', {
       locale
-    }) : '';
-  },
-  minDate: null,
-  maxDate: null,
-  onChange() {},
-  applyTimeInput(date, timeString) {
-    var _timeString$split$map;
-    var _ref5 = (_timeString$split$map = timeString === null || timeString === void 0 ? void 0 : timeString.split(':').map(Number)) !== null && _timeString$split$map !== void 0 ? _timeString$split$map : [],
-      _ref6 = _slicedToArray(_ref5, 2),
-      hours = _ref6[0],
-      minutes = _ref6[1];
-    return minutes != null ? set(date, {
-      hours,
-      minutes
-    }) : date;
-  },
-  parseDateInput(string) {
-    if (!string) {
-      return null;
-    }
-    var today = new Date();
-    var _iterator = _createForOfIteratorHelper(formats),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var format = _step.value;
-        var date = parse(string, format, today);
+    }) : '',
+    minDate: null,
+    maxDate: null,
+    onChange() {},
+    applyTimeInput(date, timeString) {
+      var _timeString$split$map;
+      const [hours, minutes] = (_timeString$split$map = timeString?.split(':').map(Number)) !== null && _timeString$split$map !== void 0 ? _timeString$split$map : [];
+      return minutes != null ? set(date, {
+        hours,
+        minutes
+      }) : date;
+    },
+    parseDateInput(string) {
+      if (!string) {
+        return null;
+      }
+      const today = new Date();
+      for (const format of formats) {
+        const date = parse(string, format, today);
         if (isValid(date)) {
           return date;
         }
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+      return null;
+    }
+  };
+  static contextType = I18nContext;
+  handleChange = change => {
+    const {
+      onChange,
+      withTime,
+      applyTimeInput
+    } = this.props;
+    const adjustedChange = withTime && !(change instanceof Date) && change?.date != null ? applyTimeInput(change.date, change.time) : change;
+    onChange(adjustedChange);
+  };
+  clear = () => {
+    let change = null;
+    if (this.props.range) {
+      change = {
+        from: null,
+        to: null
+      };
+    }
+    this.handleChange(change);
+  };
+  popup;
+  popupRef = el => {
+    this.popup = el;
+  };
+  closePopup = () => {
+    this.popup?._onCloseAttempt();
+  };
+  parse = memoize(date => {
+    const {
+      parseDateInput
+    } = this.props;
+    if (date instanceof Date) {
+      return date;
+    }
+    if (typeof date === 'number') {
+      return new Date(date);
+    }
+    return parseDateInput(date);
+  });
+  formatTime() {
+    const {
+      displayTimeFormat,
+      locale
+    } = this.props;
+    const date = this.parse(this.props.date);
+    if (date != null) {
+      return displayTimeFormat(date, locale);
     }
     return null;
   }
-});
-_defineProperty(DatePicker, "contextType", I18nContext);
+  getAnchorText = () => {
+    const {
+      range,
+      datePlaceholder,
+      dateTimePlaceholder,
+      rangePlaceholder,
+      withTime,
+      displayFormat,
+      displayMonthFormat,
+      displayDayFormat,
+      translations,
+      locale
+    } = this.props;
+    const {
+      translate
+    } = this.context;
+    const date = this.parse(this.props.date);
+    const from = this.parse(this.props.from);
+    const to = this.parse(this.props.to);
+    const time = this.formatTime();
+    if (!range && !withTime) {
+      var _ref2;
+      return date ? displayFormat(date, locale) : (_ref2 = datePlaceholder !== null && datePlaceholder !== void 0 ? datePlaceholder : translations?.setDate) !== null && _ref2 !== void 0 ? _ref2 : translate('setDate');
+    } else if (!range && withTime) {
+      if (!date && !time) {
+        var _ref3;
+        return (_ref3 = dateTimePlaceholder !== null && dateTimePlaceholder !== void 0 ? dateTimePlaceholder : translations?.setDateTime) !== null && _ref3 !== void 0 ? _ref3 : translate('setDateTime');
+      } else {
+        return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
+      }
+    } else if (from && to) {
+      if (!isSameYear(from, to)) {
+        return `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else if (!isSameMonth(from, to)) {
+        return `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else if (!isSameDay(from, to)) {
+        return `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else {
+        return `${displayFormat(to, locale)}`;
+      }
+    } else if (from) {
+      return `${displayFormat(from, locale)} —`;
+    } else if (to) {
+      return `— ${displayFormat(to, locale)}`;
+    } else {
+      var _ref4;
+      return (_ref4 = rangePlaceholder !== null && rangePlaceholder !== void 0 ? rangePlaceholder : translations?.setPeriod) !== null && _ref4 !== void 0 ? _ref4 : translate('setPeriod');
+    }
+  };
+  render() {
+    var _this$props$disabled, _this$props$disabled2;
+    const anchorContent = /*#__PURE__*/React.createElement("div", {
+      className: modules_0c7b7d96.anchorContent
+    }, /*#__PURE__*/React.createElement(Icon, {
+      glyph: calendarIcon,
+      className: modules_0c7b7d96.calendarIcon
+    }), this.getAnchorText(), /*#__PURE__*/React.createElement(Icon, {
+      glyph: chevronDownIcon,
+      className: modules_0c7b7d96.chevronDownIcon
+    }));
+    const {
+      className,
+      popupClassName,
+      clear,
+      inline,
+      dropdownProps,
+      translations,
+      ...datePopupProps
+    } = this.props;
+    const classes = classNames(modules_0c7b7d96.datePicker, className, modules_0c7b7d96[`size${this.props.size}`], {
+      [modules_0c7b7d96.inline]: inline
+    });
+    return /*#__PURE__*/React.createElement(Dropdown, _extends({
+      className: classes,
+      disabled: this.props.disabled,
+      anchor: inline ? /*#__PURE__*/React.createElement(Link, {
+        "data-test-ring-dropdown-anchor": true,
+        className: modules_0c7b7d96.anchor,
+        disabled: (_this$props$disabled = this.props.disabled) !== null && _this$props$disabled !== void 0 ? _this$props$disabled : false,
+        pseudo: true
+      }, this.getAnchorText()) : /*#__PURE__*/React.createElement(Button, {
+        "data-test-ring-dropdown-anchor": true,
+        className: modules_0c7b7d96.anchor,
+        text: false,
+        disabled: (_this$props$disabled2 = this.props.disabled) !== null && _this$props$disabled2 !== void 0 ? _this$props$disabled2 : false
+      }, anchorContent)
+    }, dropdownProps), /*#__PURE__*/React.createElement(PopupComponent, {
+      className: popupClassName,
+      popupRef: this.popupRef,
+      onClear: clear ? this.clear : null,
+      datePopupProps: {
+        ...datePopupProps,
+        translations,
+        onChange: this.handleChange,
+        parseDateInput: this.parse,
+        time: this.formatTime()
+      },
+      onComplete: this.closePopup
+    }));
+  }
+}
 
 export { DatePicker as default };