@jetbrains/ring-ui 5.0.127 → 5.0.129

package/dist/date-picker/date-picker.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -120,90 +120,127 @@ PopupComponent.propTypes = {
  * @name Date Picker
  */
 class DatePicker extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "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);
-    });
-    _defineProperty(this, "clear", () => {
-      let change = null;
-      if (this.props.range) {
-        change = {
-          from: null,
-          to: null
-        };
-      }
-      this.handleChange(change);
-    });
-    _defineProperty(this, "popup", void 0);
-    _defineProperty(this, "popupRef", el => {
-      this.popup = el;
-    });
-    _defineProperty(this, "closePopup", () => {
-      this.popup?._onCloseAttempt();
-    });
-    _defineProperty(this, "parse", memoize(date => {
-      const {
-        parseDateInput
-      } = this.props;
-      if (date instanceof Date) {
-        return date;
-      }
-      if (typeof date === 'number') {
-        return new Date(date);
+  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: (date, locale) => date ? format(date, 'd MMM', {
+      locale
+    }) : '',
+    displayDayFormat: (date, locale) => date ? format(date, 'd', {
+      locale
+    }) : '',
+    displayTimeFormat: (date, locale) => date ? format(date, 'HH:mm', {
+      locale
+    }) : '',
+    datePlaceholder: 'Set a date',
+    dateTimePlaceholder: 'Set date and time',
+    rangePlaceholder: 'Set a period',
+    minDate: null,
+    maxDate: null,
+    onChange() {},
+    translations: {
+      setDate: 'Set a date',
+      setDateTime: 'Set date and time',
+      setPeriod: 'Set a period'
+    },
+    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;
       }
-      return parseDateInput(date);
-    }));
-    _defineProperty(this, "getAnchorText", () => {
-      const {
-        range,
-        datePlaceholder,
-        dateTimePlaceholder,
-        rangePlaceholder,
-        withTime,
-        displayFormat,
-        displayMonthFormat,
-        displayDayFormat,
-        translations,
-        locale
-      } = this.props;
-      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) {
-        return date ? displayFormat(date, locale) : datePlaceholder !== null && datePlaceholder !== void 0 ? datePlaceholder : translations.setDate;
-      } else if (!range && withTime) {
-        if (!date && !time) {
-          return dateTimePlaceholder !== null && dateTimePlaceholder !== void 0 ? dateTimePlaceholder : translations.setDateTime;
-        } else {
-          return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
+      const today = new Date();
+      for (const format of formats) {
+        const date = parse(string, format, today);
+        if (isValid(date)) {
+          return date;
         }
-      } 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 {
-        return rangePlaceholder !== null && rangePlaceholder !== void 0 ? rangePlaceholder : translations.setPeriod;
       }
-    });
-  }
+      return null;
+    }
+  };
+  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,
@@ -215,6 +252,49 @@ class DatePicker extends PureComponent {
     }
     return null;
   }
+  getAnchorText = () => {
+    const {
+      range,
+      datePlaceholder,
+      dateTimePlaceholder,
+      rangePlaceholder,
+      withTime,
+      displayFormat,
+      displayMonthFormat,
+      displayDayFormat,
+      translations,
+      locale
+    } = this.props;
+    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) {
+      return date ? displayFormat(date, locale) : datePlaceholder !== null && datePlaceholder !== void 0 ? datePlaceholder : translations.setDate;
+    } else if (!range && withTime) {
+      if (!date && !time) {
+        return dateTimePlaceholder !== null && dateTimePlaceholder !== void 0 ? dateTimePlaceholder : translations.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 {
+      return rangePlaceholder !== null && rangePlaceholder !== void 0 ? rangePlaceholder : translations.setPeriod;
+    }
+  };
   render() {
     var _this$props$disabled, _this$props$disabled2;
     const anchorContent = /*#__PURE__*/React.createElement("div", {
@@ -269,88 +349,5 @@ class DatePicker extends 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: (date, locale) => date ? format(date, 'd MMM yyyy', {
-    locale
-  }) : '',
-  displayMonthFormat: (date, locale) => date ? format(date, 'd MMM', {
-    locale
-  }) : '',
-  displayDayFormat: (date, locale) => date ? format(date, 'd', {
-    locale
-  }) : '',
-  displayTimeFormat: (date, locale) => date ? format(date, 'HH:mm', {
-    locale
-  }) : '',
-  datePlaceholder: 'Set a date',
-  dateTimePlaceholder: 'Set date and time',
-  rangePlaceholder: 'Set a period',
-  minDate: null,
-  maxDate: null,
-  onChange() {},
-  translations: {
-    setDate: 'Set a date',
-    setDateTime: 'Set date and time',
-    setPeriod: 'Set a period'
-  },
-  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;
-      }
-    }
-    return null;
-  }
-});
 
 export { DatePicker as default };

package/dist/date-picker/date-popup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isAfter from 'date-fns/isAfter';
@@ -68,101 +68,33 @@ class DatePopup extends Component {
     }
     return next === prev;
   }
+  static propTypes = {
+    className: PropTypes.string,
+    date: dateType,
+    range: PropTypes.bool,
+    withTime: PropTypes.bool,
+    time: PropTypes.string,
+    from: dateType,
+    to: dateType,
+    renderAfterCalendar: PropTypes.func,
+    displayFormat: PropTypes.func,
+    parseDateInput: PropTypes.func,
+    onChange: PropTypes.func,
+    onComplete: PropTypes.func,
+    onClear: PropTypes.func,
+    minDate: dateType,
+    maxDate: dateType,
+    hidden: PropTypes.bool,
+    fromPlaceholder: PropTypes.string,
+    toPlaceholder: PropTypes.string,
+    timePlaceholder: PropTypes.string,
+    locale: PropTypes.object
+  };
+  static defaultProps = {
+    onChange() {}
+  };
   constructor(props) {
     super(props);
-    _defineProperty(this, "_scrollDate", void 0);
-    _defineProperty(this, "_scrollTS", void 0);
-    _defineProperty(this, "isInTimeMode", () => !this.props.range && this.props.withTime || false);
-    _defineProperty(this, "componentRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "handleWheel", e => {
-      if (e.cancelable) {
-        e.preventDefault();
-      }
-    });
-    _defineProperty(this, "isValidDate", parsedText => {
-      const minDate = this.parse(this.props.minDate, 'date');
-      const maxDate = this.parse(this.props.maxDate, 'date');
-      if (parsedText) {
-        return !(minDate && isBefore(parsedText, minDate) || maxDate && isAfter(parsedText, maxDate));
-      }
-      return false;
-    });
-    _defineProperty(this, "scheduleScroll", () => {
-      const current = this.state.scrollDate && this.parse(this.state.scrollDate, 'date') || this.parse(this.props[this.state.active], 'date') || new Date();
-      const goal = this._scrollDate;
-      if (!current || !goal || DatePopup.sameDay(goal, current)) {
-        this._scrollDate = null;
-        this._scrollTS = null;
-        return;
-      }
-      if (this._scrollTS) {
-        const diff = goal - Number(current);
-        const dt = Date.now() - this._scrollTS;
-        const next = goal - diff * Math.E ** (-dt / scrollExpDelay);
-        this.setState({
-          scrollDate: next
-        });
-      }
-      this._scrollTS = Date.now();
-      window.requestAnimationFrame(this.scheduleScroll);
-    });
-    _defineProperty(this, "scrollTo", scrollDate => {
-      this._scrollDate = scrollDate;
-      if (!this._scrollTS) {
-        this.scheduleScroll();
-      }
-    });
-    _defineProperty(this, "hoverHandler", hoverDate => this.setState({
-      hoverDate
-    }));
-    _defineProperty(this, "handleActivate", memoize(name => () => this.setState({
-      active: name
-    })));
-    _defineProperty(this, "handleInput", (text, name) => {
-      if (name !== 'time') {
-        const parsed = this.parse(text, name);
-        if (this.isValidDate(parsed)) {
-          this.scrollTo(Number(parsed));
-        }
-      }
-      this.setState({
-        text,
-        hoverDate: null
-      });
-    });
-    _defineProperty(this, "handleConfirm", memoize(name => () => this.confirm(name)));
-    _defineProperty(this, "selectHandler", date => {
-      if (this.isInTimeMode()) {
-        this.setState({
-          active: 'time'
-        }, () => this.select({
-          date
-        }));
-      } else {
-        this.select({
-          [this.state.active]: date
-        });
-      }
-    });
-    _defineProperty(this, "handleScroll", scrollDate => this.setState({
-      scrollDate
-    }));
-    _defineProperty(this, "onClear", e => {
-      let changes;
-      if (this.props.range) {
-        changes = {
-          from: null,
-          to: null
-        };
-      } else {
-        changes = {
-          date: null
-        };
-      }
-      this.select(changes);
-      this.props.onClear?.(e);
-      this.componentRef.current?.querySelector('input')?.focus();
-    });
     const defaultState = {
       text: null,
       hoverDate: null,
@@ -213,6 +145,15 @@ class DatePopup extends Component {
       this.componentRef.current.removeEventListener('wheel', this.handleWheel);
     }
   }
+  _scrollDate;
+  _scrollTS;
+  isInTimeMode = () => !this.props.range && this.props.withTime || false;
+  componentRef = /*#__PURE__*/React.createRef();
+  handleWheel = e => {
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+  };
   parse(text, type) {
     if (type === 'time') {
       return parseTime(String(text));
@@ -312,6 +253,90 @@ class DatePopup extends Component {
       [name]: result
     });
   }
+  isValidDate = parsedText => {
+    const minDate = this.parse(this.props.minDate, 'date');
+    const maxDate = this.parse(this.props.maxDate, 'date');
+    if (parsedText) {
+      return !(minDate && isBefore(parsedText, minDate) || maxDate && isAfter(parsedText, maxDate));
+    }
+    return false;
+  };
+  scheduleScroll = () => {
+    const current = this.state.scrollDate && this.parse(this.state.scrollDate, 'date') || this.parse(this.props[this.state.active], 'date') || new Date();
+    const goal = this._scrollDate;
+    if (!current || !goal || DatePopup.sameDay(goal, current)) {
+      this._scrollDate = null;
+      this._scrollTS = null;
+      return;
+    }
+    if (this._scrollTS) {
+      const diff = goal - Number(current);
+      const dt = Date.now() - this._scrollTS;
+      const next = goal - diff * Math.E ** (-dt / scrollExpDelay);
+      this.setState({
+        scrollDate: next
+      });
+    }
+    this._scrollTS = Date.now();
+    window.requestAnimationFrame(this.scheduleScroll);
+  };
+  scrollTo = scrollDate => {
+    this._scrollDate = scrollDate;
+    if (!this._scrollTS) {
+      this.scheduleScroll();
+    }
+  };
+  hoverHandler = hoverDate => this.setState({
+    hoverDate
+  });
+  handleActivate = memoize(name => () => this.setState({
+    active: name
+  }));
+  handleInput = (text, name) => {
+    if (name !== 'time') {
+      const parsed = this.parse(text, name);
+      if (this.isValidDate(parsed)) {
+        this.scrollTo(Number(parsed));
+      }
+    }
+    this.setState({
+      text,
+      hoverDate: null
+    });
+  };
+  handleConfirm = memoize(name => () => this.confirm(name));
+  selectHandler = date => {
+    if (this.isInTimeMode()) {
+      this.setState({
+        active: 'time'
+      }, () => this.select({
+        date
+      }));
+    } else {
+      this.select({
+        [this.state.active]: date
+      });
+    }
+  };
+  handleScroll = scrollDate => this.setState({
+    scrollDate
+  });
+  onClear = e => {
+    let changes;
+    if (this.props.range) {
+      changes = {
+        from: null,
+        to: null
+      };
+    } else {
+      changes = {
+        date: null
+      };
+    }
+    this.select(changes);
+    this.props.onClear?.(e);
+    this.componentRef.current?.querySelector('input')?.focus();
+  };
   render() {
     const {
       range,
@@ -420,30 +445,5 @@ class DatePopup extends Component {
     })), /*#__PURE__*/React.createElement(Years, calendarProps)), this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state));
   }
 }
-_defineProperty(DatePopup, "propTypes", {
-  className: PropTypes.string,
-  date: dateType,
-  range: PropTypes.bool,
-  withTime: PropTypes.bool,
-  time: PropTypes.string,
-  from: dateType,
-  to: dateType,
-  renderAfterCalendar: PropTypes.func,
-  displayFormat: PropTypes.func,
-  parseDateInput: PropTypes.func,
-  onChange: PropTypes.func,
-  onComplete: PropTypes.func,
-  onClear: PropTypes.func,
-  minDate: dateType,
-  maxDate: dateType,
-  hidden: PropTypes.bool,
-  fromPlaceholder: PropTypes.string,
-  toPlaceholder: PropTypes.string,
-  timePlaceholder: PropTypes.string,
-  locale: PropTypes.object
-});
-_defineProperty(DatePopup, "defaultProps", {
-  onChange() {}
-});
 
 export { DatePopup as default };