@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
133 lines • 6.21 kB
JavaScript
/* Toolbar.tsx generated by @compiled/babel-plugin v0.39.1 */
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useRef } from 'react';
import { useIntl } from 'react-intl';
import { getAriaKeyshortcuts, toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeymap, toggleOrderedList as toggleOrderedListKeymap, outdent as toggleOutdentKeymap, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { indentationMessages, listMessages as messages } from '@atlaskit/editor-common/messages';
import { ToolbarButtonGroup, ToolbarSeparator } from '@atlaskit/editor-common/ui';
import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import BulletedListIcon from '@atlaskit/icon/core/list-bulleted';
import NumberListIcon from '@atlaskit/icon/core/list-numbered';
import OutdentIcon from '@atlaskit/icon/core/text-indent-left';
import IndentIcon from '@atlaskit/icon/core/text-indent-right';
export function Toolbar(props) {
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var indentButtonRef = useRef(null);
var outdentButtonRef = useRef(null);
var disabled = props.disabled,
isReducedSpacing = props.isReducedSpacing,
bulletListActive = props.bulletListActive,
bulletListDisabled = props.bulletListDisabled,
orderedListActive = props.orderedListActive,
orderedListDisabled = props.orderedListDisabled,
showIndentationButtons = props.showIndentationButtons,
indentDisabled = props.indentDisabled,
outdentDisabled = props.outdentDisabled,
onItemActivated = props.onItemActivated,
pluginInjectionApi = props.pluginInjectionApi;
var labelUnorderedList = formatMessage(messages.unorderedList);
var labelOrderedList = formatMessage(messages.orderedList);
var labelListsFormat = formatMessage(messages.listsFormat);
var indentMessage = formatMessage(indentationMessages.indent);
var outdentMessage = formatMessage(indentationMessages.outdent);
var isIndentButtonFocused = document.activeElement === indentButtonRef.current;
var isOutdentButtonFocused = document.activeElement === outdentButtonRef.current;
var handleOnItemActivated = function handleOnItemActivated(buttonName) {
return function (event) {
return onItemActivated({
editorView: props.editorView,
buttonName: buttonName
});
};
};
useEffect(function () {
if (isIndentButtonFocused && indentDisabled && outdentButtonRef.current) {
outdentButtonRef.current.focus();
}
}, [indentButtonRef, indentDisabled, isIndentButtonFocused]);
useEffect(function () {
if (isOutdentButtonFocused && outdentDisabled && indentButtonRef.current) {
indentButtonRef.current.focus();
}
}, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, /*#__PURE__*/React.createElement("div", {
role: "group",
"aria-label": labelListsFormat
}, /*#__PURE__*/React.createElement(ToolbarButton, {
buttonId: TOOLBAR_BUTTON.BULLET_LIST,
testId: labelUnorderedList,
spacing: isReducedSpacing ? 'none' : 'default',
onClick: handleOnItemActivated('bullet_list'),
selected: bulletListActive,
"aria-pressed": bulletListActive,
"aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
"aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
disabled: bulletListDisabled || disabled,
title: /*#__PURE__*/React.createElement(ToolTipContent, {
description: labelUnorderedList,
keymap: toggleBulletListKeymap
}),
iconBefore: /*#__PURE__*/React.createElement(BulletedListIcon, {
label: "",
color: "currentColor",
spacing: "spacious"
})
}), /*#__PURE__*/React.createElement(ToolbarButton, {
buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
testId: labelOrderedList,
spacing: isReducedSpacing ? 'none' : 'default',
onClick: handleOnItemActivated('ordered_list'),
selected: orderedListActive,
"aria-pressed": orderedListActive,
"aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
"aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
disabled: orderedListDisabled || disabled,
title: /*#__PURE__*/React.createElement(ToolTipContent, {
description: labelOrderedList,
keymap: toggleOrderedListKeymap
}),
iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
})
}), showIndentationButtons && /*#__PURE__*/React.createElement(ToolbarButton, {
buttonId: TOOLBAR_BUTTON.OUTDENT,
testId: TOOLBAR_BUTTON.OUTDENT,
ref: outdentButtonRef,
spacing: isReducedSpacing ? 'none' : 'default',
onClick: handleOnItemActivated('outdent'),
iconBefore: /*#__PURE__*/React.createElement(OutdentIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
}),
disabled: outdentDisabled || disabled,
"aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
"aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
title: /*#__PURE__*/React.createElement(ToolTipContent, {
description: outdentMessage,
keymap: toggleOutdentKeymap
})
}), showIndentationButtons && /*#__PURE__*/React.createElement(ToolbarButton, {
buttonId: TOOLBAR_BUTTON.INDENT,
testId: TOOLBAR_BUTTON.INDENT,
ref: indentButtonRef,
spacing: isReducedSpacing ? 'none' : 'default',
onClick: handleOnItemActivated('indent'),
iconBefore: /*#__PURE__*/React.createElement(IndentIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
}),
disabled: indentDisabled || disabled,
"aria-label": tooltip(toggleIndentKeymap, indentMessage),
"aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
title: /*#__PURE__*/React.createElement(ToolTipContent, {
description: indentMessage,
keymap: toggleIndentKeymap
})
})), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
}