@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
230 lines (229 loc) • 9.98 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { ax, ix } from "@compiled/react/runtime";
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
class AlignmentToolbar extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
_defineProperty(this, "state", {
isOpen: false
});
_defineProperty(this, "changeAlignment", (align, togglePopup) => {
if (togglePopup) {
this.toggleOpen();
}
return this.props.changeAlignment(align);
});
_defineProperty(this, "toggleOpen", () => {
this.setState({
isOpen: !this.state.isOpen
});
});
_defineProperty(this, "toggleOpenByKeyboard", event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.setState({
isOpen: !this.state.isOpen
});
}
});
_defineProperty(this, "handleOnItemActivated", ({
item,
shouldCloseMenu = true
}) => this.changeAlignment(item.value.name, shouldCloseMenu));
_defineProperty(this, "hide", 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 = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
}
}
});
_defineProperty(this, "hideOnEscape", () => {
var _this$toolbarItemRef2, _this$toolbarItemRef3;
this.hide();
(_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
});
}
render() {
var _alignmentLabelMap$al;
const {
isOpen
} = this.state;
const {
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
isReducedSpacing,
align,
disabled,
intl,
api
} = this.props;
const alignment = align !== null && align !== void 0 ? align : 'start';
const title = intl.formatMessage(messages.alignment);
const alignmentLabelMap = {
start: intl.formatMessage(messages.alignLeft),
center: intl.formatMessage(messages.alignCenter),
end: intl.formatMessage(messages.alignRight)
};
const ariaLabel = `${title}, ${(_alignmentLabelMap$al = alignmentLabelMap[alignment]) !== null && _alignmentLabelMap$al !== void 0 ? _alignmentLabelMap$al : ''}`;
const reducedSpacing = editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
}) ? 'compact' : 'none';
const 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
}],
isOpen: isOpen,
onItemActivated: this.handleOnItemActivated
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onOpenChange: attrs => this.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: event => {
if (event instanceof MouseEvent) {
this.hide({
isOpen: false,
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: align => this.changeAlignment(align, false),
selectedAlignment: alignment
})), !(api !== null && api !== void 0 && api.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
}
componentDidUpdate(_prevProps) {
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(() => {
var _this$toolbarItemRef$2;
const keyboardEvent = new KeyboardEvent('keydown', {
bubbles: true,
key: 'ArrowDown'
});
(_this$toolbarItemRef$2 = this.toolbarItemRef.current) === null || _this$toolbarItemRef$2 === void 0 ? void 0 : _this$toolbarItemRef$2.dispatchEvent(keyboardEvent);
}, 0);
}
}
}
// eslint-disable-next-line @typescript-eslint/ban-types
_defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
const _default_1 = injectIntl(AlignmentToolbar);
export default _default_1;