@atlaskit/editor-plugin-date 0.1.0 → 0.2.0

package/dist/es2019/ui/DatePicker/date-picker-input.js

@@ -0,0 +1,242 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ErrorMessage } from '@atlaskit/form';
+import TextField from '@atlaskit/textfield';
+import { formatDateType, parseDateType } from '../../utils/formatParse';
+import { adjustDate, findDateSegmentByPosition, isDatePossiblyValid } from '../../utils/internal';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const dateTextFieldWrapper = css`
+  padding: 22px;
+  padding-bottom: ${"var(--ds-space-150, 12px)"};
+`;
+const messages = defineMessages({
+  invalidDateError: {
+    id: 'fabric.editor.invalidDateError',
+    defaultMessage: 'Enter a valid date',
+    description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
+  }
+});
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class DatePickerInput extends React.Component {
+  constructor(props) {
+    super(props);
+    /**
+     * Focus the input textfield
+     */
+    _defineProperty(this, "focusInput", () => {
+      if (!this.inputRef) {
+        return;
+      }
+      // Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
+      this.autofocusTimeout = setTimeout(() => {
+        var _this$inputRef;
+        (_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.focus();
+      });
+    });
+    /**
+     * Select all the input text
+     */
+    _defineProperty(this, "selectInput", () => {
+      if (!this.inputRef) {
+        return;
+      }
+      // Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
+      this.autoSelectAllTimeout = setTimeout(() => {
+        var _this$inputRef2;
+        (_this$inputRef2 = this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.select();
+      });
+    });
+    _defineProperty(this, "handleInputRef", ref => {
+      const {
+        autoFocus,
+        autoSelectAll
+      } = this.props;
+      if (ref) {
+        this.inputRef = ref;
+      }
+      if (ref && autoFocus) {
+        this.focusInput();
+      }
+      if (autoSelectAll) {
+        this.selectInput();
+      }
+    });
+    _defineProperty(this, "handleChange", evt => {
+      const textFieldValue = evt.target.value;
+      const {
+        locale,
+        dispatchAnalyticsEvent
+      } = this.props;
+      const newDate = parseDateType(textFieldValue, locale);
+      if (newDate !== undefined && newDate !== null) {
+        this.setState({
+          inputText: textFieldValue
+        });
+        this.props.onNewDate(newDate);
+        if (dispatchAnalyticsEvent) {
+          dispatchAnalyticsEvent({
+            eventType: EVENT_TYPE.TRACK,
+            action: ACTION.TYPING_FINISHED,
+            actionSubject: ACTION_SUBJECT.DATE
+          });
+        }
+      } else {
+        // if invalid, just update state text (to rerender textfield)
+        this.setState({
+          inputText: textFieldValue
+        });
+      }
+    });
+    _defineProperty(this, "handleKeyPress", event => {
+      const {
+        locale,
+        dispatchAnalyticsEvent
+      } = this.props;
+      const textFieldValue = event.target.value;
+
+      // Fire event on every keypress (textfield not necessarily empty)
+      if (dispatchAnalyticsEvent && event.key !== 'Enter' && event.key !== 'Backspace') {
+        dispatchAnalyticsEvent({
+          eventType: EVENT_TYPE.TRACK,
+          action: ACTION.TYPING_STARTED,
+          actionSubject: ACTION_SUBJECT.DATE
+        });
+      }
+      if (event.key !== 'Enter') {
+        return;
+      }
+      if (textFieldValue === '') {
+        this.props.onEmptySubmit();
+        return;
+      }
+      const newDate = parseDateType(textFieldValue, locale);
+      this.props.onSubmitDate(newDate);
+    });
+    // arrow keys are only triggered by onKeyDown, not onKeyPress
+    _defineProperty(this, "handleKeyDown", event => {
+      var _this$inputRef3;
+      const dateString = event.target.value;
+      const {
+        locale
+      } = this.props;
+      let adjustment;
+      if (event.key === 'ArrowUp') {
+        adjustment = 1;
+      } else if (event.key === 'ArrowDown') {
+        adjustment = -1;
+      }
+      if (adjustment === undefined) {
+        return;
+      }
+      const {
+        dispatchAnalyticsEvent
+      } = this.props;
+      const cursorPos = (_this$inputRef3 = this.inputRef) === null || _this$inputRef3 === void 0 ? void 0 : _this$inputRef3.selectionStart;
+      if (cursorPos === null || cursorPos === undefined) {
+        return;
+      }
+      const activeSegment = findDateSegmentByPosition(cursorPos, dateString, locale);
+      if (activeSegment === undefined) {
+        return;
+      }
+      let dateSegment;
+      switch (activeSegment) {
+        case 'day':
+          dateSegment = ACTION_SUBJECT_ID.DATE_DAY;
+          break;
+        case 'month':
+          dateSegment = ACTION_SUBJECT_ID.DATE_MONTH;
+          break;
+        default:
+          dateSegment = ACTION_SUBJECT_ID.DATE_YEAR;
+      }
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          eventType: EVENT_TYPE.TRACK,
+          action: adjustment > 0 ? ACTION.INCREMENTED : ACTION.DECREMENTED,
+          actionSubject: ACTION_SUBJECT.DATE_SEGMENT,
+          attributes: {
+            dateSegment
+          }
+        });
+      }
+      const oldDateType = parseDateType(dateString, locale);
+      if (oldDateType === undefined || oldDateType === null) {
+        return;
+      }
+      const newDateType = adjustDate(oldDateType, activeSegment, adjustment);
+      this.setState({
+        inputText: formatDateType(newDateType, locale)
+      });
+      this.props.onNewDate(newDateType);
+      this.setInputSelectionPos = Math.min(cursorPos, dateString.length);
+      event.preventDefault();
+    });
+    const {
+      date
+    } = props;
+    this.setInputSelectionPos = undefined;
+    const inputText = formatDateType(date, this.props.locale);
+    this.state = {
+      inputText
+    };
+  }
+  render() {
+    const {
+      locale,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    const {
+      inputText
+    } = this.state;
+    const possiblyValid = isDatePossiblyValid(inputText);
+    const attemptedDateParse = parseDateType(inputText, locale);
+
+    // Don't display an error for an empty input.
+    const displayError = (attemptedDateParse === null || !possiblyValid) && inputText !== '';
+    return jsx("div", {
+      css: dateTextFieldWrapper
+    }, jsx(TextField, {
+      name: "datetextfield",
+      value: inputText,
+      ref: this.handleInputRef,
+      onChange: this.handleChange,
+      onKeyPress: this.handleKeyPress,
+      onKeyDown: this.handleKeyDown,
+      spellCheck: false,
+      autoComplete: "off",
+      isInvalid: displayError
+    }), displayError && jsx(ErrorMessage, null, formatMessage(messages.invalidDateError)));
+  }
+  componentDidUpdate() {
+    const setInputSelectionPos = this.setInputSelectionPos;
+    if (this.inputRef && setInputSelectionPos !== undefined) {
+      this.inputRef.setSelectionRange(setInputSelectionPos, setInputSelectionPos);
+      this.setInputSelectionPos = undefined;
+    }
+    if (this.inputRef && this.props.autoFocus) {
+      // TODO: Check if input already has focus
+      this.focusInput();
+    }
+
+    // Don't select all text here - would seleect text on each keystroke
+  }
+
+  componentWillUnmount() {
+    if (this.autofocusTimeout !== undefined) {
+      clearTimeout(this.autofocusTimeout);
+    }
+    if (this.autoSelectAllTimeout !== undefined) {
+      clearTimeout(this.autoSelectAllTimeout);
+    }
+  }
+}
+export default injectIntl(DatePickerInput);

package/dist/es2019/ui/DatePicker/index.js

@@ -0,0 +1,154 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import ReactDOM from 'react-dom';
+import { injectIntl } from 'react-intl-next';
+import Calendar from '@atlaskit/calendar';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
+import { timestampToIsoFormat, timestampToUTCDate } from '@atlaskit/editor-common/utils';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { N0, N60A } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+const PopupWithListeners = withOuterListeners(Popup);
+import DatePickerInput from './date-picker-input';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const popupContentWrapper = css`
+  padding: ${"var(--ds-space-025, 2px)"};
+  border-radius: ${borderRadius()}px;
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  background-color: ${`var(--ds-surface-overlay, ${N0})`};
+`;
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class DatePicker extends React.Component {
+  constructor(props) {
+    super(props);
+    _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 && ReactDOM.findDOMNode(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() {
+    const {
+      element,
+      onSelect,
+      mountTo,
+      boundariesElement,
+      scrollableElement,
+      intl,
+      dispatchAnalyticsEvent,
+      isNew,
+      autoFocus,
+      weekStartDay
+    } = this.props;
+    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;
+    }
+    return jsx(PopupWithListeners, {
+      target: element,
+      offset: [0, 8],
+      fitHeight: 327,
+      fitWidth: 340,
+      handleClickOutside: this.closeDatePickerWithAnalytics,
+      handleEscapeKeydown: this.closeDatePickerWithAnalytics,
+      zIndex: akEditorFloatingDialogZIndex,
+      mountTo: mountTo,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      ariaLabel: null
+    }, jsx("div", {
+      css: popupContentWrapper
+    }, jsx(DatePickerInput, {
+      date: date,
+      onNewDate: this.handleNewDate,
+      onSubmitDate: this.handleKeyboardSubmitDate,
+      onEmptySubmit: this.handleEmptySubmitDate,
+      locale: intl.locale,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      autoFocus: autoFocus,
+      autoSelectAll: isNew
+    }), jsx(Calendar, {
+      onChange: this.handleOnChange,
+      onSelect: date => onSelect(date, INPUT_METHOD.PICKER),
+      day: day,
+      month: month,
+      year: year,
+      selected: selected,
+      ref: this.handleRef,
+      weekStartDay: weekStartDay,
+      testId: 'datepicker'
+    })));
+  }
+}
+export default injectIntl(DatePicker);

package/dist/es2019/utils/formatParse.js

@@ -0,0 +1,83 @@
+import { createLocalizationProvider } from '@atlaskit/locale';
+/**
+ * Attempt to parse a string representing a date in a particular locale to a date object
+ * @param dateString The string representing the date in the given locale, eg '02/12/2000'
+ * @param l10n The localisation provider created by createLocalizationProvider
+ * @returns Editor DateType when can parse, null when can't parse or invalid
+ */
+export function parseDateType(dateString, locale) {
+  try {
+    const l10n = createLocalizationProvider(locale);
+    const date = l10n.parseDate(dateString);
+
+    // If date is invalid
+    if (isNaN(date.getTime())) {
+      return null;
+    }
+    const year = date.getFullYear();
+    if (year < 1000 || year > 9999) {
+      return null;
+    }
+    const dateObj = {
+      day: date.getDate(),
+      month: date.getMonth() + 1,
+      year
+    };
+    return dateObj;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Convert an EditorDateType to a date string string formatted for a particular locale
+ * @param date The date object
+ * @param locale The locale code string (eg. "en-AU")
+ * @returns Date string, eg "25/5/20"
+ */
+export function formatDateType(date, locale) {
+  const {
+    day,
+    month,
+    year
+  } = date;
+  const l10n = createLocalizationProvider(locale);
+
+  // The JS Date api represents month as a number between 0-11 :)
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+  const dateObj = new Date(year, month - 1, day);
+  return l10n.formatDate(dateObj);
+}
+
+/**
+ * Convert an Editor DateType to a JavaScript Date object
+ * @param date Editor DateType
+ * @returns JavaScript Date object
+ */
+export function dateTypeToDate(date) {
+  const {
+    day,
+    month,
+    year
+  } = date;
+  // The JS Date api represents month as a number between 0-11 :)
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+  const dateObj = new Date(year, month - 1, day);
+  return dateObj;
+}
+
+/**
+ * Convert a JavaScript Date to an editor DateType
+ * @param date JavaScript Date object
+ * @returns Editor DateType
+ */
+export function dateToDateType(date) {
+  const dateObj = {
+    day: date.getDate(),
+    // The JS Date api represents month as a number between 0-11 :)
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+    month: date.getMonth() + 1,
+    year: date.getFullYear()
+  };
+  return dateObj;
+}

package/dist/es2019/utils/internal.js

@@ -0,0 +1,151 @@
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import addYears from 'date-fns/addYears';
+import { dateToDateType, dateTypeToDate, formatDateType } from './formatParse';
+function isDigit(c) {
+  if (c === undefined) {
+    return false;
+  }
+  return c >= '0' && c <= '9';
+}
+
+/**
+ * Check if cursor is in first segment of a date.
+ * @param cursorPos Cursor pos, with 0 referring to the left of first char
+ * @param date Date string in any locale
+ */
+function isCursorInFirstDateSegment(cursorPos, date) {
+  let posCounter = cursorPos - 1;
+  let isAdjacent = true;
+  // The date without any non-digit characters on the end
+  const strippedDate = date.replace(/[^0-9]+$/g, '');
+  while (posCounter >= 0 && isAdjacent) {
+    const c = strippedDate[posCounter];
+    if (!isDigit(c)) {
+      isAdjacent = false;
+    }
+    posCounter -= 1;
+  }
+  return isAdjacent;
+}
+
+/**
+ * Check if cursor is in last segment of a date.
+ * @param cursorPos Cursor pos, with 0 referring to the left of first char
+ * @param date Date string in any locale
+ */
+function isCursorInLastDateSegment(cursorPos, date) {
+  let posCounter = cursorPos;
+  let isAdjacent = true;
+  // The date without any non-digit characters on the end
+  const strippedDate = date.replace(/[^0-9]+$/g, '');
+  while (posCounter < strippedDate.length && isAdjacent) {
+    const c = strippedDate[posCounter];
+    if (!isDigit(c)) {
+      isAdjacent = false;
+    }
+    posCounter += 1;
+  }
+  return isAdjacent;
+}
+
+/**
+ * Inconclusively check if a date string is valid - a value of false means it is definitely
+ * invalid, a value of true means it might be valid.
+ * @param date Date string to be parsed
+ */
+export function isDatePossiblyValid(date) {
+  for (const c of date) {
+    const isNumber = c >= '0' && c <= '9';
+    const isValidPunctuation = '. ,/'.indexOf(c) !== -1;
+    if (!(isNumber || isValidPunctuation)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Find the segment of a date a position refers to. Eg: pos 2 in 29/03/2020 is in
+ * the day segment.
+ * @param position Cursor position, with 0 referring to the left of the first char
+ * @param date The localised date string
+ * @param locale The language to interpret the date string in
+ */
+export function findDateSegmentByPosition(position, date, locale) {
+  if (position > date.length) {
+    return undefined;
+  }
+  const placeholder = getLocaleDatePlaceholder(locale);
+  if (!placeholder) {
+    return undefined;
+  }
+
+  // The placeholder without any non-digit characters on the end
+  const strippedPlaceholder = placeholder.replace(/[^ymd]+$/g, '');
+  const keyToSegment = {
+    d: 'day',
+    m: 'month',
+    y: 'year'
+  };
+  const firstSegment = keyToSegment[strippedPlaceholder[0]];
+  const lastSegment = keyToSegment[strippedPlaceholder[strippedPlaceholder.length - 1]];
+  const allPossibleSegments = ['day', 'month', 'year'];
+  const middleSegment = allPossibleSegments.filter(s => s !== firstSegment && s !== lastSegment)[0];
+  if (isCursorInFirstDateSegment(position, date)) {
+    return firstSegment;
+  }
+  if (isCursorInLastDateSegment(position, date)) {
+    return lastSegment;
+  }
+  return middleSegment;
+}
+
+/**
+ * Generate a placeholder date string for a given locale
+ * eg: locale 'hu-HU' -> 'yyyy. mm. dd.'
+ * @param locale A locale string supported by Intl.DateTimeFormat
+ * @returns A placeholder string. d=1 or 2 digit day, dd=zero padded
+ * day, same for month but letter m, yyyy=year
+ */
+export function getLocaleDatePlaceholder(locale) {
+  const uniqueDateType = {
+    day: 7,
+    month: 1,
+    year: 1992
+  };
+  const localisedDateString = formatDateType(uniqueDateType, locale);
+  const shortDateFormat = localisedDateString.replace(/\d+/g, str => {
+    if (!str) {
+      return '';
+    }
+    var num = parseInt(str);
+    switch (num % 100) {
+      case 92:
+        return str.replace(/.{1}/g, 'y');
+      case 1:
+        return str.length === 1 ? 'm' : 'mm';
+      case 7:
+        return str.length === 1 ? 'd' : 'dd';
+    }
+    return '';
+  });
+  return shortDateFormat;
+}
+
+/**
+ * Adjust date segment up or down. Eg. If day is the active segment and adjustment is -1,
+ * reduce the day by one.
+ * @param date Valid datetype
+ * @param activeSegment which part of the date is selected/being adjusted
+ * @param adjustment how many units the segment is being adjusted (can be pos or neg, usually 1 or -1)
+ */
+export function adjustDate(date, activeSegment, adjustment) {
+  const originalDate = dateTypeToDate(date);
+  const newDate = activeSegment === 'day' ? addDays(originalDate, adjustment) : activeSegment === 'month' ? addMonths(originalDate, adjustment) : addYears(originalDate, adjustment);
+  return dateToDateType(newDate);
+}
+export function isToday(date) {
+  const today = new Date();
+  return date !== undefined && today.getDate() === date.day && date.month === today.getMonth() + 1 && date.year === today.getFullYear();
+}