@jetbrains/ring-ui 4.1.1 → 4.1.2

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

@@ -0,0 +1,365 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.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 '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 = `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
+        }
+      } else if (!from && !to) {
+        text = rangePlaceholder || translations.setPeriod;
+      } else if (!to) {
+        text = `${displayFormat(from, locale)} —`;
+      } else if (!from) {
+        text = `— ${displayFormat(to, locale)}`;
+      } else if (!isSameYear(from, to)) {
+        text = `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else if (!isSameMonth(from, to)) {
+        text = `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else if (!isSameDay(from, to)) {
+        text = `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else {
+        text = `${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 };