@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
55 lines • 2.43 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 const DistributeColumnsDropdownItem = ({
api
}) => {
const {
formatMessage
} = useIntl();
const selectedLayoutColumnsResult = useSelectedLayoutColumns(api);
const {
selectedLayoutColumns
} = selectedLayoutColumnsResult !== null && selectedLayoutColumnsResult !== void 0 ? selectedLayoutColumnsResult : {};
const handleClick = useCallback(() => {
var _api$core;
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(props => {
var _api$layout, _api$layout2;
const tr = api === null || api === void 0 ? 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;
}
const closedTr = api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
isOpen: false
})({
tr
});
return closedTr !== null && closedTr !== void 0 ? closedTr : tr;
});
}, [api]);
const isAlreadyUniform = useMemo(() => {
if (!selectedLayoutColumns || selectedLayoutColumns.length < 2) {
return false;
}
const selectedWidths = selectedLayoutColumns.map(col => 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));
};