@atlaskit/editor-plugin-date/dist/es2019/ui/DatePicker/index.js

Date plugin for @atlaskit/editor-core

/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { injectIntl } from 'react-intl';
import Calendar from '@atlaskit/calendar';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { dateMessages as messages } from '@atlaskit/editor-common/messages';
import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
import { timestampToIsoFormat, timestampToUTCDate } from '@atlaskit/editor-common/utils';
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import VisuallyHidden from '@atlaskit/visually-hidden';
const PopupWithListeners = withOuterListeners(Popup);
import DatePickerInput from './date-picker-input';
import { getDFLocale } from './utils/internal';

// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
const popupContentWrapper = null;
// eslint-disable-next-line @repo/internal/react/no-class-components
class DatePicker extends React.Component {
  constructor(props) {
    super(props);

    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    _defineProperty(this, "handleNewDate", date => {
      this.props.onTextChanged(date);
      this.setState({
        latestValidDate: date
      });
    });
    _defineProperty(this, "handleKeyboardSubmitDate", date => {
      this.props.onSelect(date, INPUT_METHOD.KEYBOARD);
    });
    _defineProperty(this, "handleEmptySubmitDate", () => {
      this.props.onDelete();
    });
    _defineProperty(this, "handleOnChange", ({
      day,
      month,
      year
    }) => {
      const date = {
        day,
        month,
        year
      };
      this.setState({
        latestValidDate: date
      });
    });
    _defineProperty(this, "closeDatePickerWithAnalytics", () => {
      this.props.closeDatePickerWithAnalytics({
        date: this.state.latestValidDate
      });
    });
    _defineProperty(this, "handleRef", ref => {
      const elm = ref;
      if (elm) {
        elm.focus();
      }
    });
    const timestamp = props.element.getAttribute('timestamp');
    if (timestamp) {
      // Warning: The 'Date' return type of timestampToUTCDate() is not a JS date, it's more similar
      // to the DateType type
      const {
        day,
        month,
        year
      } = timestampToUTCDate(timestamp);
      const date = {
        day,
        month,
        year
      };
      this.state = {
        selected: [timestampToIsoFormat(timestamp)],
        date,
        latestValidDate: date
      };
    }
  }
  render() {
    var _getDFLocale, _getDFLocale$options;
    const {
      element,
      onSelect,
      mountTo,
      boundariesElement,
      scrollableElement,
      intl,
      dispatchAnalyticsEvent,
      isNew,
      autoFocus,
      weekStartDay
    } = this.props;
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const timestamp = element.getAttribute('timestamp');
    if (this.state === null) {
      // Without this, you can blow up the page by slowing down cpu, opening date, typing after date
      // then clicking on date lozenge and typing quickly before it opens
      return null;
    }
    const {
      date,
      selected,
      latestValidDate
    } = this.state;
    const {
      day,
      month,
      year
    } = latestValidDate;
    if (!timestamp) {
      return null;
    }
    const defaultWeekStartDay = expValEquals('platform_editor_locale_datepicker', 'isEnabled', true) ? (_getDFLocale = getDFLocale(intl.locale)) === null || _getDFLocale === void 0 ? void 0 : (_getDFLocale$options = _getDFLocale.options) === null || _getDFLocale$options === void 0 ? void 0 : _getDFLocale$options.weekStartsOn : undefined;
    return /*#__PURE__*/React.createElement(PopupWithListeners
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    , {
      target: element
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      offset: [0, 8],
      fitHeight: 370,
      fitWidth: 340,
      handleClickOutside: this.closeDatePickerWithAnalytics,
      handleEscapeKeydown: this.closeDatePickerWithAnalytics,
      zIndex: akEditorFloatingDialogZIndex,
      mountTo: mountTo,
      boundariesElement: boundariesElement,
      scrollableElement: scrollableElement,
      preventOverflow: true
    }, /*#__PURE__*/React.createElement(VisuallyHidden, {
      "aria-atomic": true,
      role: "alert"
    }, intl.formatMessage(messages.datePickerOpenedAlert)), /*#__PURE__*/React.createElement(PlainOutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement("div", {
      ref: setOutsideClickTargetRef,
      className: ax(["_2rkofajl _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qs130s _bfhk1bhr"])
    }, /*#__PURE__*/React.createElement(DatePickerInput, {
      date: date,
      onNewDate: this.handleNewDate,
      onSubmitDate: this.handleKeyboardSubmitDate,
      onEmptySubmit: this.handleEmptySubmitDate,
      locale: intl.locale,
      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
      autoFocus: autoFocus,
      autoSelectAll: isNew
    }), /*#__PURE__*/React.createElement(Calendar, {
      onChange: this.handleOnChange
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      onSelect: date => onSelect(date, INPUT_METHOD.PICKER),
      day: day,
      month: month,
      year: year,
      selected: selected,
      ref: this.handleRef,
      weekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : defaultWeekStartDay,
      testId: 'datepicker',
      locale: expValEquals('platform_editor_locale_datepicker', 'isEnabled', true) ? intl.locale : undefined
    }))));
  }
}

// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(DatePicker);
export default _default_1;