@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
236 lines (230 loc) • 7.87 kB
JavaScript
/* date-picker-input.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./date-picker-input.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { injectIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { dateMessages as messages } from '@atlaskit/editor-common/messages';
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 = null;
// 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 /*#__PURE__*/React.createElement("div", {
className: ax(["_ca0qqslr _n3tdutpp _19bvqslr _u5f3qslr"])
}, /*#__PURE__*/React.createElement(TextField, {
name: "datetextfield",
value: inputText,
ref: this.handleInputRef,
onChange: this.handleChange,
onKeyPress: this.handleKeyPress,
onKeyDown: this.handleKeyDown,
spellCheck: false,
autoComplete: "off",
isInvalid: displayError,
"aria-label": formatMessage(messages.onKeyUpDownText)
}), displayError && /*#__PURE__*/React.createElement(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) {
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);
}
}
}
// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(DatePickerInput);
export default _default_1;