@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
36 lines • 1.63 kB
JavaScript
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { ToolbarDropdownItem } 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 VerticalAlignDropdownItem = ({
api,
label,
value
}) => {
var _selectedLayoutColumn;
const {
formatMessage
} = useIntl();
const selectedLayoutColumns = useSelectedLayoutColumns(api);
const isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns.every(({
node
}) => getLayoutColumnValign(node) === value)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
const Icon = VERTICAL_ALIGN_ICONS[value];
const onClick = useCallback(() => {
var _api$core, _api$layout;
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.setLayoutColumnValign({
valign: value
}));
}, [api, value]);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(Icon, {
label: "",
size: "small"
}),
isSelected: isSelected,
onClick: onClick,
role: "menuitemradio"
}, formatMessage(label));
};