es-grid-template 1.8.64 → 1.8.66

package/lib/grid-component/InternalTable.js

@@ -1,1178 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SELECTION_COLUMN = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-require("react-resizable/css/styles.css");
-var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
-var _hooks = require("./hooks");
-var _server = _interopRequireDefault(require("react-dom/server"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-require("dayjs/locale/es");
-require("dayjs/locale/vi");
-var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
-var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
-var _en_US2 = _interopRequireDefault(require("rc-master-ui/es/locales/en_US"));
-var _vi_VN2 = _interopRequireDefault(require("rc-master-ui/es/locales/vi_VN"));
-require("./styles.scss");
-var _columns = require("./hooks/columns");
-var _Group = _interopRequireDefault(require("./table/Group"));
-var _sweetalert = _interopRequireDefault(require("sweetalert2"));
-var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
-var _reactTooltip = require("react-tooltip");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _HeaderContent = _interopRequireDefault(require("./hooks/content/HeaderContent"));
-var _becoxyIcons = require("becoxy-icons");
-var _rcMasterUi = require("rc-master-ui");
-var _antd = require("antd");
-var _icons = require("@ant-design/icons");
-var _modifiers = require("@dnd-kit/modifiers");
-var _core = require("@dnd-kit/core");
-var _sortable = require("@dnd-kit/sortable");
-var _reactResizable = require("react-resizable");
-var _faker = require("@faker-js/faker");
-var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-var _reactNumericComponent = require("react-numeric-component");
-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 GridEdit from "./table/GridEdit"
-// import InfiniteTable from "./table/InfiniteTable";
-
-// import Grid from "./table/Grid"
-
-// import useColumns from "./hooks/useColumns";
-
-// import 'rc-master-ui/es/date-range-picker/styles/index.less'
-// import 'rc-master-ui/assets/index.css'
-
-// import {CSS} from "@dnd-kit/utilities";
-
-// import Modal from 'antd/es/modal/Modal'
-
-_dayjs.default.extend(_customParseFormat.default);
-const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
-const ASCEND = 'ascend';
-const DESCEND = 'descend';
-const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
-const dragActiveStyle = (dragState, id) => {
-  const {
-    active,
-    over,
-    direction
-  } = dragState;
-  // drag active style
-  let style = {};
-  if (active && active === id) {
-    style = {
-      backgroundColor: '#c0c0c0',
-      opacity: 0.3
-    };
-  } else if (over && id === over && active !== over) {
-    style = direction === 'right' ? {
-      borderRight: '1px dashed gray'
-    } : {
-      borderLeft: '1px dashed gray'
-    };
-  }
-  return style;
-};
-const DragIndexContext = /*#__PURE__*/(0, _react.createContext)({
-  active: -1,
-  over: -1
-});
-const ResizableTitle = props => {
-  const {
-    onResize,
-    width,
-    ...restProps
-  } = props;
-  const dragState = (0, _react.useContext)(DragIndexContext);
-  const style = {
-    ...props.style,
-    borderBottom: '1px solid #e0e0e0',
-    // cursor: 'move',
-    // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
-    ...dragActiveStyle(dragState, props.id)
-  };
-  if (!width) {
-    return /*#__PURE__*/_react.default.createElement("th", restProps);
-  }
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    _react.default.createElement(_reactResizable.Resizable, {
-      width: width,
-      height: 0,
-      handle: /*#__PURE__*/_react.default.createElement("span", {
-        className: "rc-resizable-handle",
-        onClick: e => {
-          e.stopPropagation();
-        }
-      }),
-      onResize: onResize,
-      draggableOpts: {
-        enableUserSelectHack: false
-      }
-    }, /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({}, restProps, {
-      style: style
-    })))
-  );
-};
-
-// const TableBodyCell = (props: any) => {
-//   const dragState = useContext<DragIndexState>(DragIndexContext)
-//   return <div {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />
-// }
-
-const SortableHeaderCell = ({
-  children,
-  columnKey
-}) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging
-  } = (0, _sortable.useSortable)({
-    id: columnKey
-  });
-  const style = {
-    // ...props.style,
-    cursor: 'move',
-    ...(isDragging ? {
-      position: 'relative',
-      zIndex: 9999,
-      userSelect: 'none'
-    } : {})
-    // ...dragActiveStyle(dragState, props.id),
-  };
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: setNodeRef,
-    style: style
-  }, attributes, listeners), children);
-};
-const InternalTable = props => {
-  const {
-    t,
-    id: tableId,
-    // columns,
-    columns: propsColumns,
-    lang,
-    locale,
-    dataSource,
-    dataSourceFilter: propDataSourceFilter,
-    // onFilterClick,
-    // onFilter,
-    editAble,
-    // rowKey: propRowKey,
-    format,
-    onDataChange,
-    sortMultiple,
-    // expandable,
-    // @ts-ignore
-    onCellPaste,
-    clickHeaderToSort = true,
-    // components,
-    onChooseColumns,
-    groupAble,
-    groupSetting,
-    groupColumns,
-    commandClick,
-    commandSettings,
-    pagination,
-    height: propsHeight,
-    summary,
-    // infiniteScroll,
-    wrapSettings,
-    onFilter,
-    onSorter,
-    // defaultSorter,
-    toolbarItems,
-    allowSortering,
-    allowFiltering,
-    ...rest
-  } = props;
-  const theadRef = _react.default.useRef(null);
-  const id = _react.default.useMemo(() => {
-    return tableId ?? _faker.faker.string.alpha(20);
-    // return tableId ?? newGuid()
-  }, [tableId]);
-
-  // const rowKey = React.useMemo(() => {
-  //   return  propRowKey ?? 'rowId'
-  // }, [propRowKey])
-
-  const rowKey = 'rowId';
-  const getWindowSize = () => {
-    const {
-      innerWidth,
-      innerHeight
-    } = window;
-    return {
-      innerWidth,
-      innerHeight
-    };
-  };
-  const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
-  _react.default.useEffect(() => {
-    const handleWindowResize = () => {
-      setWindowSize(getWindowSize());
-    };
-    window.addEventListener("resize", handleWindowResize);
-    return () => {
-      window.removeEventListener("resize", handleWindowResize);
-    };
-  }, []);
-  const [scrollHeight, setHeight] = (0, _react.useState)(0);
-  const [scrollHeight1, setHeight1] = (0, _react.useState)(0);
-
-  // const [isModalOpen, setIsModalOpen] = useState(false)
-
-  const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
-  const dateRangeLocale = lang && lang === 'en' ? _en_US2.default : _vi_VN2.default;
-  const buddhistLocale = {
-    ...local,
-    lang: {
-      ...local.lang
-    }
-  };
-
-  // const [filterStates, setFilterState] = React.useState<any>(null)
-  // const [isFilter, setIsFilter] = React.useState<boolean>(false);
-  // const [cellTooltip, seCellTooltip] = React.useState<any>(undefined);
-
-  const [dragIndex, setDragIndex] = (0, _react.useState)({
-    active: -1,
-    over: -1
-  });
-  // const [tooltipContent, setTooltipContent] = useState<any>('')
-
-  const [filterStates, setFilterState] = _react.default.useState(null);
-  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
-  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
-  const mergedData = _react.default.useMemo(() => {
-    if (groupSetting && groupSetting.client !== false) {
-      return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
-    }
-    return (0, _hooks.addRowIdArray)(dataSource);
-  }, [dataSource, groupColumns, groupSetting?.client]);
-
-  // ========================= Keys =========================
-  const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _hooks.getAllRowKey)(mergedData), {
-    value: undefined
-  });
-  const [columns, setColumns] = _react.default.useState([]);
-  _react.default.useEffect(() => {
-    const totalHeight = propsHeight;
-    if (totalHeight) {
-      const table = document.querySelector(`#${id}`);
-      const title = table?.querySelector(`.ui-rc-table-title`);
-      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
-      const paginationE = table?.querySelector(`.ui-rc-pagination`);
-      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
-      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
-      setHeight(hhh > 0 ? hhh : 0);
-    }
-  }, [id, propsHeight, summary, theadRef, columns]);
-  _react.default.useEffect(() => {
-    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
-    const totalHeight = windowSize.innerHeight - 60;
-    if (totalHeight && isFullScreen) {
-      const table = document.querySelector(`#${id}`);
-      const title = table?.querySelector(`.ui-rc-table-title`);
-      const header = table?.querySelector(`.ui-rc-table-header`);
-      const paginationE = table?.querySelector(`.ui-rc-pagination`);
-      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
-      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
-      setHeight1(hhh > 0 ? hhh : 0);
-    }
-  }, [id, isFullScreen, windowSize.innerHeight, toolbarItems]);
-  const tableRef = _react.default.useRef(null);
-  _react.default.useEffect(() => {
-    setColumns(propsColumns);
-  }, [propsColumns]);
-  const handleOnFilter = queries => {
-    if (onFilter) {
-      onFilter?.((0, _hooks.convertFilters)(queries));
-    } else {
-      setFilterState((0, _hooks.convertFilters)(queries));
-      const b = (0, _hooks.filterDataByColumns4)(mergedData, (0, _hooks.convertFilters)(queries), []);
-      setMergedFilterKeys((0, _hooks.getAllRowKey)(b));
-      if (queries && queries.length > 0) {
-        // setIsFilter?.(true)
-      } else {
-        // setIsFilter?.(false)
-      }
-    }
-  };
-  const handleResize = column => (e, {
-    size
-  }) => {
-    const newColumn = {
-      ...column,
-      width: size.width
-    };
-    const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
-    setColumns(newColumns);
-  };
-
-  // ============================ RowKey ============================
-  const getRowKey = _react.default.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    // @ts-ignore
-    return record => record?.[rowKey];
-  }, [rowKey]);
-  const firstNonGroupColumn = (0, _columns.flatColumns2)(columns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
-  const nonGroupColumns = (0, _columns.flatColumns2)(columns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
-  const getColumnSearchProps = (0, _react.useCallback)(column => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      setOperatorKey,
-      operatorKey,
-      visible,
-      searchValue,
-      setSearchValue
-    }) => {
-      const type = (0, _hooks.getTypeFilter)(column);
-      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
-
-      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          padding: 8,
-          minWidth: 275
-        },
-        onKeyDown: e => e.stopPropagation()
-      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
-        className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
-        options: (0, _hooks.translateOption)(operatorOptions, t),
-        style: {
-          width: '100%',
-          marginBottom: 8
-        },
-        value: operatorKey,
-        onChange: val => {
-          setOperatorKey(val);
-        }
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginBottom: 8
-        }
-      }, (0, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/_react.default.createElement(_antd.Space, {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
-        type: "primary",
-        onClick: () => {
-          // confirm({closeDropdown: false})
-          const typeFilter = (0, _hooks.getTypeFilter)(column);
-          if ((!typeFilter || typeFilter === 'Text') && (0, _hooks.isNullOrUndefined)(selectedKeys[0])) {
-            setSelectedKeys(['']);
-          }
-          confirm();
-          // handleSearch(selectedKeys as string[], confirm)
-        },
-        icon: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-        type: "link",
-        size: "small",
-        onClick: () => {
-          // setSearchValue('')
-          setSelectedKeys([]);
-          confirm();
-          // handleSearch()
-          // close()
-        }
-      }, t ? t("Clear") : 'Clear')));
-    },
-    filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
-      fontSize: 12
-      // onClick={() => {
-      //   onFilterClick?.(column, onFilterCallback)
-      // }}
-      ,
-      style: {
-        color: filtered ? '#E3165B' : '#283046'
-      }
-    }),
-    filterDropdownProps: {
-      onOpenChange(open) {
-        if (open) {
-          // setTimeout(() => searchInput.current?.select(), 100)
-        }
-      }
-    }
-  }), [t, propDataSourceFilter, buddhistLocale, locale, format, dateRangeLocale]);
-  const convertColumns = _react.default.useMemo(() => {
-    return (0, _columns.flatColumns2)(columns).map((column, colIndex) => {
-      if (column === SELECTION_COLUMN) {
-        return SELECTION_COLUMN;
-      }
-      const transformedColumn = {
-        ...column,
-        dataIndex: column.field ?? column.dataIndex,
-        key: column.field ?? column.key,
-        // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
-        title:
-        /*#__PURE__*/
-        // <SortableHeaderCell columnKey={column.field}>
-        _react.default.createElement(_HeaderContent.default, {
-          column: {
-            ...column
-          },
-          t: t,
-          id: id,
-          wrapSettings: wrapSettings
-        })
-        // </SortableHeaderCell>
-        ,
-        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        // ellipsis: column.ellipsis !== false || (wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both'),
-        ellipsis: false,
-        align: column.textAlign ?? column.align,
-        fixed: column.fixedType ?? column.fixed,
-        isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false
-      };
-      const headerTooltip = t ? t?.(column.headerTooltip ?? column.columnGroupText ?? column.headerText) : column.headerTooltip ?? column.columnGroupText ?? column.headerText;
-      if (transformedColumn.field === '#') {
-        return {
-          ...transformedColumn,
-          title: () => /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
-            column: {
-              ...column
-            },
-            t: t,
-            id: id,
-            wrapSettings: wrapSettings
-          }),
-          onCell: data => ({
-            // className: 'cell-number',
-            className: (0, _classnames.default)('cell-number', {
-              'cell-group': groupColumns && data.children
-            })
-          }),
-          render: (val, record) => {
-            const tmpData = (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys);
-            if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
-              return (0, _hooks.findItemPath)(tmpData, record, rowKey, pagination.currentPage, pagination.pageSize);
-            }
-            return (0, _hooks.findItemPath)(tmpData, record, rowKey);
-          }
-        };
-      }
-      if (transformedColumn.field === 'command') {
-        return {
-          ...transformedColumn,
-          title: () => /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
-            column: {
-              ...column
-            },
-            t: t,
-            id: id,
-            wrapSettings: wrapSettings
-          }),
-          onCell: data => ({
-            // className: 'cell-number',
-            className: (0, _classnames.default)('', {
-              'cell-group': groupColumns && data.children
-            }),
-            style: {
-              padding: '2px 8px'
-            }
-          })
-        };
-      }
-      return {
-        ...transformedColumn,
-        ...(transformedColumn.allowFiltering === false || allowFiltering === false ? {} : {
-          ...getColumnSearchProps(column)
-        }),
-        sorter: column.sorter === false || allowSortering === false ? undefined : {
-          // @ts-ignore
-          compare: (a, b) => onSorter ? a : a[column.field] - b[column.field],
-          multiple: sortMultiple ? colIndex : undefined
-        },
-        // @ts-ignore
-        // sorter: (a, b) => a[column.field] - b[column.field],
-
-        sortIcon: args => {
-          const {
-            sortOrder
-          } = args;
-          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel, {
-            fontSize: 15,
-            style: {
-              display: 'flex',
-              opacity: 0,
-              marginLeft: 4
-            },
-            className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
-              active: true
-            })
-          }), sortOrder === ASCEND && /*#__PURE__*/_react.default.createElement("span", {
-            className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
-              active: sortOrder === ASCEND
-            }),
-            style: {
-              display: 'flex',
-              marginLeft: 4
-            }
-          }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
-            fontSize: 15,
-            color: '#000'
-          })), sortOrder === DESCEND && /*#__PURE__*/_react.default.createElement("span", {
-            className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
-              active: sortOrder === DESCEND
-            }),
-            style: {
-              display: 'flex',
-              marginLeft: 4
-            }
-          }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowDown, {
-            fontSize: 15,
-            color: '#000'
-          })));
-        },
-        onHeaderCell: () => ({
-          id: `${column.field}`,
-          // width: column.width,
-
-          'data-tooltip-id': `${id}-tooltip-header`,
-          'data-tooltip-content': headerTooltip,
-          onResize: handleResize?.(column),
-          className: (0, _classnames.default)('', {
-            'head-align-center': column.headerTextAlign === 'center',
-            'head-align-right': column.headerTextAlign === 'right',
-            'ui-rc-table-cell-ellipsis': !wrapSettings || !!(wrapSettings && wrapSettings.wrapMode === 'Content'),
-            // mặc định = true
-            'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
-          })
-        }),
-        onCell: (data, index) => {
-          const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
-            value: data[column.field ?? ''],
-            record: data
-          }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
-          return {
-            id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? groupSetting?.groupColumnSpan ?? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
-            // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
-            ...transformedColumn?.onCell?.(data, index),
-            className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
-              'cell-group': groupColumns && data.children,
-              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field,
-              'ui-rc-table-cell-ellipsis': !wrapSettings || wrapSettings && (wrapSettings.wrapMode === 'Header' || wrapSettings.wrapMode !== 'Both'),
-              // mặc định = true
-              'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Content' || wrapSettings.wrapMode === 'Both')
-            }),
-            'data-tooltip-id': `${id}-tooltip-cell-content`,
-            "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
-            onMouseEnter: e => {
-              if (e.target.firstChild?.clientWidth <= e.target.firstChild?.scrollWidth) {
-                if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
-                  setIsOpenTooltip(true);
-                } else {
-                  setIsOpenTooltip(false);
-                }
-              } else {
-                if (e.target.clientWidth < e.target.scrollWidth) {
-                  setIsOpenTooltip(true);
-                } else {
-                  setIsOpenTooltip(false);
-                }
-              }
-            }
-          };
-        },
-        render: (value, record, rowIndex) => {
-          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
-          const cellFormat = (0, _hooks.getFormat)(colFormat, format);
-          if (groupAble && groupSetting && groupSetting.hiddenColumnGroup === false) {
-            if (record.children) {
-              return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
-            }
-            if (groupColumns?.includes(column.field)) {
-              return '';
-            }
-            return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
-          }
-          if (groupAble && column.field === firstNonGroupColumn?.field && record.children) {
-            const currentGroupColumn = (0, _columns.flatColumns2)(columns).find(it => it.field === record.field);
-            if (currentGroupColumn?.template) {
-              return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
-            }
-            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
-          }
-          if (groupAble && record.children && column.sumGroup === true && column.type === 'number') {
-            const thousandSeparator = cellFormat?.thousandSeparator;
-            const decimalSeparator = cellFormat?.decimalSeparator;
-            const dec = cellFormat?.decimalScale;
-            const numericFormatProps = {
-              thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
-              decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-              allowNegative: cellFormat?.allowNegative ?? true,
-              prefix: cellFormat?.prefix,
-              suffix: cellFormat?.suffix,
-              decimalScale: dec,
-              fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-            };
-            const sumValue = (0, _hooks.sumByField)((0, _hooks.filterDataByColumns4)(record.children, [], []), column?.field);
-            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _reactNumericComponent.numericFormatter)(sumValue.toString(), numericFormatProps));
-          }
-          return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
-        },
-        // defaultSortOrder: 'ascend',
-
-        hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
-      };
-    });
-  }, [columns, t, id, wrapSettings, editAble, getColumnSearchProps, groupSetting, groupAble, groupColumns, mergedData, filterStates, mergedFilterKeys, pagination, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
-  const transformColumns = _react.default.useCallback(cols => {
-    return cols.map(column => {
-      const find = convertColumns.find(it => it.field === column.field);
-      if (column === SELECTION_COLUMN) {
-        return SELECTION_COLUMN;
-      }
-      const tmpColumn = {
-        ...column,
-        dataIndex: column.field ?? column.dataIndex,
-        key: column.field ?? column.key,
-        title: /*#__PURE__*/_react.default.createElement(SortableHeaderCell, {
-          columnKey: column.field
-        }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
-          column: {
-            ...column
-          },
-          t: t,
-          id: id,
-          wrapSettings: wrapSettings
-        })),
-        ellipsis: false,
-        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-
-        align: column.textAlign ?? column.align,
-        fixed: column.fixedType ?? column.fixed,
-        isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false
-        // defaultSortOrder: 'ascend'
-      };
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          ...tmpColumn,
-          children: transformColumns(column.children)
-        };
-      }
-      if (find) {
-        return {
-          ...find
-        };
-      }
-      if (!find) {
-        return {
-          ...column,
-          ...tmpColumn
-        };
-      }
-    });
-  }, [convertColumns, editAble, id, t, wrapSettings]);
-  const mergedColumns = _react.default.useMemo(() => {
-    return transformColumns(columns);
-  }, [columns, transformColumns]);
-  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
-    activationConstraint: {
-      distance: 1
-    }
-  }));
-  const triggerChangeColumns = (newColumns, type) => {
-    setColumns(newColumns);
-    if (tableRef.current && type === 'columnChoose') {
-      tableRef.current.scrollTo({
-        left: 0.1,
-        behavior: "smooth"
-      });
-    }
-    onChooseColumns?.({
-      showColumns: (0, _hooks.removeInvisibleColumns)([...newColumns]),
-      columns: [...newColumns],
-      flattenColumns: (0, _hooks.convertFlatColumn)([...newColumns])
-    });
-  };
-  const onDragEnd = ({
-    active,
-    over
-  }) => {
-    if (active.id !== over?.id) {
-      const targetColumn = (0, _columns.flatColumns2)(columns).find(it => it.field === over?.id);
-      const activeIndex = (0, _columns.flatColumns2)(columns).findIndex(i => i.field === active?.id);
-      const overIndex = (0, _columns.flatColumns2)(columns).findIndex(i => i.field === over?.id);
-      const rs = (0, _sortable.arrayMove)(columns, activeIndex, overIndex);
-      triggerChangeColumns(rs, targetColumn && targetColumn.fixed === 'left' ? 'columnChoose' : '');
-    }
-    setDragIndex({
-      active: -1,
-      over: -1
-    });
-  };
-  const onDragOver = ({
-    active,
-    over
-  }) => {
-    const activeIndex = columns.findIndex(i => i.field === active.id);
-    const overIndex = columns.findIndex(i => i.field === over?.id);
-    setDragIndex({
-      active: active.id,
-      over: over?.id,
-      direction: overIndex > activeIndex ? 'right' : 'left'
-    });
-  };
-  const triggerGroupColumns = groupedColumns => {
-    setColumns((0, _hooks.updateColumnsByGroup)(mergedColumns, groupedColumns));
-    if (groupSetting) {
-      if (groupSetting.client === false) {
-
-        // setIsTree(true)
-
-        // setGroupOpen([])
-
-        // const dt = ungroupArray(dataSource)
-
-        // const rs = groupArrayByColumns2(dt, [...value])
-
-        // setResource([...rs])
-
-        // if (groupSetting.onGroup) {
-        //   groupSetting.onGroup({
-        //     columnGrouped: value,
-        //     columns: removeColumns(columns as any, value),
-        //     flattenColumns: convertFlatColumn(removeColumns(columns as any, value)) as any
-        //
-        //   })
-        // }
-      } else {
-        if (groupSetting.onGroup) {
-          groupSetting.onGroup({
-            columnGrouped: groupedColumns,
-            columns: (0, _hooks.removeColumns)(columns, groupedColumns),
-            flattenColumns: (0, _columns.flatColumns2)((0, _hooks.removeColumns)(columns, groupedColumns))
-          });
-        }
-      }
-    }
-  };
-  const triggerChangeData = newData => {
-    // setIsManualUpdate(true)
-    // setData(newData)
-    // setMergedData(newData)
-    onDataChange?.(newData);
-    // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
-  };
-  const triggerCommandClick = args => {
-    const {
-      id: idCommand,
-      rowId,
-      rowData,
-      index
-    } = args;
-
-    // const tmpData = [...mergedData]
-    const tmpData = (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys);
-    if (idCommand === 'DELETE') {
-      // bật modal confirm
-      if (commandSettings && commandSettings.confirmDialog) {
-        MySwal.fire({
-          title: t ? t('Confirm') : 'Confirm',
-          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
-          // icon: 'warning',
-          allowOutsideClick: false,
-          showCancelButton: true,
-          confirmButtonText: t ? t('Delete') : 'Delete',
-          cancelButtonText: t ? t('Cancel') : 'Cancel',
-          customClass: {
-            confirmButton: 'be-button btn-primary',
-            cancelButton: 'be-button btn-danger ms-1'
-          },
-          buttonsStyling: false
-        }).then(async result => {
-          if (result.value) {
-            if (!commandSettings || commandSettings && commandSettings.client !== false) {
-              // client
-
-              // kiểm tra dòng hiện tại có parent
-
-              let newData = [];
-              if (rowData?.parentId) {
-                const parent = (0, _hooks.findItemByKey)(tmpData, rowKey, rowData.parentId);
-                const childData = parent?.children ? [...parent.children] : [];
-                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
-                childData.splice(Number(findIndex), 1);
-                const newRowData = {
-                  ...parent,
-                  children: childData
-                };
-                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
-                newData = (0, _hooks.updateArrayByKey)(tmpData, newRowData, rowKey);
-              } else {
-                tmpData.splice(Number(index), 1);
-                newData = [...tmpData];
-              }
-              if (commandClick) {
-                commandClick({
-                  id: idCommand,
-                  rowId: rowData.rowId,
-                  rowData,
-                  index,
-                  // rows: [...tmpData]
-                  rows: [...newData]
-                });
-              }
-            } else {
-              // server ~~ không làm gì
-              if (commandClick) {
-                commandClick({
-                  id: idCommand,
-                  rowId: rowData.rowId,
-                  rowData,
-                  index,
-                  rows: [...mergedData]
-                });
-              }
-            }
-          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
-        });
-      } else {
-        // -------------------
-
-        if (!commandSettings || commandSettings && commandSettings.client !== false) {
-          // client
-
-          let newData2 = [];
-          if (rowData?.parentId) {
-            const parent = (0, _hooks.findItemByKey)(mergedData, rowKey, rowData.parentId);
-            const childData = parent?.children ? [...parent.children] : [];
-            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
-            childData.splice(Number(findIndex), 1);
-            const newRowData = {
-              ...parent,
-              children: childData
-            };
-            newData2 = (0, _hooks.updateArrayByKey)(tmpData, newRowData, rowKey);
-          } else {
-            tmpData.splice(Number(index), 1);
-            newData2 = [...tmpData];
-          }
-          if (commandClick) {
-            commandClick({
-              id: idCommand,
-              rowId,
-              rowData,
-              index,
-              rows: [...newData2]
-            });
-          }
-        } else {
-          // server
-          if (commandClick) {
-            commandClick({
-              id: idCommand,
-              rowId,
-              rowData,
-              index,
-              rows: [...mergedData]
-            });
-          }
-        }
-      }
-    } else {
-      if (commandClick) {
-        commandClick(args);
-      }
-    }
-  };
-  const triggerPaste = (pastedRows, pastedColumnsArray, newData, copyRows) => {
-    const handlePasteCallback = callbackData => {
-      // const newDataUpdate  = updateData(mergedData, callbackData, rowKey as any)
-
-      const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...mergedData]), callbackData);
-      const rs = (0, _hooks.unFlattenData)(rsFilterData);
-      triggerChangeData(rs);
-
-      // onCellPaste?.dataChange?.(newDataUpdate)
-    };
-    if (onCellPaste && onCellPaste.onPasted) {
-      if (onCellPaste.onPasted.length > 1) {
-        // có callback
-        onCellPaste.onPasted({
-          pasteData: pastedRows,
-          copyRows,
-          type: 'onPaste',
-          data: mergedData,
-          pastedColumns: pastedColumnsArray
-        }, handlePasteCallback);
-      } else {
-        // không có callback
-        onCellPaste.onPasted({
-          pasteData: pastedRows,
-          type: 'onPaste',
-          copyRows,
-          data: mergedData,
-          pastedColumns: pastedColumnsArray
-        }, handlePasteCallback);
-        triggerChangeData(newData);
-
-        // onCellPaste.dataChange?.(newData)
-      }
-    } else {
-      triggerChangeData(newData);
-    }
-  };
-  const handleChange = (paging, filters, sorter) => {
-    onSorter?.(sorter);
-  };
-
-  // const fullScreenChange = (state: boolean) => {
-
-  //   setIsFullScreen(state)
-
-  // }
-
-  const handleFullScreen = () => {
-    setIsFullScreen(!isFullScreen);
-  };
-  const CustomThead = headerProps => {
-    const {
-      children,
-      className
-    } = headerProps;
-    return /*#__PURE__*/_react.default.createElement("thead", {
-      ref: theadRef,
-      className: className
-    }, children);
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
-    sensors: sensors,
-    modifiers: [_modifiers.restrictToHorizontalAxis],
-    onDragEnd: onDragEnd,
-    onDragOver: onDragOver,
-    collisionDetection: _core.closestCenter
-  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
-    items: columns.map(i => i.field),
-    strategy: _sortable.horizontalListSortingStrategy
-  }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
-    value: dragIndex
-  }, /*#__PURE__*/_react.default.createElement(_Group.default, (0, _extends2.default)({}, rest, {
-    t: t,
-    id: id,
-    locale: locale,
-    tableRef: tableRef
-    // dataSource={mergedData}
-    ,
-    originData: mergedData
-    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
-    ,
-    dataSource: (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys),
-    format: format,
-    columns: mergedColumns
-
-    // showSorterTooltip={false}
-    ,
-    showSorterTooltip: {
-      target: 'sorter-icon'
-    },
-    triggerChangeColumns: triggerChangeColumns,
-    triggerChangeData: triggerChangeData,
-    triggerGroupColumns: triggerGroupColumns,
-    rowKey: rowKey,
-    getRowKey: getRowKey,
-    triggerPaste: triggerPaste,
-    clickHeaderToSort: clickHeaderToSort,
-    groupSetting: groupSetting,
-    groupAble: groupAble,
-    groupColumns: groupColumns,
-    commandClick: triggerCommandClick,
-    summary: summary,
-    pagination: pagination,
-    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
-      y: 500
-    } : {
-      y: scrollHeight - (summary ? 1 : 1)
-    } // scroll height auto, không quá  600
-    ,
-    height: propsHeight,
-    scrollHeight: scrollHeight,
-    toolbarItems: toolbarItems,
-    components: {
-      header: {
-        cell: ResizableTitle,
-        wrapper: CustomThead
-      }
-    },
-    onFilter: val => {
-      handleOnFilter(val);
-    },
-    setMergedFilterKeys: setMergedFilterKeys,
-    mergedFilterKeys: mergedFilterKeys,
-    wrapSettings: wrapSettings,
-    onChange: handleChange,
-    handleFullScreen: handleFullScreen,
-    isFullScreen: isFullScreen
-  })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
-    style: {
-      minWidth: 100,
-      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
-    }
-  }, /*#__PURE__*/_react.default.createElement("th", {
-    style: {
-      backgroundColor: '#f0f0f0',
-      padding: 6,
-      borderRadius: 6,
-      fontWeight: 500
-    }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    open: isFullScreen,
-    footer: null,
-    centered: true,
-    closable: true,
-    width: '100%',
-    style: {
-      maxWidth: '100%',
-      height: '100%'
-    },
-    onClose: () => setIsFullScreen(false),
-    onCancel: () => setIsFullScreen(false)
-
-    // destroyOnClose
-    ,
-    styles: {
-      content: {
-        height: '100vh',
-        borderRadius: 0
-      },
-      wrapper: {
-        zIndex: 1060
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      paddingTop: 20
-    }
-  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
-    sensors: sensors,
-    modifiers: [_modifiers.restrictToHorizontalAxis],
-    onDragEnd: onDragEnd,
-    onDragOver: onDragOver,
-    collisionDetection: _core.closestCenter
-  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
-    items: columns.map(i => i.field),
-    strategy: _sortable.horizontalListSortingStrategy
-  }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
-    value: dragIndex
-  }, /*#__PURE__*/_react.default.createElement(_Group.default, (0, _extends2.default)({}, rest, {
-    t: t,
-    id: _faker.faker.string.alpha(20),
-    locale: locale,
-    tableRef: tableRef
-    // dataSource={mergedData}
-    ,
-    originData: mergedData
-    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
-    ,
-    dataSource: (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys),
-    format: format,
-    columns: mergedColumns,
-    showSorterTooltip: {
-      target: 'sorter-icon'
-    },
-    triggerChangeColumns: triggerChangeColumns,
-    triggerChangeData: triggerChangeData,
-    triggerGroupColumns: triggerGroupColumns,
-    rowKey: rowKey,
-    getRowKey: getRowKey,
-    triggerPaste: triggerPaste,
-    clickHeaderToSort: clickHeaderToSort,
-    groupSetting: groupSetting,
-    groupAble: groupAble,
-    groupColumns: groupColumns,
-    commandClick: triggerCommandClick,
-    summary: summary,
-    pagination: pagination,
-    toolbarItems: toolbarItems,
-    scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
-      y: 500
-    } : {
-      y: scrollHeight1 - (summary ? 1 : 1)
-    } // scroll height auto, không quá  600
-    ,
-
-    height: windowSize.innerHeight - 35,
-    scrollHeight: scrollHeight1,
-    components: {
-      header: {
-        cell: ResizableTitle
-      }
-      // body: { cell: TableBodyCell }
-    }
-    // setTooltipContent={setTooltipContent}
-    ,
-
-    onFilter: val => {
-      handleOnFilter(val);
-      // triggerFilter?.(convertFilters(val))
-      // onFilter?.(convertFilters(val))
-    },
-    setMergedFilterKeys: setMergedFilterKeys,
-    mergedFilterKeys: mergedFilterKeys,
-    wrapSettings: wrapSettings,
-    onChange: handleChange,
-    handleFullScreen: handleFullScreen,
-    isFullScreen: isFullScreen
-
-    // onChange={(paging, filters, sorter) => {
-    //   handleChange(sorter)
-    // }}
-  })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
-    style: {
-      minWidth: 100,
-      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
-    }
-  }, /*#__PURE__*/_react.default.createElement("th", {
-    style: {
-      backgroundColor: '#f0f0f0',
-      padding: 6,
-      borderRadius: 6,
-      fontWeight: 500
-    }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: `${id}-tooltip-form-error`,
-    style: {
-      zIndex: 1999
-    }
-  }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: `${id}-tooltip-cell-content`,
-    style: {
-      zIndex: 1999
-    }
-  }));
-};
-var _default = exports.default = InternalTable;