@atlaskit/editor-core 188.10.5 → 188.11.0

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

@@ -1,233 +0,0 @@
-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 { findDateSegmentByPosition, adjustDate, isDatePossiblyValid } from '../../utils/internal';
-import { parseDateType, formatDateType } from '../../utils/formatParse';
-import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
-import TextField from '@atlaskit/textfield';
-import { ErrorMessage } from '@atlaskit/form';
-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'
-  }
-});
-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(() => {
-        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(() => {
-        this.inputRef.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 => {
-      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.inputRef.selectionStart;
-      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 (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/plugins/date/ui/DatePicker/index.js

@@ -1,152 +0,0 @@
-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 { Popup } from '@atlaskit/editor-common/ui';
-import { timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common/utils';
-import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import Calendar from '@atlaskit/calendar';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N60A, N0 } from '@atlaskit/theme/colors';
-import { withOuterListeners } from '@atlaskit/editor-common/ui';
-const PopupWithListeners = withOuterListeners(Popup);
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { injectIntl } from 'react-intl-next';
-import DatePickerInput from './date-picker-input';
-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})`};
-`;
-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/plugins/date/utils/formatParse.js

@@ -1,83 +0,0 @@
-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/plugins/date/utils/internal.js

@@ -1,151 +0,0 @@
-import { formatDateType, dateTypeToDate, dateToDateType } from './formatParse';
-import addDays from 'date-fns/addDays';
-import addMonths from 'date-fns/addMonths';
-import addYears from 'date-fns/addYears';
-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();
-}