@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
38 lines • 1.93 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 var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
var api = _ref.api,
children = _ref.children;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var selectedLayoutColumns = useSelectedLayoutColumns(api);
var currentValign = useMemo(function () {
var selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns;
var firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
var firstValign = getLayoutColumnValign(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(function (_ref2) {
var node = _ref2.node;
return getLayoutColumnValign(node) === firstValign;
}))) {
return undefined;
}
return firstValign;
}, [selectedLayoutColumns]);
var 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);
};