@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
259 lines (258 loc) • 13.1 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;
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 _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _alignTextCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-text-center"));
var _alignTextLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-text-left"));
var _alignTextRight = _interopRequireDefault(require("@atlaskit/icon/core/align-text-right"));
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _types = require("../../pm-plugins/types");
var _Alignment = _interopRequireDefault(require("../Alignment"));
var _iconMap = require("./icon-map");
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 @repo/internal/react/no-class-components
var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
function AlignmentToolbar() {
var _this;
(0, _classCallCheck2.default)(this, AlignmentToolbar);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, AlignmentToolbar, [].concat(args));
(0, _defineProperty2.default)(_this, "toolbarItemRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "state", {
isOpen: false
});
(0, _defineProperty2.default)(_this, "changeAlignment", function (align, togglePopup) {
if (togglePopup) {
_this.toggleOpen();
}
return _this.props.changeAlignment(align);
});
(0, _defineProperty2.default)(_this, "toggleOpen", function () {
_this.setState({
isOpen: !_this.state.isOpen
});
});
(0, _defineProperty2.default)(_this, "toggleOpenByKeyboard", function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
_this.setState({
isOpen: !_this.state.isOpen
});
}
});
(0, _defineProperty2.default)(_this, "handleOnItemActivated", function (_ref) {
var item = _ref.item,
_ref$shouldCloseMenu = _ref.shouldCloseMenu,
shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
return _this.changeAlignment(item.value.name, shouldCloseMenu);
});
(0, _defineProperty2.default)(_this, "hide", function (attrs) {
if (_this.state.isOpen) {
_this.setState({
isOpen: false
});
if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.event.key === 'Escape') {
var _this$toolbarItemRef;
(_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
}
}
});
(0, _defineProperty2.default)(_this, "hideOnEscape", function () {
var _this$toolbarItemRef2;
_this.hide();
(_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
});
return _this;
}
(0, _inherits2.default)(AlignmentToolbar, _React$Component);
return (0, _createClass2.default)(AlignmentToolbar, [{
key: "render",
value: function render() {
var _alignmentLabelMap$al,
_this2 = this;
var isOpen = this.state.isOpen;
var _this$props = this.props,
popupsMountPoint = _this$props.popupsMountPoint,
popupsBoundariesElement = _this$props.popupsBoundariesElement,
popupsScrollableElement = _this$props.popupsScrollableElement,
isReducedSpacing = _this$props.isReducedSpacing,
align = _this$props.align,
disabled = _this$props.disabled,
intl = _this$props.intl,
api = _this$props.api;
var alignment = align !== null && align !== void 0 ? align : 'start';
var title = intl.formatMessage(_messages.alignmentMessages.alignment);
var alignmentLabelMap = {
start: intl.formatMessage(_messages.alignmentMessages.alignLeft),
center: intl.formatMessage(_messages.alignmentMessages.alignCenter),
end: intl.formatMessage(_messages.alignmentMessages.alignRight)
};
var ariaLabel = "".concat(title, ", ").concat((_alignmentLabelMap$al = alignmentLabelMap[alignment]) !== null && _alignmentLabelMap$al !== void 0 ? _alignmentLabelMap$al : '');
var reducedSpacing = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
exposure: true
}) ? 'compact' : 'none';
var items = [{
key: 'alignmentLeft',
content: intl.formatMessage(_messages.alignmentMessages.alignLeft),
value: {
name: 'start'
},
isActive: align === 'start',
elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignLeft)),
elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextLeft.default, {
label: ""
})
}, {
key: 'alignmentCenter',
content: intl.formatMessage(_messages.alignmentMessages.alignCenter),
value: {
name: 'center'
},
isActive: align === 'center',
elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignCenter)),
elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextCenter.default, {
label: ""
})
}, {
key: 'alignmentRight',
content: intl.formatMessage(_messages.alignmentMessages.alignRight),
value: {
name: 'end'
},
isActive: align === 'end',
elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignRight)),
elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextRight.default, {
label: ""
})
}];
return /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownWrapper, null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
arrowKeyNavigationProviderOptions: {
type: _uiMenu.ArrowKeyNavigationType.MENU
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
items: [{
items: items
}],
isOpen: isOpen,
onItemActivated: this.handleOnItemActivated
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onOpenChange: function onOpenChange(attrs) {
return _this2.setState({
isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
});
},
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
fitWidth: 200
}, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
spacing: isReducedSpacing ? reducedSpacing : 'default',
disabled: disabled,
selected: isOpen,
title: title,
"aria-label": ariaLabel,
"aria-expanded": isOpen,
"aria-haspopup": true,
onClick: this.toggleOpen,
onKeyDown: this.toggleOpenByKeyboard,
iconBefore: /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_iconMap.IconMap, {
alignment: alignment
}), /*#__PURE__*/_react.default.createElement(_ui.ToolbarExpandIcon, null))
})) : /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
isOpen: isOpen
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
handleClickOutside: function handleClickOutside(event) {
if (event instanceof MouseEvent) {
_this2.hide({
isOpen: false,
event: event
});
}
},
handleEscapeKeydown: this.hideOnEscape
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
arrowKeyNavigationProviderOptions: {
type: _uiMenu.ArrowKeyNavigationType.MENU
},
fitWidth: 112,
fitHeight: 80,
closeOnTab: true,
trigger: /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
spacing: isReducedSpacing ? reducedSpacing : 'default',
disabled: disabled,
selected: isOpen,
title: title
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
,
className: "align-btn",
"aria-label": ariaLabel,
"aria-expanded": isOpen,
"aria-haspopup": true,
onClick: this.toggleOpen,
onKeyDown: this.toggleOpenByKeyboard,
iconBefore: /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_iconMap.IconMap, {
alignment: alignment
}), /*#__PURE__*/_react.default.createElement(_ui.ToolbarExpandIcon, null)),
ref: this.toolbarItemRef
})
}, /*#__PURE__*/_react.default.createElement(_Alignment.default
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: function onClick(align) {
return _this2.changeAlignment(align, false);
},
selectedAlignment: alignment
})), !(api !== null && api !== void 0 && api.primaryToolbar) && /*#__PURE__*/_react.default.createElement(_ui.ToolbarSeparator, null));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_prevProps) {
var _this3 = this;
if (this.props.toolbarType !== _types.ToolbarType.FLOATING && this.state.isOpen) {
// by triggering the keyboard event with a setTimeout, we ensure that the tooltip
// associated with the alignment button doesn't render until the next render cycle
// where the popup will be correctly positioned and the relative position of the tooltip
// will not overlap with the button.
setTimeout(function () {
var _this3$toolbarItemRef;
var keyboardEvent = new KeyboardEvent('keydown', {
bubbles: true,
key: 'ArrowDown'
});
(_this3$toolbarItemRef = _this3.toolbarItemRef.current) === null || _this3$toolbarItemRef === void 0 || _this3$toolbarItemRef.dispatchEvent(keyboardEvent);
}, 0);
}
}
}]);
}(_react.default.Component); // eslint-disable-next-line @typescript-eslint/ban-types
(0, _defineProperty2.default)(AlignmentToolbar, "displayName", 'AlignmentToolbar');
var _default_1 = (0, _reactIntl.injectIntl)(AlignmentToolbar);
var _default = exports.default = _default_1;