@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
54 lines • 2.54 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { layoutMessages } from '@atlaskit/editor-common/messages';
import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import { isDistributedUniformly } from '../../pm-plugins/utils/layout-column-distribution';
import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
export var DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
var api = _ref.api;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var selectedLayoutColumnsResult = useSelectedLayoutColumns(api);
var _ref2 = selectedLayoutColumnsResult !== null && selectedLayoutColumnsResult !== void 0 ? selectedLayoutColumnsResult : {},
selectedLayoutColumns = _ref2.selectedLayoutColumns;
var handleClick = useCallback(function () {
var _api$core;
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
var _api$layout, _api$layout2;
var tr = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns({
inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU
})(props);
if (!tr) {
return null;
}
var closedTr = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
isOpen: false
})({
tr: tr
});
return closedTr !== null && closedTr !== void 0 ? closedTr : tr;
});
}, [api]);
var isAlreadyUniform = useMemo(function () {
if (!selectedLayoutColumns || selectedLayoutColumns.length < 2) {
return false;
}
var selectedWidths = selectedLayoutColumns.map(function (col) {
return col.node.attrs.width;
});
return isDistributedUniformly(selectedWidths);
}, [selectedLayoutColumns]);
if (selectedLayoutColumns === undefined || selectedLayoutColumns.length < 2) {
return null;
}
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
onClick: handleClick,
isDisabled: isAlreadyUniform,
elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
color: "currentColor",
label: "",
size: "small"
})
}, formatMessage(layoutMessages.distributeColumns));
};