@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
243 lines (239 loc) • 10.3 kB
JavaScript
/* date-picker-input.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./date-picker-input.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _form = require("@atlaskit/form");
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
var _formatParse = require("./utils/formatParse");
var _internal = require("./utils/internal");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
// 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;
(0, _classCallCheck2.default)(this, DatePickerInput);
_this = _callSuper(this, DatePickerInput, [props]);
/**
* Focus the input textfield
*/
(0, _defineProperty2.default)(_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
*/
(0, _defineProperty2.default)(_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();
});
});
(0, _defineProperty2.default)(_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();
}
});
(0, _defineProperty2.default)(_this, "handleChange", function (evt) {
var textFieldValue = evt.target.value;
var _this$props2 = _this.props,
locale = _this$props2.locale,
dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
var newDate = (0, _formatParse.parseDateType)(textFieldValue, locale);
if (newDate !== undefined && newDate !== null) {
_this.setState({
inputText: textFieldValue
});
_this.props.onNewDate(newDate);
if (dispatchAnalyticsEvent) {
dispatchAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.TRACK,
action: _analytics.ACTION.TYPING_FINISHED,
actionSubject: _analytics.ACTION_SUBJECT.DATE
});
}
} else {
// if invalid, just update state text (to rerender textfield)
_this.setState({
inputText: textFieldValue
});
}
});
(0, _defineProperty2.default)(_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: _analytics.EVENT_TYPE.TRACK,
action: _analytics.ACTION.TYPING_STARTED,
actionSubject: _analytics.ACTION_SUBJECT.DATE
});
}
if (event.key !== 'Enter') {
return;
}
if (textFieldValue === '') {
_this.props.onEmptySubmit();
return;
}
var newDate = (0, _formatParse.parseDateType)(textFieldValue, locale);
_this.props.onSubmitDate(newDate);
});
// arrow keys are only triggered by onKeyDown, not onKeyPress
(0, _defineProperty2.default)(_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 = (0, _internal.findDateSegmentByPosition)(cursorPos, dateString, locale);
if (activeSegment === undefined) {
return;
}
var dateSegment;
switch (activeSegment) {
case 'day':
dateSegment = _analytics.ACTION_SUBJECT_ID.DATE_DAY;
break;
case 'month':
dateSegment = _analytics.ACTION_SUBJECT_ID.DATE_MONTH;
break;
default:
dateSegment = _analytics.ACTION_SUBJECT_ID.DATE_YEAR;
}
if (dispatchAnalyticsEvent) {
dispatchAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.TRACK,
action: adjustment > 0 ? _analytics.ACTION.INCREMENTED : _analytics.ACTION.DECREMENTED,
actionSubject: _analytics.ACTION_SUBJECT.DATE_SEGMENT,
attributes: {
dateSegment: dateSegment
}
});
}
var oldDateType = (0, _formatParse.parseDateType)(dateString, locale);
if (oldDateType === undefined || oldDateType === null) {
return;
}
var newDateType = (0, _internal.adjustDate)(oldDateType, activeSegment, adjustment);
_this.setState({
inputText: (0, _formatParse.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 = (0, _formatParse.formatDateType)(date, _this.props.locale);
_this.state = {
inputText: inputText
};
return _this;
}
(0, _inherits2.default)(DatePickerInput, _React$Component);
return (0, _createClass2.default)(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 = (0, _internal.isDatePossiblyValid)(inputText);
var attemptedDateParse = (0, _formatParse.parseDateType)(inputText, locale);
// Don't display an error for an empty input.
var displayError = (attemptedDateParse === null || !possiblyValid) && inputText !== '';
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)(["_ca0qqslr _n3tdutpp _19bvqslr _u5f3qslr"])
}, /*#__PURE__*/_react.default.createElement(_textfield.default, {
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.dateMessages.onKeyUpDownText)
}), displayError && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, formatMessage(_messages.dateMessages.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.default.Component); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(DatePickerInput);
var _default = exports.default = _default_1;