@atlaskit/editor-plugin-layout/dist/es2019/ui/LayoutColumnMenu/components.js

Layout plugin for @atlaskit/editor-core

import React, { useContext } from 'react';
import { layoutMessages } from '@atlaskit/editor-common/messages';
import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
import { DistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
import { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_DANGER_SECTION, LAYOUT_COLUMN_DANGER_SECTION_RANK, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
const LayoutColumnMenuContainer = ({
  children
}) => {
  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
  return /*#__PURE__*/React.createElement(ToolbarMenuContainer, {
    ref: setOutsideClickTargetRef
  }, children);
};
export const LAYOUT_COLUMN_MENU_FALLBACKS = {
  'menu-section': ({
    children
  }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children)
};
export const getLayoutColumnMenuComponents = ({
  api
}) => {
  return [{
    ...LAYOUT_COLUMN_MENU,
    component: LayoutColumnMenuContainer
  }, {
    ...LAYOUT_COLUMN_MENU_SECTION,
    parents: [{
      ...LAYOUT_COLUMN_MENU,
      rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
    }]
  }, {
    ...INSERT_COLUMN_LEFT_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(InsertColumnDropdownItem, {
      api: api,
      side: "left"
    }),
    parents: [{
      ...LAYOUT_COLUMN_MENU_SECTION,
      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_LEFT_MENU_ITEM.key]
    }]
  }, {
    ...INSERT_COLUMN_RIGHT_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(InsertColumnDropdownItem, {
      api: api,
      side: "right"
    }),
    parents: [{
      ...LAYOUT_COLUMN_MENU_SECTION,
      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_RIGHT_MENU_ITEM.key]
    }]
  }, {
    ...DISTRIBUTE_COLUMNS_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
      api: api
    }),
    parents: [{
      ...LAYOUT_COLUMN_MENU_SECTION,
      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
    }]
  }, {
    ...VERTICAL_ALIGN_MENU,
    component: ({
      children
    }) => /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, {
      api: api
    }, children),
    parents: [{
      ...LAYOUT_COLUMN_MENU_SECTION,
      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[VERTICAL_ALIGN_MENU.key]
    }]
  }, {
    ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
    parents: [{
      ...VERTICAL_ALIGN_MENU,
      rank: VERTICAL_ALIGN_MENU_RANK[LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]
    }]
  }, {
    ...VERTICAL_ALIGN_TOP_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
      api: api,
      label: layoutMessages.alignColumnTop,
      value: "top"
    }),
    parents: [{
      ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_TOP_MENU_ITEM.key]
    }]
  }, {
    ...VERTICAL_ALIGN_MIDDLE_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
      api: api,
      label: layoutMessages.alignColumnMiddle,
      value: "middle"
    }),
    parents: [{
      ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key]
    }]
  }, {
    ...VERTICAL_ALIGN_BOTTOM_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
      api: api,
      label: layoutMessages.alignColumnBottom,
      value: "bottom"
    }),
    parents: [{
      ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
    }]
  },
  // --- Danger section (Delete column) ---
  {
    ...LAYOUT_COLUMN_DANGER_SECTION,
    component: ({
      children
    }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
      hasSeparator: true
    }, children),
    parents: [{
      ...LAYOUT_COLUMN_MENU,
      rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_DANGER_SECTION.key]
    }]
  }, {
    ...DELETE_COLUMN_MENU_ITEM,
    component: () => /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
      api: api
    }),
    parents: [{
      ...LAYOUT_COLUMN_DANGER_SECTION,
      rank: LAYOUT_COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
    }]
  }];
};