@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
48 lines • 1.76 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';
const getTriggerIcon = valign => {
switch (valign) {
case 'middle':
return AlignPositionCenterVerticalIcon;
case 'bottom':
return AlignPositionBottomIcon;
case 'top':
default:
return AlignPositionTopIcon;
}
};
export const VerticalAlignNestedMenu = ({
children
}) => {
var _useTableMenuContext;
const {
editorView
} = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
const {
formatMessage
} = useIntl();
const selectedValign = useMemo(() => getSelectedCellValign(editorView), [editorView]);
const 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);
};