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

es-grid-template

import * as React from "react";
// import type { MenuProps } from "antd";
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;

  // const addPopupOffset = (items: MenuProps["items"]) : any => {
  //   return items?.map(item =>
  //     item && "children" in item
  //       ? {
  //     ...item,
  //         // popupOffset: [0, 30],
  //         children: addPopupOffset(item.children) }
  //       : item
  //   );
  // };

  // const newItems = React.useMemo(() => {
  //   return addPopupOffset(items)
  // }, [items])

  return (
    /*#__PURE__*/
    // <div>
    //   {open && (
    //     <div
    //       ref={menuRef}
    //       style={{
    //         position: "absolute",
    //         top: pos.y,
    //         left: pos.x,
    //         zIndex: 1000,
    //         background: "white",
    //         border: "1px solid #ddd",
    //         boxShadow: "2px 2px 5px rgba(0,0,0,0.2)",
    //       }}
    //       // onClick={() => setOpen(false)}
    //     >
    //       <Menu
    //         items={contextMenuItems}
    //         style={{ minWidth: 200, maxWidth: 400, maxHeight: pos.viewportHeight  - 20 , width: 200 }}
    //         rootClassName={'popup-context-menu'}
    //
    //         onClick={(e) => {
    //           contextMenuClick?.({
    //             rowInfo: {
    //               rowData
    //             },
    //             event: e.domEvent,
    //             item: {
    //               ...findItemByKey(contextMenuItems as any[], 'key', e.key ),
    //               id: e.key
    //             }
    //           })
    //         }} >
    //       </Menu>
    //     </div>
    //   )}
    // </div>
    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
              },
              event: e.domEvent,
              item: {
                ...findItemByKey(contextMenuItems, 'key', e.key),
                id: e.key
              }
            });

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