@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
35 lines • 1.75 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 var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
var _selectedLayoutColumn;
var api = _ref.api,
label = _ref.label,
value = _ref.value;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var selectedLayoutColumns = useSelectedLayoutColumns(api);
var isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns.every(function (_ref2) {
var node = _ref2.node;
return getLayoutColumnValign(node) === value;
})) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
var Icon = VERTICAL_ALIGN_ICONS[value];
var onClick = useCallback(function () {
var _api$core, _api$layout;
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === 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));
};