@atlaskit/editor-plugin-date
Version:
Date plugin for @atlaskit/editor-core
190 lines (188 loc) • 9.04 kB
JavaScript
/* index.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("./index.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 _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _utils = require("@atlaskit/editor-common/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
var _datePickerInput = _interopRequireDefault(require("./date-picker-input"));
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; })(); }
var PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
var popupContentWrapper = null;
// eslint-disable-next-line @repo/internal/react/no-class-components
var DatePicker = /*#__PURE__*/function (_React$Component) {
function DatePicker(props) {
var _this;
(0, _classCallCheck2.default)(this, DatePicker);
_this = _callSuper(this, DatePicker, [props]);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(0, _defineProperty2.default)(_this, "handleNewDate", function (date) {
_this.props.onTextChanged(date);
_this.setState({
latestValidDate: date
});
});
(0, _defineProperty2.default)(_this, "handleKeyboardSubmitDate", function (date) {
_this.props.onSelect(date, _analytics.INPUT_METHOD.KEYBOARD);
});
(0, _defineProperty2.default)(_this, "handleEmptySubmitDate", function () {
_this.props.onDelete();
});
(0, _defineProperty2.default)(_this, "handleOnChange", function (_ref) {
var day = _ref.day,
month = _ref.month,
year = _ref.year;
var date = {
day: day,
month: month,
year: year
};
_this.setState({
latestValidDate: date
});
});
(0, _defineProperty2.default)(_this, "closeDatePickerWithAnalytics", function () {
_this.props.closeDatePickerWithAnalytics({
date: _this.state.latestValidDate
});
});
(0, _defineProperty2.default)(_this, "handleRef", function (ref) {
var elm = ref;
if (elm) {
elm.focus();
}
});
var 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
var _timestampToUTCDate = (0, _utils.timestampToUTCDate)(timestamp),
day = _timestampToUTCDate.day,
month = _timestampToUTCDate.month,
year = _timestampToUTCDate.year;
var date = {
day: day,
month: month,
year: year
};
_this.state = {
selected: [(0, _utils.timestampToIsoFormat)(timestamp)],
date: date,
latestValidDate: date
};
}
return _this;
}
(0, _inherits2.default)(DatePicker, _React$Component);
return (0, _createClass2.default)(DatePicker, [{
key: "render",
value: function render() {
var _getDFLocale,
_this2 = this;
var _this$props = this.props,
element = _this$props.element,
_onSelect = _this$props.onSelect,
mountTo = _this$props.mountTo,
boundariesElement = _this$props.boundariesElement,
scrollableElement = _this$props.scrollableElement,
intl = _this$props.intl,
dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
isNew = _this$props.isNew,
autoFocus = _this$props.autoFocus,
weekStartDay = _this$props.weekStartDay;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var 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;
}
var _this$state = this.state,
date = _this$state.date,
selected = _this$state.selected,
latestValidDate = _this$state.latestValidDate;
var day = latestValidDate.day,
month = latestValidDate.month,
year = latestValidDate.year;
if (!timestamp) {
return null;
}
var defaultWeekStartDay = (0, _expValEquals.expValEquals)('platform_editor_locale_datepicker', 'isEnabled', true) ? (_getDFLocale = (0, _internal.getDFLocale)(intl.locale)) === null || _getDFLocale === void 0 || (_getDFLocale = _getDFLocale.options) === null || _getDFLocale === void 0 ? void 0 : _getDFLocale.weekStartsOn : undefined;
return /*#__PURE__*/_react.default.createElement(PopupWithListeners
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
, {
target: element
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [0, 8],
fitHeight: 370,
fitWidth: 340,
handleClickOutside: this.closeDatePickerWithAnalytics,
handleEscapeKeydown: this.closeDatePickerWithAnalytics,
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
mountTo: mountTo,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
preventOverflow: true
}, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
"aria-atomic": true,
role: "alert"
}, intl.formatMessage(_messages.dateMessages.datePickerOpenedAlert)), /*#__PURE__*/_react.default.createElement(_ui.PlainOutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
return /*#__PURE__*/_react.default.createElement("div", {
ref: setOutsideClickTargetRef,
className: (0, _runtime.ax)(["_2rkofajl _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qs130s _bfhk1bhr"])
}, /*#__PURE__*/_react.default.createElement(_datePickerInput.default, {
date: date,
onNewDate: _this2.handleNewDate,
onSubmitDate: _this2.handleKeyboardSubmitDate,
onEmptySubmit: _this2.handleEmptySubmitDate,
locale: intl.locale,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
autoFocus: autoFocus,
autoSelectAll: isNew
}), /*#__PURE__*/_react.default.createElement(_calendar.default, {
onChange: _this2.handleOnChange
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSelect: function onSelect(date) {
return _onSelect(date, _analytics.INPUT_METHOD.PICKER);
},
day: day,
month: month,
year: year,
selected: selected,
ref: _this2.handleRef,
weekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : defaultWeekStartDay,
testId: 'datepicker',
locale: (0, _expValEquals.expValEquals)('platform_editor_locale_datepicker', 'isEnabled', true) ? intl.locale : undefined
}));
}));
}
}]);
}(_react.default.Component); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(DatePicker);
var _default = exports.default = _default_1;