@jetbrains/ring-ui 4.2.9 → 4.2.10

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

@@ -0,0 +1,175 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Input from '../input/input.js';
+import { dateType } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import '@jetbrains/icons/close';
+import '../global/theme.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../global/get-uid.js';
+import '../_helpers/input.js';
+import 'date-fns/add';
+
+class DateInput extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "inputRef", el => {
+      this.input = el;
+      this.updateInput(this.props);
+    });
+
+    _defineProperty(this, "handleChange", e => this.props.onInput(e.target.value, e.target.dataset.name));
+
+    _defineProperty(this, "handleKeyDown", e => e.key === 'Enter' && this.props.onConfirm());
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      hidden,
+      text,
+      active
+    } = this.props;
+
+    if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
+      this.updateInput({
+        text,
+        active
+      });
+    }
+  }
+
+  updateInput(_ref) {
+    let {
+      text,
+      active
+    } = _ref;
+    const el = this.input;
+
+    if (!el) {
+      return;
+    }
+
+    if (active) {
+      el.focus();
+
+      if (!text) {
+        el.select();
+      }
+    } else {
+      el.blur();
+    }
+  }
+
+  render() {
+    const {
+      active,
+      divider,
+      text,
+      time,
+      name,
+      hoverDate,
+      date,
+      displayFormat,
+      translations,
+      onActivate,
+      onClear,
+      fromPlaceholder,
+      toPlaceholder,
+      timePlaceholder,
+      locale
+    } = this.props;
+    let displayText = '';
+
+    if (active && hoverDate) {
+      displayText = displayFormat(hoverDate, locale);
+    } else if (active && text != null) {
+      displayText = text;
+    } else if (date) {
+      displayText = displayFormat(date, locale);
+    } else if (name === 'time') {
+      displayText = time || '';
+    }
+
+    const placeholder = (() => {
+      switch (name) {
+        case 'from':
+          return fromPlaceholder || translations.addFirstDate;
+
+        case 'to':
+          return toPlaceholder || translations.addSecondDate;
+
+        case 'time':
+          return timePlaceholder || translations.addTime;
+
+        default:
+          return translations.selectName.replace('%name%', name);
+      }
+    })();
+
+    const classes = classNames(modules_0c7b7d96.filter, modules_0c7b7d96["".concat(name, "Input")], divider && modules_0c7b7d96["".concat(name, "InputWithDivider")], 'ring-js-shortcuts');
+    return /*#__PURE__*/React.createElement(Input, {
+      autoComplete: "off",
+      borderless: true,
+      "data-name": name,
+      inputRef: this.inputRef,
+      className: classes,
+      value: displayText,
+      onChange: this.handleChange,
+      onFocus: onActivate,
+      onKeyDown: this.handleKeyDown,
+      onClear: onClear,
+      placeholder: placeholder
+    });
+  }
+
+}
+
+_defineProperty(DateInput, "propTypes", {
+  active: PropTypes.bool,
+  divider: PropTypes.bool,
+  name: PropTypes.string,
+  text: PropTypes.string,
+  hoverDate: dateType,
+  date: dateType,
+  time: PropTypes.string,
+  displayFormat: PropTypes.func,
+  hidden: PropTypes.bool,
+  translations: PropTypes.object,
+  fromPlaceholder: PropTypes.string,
+  toPlaceholder: PropTypes.string,
+  timePlaceholder: PropTypes.string,
+  onInput: PropTypes.func,
+  onActivate: PropTypes.func,
+  onConfirm: PropTypes.func,
+  onClear: PropTypes.func,
+  locale: PropTypes.object
+});
+
+_defineProperty(DateInput, "defaultProps", {
+  fromPlaceholder: null,
+  toPlaceholder: null,
+  timePlaceholder: null,
+  translations: {
+    addFirstDate: 'Add first date',
+    addSecondDate: 'Add second date',
+    addTime: 'Add time',
+    selectName: 'Select %name%'
+  }
+});
+
+export { DateInput as default };

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

@@ -0,0 +1,367 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.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 memoize from '../global/memoize.js';
+import Popup from '../popup/popup.js';
+import Dropdown from '../dropdown/dropdown.js';
+import DatePopup from './date-popup.js';
+import { dateType, deprecatedPropType } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import formats from './formats.js';
+import DateInput from './date-input.js';
+import { A as Anchor } from '../_helpers/anchor.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 '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/startOfDay';
+import '@jetbrains/icons/calendar';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import './months.js';
+import 'date-fns/addMonths';
+import 'date-fns/getDay';
+import 'date-fns/getDaysInMonth';
+import 'date-fns/startOfHour';
+import 'date-fns/startOfMonth';
+import 'date-fns/subMonths';
+import 'date-fns/endOfMonth';
+import '../global/linear-function.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';
+import 'date-fns/add';
+import '../input/input.js';
+import '@jetbrains/icons/close';
+import '../global/theme.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../_helpers/input.js';
+
+const PopupComponent = _ref => {
+  let {
+    hidden,
+    className,
+    popupRef,
+    onClear,
+    datePopupProps,
+    onComplete,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    hidden: hidden,
+    keepMounted: true,
+    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,
+    hidden: hidden
+  })));
+};
+
+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
+ */
+
+class DatePicker extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "handleChange", change => {
+      const {
+        onChange,
+        onDateChange,
+        withTime,
+        applyTimeInput
+      } = this.props;
+      const adjustedChange = withTime && change.date != null ? applyTimeInput(change.date, change.time) : change;
+      onChange(adjustedChange);
+
+      if (onDateChange != null) {
+        onDateChange(adjustedChange);
+      }
+    });
+
+    _defineProperty(this, "clear", () => {
+      let change = null;
+
+      if (this.props.range) {
+        change = {
+          from: null,
+          to: null
+        };
+      }
+
+      this.handleChange(change);
+    });
+
+    _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);
+      }
+
+      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();
+      let text;
+
+      if (!range && !withTime) {
+        text = date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
+      } else if (!range && withTime) {
+        if (!date && !time) {
+          text = dateTimePlaceholder || translations.setDateTime;
+        } else {
+          text = "".concat(date && displayFormat(date, locale) || '—', ", ").concat(time || '—');
+        }
+      } else if (!from && !to) {
+        text = rangePlaceholder || translations.setPeriod;
+      } else if (!to) {
+        text = "".concat(displayFormat(from, locale), " \u2014");
+      } else if (!from) {
+        text = "\u2014 ".concat(displayFormat(to, locale));
+      } else if (!isSameYear(from, to)) {
+        text = "".concat(displayFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
+      } else if (!isSameMonth(from, to)) {
+        text = "".concat(displayMonthFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
+      } else if (!isSameDay(from, to)) {
+        text = "".concat(displayDayFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
+      } else {
+        text = "".concat(displayFormat(to, locale));
+      }
+
+      return text;
+    });
+  }
+
+  formatTime() {
+    const {
+      displayTimeFormat
+    } = this.props;
+    const date = this.parse(this.props.date);
+
+    if (date != null) {
+      return displayTimeFormat(date);
+    }
+
+    return null;
+  }
+
+  render() {
+    const text = this.getAnchorText();
+
+    if (this.props.disabled) {
+      return /*#__PURE__*/React.createElement(Anchor, {
+        disabled: true
+      }, text);
+    }
+
+    const {
+      className,
+      popupClassName,
+      clear,
+      dropdownProps,
+      translations,
+      ...datePopupProps
+    } = this.props;
+    const classes = classNames(modules_0c7b7d96.datePicker, className); // We want to provide translations further down to DateInput.
+    // Yet we should pass at least DateInput default translations not to have them empty.
+
+    datePopupProps.translations = Object.assign({}, DateInput.defaultProps.translations, translations);
+    return /*#__PURE__*/React.createElement(Dropdown, _extends({
+      className: classes,
+      anchor: text
+    }, dropdownProps), /*#__PURE__*/React.createElement(PopupComponent, {
+      className: popupClassName,
+      popupRef: this.popupRef,
+      onClear: clear ? this.clear : null,
+      datePopupProps: { ...datePopupProps,
+        onChange: this.handleChange,
+        parseDateInput: this.parse,
+        time: this.formatTime()
+      },
+      onComplete: this.closePopup
+    }));
+  }
+
+}
+
+_defineProperty(DatePicker, "propTypes", {
+  className: PropTypes.string,
+  popupClassName: PropTypes.string,
+  date: dateType,
+  withTime: PropTypes.bool,
+  range: PropTypes.bool,
+  from: dateType,
+  to: dateType,
+  clear: 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,
+  // TODO: Remove in 5.0
+  onDateChange: deprecatedPropType('Use "onChange"'),
+  dropdownProps: PropTypes.object,
+  disabled: PropTypes.bool,
+  minDate: dateType,
+  maxDate: dateType,
+  translations: PropTypes.object,
+  locale: PropTypes.object
+});
+
+_defineProperty(DatePicker, "defaultProps", {
+  className: '',
+  date: null,
+  withTime: false,
+  range: false,
+  from: null,
+  to: null,
+  clear: false,
+  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;
+
+    const [hours, minutes] = (_timeString$split = timeString === null || timeString === void 0 ? void 0 : timeString.split(':')) !== null && _timeString$split !== void 0 ? _timeString$split : [];
+    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 };