es-grid-template/lib/ali-table/Grid.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _WebsiteBaseTable = require("./assets/WebsiteBaseTable");
var _locale = require("rc-master-ui/es/locale");
var _react = _interopRequireWildcard(require("react"));
var _reactTooltip = require("react-tooltip");
require("./base-table/styles.scss");
var _rcMasterUi = require("rc-master-ui");
var _classnames = _interopRequireDefault(require("classnames"));
var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
var _becoxyIcons = require("becoxy-icons");
var _reactNumericComponent = require("react-numeric-component");
var _hooks = require("../grid-component/hooks");
var _ContextMenu = _interopRequireDefault(require("../table-component/ContextMenu"));
var _useContext = require("./useContext");
var _ColumnsChoose = require("./pipeline/features/ColumnsChoose");
var _styles2 = require("./base-table/styles");
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; }
// import type { TableProps } from "../table-component"

// const Grid = (props: GridProps) => {
const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    id,
    t,
    isFullScreen,
    setIsFullScreen,
    className: tableClassNames,
    title,
    showToolbar,
    toolbarItems,
    toolbarMode,
    pagination,
    infiniteScroll,
    dataSource,
    originData,
    format,
    locale,
    fullScreen,
    actionTemplate,
    bottom,
    theme,
    height,
    minHeight,
    pipeline,
    contextMenuItems: propContextMenuItems,
    contextMenuHidden,
    contextMenuOpen,
    recordDoubleClick,
    contextMenuClick,
    commandClick,
    onRowStyles,
    showColumnChoose,
    originColumns,
    columns,
    groupColumns,
    setVisibleKeys,
    footerDataSource,
    loading,
    useVirtual,
    useOuterBorder = true,
    showHeader = true
  } = props;
  const {
    cssVariables
  } = theme ?? {};
  const prefix = 'ui-rc';
  const stateKeyPager = 'pagination';
  const [tableLocal] = (0, _locale.useLocale)('Table');
  const [paginationLocal] = (0, _locale.useLocale)('Pagination');
  const menuRef = _react.default.useRef(null);
  const {
    windowSize
  } = (0, _react.useContext)(_useContext.TableContext);
  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 onResizeEnd = () => {};
  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.pageY;
      const pageY = event.pageY;
      if (x + menuWidth > windowSize.innerWidth) {
        x = x - menuWidth - 10; // Cách cạnh phải 10px
      }
      if (pageY > windowSize.innerHeight) {
        y = windowSize.innerHeight;
      }
      setPosition(prevState => ({
        ...prevState,
        x,
        y
      }));
    }, 100);
  };
  _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);
    };
  }, []);
  const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
    setVisibleKeys(nextVisibleKeys);
  };
  const artTableWrapperProps = {
    style: {
      ...cssVariables
    }
  };
  const topToolbaritems = _react.default.useMemo(() => {
    return (toolbarItems ?? []).filter(it => it.position !== 'Bottom');
  }, [toolbarItems]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.StyleTableContainer, {
    className: (0, _classnames.default)(`${prefix}-grid`, {
      [tableClassNames]: !!tableClassNames,
      [`${prefix}-grid-theme-dark`]: theme?.theme === 'dark'
    }),
    style: {
      maxHeight: height ?? 700,
      minHeight,
      display: 'flex',
      flexDirection: 'column',
      ...artTableWrapperProps.style
    }
  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center'
    }
  }, topToolbaritems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: 1,
      overflow: 'hidden'
    }
  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
    items: topToolbaritems,
    mode: toolbarMode
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: '.25rem'
    }
  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
    showSizeChanger: true,
    responsive: true,
    size: 'small',
    rootClassName: 'top-pagination',
    showTotal: (totalItems, range) =>
    // @ts-ignore
    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
    fontSize: 16,
    onClick: () => {
      setIsFullScreen(!isFullScreen);
    },
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-content": locale?.table?.minimized || tableLocal?.minimized || 'Minimized'
  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
    fontSize: 16,
    onClick: () => {
      setIsFullScreen(!isFullScreen);
    },
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
  })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
    id: id ?? '',
    locale: locale,
    tableLocal: tableLocal,
    columns: columns,
    originColumns: originColumns,
    t: t,
    columnsGroup: groupColumns,
    triggerChangeColumns: triggerChangeColumns
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      textAlign: 'center'
    }
  }, typeof title === 'function' ? title?.(dataSource) : title)), /*#__PURE__*/_react.default.createElement(_WebsiteBaseTable.WebsiteBaseTable, (0, _extends2.default)({
    ref: ref,
    id: id,
    showHeader: showHeader,
    commandClick: commandClick,
    isLoading: loading,
    useVirtual: useVirtual,
    hasStickyScroll: true,
    isStickyFooter: true,
    isStickyHeader: true,
    stickyBottom: 0,
    stickyTop: 0,
    defaultColumnWidth: 100,
    originData: originData,
    format: format

    // estimatedRowHeight={50}
    ,
    useOuterBorder: useOuterBorder
    // style={{ height: 700, overflow: 'auto' }}
    ,
    style: minHeight ? {
      flex: 1,
      overflow: 'auto',
      ...cssVariables
    } : {
      overflow: 'auto',
      ...cssVariables
    }

    // columnResizeMode={'onChange'}
    ,
    onResizeEnd: onResizeEnd
  }, pipeline.getProps(), {
    getRowProps: (row, rowIndex) => {
      const prevRowProps = pipeline.getProps().getRowProps?.(row, rowIndex);
      const rowStyle = onRowStyles ? typeof onRowStyles === 'function' ? onRowStyles(row) : onRowStyles : undefined;
      return {
        ...prevRowProps,
        className: (0, _classnames.default)(``, {
          [`${prefix}-grid-row-parent`]: row.children && row.children.length > 0 || Array.isArray(row.children)
        }),
        style: {
          ...prevRowProps?.style,
          ...rowStyle
        },
        onContextMenu: e => {
          if (contextMenuItems && contextMenuItems.length) {
            const cell = e.target.closest('[data-col-key]');
            const colKey = cell?.getAttribute('data-col-key');
            onContextMenu?.({
              rowData: row,
              field: colKey
            })(e);
          }
        },
        onDoubleClick: e => {
          recordDoubleClick?.({
            e,
            rowData: row,
            rowIndex: rowIndex
          });
        }
      };
    },
    theme: theme,
    footerDataSource: footerDataSource
  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
    pageSizeOptions: _hooks.pageSizeOptions,
    rootClassName: 'pagination-template',
    showSizeChanger: true,
    size: 'small',
    total: pagination.total,
    pageSize: pagination.onChange ? pagination.pageSize : pipeline.getStateAtKey(stateKeyPager)?.pageSize ?? _hooks.pageSizeOptions[0],
    showTotal: (totalItems, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
      thousandSeparator: '.'
    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
      thousandSeparator: '.'
    })} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
      thousandSeparator: '.'
    })} ${pagination?.locale?.items || paginationLocal?.items || ''}`,
    current: pagination.onChange ? pagination.currentPage : pipeline.getStateAtKey(stateKeyPager)?.currentPage
  }, pagination, {
    onChange: (page, pageSize1) => {
      if (pagination.onChange) {
        pagination.onChange(page, pageSize1);
      } else {
        pipeline.setStateAtKey(stateKeyPager, {
          currentPage: page,
          pageSize: pageSize1
        });
      }
    },
    responsive: true
  }))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
    id: `${id}-tooltip-content`,
    style: {
      zIndex: 1999,
      maxWidth: 450,
      whiteSpace: 'normal',
      wordWrap: 'break-word'
    },
    delayShow: 100,
    render: ({
      content,
      activeAnchor
    }) => activeAnchor?.getAttribute('data-tooltip-sort') || content
  }), /*#__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 = Grid;