@jetbrains/ring-ui 5.1.23 → 5.1.24

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

@@ -0,0 +1,408 @@
+import { _ as _defineProperty, j as _slicedToArray, m as _createForOfIteratorHelper, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends, g as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.map.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import format from 'date-fns/format';
+import isSameDay from 'date-fns/isSameDay';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import isValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+import set from 'date-fns/set';
+import calendarIcon from '@jetbrains/icons/calendar';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import memoize from '../global/memoize.js';
+import Popup from '../popup/popup.js';
+import Dropdown from '../dropdown/dropdown.js';
+import Icon from '../icon/icon.js';
+import { Button } from '../button/button.js';
+import Link from '../link/link.js';
+import { Size } from '../input/input.js';
+import { I18nContext } from '../i18n/i18n-context.js';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.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';
+import '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/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';
+import '../_helpers/link.js';
+import '@jetbrains/icons/close-12px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
+import '../_helpers/input.js';
+import '../i18n/i18n.js';
+import 'date-fns/isAfter';
+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';
+import 'date-fns/getDay';
+import 'date-fns/getDaysInMonth';
+import 'date-fns/startOfMonth';
+import 'date-fns/subMonths';
+import 'date-fns/endOfMonth';
+import '../global/linear-function.js';
+import '../global/use-event-callback.js';
+import './month.js';
+import 'date-fns/addDays';
+import 'date-fns/setDay';
+import './day.js';
+import 'date-fns/getDate';
+import 'date-fns/isToday';
+import './month-names.js';
+import 'date-fns/isThisMonth';
+import 'date-fns/startOfYear';
+import './month-slider.js';
+import 'date-fns/addYears';
+import 'date-fns/subYears';
+import './years.js';
+import 'date-fns/getYear';
+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);
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    hidden: hidden,
+    className: className,
+    ref: popupRef,
+    directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT]
+  }, restProps), /*#__PURE__*/React.createElement(DatePopup, _extends({
+    onClear: onClear
+  }, datePopupProps, {
+    onComplete: onComplete
+  })));
+};
+PopupComponent.propTypes = {
+  hidden: PropTypes.bool,
+  className: PropTypes.string,
+  popupRef: PropTypes.func,
+  onClear: PropTypes.func,
+  datePopupProps: PropTypes.shape(DatePopup.propTypes),
+  onComplete: PropTypes.func
+};
+/**
+ * @name Date Picker
+ */
+var DatePicker = /*#__PURE__*/function (_PureComponent) {
+  _inherits(DatePicker, _PureComponent);
+  var _super = _createSuper(DatePicker);
+  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 = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "clear", function () {
+      var change = null;
+      if (_this.props.range) {
+        change = {
+          from: null,
+          to: null
+        };
+      }
+      _this.handleChange(change);
+    });
+    _defineProperty(_assertThisInitialized(_this), "popup", void 0);
+    _defineProperty(_assertThisInitialized(_this), "popupRef", function (el) {
+      _this.popup = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "closePopup", function () {
+      var _this$popup;
+      (_this$popup = _this.popup) === null || _this$popup === void 0 || _this$popup._onCloseAttempt();
+    });
+    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_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;
+  }
+  _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
+      }));
+    }
+  }]);
+  return DatePicker;
+}(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', {
+      locale
+    }) : '';
+  },
+  displayMonthFormat: function displayMonthFormat(date, locale) {
+    return date ? format(date, 'd MMM', {
+      locale
+    }) : '';
+  },
+  displayDayFormat: function displayDayFormat(date, locale) {
+    return date ? format(date, 'd', {
+      locale
+    }) : '';
+  },
+  displayTimeFormat: function displayTimeFormat(date, locale) {
+    return 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);
+        if (isValid(date)) {
+          return date;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return null;
+  }
+});
+_defineProperty(DatePicker, "contextType", I18nContext);
+
+export { DatePicker as default };

package/dist/date-picker/date-popup.d.ts

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DatePickerChange, DatePopupBaseProps, DateSpecificPopupProps, DatePopupState, RangeSpecificPopupProps, TimeSpecificPopupProps, Field } from './consts';
+export type DatePopupProps = DatePopupBaseProps & (DateSpecificPopupProps | TimeSpecificPopupProps | RangeSpecificPopupProps);
+export default class DatePopup extends Component<DatePopupProps, DatePopupState> {
+    static sameDay(next: Date | number | null, prev: Date | number | null): boolean;
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        range: PropTypes.Requireable<boolean>;
+        withTime: PropTypes.Requireable<boolean>;
+        time: PropTypes.Requireable<string>;
+        from: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        to: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        renderAfterCalendar: PropTypes.Requireable<(...args: any[]) => any>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onComplete: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        fromPlaceholder: PropTypes.Requireable<string>;
+        toPlaceholder: PropTypes.Requireable<string>;
+        timePlaceholder: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        onChange(): void;
+    };
+    constructor(props: DatePopupProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DatePopupBaseProps, prevState: DatePopupState): void;
+    componentWillUnmount(): void;
+    private _scrollDate?;
+    private _scrollTS?;
+    isInTimeMode: () => boolean;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
+    parse(text: string | null | undefined, type: 'time'): string;
+    parse(text: Date | number | string | null | undefined, type?: 'date' | 'from' | 'to'): Date;
+    select(changes: DatePickerChange): void;
+    confirm(name: Field): void;
+    isValidDate: (parsedText: Date) => boolean;
+    scheduleScroll: () => void;
+    scrollTo: (scrollDate: number) => void;
+    hoverHandler: (hoverDate: Date) => void;
+    handleActivate: (arg: Field) => () => void;
+    handleInput: (text: string, name: Field) => void;
+    handleConfirm: (arg: Field) => () => void;
+    selectHandler: (date: Date) => void;
+    handleScroll: (scrollDate: number) => void;
+    onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    render(): React.JSX.Element;
+}