es-grid-template/es/table-component/ContextMenu.js

es-grid-template

import * as React from "react";
import { Dropdown, Menu } from "antd";
export const findItemByKey = (array, key, value) => {
  for (let i = 0; i < array.length; i++) {
    const item = array[i];
    if (item[key] === value) {
      return item;
    }
    if (item.children && item.children.length > 0) {
      const foundInChildren = findItemByKey(item.children, key, value);
      if (foundInChildren) {
        return foundInChildren;
      }
    }
  }
  return null;
};
const ContextMenu = props => {
  const {
    menuRef,
    open,
    setOpen,
    pos,
    contextMenuClick,
    contextMenuItems,
    rowData
  } = props;
  return /*#__PURE__*/React.createElement(Dropdown, {
    placement: 'topRight',
    open: open,
    overlayClassName: 'be-popup-container',
    overlayStyle: {
      left: `${pos.x}px`,
      top: `${pos.y}px`
    },
    dropdownRender: () => {
      return /*#__PURE__*/React.createElement("div", {
        ref: menuRef
      }, /*#__PURE__*/React.createElement(Menu, {
        items: contextMenuItems,
        style: {
          minWidth: 200,
          maxHeight: pos.viewportHeight - 20,
          width: 'fit-content'
        },
        rootClassName: 'popup-context-menu'
        // rootClassName={'be-popup-container'}
        ,

        onClick: e => {
          setOpen(false);
          contextMenuClick?.({
            rowInfo: {
              rowData: rowData.rowData
            },
            event: e.domEvent,
            field: rowData.field,
            item: {
              ...findItemByKey(contextMenuItems, 'key', e.key),
              id: e.key
            }
          });

          // if (!open) {
          //   document.addEventListener(`click`, function onClickOutside() {
          //     setOpen(false);
          //     document.removeEventListener(`click`, onClickOutside);
          //   });
          // }
        }
      }));
    },
    destroyPopupOnHide: true
    // autoAdjustOverflow
  }, /*#__PURE__*/React.createElement(React.Fragment, null));
};
export default ContextMenu;