es-grid-template/lib/table-component/table/TableWrapper.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _TableHead = _interopRequireDefault(require("../header/TableHead"));
var _TableBody = _interopRequireDefault(require("../body/TableBody"));
var _TableFooter = _interopRequireDefault(require("../footer/TableFooter"));
var _LoadingSpinner = _interopRequireDefault(require("../../grid-component/LoadingSpinner"));
var _reactTooltip = require("react-tooltip");
var _ContextMenu = _interopRequireDefault(require("../ContextMenu"));
var _react = _interopRequireWildcard(require("react"));
var _useContext = require("../useContext");
var _utils = require("../hook/utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const TableWrapper = props => {
  const {
    id,
    prefix,
    tableContainerRef,
    height,
    minHeight,
    summary,
    table,
    loading,
    commandClick,
    editAble,
    contextMenuItems: propContextMenuItems,
    contextMenuHidden,
    showEmptyText,
    contextMenuClick,
    contextMenuOpen,
    next,
    dataSource,
    pagination,
    infiniteScroll,
    onEndReachedThreshold,
    columnVirtualizer,
    fixedLeftColumns,
    fixedRightColumns,
    virtualPaddingLeft,
    virtualPaddingRight
  } = props;
  const menuRef = _react.default.useRef(null);
  const loadingRef = _react.default.useRef(false);
  const hasMoreRef = _react.default.useRef(true);
  const {
    windowSize
  } = (0, _react.useContext)(_useContext.TableContext);
  const {
    currentPage,
    pageSize,
    total
  } = pagination ?? {};
  const [menuVisible, setMenuVisible] = _react.default.useState(false);
  const [selectedRowData, setSelectedRowData] = _react.default.useState(undefined);
  const [position, setPosition] = _react.default.useState({
    x: 0,
    y: 0,
    viewportWidth: windowSize.innerWidth,
    viewportHeight: windowSize.innerHeight
  });
  const contextMenuItems = _react.default.useMemo(() => {
    if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
      const hiddenItems = contextMenuHidden({
        rowInfo: {
          rowData: selectedRowData.rowData
        },
        field: selectedRowData.field
      });
      return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
    }
    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
      return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
    }
    return propContextMenuItems;
  }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
  const loadData = page => {
    if (!hasMoreRef.current || loadingRef.current || loading) return;
    loadingRef.current = true;
    setTimeout(() => {
      next?.();
      if (page * pageSize >= total) {
        hasMoreRef.current = false;
      }
      loadingRef.current = false;
    }, 10);
  };
  const handleNext = () => {
    loadData(currentPage + 1);
  };
  const handleScroll = e => {
    if (infiniteScroll) {
      if (loadingRef.current || loading || dataSource?.length === 0) {
        e.stopPropagation();
        e.preventDefault();
        return;
      }
      const {
        scrollHeight: tbScrollHeight,
        scrollTop,
        clientHeight
      } = e.currentTarget;
      const abc = clientHeight * ((0, _utils.isNullOrUndefined)(onEndReachedThreshold) ? 0.1 : onEndReachedThreshold ?? 0);

      // const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
      const isEnd = scrollTop + clientHeight >= tbScrollHeight - abc;
      if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
        handleNext();
      }
    }
    if (e.target.scrollLeft >= 0 && e.target.scrollLeft + e.target.clientWidth < e.target.scrollWidth) {
      e.target.classList.add('ui-rc-table-ping-right');
    } else {
      e.target.classList.remove('ui-rc-table-ping-right');
    }
    if ((e.target.scrollLeft ?? 0) > 0) {
      e.target.classList.add('ui-rc-table-ping-left');
    } else {
      e.target.classList.remove('ui-rc-table-ping-left');
    }
  };
  const onContextMenu = args => event => {
    event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt

    setSelectedRowData(args);
    contextMenuOpen?.({
      rowInfo: {
        rowData: args.rowData
      },
      field: args.field,
      event
    });

    // Đợi DOM cập nhật và lấy kích thước menu
    setTimeout(() => {
      setMenuVisible(true);
      const menuElement = menuRef.current; // Lấy menu từ DOM
      const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
      const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render

      // Điều chỉnh vị trí menu
      let x = event.clientX;
      let y = event.clientY;
      if (x + menuWidth > windowSize.innerWidth) {
        x = x - menuWidth - 10; // Cách cạnh phải 10px
      }
      if (y + menuHeight > windowSize.innerHeight) {
        if (y < menuHeight) {
          y = 10;
        } else {
          y = y - 10 - menuHeight; // Cách cạnh dưới 10px
        }
      }
      setPosition(prevState => ({
        ...prevState,
        x,
        y
      }));
    }, 100);

    // if (!menuVisible) {

    //   document.addEventListener(`click`, function onClickOutside(e) {
    //     const element: any = e.target
    //     const menuContainer = document.querySelector('.popup-context-menu')

    //     const isInsideContainer = element.closest('.popup-context-menu') && menuContainer

    //     if (isInsideContainer) {
    //       return
    //     }
    //     setMenuVisible(false)
    //     setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
    //     document.removeEventListener(`click`, onClickOutside)
    //   })

    // }
  };
  _react.default.useEffect(() => {
    const handleClickOutside = event => {
      const element = event.target;
      const containerContextMenu = document.querySelector(".popup-context-menu");
      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
      if (isInsideContainerContext) {
        return;
      } else {
        setMenuVisible(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: 'relative'
    },
    className: (0, _classnames.default)(`${prefix}-grid-container`, {
      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    // id={id}
    ref: tableContainerRef,
    style: {
      overflow: 'auto',
      //our scrollable table container
      position: 'relative',
      //needed for sticky header
      maxHeight: height,
      //should be a fixed height
      minHeight: minHeight ? height : undefined //should be a fixed height
    }
    // onScroll={infiniteScroll ? handleScroll : undefined}
    ,
    onScroll: handleScroll
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'grid',
      minWidth: table.getTotalSize()
    }
  }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
    tableContainerRef: tableContainerRef,
    table: table,
    columnVirtualizer: columnVirtualizer,
    virtualPaddingLeft: virtualPaddingLeft,
    virtualPaddingRight: virtualPaddingRight,
    fixedLeftColumns: fixedLeftColumns,
    fixedRightColumns: fixedRightColumns
  }), /*#__PURE__*/_react.default.createElement(_TableBody.default, {
    tableId: id,
    table: table,
    tableContainerRef: tableContainerRef,
    commandClick: commandClick,
    editAble: editAble,
    contextMenuItems: contextMenuItems,
    showEmptyText: showEmptyText,
    onContextMenu: onContextMenu,
    columnVirtualizer: columnVirtualizer,
    virtualPaddingLeft: virtualPaddingLeft,
    virtualPaddingRight: virtualPaddingRight,
    fixedLeftColumns: fixedLeftColumns,
    fixedRightColumns: fixedRightColumns
  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default
  // columnVirtualizer={columnVirtualizer}
  , {
    table: table
    // virtualPaddingLeft={virtualPaddingLeft}
    // virtualPaddingRight={virtualPaddingRight}
    // fixedLeftColumns={fixedLeftColumns}
    // fixedRightColumns={fixedRightColumns}
  }))), loading && /*#__PURE__*/_react.default.createElement("div", {
    className: "spinner-loading"
  }, /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
    id: `${id}-tooltip-content`,
    style: {
      zIndex: 1999,
      maxWidth: 450
    },
    delayShow: 100
  }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
    id: `${id}-tooltip-error`,
    style: {
      zIndex: 1999,
      maxWidth: 450
    }
  }), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
    open: menuVisible,
    pos: position,
    setOpen: setMenuVisible,
    menuRef: menuRef,
    contextMenuItems: contextMenuItems,
    contextMenuClick: contextMenuClick,
    rowData: selectedRowData
  }));
};
var _default = exports.default = TableWrapper;