@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
252 lines • 12.1 kB
JavaScript
/* index.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 { 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 { alignCenter, alignLeft, alignRight, tooltip } from '@atlaskit/editor-common/keymaps';
import { alignmentMessages as messages } from '@atlaskit/editor-common/messages';
import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
import { ArrowKeyNavigationType, DropdownContainer as Dropdown, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { ToolbarType } from '../../pm-plugins/types';
import Alignment from '../Alignment';
import { IconMap } from './icon-map';
// eslint-disable-next-line @repo/internal/react/no-class-components
var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
function AlignmentToolbar() {
var _this;
_classCallCheck(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));
_defineProperty(_this, "toolbarItemRef", /*#__PURE__*/React.createRef());
_defineProperty(_this, "state", {
isOpen: false
});
_defineProperty(_this, "changeAlignment", function (align, togglePopup) {
if (togglePopup) {
_this.toggleOpen();
}
return _this.props.changeAlignment(align);
});
_defineProperty(_this, "toggleOpen", function () {
_this.setState({
isOpen: !_this.state.isOpen
});
});
_defineProperty(_this, "toggleOpenByKeyboard", function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
_this.setState({
isOpen: !_this.state.isOpen
});
}
});
_defineProperty(_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);
});
_defineProperty(_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();
}
}
});
_defineProperty(_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;
}
_inherits(AlignmentToolbar, _React$Component);
return _createClass(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.alignment);
var alignmentLabelMap = {
start: intl.formatMessage(messages.alignLeft),
center: intl.formatMessage(messages.alignCenter),
end: intl.formatMessage(messages.alignRight)
};
var ariaLabel = "".concat(title, ", ").concat((_alignmentLabelMap$al = alignmentLabelMap[alignment]) !== null && _alignmentLabelMap$al !== void 0 ? _alignmentLabelMap$al : '');
var reducedSpacing = editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
}) ? 'compact' : 'none';
var items = [{
key: 'alignmentLeft',
content: intl.formatMessage(messages.alignLeft),
value: {
name: 'start'
},
isActive: align === 'start',
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
label: ""
})
}, {
key: 'alignmentCenter',
content: intl.formatMessage(messages.alignCenter),
value: {
name: 'center'
},
isActive: align === 'center',
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
label: ""
})
}, {
key: 'alignmentRight',
content: intl.formatMessage(messages.alignRight),
value: {
name: 'end'
},
isActive: align === 'end',
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
label: ""
})
}];
return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(DropdownMenu
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
arrowKeyNavigationProviderOptions: {
type: 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.createElement(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.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(IconMap, {
alignment: alignment
}), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
})) : /*#__PURE__*/React.createElement(Dropdown, {
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: ArrowKeyNavigationType.MENU
},
fitWidth: 112,
fitHeight: 80,
closeOnTab: true,
trigger: /*#__PURE__*/React.createElement(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.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(IconMap, {
alignment: alignment
}), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null)),
ref: this.toolbarItemRef
})
}, /*#__PURE__*/React.createElement(Alignment
// 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.createElement(ToolbarSeparator, null));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_prevProps) {
var _this3 = this;
if (this.props.toolbarType !== 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.Component); // eslint-disable-next-line @typescript-eslint/ban-types
_defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
var _default_1 = injectIntl(AlignmentToolbar);
export default _default_1;