es-grid-template/lib/grid-component/InternalTable.js

es-grid-template

"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 _dayjs = _interopRequireDefault(require("dayjs"));
require("dayjs/locale/es");
require("dayjs/locale/vi");
var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
var _Grid = _interopRequireDefault(require("./table/Grid"));
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");
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 {Resizable} from "react-resizable";

// import useColumns from "./hooks/useColumns";

// import 'rc-master-ui/assets/index.css'

// import {CSS} from "@dnd-kit/utilities";

_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
    };
  }
  // dragover dashed style
  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 { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });

  const style = {
    ...props.style,
    // 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 => {
  const dragState = (0, _react.useContext)(DragIndexContext);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, 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,
    allowResizing,
    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,
    ...rest
  } = props;
  const id = _react.default.useMemo(() => {
    return tableId ?? _faker.faker.string.alpha(20);
    // return tableId ?? newGuid()
  }, [tableId]);
  const rowKey = _react.default.useMemo(() => {
    return propRowKey ?? 'rowId';
  }, [propRowKey]);
  const [scrollHeight, setHeight] = (0, _react.useState)(0);

  // const heightt = React.useMemo(() => {
  //
  //   const table = document.querySelector(`#${id}`)
  //   console.log('table', table)
  //
  //   const title: any = table?.querySelector(`.ui-rc-table-title`)
  //
  //   console.log('title', title)
  //
  //   if (title) {
  //     const titleHeight = title.offsetHeight;
  //     console.log('Chiều cao:', titleHeight);
  //   }
  //
  //   return (height ?? 0) - (title ? title.offsetHeight : 0)
  //
  // }, [height, id])

  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] = (0, _react.useState)('');
  const mergedData = _react.default.useMemo(() => {
    // return addRowIdArray(dataSource)

    if (groupSetting && groupSetting.client !== false) {
      return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
    }
    return (0, _hooks.addRowIdArray)(dataSource);
  }, [dataSource, groupColumns, groupSetting]);
  const [columns, setColumns] = _react.default.useState([]);
  _react.default.useEffect(() => {
    if (propsHeight) {
      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 = (propsHeight ?? 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);
      setHeight(hhh > 0 ? hhh : 0);
    }
  }, [id, propsHeight, columns, editAble]);
  const tableRef = _react.default.useRef(null);
  _react.default.useEffect(() => {
    setColumns(propsColumns);
  }, [propsColumns]);
  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 [transformSelectionColumns] = useColumns<RecordType>(
  //   {
  //     locale,
  //     t,
  //     rowKey,
  //     // dataSource: mergerdData,
  //     dataSource,
  //     buddhistLocale,
  //     dataSourceFilter: propDataSourceFilter,
  //     format,
  //     sortMultiple,
  //     groupAble,
  //     groupSetting,
  //     groupColumns,
  //     handleResize,
  //     // onMouseHover
  //   },
  // );

  // const mergedColumns: any = React.useMemo(() => {
  //   return transformSelectionColumns(columns)
  // }, [columns, transformSelectionColumns])

  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') ? _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})
          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)
        }
      }
    }
  }), [buddhistLocale, propDataSourceFilter, locale, t]);
  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__*/_react.default.createElement(SortableHeaderCell, {
          columnKey: column.field
        }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
          column: {
            ...column
          },
          t: t,
          id: id
        })),
        ellipsis: column.ellipsis !== false,
        align: column.textAlign ?? column.align,
        fixed: column.fixedType ?? column.fixed,
        isSummary: column.isSummary ?? column.haveSum,
        hidden: column.hidden ?? column.visible === false
      };
      if (transformedColumn.field === '#') {
        return {
          ...transformedColumn,
          title: () => /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
            column: {
              ...column
            },
            t: t
          }),
          onCell: () => ({
            className: 'cell-number'
          }),
          render: (val, record) => {
            if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
              return (0, _hooks.findItemPath)(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
            }
            return (0, _hooks.findItemPath)(mergedData, record, rowKey);
          }
        };
      }
      if (transformedColumn.field === 'command') {
        return {
          ...transformedColumn,
          title: () => /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
            column: {
              ...column
            },
            t: t
          }),
          onCell: () => ({
            className: 'cell-number',
            style: {
              padding: '2px 8px'
            }
          })
        };
      }
      return {
        ...transformedColumn,
        ...(transformedColumn.allowFiltering === false ? {} : {
          ...getColumnSearchProps(column)
        }),
        sorter: column.sorter === false ? undefined : {
          compare: a => a,
          multiple: sortMultiple ? colIndex : undefined
        },
        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,
          onResize: handleResize?.(column),
          className: column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''
        }),
        onCell: (data, index) => {
          return {
            id: `${column.field}`,
            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 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
            }),
            // 'data-tooltip-id': "tooltip-cell-content"
            'data-tooltip-id': `${id}-tooltip-cell-content`
          };
        },
        render: (value, record, rowIndex) => {
          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
          const cellFormat = (0, _hooks.getFormat)(colFormat, format);
          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
            if (record.children) {
              return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
            }
            if (groupColumns?.includes(column.field)) {
              return '';
            }
            return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
          }
          if (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, cellFormat);
            }
            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
          }
          return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
        },
        hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
      };
    });
  }, [columns, t, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, pagination, mergedData, rowKey, 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
        })),
        ellipsis: column.ellipsis !== false,
        align: column.textAlign ?? column.align,
        fixed: column.fixedType ?? column.fixed,
        isSummary: column.isSummary ?? column.haveSum,
        hidden: column.hidden ?? column.visible === false
      };

      // 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, t]);
  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: [],
      columns: [],
      flattenColumns: []
    });
  };
  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];
    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)(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
                };
                // 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) => {
    const handlePasteCallback = callbackData => {
      const newDataUpdate = (0, _hooks.updateData)(mergedData, callbackData, rowKey);
      triggerChangeData(newDataUpdate);

      // onCellPaste?.dataChange?.(newDataUpdate)
    };
    if (onCellPaste && onCellPaste.onPasted) {
      if (onCellPaste.onPasted.length > 1) {
        // có callback
        onCellPaste.onPasted({
          pasteData: pastedRows,
          type: 'onPaste',
          data: mergedData,
          pastedColumns: pastedColumnsArray
        }, handlePasteCallback);
      } else {
        // không có callback
        onCellPaste.onPasted({
          pasteData: pastedRows,
          type: 'onPaste',
          data: mergedData,
          pastedColumns: pastedColumnsArray
        }, handlePasteCallback);
        triggerChangeData(newData);

        // onCellPaste.dataChange?.(newData)
      }
    } else {
      triggerChangeData(newData);
    }
  };
  const TableComponent = groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
  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(TableComponent, (0, _extends2.default)({}, rest, {
    t: t,
    id: id,
    locale: locale,
    tableRef: tableRef,
    dataSource: mergedData,
    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
    // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
    ,

    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
      y: 500
    } : {
      y: scrollHeight - (summary ? 1 : 1)
    } // scroll height auto, không quá  600
    ,

    height: propsHeight,
    scrollHeight: scrollHeight,
    components: {
      header: {
        cell: ResizableTitle
      },
      body: {
        cell: TableBodyCell
      }
    },
    setTooltipContent: setTooltipContent
  })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
    style: {
      width: 100
    }
  }, /*#__PURE__*/_react.default.createElement("th", {
    style: {
      backgroundColor: '#c4c4c4',
      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
    },
    render: () => {
      if (tooltipContent) {
        return /*#__PURE__*/_react.default.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
      }
      return undefined;
    }
  }));
};
var _default = exports.default = InternalTable;