@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
39 lines • 1.8 kB
JavaScript
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { layoutMessages } from '@atlaskit/editor-common/messages';
import { NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
export const VerticalAlignNestedMenu = ({
api,
children
}) => {
const {
formatMessage
} = useIntl();
const selectedLayoutColumns = useSelectedLayoutColumns(api);
const currentValign = useMemo(() => {
const selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns;
const firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
const firstValign = getLayoutColumnValign(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(({
node
}) => getLayoutColumnValign(node) === firstValign))) {
return undefined;
}
return firstValign;
}, [selectedLayoutColumns]);
const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.middle;
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
label: "",
size: "small"
}),
elemAfter: /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
label: "",
size: "small"
}),
text: formatMessage(layoutMessages.alignColumn)
}, children);
};