@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
176 lines (175 loc) • 6.78 kB
JavaScript
/* ToolbarDropdown.tsx generated by @compiled/babel-plugin v0.39.1 */
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { useIntl } from 'react-intl';
import { toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeymap, toggleOrderedList as toggleOrderedListKeymap, outdent as toggleOutdentKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
import { indentationMessages, listMessages } from '@atlaskit/editor-common/messages';
import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
import { DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
import ListNumberedIcon from '@atlaskit/icon/core/list-numbered';
import TextIndentLeftIcon from '@atlaskit/icon/core/text-indent-left';
import TextIndentRightIcon from '@atlaskit/icon/core/text-indent-right';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { ToolbarType } from '../types';
export function ToolbarDropdown(props) {
const {
formatMessage
} = useIntl();
const {
disabled,
isReducedSpacing,
bulletListActive,
orderedListActive,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
onItemActivated,
pluginInjectionApi
} = props;
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const [isOpenedByKeyboard, setOpenedByKeyboard] = React.useState(false);
const labelLists = formatMessage(listMessages.lists);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onOpenChange = attrs => {
setIsDropdownOpen(attrs.isDropdownOpen);
};
const handleTriggerClick = () => {
onOpenChange({
isDropdownOpen: !isDropdownOpen
});
};
const handleOnKeyDown = event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
setIsDropdownOpen(!isDropdownOpen);
setOpenedByKeyboard(true);
}
};
const items = useItems(props);
const handleOnItemActivated = ({
item,
shouldCloseMenu = true
}) => {
setIsDropdownOpen(!shouldCloseMenu);
return onItemActivated({
editorView: props.editorView,
buttonName: item.value.name
});
};
const reducedSpacing = props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
let activeListIcon = null;
let isSelected = isDropdownOpen;
if (editorExperiment('platform_editor_controls', 'variant1')) {
activeListIcon = orderedListActive ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
spacing: "spacious",
label: ""
}) : /*#__PURE__*/React.createElement(ListBulletedIcon, {
spacing: "spacious",
label: ""
});
} else {
activeListIcon = /*#__PURE__*/React.createElement(ListBulletedIcon, {
color: "currentColor",
spacing: "spacious",
label: labelLists
});
isSelected = bulletListActive || orderedListActive || isDropdownOpen;
}
return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
items: items,
onItemActivated: handleOnItemActivated,
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
isOpen: isDropdownOpen,
onOpenChange: onOpenChange,
fitHeight: 188,
fitWidth: 175,
shouldUseDefaultRole: true
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
shouldFocusFirstItem: () => {
if (isOpenedByKeyboard) {
setOpenedByKeyboard(false);
}
return isOpenedByKeyboard;
}
}, /*#__PURE__*/React.createElement(ToolbarButton, {
spacing: isReducedSpacing ? reducedSpacing : 'default',
selected: isSelected,
"aria-expanded": isDropdownOpen,
"aria-haspopup": true,
"aria-label": labelLists,
disabled: disabled,
onClick: handleTriggerClick,
onKeyDown: handleOnKeyDown,
title: labelLists,
iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, activeListIcon, /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
})), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
}
function useItems(props) {
const {
formatMessage
} = useIntl();
const labelUnorderedList = formatMessage(listMessages.unorderedList);
const labelOrderedList = formatMessage(listMessages.orderedList);
const items = [{
key: 'unorderedList',
content: labelUnorderedList,
value: {
name: 'bullet_list'
},
isDisabled: props.bulletListDisabled,
isActive: Boolean(props.bulletListActive),
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap)),
elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(ListBulletedIcon, {
label: ""
}) : undefined
}, {
key: 'orderedList',
content: labelOrderedList,
value: {
name: 'ordered_list'
},
isDisabled: props.orderedListDisabled,
isActive: Boolean(props.orderedListActive),
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap)),
elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
label: ""
}) : undefined
}];
if (props.showIndentationButtons) {
const labelIndent = formatMessage(indentationMessages.indent);
const labelOutdent = formatMessage(indentationMessages.outdent);
items.push({
key: 'outdent',
content: labelOutdent,
value: {
name: 'outdent'
},
isDisabled: props.outdentDisabled,
isActive: false,
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOutdentKeymap)),
elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(TextIndentLeftIcon, {
label: ""
}) : undefined
}, {
key: 'indent',
content: labelIndent,
value: {
name: 'indent'
},
isDisabled: props.indentDisabled,
isActive: false,
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleIndentKeymap)),
elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(TextIndentRightIcon, {
label: ""
}) : undefined
});
}
return [{
items
}];
}