@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
47 lines • 1.9 kB
JavaScript
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
import { useTableMenuContext } from '../../shared/TableMenuContext';
import { getSelectedCellValign } from './verticalAlignUtils';
var getTriggerIcon = function getTriggerIcon(valign) {
switch (valign) {
case 'middle':
return AlignPositionCenterVerticalIcon;
case 'bottom':
return AlignPositionBottomIcon;
case 'top':
default:
return AlignPositionTopIcon;
}
};
export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
var _useTableMenuContext;
var children = _ref.children;
var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
editorView = _ref2.editorView;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var selectedValign = useMemo(function () {
return getSelectedCellValign(editorView);
}, [editorView]);
var TriggerIcon = getTriggerIcon(selectedValign);
if (!editorView) {
return null;
}
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
color: "currentColor",
label: "",
size: "small"
}),
elemAfter: /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
label: "",
size: "small"
}),
text: formatMessage(messages.cellAlignment)
}, children);
};