@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
237 lines (233 loc) • 9.41 kB
JavaScript
/* date-picker-input.tsx generated by @compiled/babel-plugin v0.39.1 */
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./date-picker-input.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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
var dateTextFieldWrapper = null;
// eslint-disable-next-line @repo/internal/react/no-class-components
var DatePickerInput = /*#__PURE__*/function (_React$Component) {
function DatePickerInput(props) {
var _this;
_classCallCheck(this, DatePickerInput);
_this = _callSuper(this, DatePickerInput, [props]);
/**
* Focus the input textfield
*/
_defineProperty(_this, "focusInput", function () {
if (!_this.inputRef) {
return;
}
// Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
_this.autofocusTimeout = setTimeout(function () {
var _this$inputRef;
(_this$inputRef = _this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.focus();
});
});
/**
* Select all the input text
*/
_defineProperty(_this, "selectInput", function () {
if (!_this.inputRef) {
return;
}
// Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
_this.autoSelectAllTimeout = setTimeout(function () {
var _this$inputRef2;
(_this$inputRef2 = _this.inputRef) === null || _this$inputRef2 === void 0 || _this$inputRef2.select();
});
});
_defineProperty(_this, "handleInputRef", function (ref) {
var _this$props = _this.props,
autoFocus = _this$props.autoFocus,
autoSelectAll = _this$props.autoSelectAll;
if (ref) {
_this.inputRef = ref;
}
if (ref && autoFocus) {
_this.focusInput();
}
if (autoSelectAll) {
_this.selectInput();
}
});
_defineProperty(_this, "handleChange", function (evt) {
var textFieldValue = evt.target.value;
var _this$props2 = _this.props,
locale = _this$props2.locale,
dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
var 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", function (event) {
var _this$props3 = _this.props,
locale = _this$props3.locale,
dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent;
var 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;
}
var newDate = parseDateType(textFieldValue, locale);
_this.props.onSubmitDate(newDate);
});
// arrow keys are only triggered by onKeyDown, not onKeyPress
_defineProperty(_this, "handleKeyDown", function (event) {
var _this$inputRef3;
var dateString = event.target.value;
var locale = _this.props.locale;
var adjustment;
if (event.key === 'ArrowUp') {
adjustment = 1;
} else if (event.key === 'ArrowDown') {
adjustment = -1;
}
if (adjustment === undefined) {
return;
}
var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
var cursorPos = (_this$inputRef3 = _this.inputRef) === null || _this$inputRef3 === void 0 ? void 0 : _this$inputRef3.selectionStart;
if (cursorPos === null || cursorPos === undefined) {
return;
}
var activeSegment = findDateSegmentByPosition(cursorPos, dateString, locale);
if (activeSegment === undefined) {
return;
}
var 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: dateSegment
}
});
}
var oldDateType = parseDateType(dateString, locale);
if (oldDateType === undefined || oldDateType === null) {
return;
}
var newDateType = adjustDate(oldDateType, activeSegment, adjustment);
_this.setState({
inputText: formatDateType(newDateType, locale)
});
_this.props.onNewDate(newDateType);
_this.setInputSelectionPos = Math.min(cursorPos, dateString.length);
event.preventDefault();
});
var date = props.date;
_this.setInputSelectionPos = undefined;
var inputText = formatDateType(date, _this.props.locale);
_this.state = {
inputText: inputText
};
return _this;
}
_inherits(DatePickerInput, _React$Component);
return _createClass(DatePickerInput, [{
key: "render",
value: function render() {
var _this$props4 = this.props,
locale = _this$props4.locale,
formatMessage = _this$props4.intl.formatMessage;
var inputText = this.state.inputText;
var possiblyValid = isDatePossiblyValid(inputText);
var attemptedDateParse = parseDateType(inputText, locale);
// Don't display an error for an empty input.
var 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)));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var 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
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.autofocusTimeout !== undefined) {
clearTimeout(this.autofocusTimeout);
}
if (this.autoSelectAllTimeout !== undefined) {
clearTimeout(this.autoSelectAllTimeout);
}
}
}]);
}(React.Component); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = injectIntl(DatePickerInput);
export default _default_1;