UNPKG

@atlaskit/editor-plugin-toolbar-lists-indentation

Version:

Toolbar lists and indentation plugin for @atlaskit/editor-core

157 lines (156 loc) • 8.13 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.ListsIndentationHeroButtonNew = exports.ListsIndentationHeroButtonCollapsed = exports.ListsIndentationHeroButton = void 0; var _react = _interopRequireDefault(require("react")); var _reactIntl = require("react-intl"); var _keymaps = require("@atlaskit/editor-common/keymaps"); var _list = require("@atlaskit/editor-common/messages/list"); var _tasksAndDecisions = require("@atlaskit/editor-common/messages/tasks-and-decisions"); var _toolbar = require("@atlaskit/editor-common/toolbar"); var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector"); var _listBulletedIcon = require("@atlaskit/editor-toolbar/list-bulleted-icon"); var _listNumberedIcon = require("@atlaskit/editor-toolbar/list-numbered-icon"); var _toolbarButton = require("@atlaskit/editor-toolbar/toolbar-button"); var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip"); var _task = _interopRequireDefault(require("@atlaskit/icon/core/task")); function useListsIndentationHeroButtonInfo(_ref) { var api = _ref.api, parents = _ref.parents, defaultListType = _ref.defaultListType; var _useIntl = (0, _reactIntl.useIntl)(), formatMessage = _useIntl.formatMessage; var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['list', 'taskDecision'], function (states) { var _states$listState, _states$listState2, _states$listState3, _states$taskDecisionS; return { bulletListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListActive, bulletListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.bulletListDisabled, orderedListActive: (_states$listState3 = states.listState) === null || _states$listState3 === void 0 ? void 0 : _states$listState3.orderedListActive, taskListActive: (_states$taskDecisionS = states.taskDecisionState) === null || _states$taskDecisionS === void 0 ? void 0 : _states$taskDecisionS.isInsideTask }; }), bulletListActive = _useSharedPluginState.bulletListActive, bulletListDisabled = _useSharedPluginState.bulletListDisabled, orderedListActive = _useSharedPluginState.orderedListActive, taskListActive = _useSharedPluginState.taskListActive; var getListType = taskListActive ? 'taskList' : orderedListActive ? 'orderedList' : defaultListType; var taskListKeymap = _keymaps.toggleTaskList; var getKeymap = getListType === 'taskList' ? taskListKeymap : getListType === 'orderedList' ? _keymaps.toggleOrderedList : _keymaps.toggleBulletList; var shortcut = (0, _keymaps.formatShortcut)(getKeymap); var keymap = getKeymap; var message = getListType === 'taskList' ? formatMessage(_tasksAndDecisions.tasksAndDecisionsMessages.taskList) : getListType === 'orderedList' ? formatMessage(_list.messages.orderedList) : formatMessage(_list.messages.bulletedList); var onClick = function onClick() { var inputMethod = (0, _toolbar.getInputMethodFromParentKeys)(parents); if (getListType === 'taskList') { var _api$taskDecision; api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? void 0 : _api$taskDecision.commands.toggleTaskList()); } else if (getListType === 'orderedList') { api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList(inputMethod)); } else { api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList(inputMethod)); } }; var iconBefore = getListType === 'taskList' ? /*#__PURE__*/_react.default.createElement(_task.default, { label: formatMessage(_tasksAndDecisions.tasksAndDecisionsMessages.taskList), size: "small" }) : getListType === 'orderedList' ? /*#__PURE__*/_react.default.createElement(_listNumberedIcon.ListNumberedIcon, { label: formatMessage(_list.messages.orderedList), size: "small" }) : /*#__PURE__*/_react.default.createElement(_listBulletedIcon.ListBulletedIcon, { label: formatMessage(_list.messages.bulletedList), size: "small" }); var isSelected = getListType === 'bulletList' ? bulletListActive : getListType === 'orderedList' ? orderedListActive : taskListActive; var isDisabled = !orderedListActive && !taskListActive && bulletListDisabled; return { shortcut: shortcut, keymap: keymap, message: message, onClick: onClick, iconBefore: iconBefore, isSelected: isSelected, isDisabled: isDisabled }; } var ListsIndentationHeroButtonCollapsed = exports.ListsIndentationHeroButtonCollapsed = function ListsIndentationHeroButtonCollapsed(_ref2) { var api = _ref2.api, parents = _ref2.parents; var _useListsIndentationH = useListsIndentationHeroButtonInfo({ api: api, parents: parents, defaultListType: 'bulletList' }), shortcut = _useListsIndentationH.shortcut, keymap = _useListsIndentationH.keymap, message = _useListsIndentationH.message, onClick = _useListsIndentationH.onClick, iconBefore = _useListsIndentationH.iconBefore, isSelected = _useListsIndentationH.isSelected, isDisabled = _useListsIndentationH.isDisabled; return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, { content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, { description: message, keymap: keymap }) }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, { iconBefore: iconBefore, isSelected: isSelected, isDisabled: isDisabled, ariaKeyshortcuts: shortcut, onClick: onClick })); }; var ListsIndentationHeroButtonNew = exports.ListsIndentationHeroButtonNew = function ListsIndentationHeroButtonNew(_ref3) { var api = _ref3.api, parents = _ref3.parents; var _useListsIndentationH2 = useListsIndentationHeroButtonInfo({ api: api, parents: parents, defaultListType: 'orderedList' }), shortcut = _useListsIndentationH2.shortcut, keymap = _useListsIndentationH2.keymap, message = _useListsIndentationH2.message, onClick = _useListsIndentationH2.onClick, iconBefore = _useListsIndentationH2.iconBefore, isSelected = _useListsIndentationH2.isSelected, isDisabled = _useListsIndentationH2.isDisabled; return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, { content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, { description: message, keymap: keymap }) }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, { iconBefore: iconBefore, isSelected: isSelected, isDisabled: isDisabled, ariaKeyshortcuts: shortcut, onClick: onClick })); }; var ListsIndentationHeroButton = exports.ListsIndentationHeroButton = function ListsIndentationHeroButton(_ref4) { var api = _ref4.api, parents = _ref4.parents; var _useListsIndentationH3 = useListsIndentationHeroButtonInfo({ api: api, parents: parents, defaultListType: 'bulletList' }), shortcut = _useListsIndentationH3.shortcut, message = _useListsIndentationH3.message, onClick = _useListsIndentationH3.onClick, iconBefore = _useListsIndentationH3.iconBefore, isSelected = _useListsIndentationH3.isSelected, isDisabled = _useListsIndentationH3.isDisabled; return /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, { content: message }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, { iconBefore: iconBefore, isSelected: isSelected, isDisabled: isDisabled, ariaKeyshortcuts: shortcut, onClick: onClick })); };