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

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
// import {Resizable} from "react-resizable";
import 'react-resizable/css/styles.css';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
import dayjs from "dayjs";
import 'dayjs/locale/es';
import 'dayjs/locale/vi';
import GridEdit from "./table/GridEdit";
import Grid from "./table/Grid";
import en from "rc-master-ui/es/date-picker/locale/en_US";
import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
import enDr from "rc-master-ui/es/locales/en_US";
import viDr from "rc-master-ui/es/locales/vi_VN";
// import useColumns from "./hooks/useColumns";

import "./styles.scss";
// import 'rc-master-ui/assets/index.css'

import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
import Group from "./table/Group";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Tooltip } from "react-tooltip";
import classNames from "classnames";
import HeaderContent from "./hooks/content/HeaderContent";
import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
import { Select } from "rc-master-ui";
import { Button, Space } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
// import {CSS} from "@dnd-kit/utilities";
import { Resizable } from "react-resizable";
import { faker } from "@faker-js/faker";
dayjs.extend(customParseFormat);
const MySwal = withReactContent(Swal);
const ASCEND = 'ascend';
const DESCEND = 'descend';
export const 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__*/createContext({
  active: -1,
  over: -1
});
const ResizableTitle = props => {
  const {
    onResize,
    width,
    ...restProps
  } = props;
  const dragState = 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.createElement("th", restProps);
  }
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(Resizable, {
      width: width,
      height: 0,
      handle: /*#__PURE__*/React.createElement("span", {
        className: "rc-resizable-handle",
        onClick: e => {
          e.stopPropagation();
        }
      }),
      onResize: onResize,
      draggableOpts: {
        enableUserSelectHack: false
      }
    }, /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
      style: style
    })))
  );
};
const TableBodyCell = props => {
  const dragState = useContext(DragIndexContext);
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    style: {
      ...props.style,
      ...dragActiveStyle(dragState, props.id)
    }
  }));
};
const SortableHeaderCell = ({
  children,
  columnKey
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    isDragging
  } = useSortable({
    id: columnKey
  });
  const style = {
    // ...props.style,
    cursor: 'move',
    ...(isDragging ? {
      position: 'relative',
      zIndex: 9999,
      userSelect: 'none'
    } : {})
    // ...dragActiveStyle(dragState, props.id),
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    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.useMemo(() => {
    return tableId ?? faker.string.alpha(20);
    // return tableId ?? newGuid()
  }, [tableId]);
  const rowKey = React.useMemo(() => {
    return propRowKey ?? 'rowId';
  }, [propRowKey]);
  const [scrollHeight, setHeight] = 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 : vi;
  const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
  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] = useState({
    active: -1,
    over: -1
  });
  const [tooltipContent, setTooltipContent] = useState('');
  const mergedData = React.useMemo(() => {
    // return addRowIdArray(dataSource)

    if (groupSetting && groupSetting.client !== false) {
      return groupArrayByColumns(dataSource, groupColumns);
    }
    return addRowIdArray(dataSource);
  }, [dataSource, groupColumns, groupSetting]);
  const [columns, setColumns] = React.useState([]);
  React.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.useRef(null);
  React.useEffect(() => {
    setColumns(propsColumns);
  }, [propsColumns]);
  const handleResize = column => (e, {
    size
  }) => {
    const newColumn = {
      ...column,
      width: size.width
    };
    const newColumns = updateArrayByKey(columns, newColumn, 'field');
    setColumns(newColumns);
  };

  // ============================ RowKey ============================
  const getRowKey = React.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 = flatColumns2(columns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
  const nonGroupColumns = flatColumns2(columns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
  const getColumnSearchProps = useCallback(column => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      setOperatorKey,
      operatorKey,
      visible,
      searchValue,
      setSearchValue
    }) => {
      const type = getTypeFilter(column);
      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
      return /*#__PURE__*/React.createElement("div", {
        style: {
          padding: 8,
          minWidth: 275
        },
        onKeyDown: e => e.stopPropagation()
      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
        className: 'mb-1'
      }, /*#__PURE__*/React.createElement(Select, {
        options: translateOption(operatorOptions, t),
        style: {
          width: '100%',
          marginBottom: 8
        },
        value: operatorKey,
        onChange: val => {
          setOperatorKey(val);
        }
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          marginBottom: 8
        }
      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/React.createElement(Space, {
        style: {
          justifyContent: 'end',
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement(Button, {
        type: "primary",
        onClick: () => {
          // confirm({closeDropdown: false})
          confirm();
          // handleSearch(selectedKeys as string[], confirm)
        },
        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
        size: "small",
        style: {
          width: 90
        }
      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
        type: "link",
        size: "small",
        onClick: () => {
          // setSearchValue('')
          setSelectedKeys([]);
          confirm();
          // handleSearch()
          // close()
        }
      }, t ? t("Clear") : 'Clear')));
    },
    filterIcon: filtered => /*#__PURE__*/React.createElement(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.useMemo(() => {
    return 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.createElement(SortableHeaderCell, {
          columnKey: column.field
        }, /*#__PURE__*/React.createElement(HeaderContent, {
          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.createElement(HeaderContent, {
            column: {
              ...column
            },
            t: t
          }),
          onCell: () => ({
            className: 'cell-number'
          }),
          render: (val, record) => {
            if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
              return findItemPath(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
            }
            return findItemPath(mergedData, record, rowKey);
          }
        };
      }
      if (transformedColumn.field === 'command') {
        return {
          ...transformedColumn,
          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
            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.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(SortCancel, {
            fontSize: 15,
            style: {
              display: 'flex',
              opacity: 0,
              marginLeft: 4
            },
            className: classNames(`ui-rc-table-column-sorter-up`, {
              active: true
            })
          }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
            className: classNames(`ui-rc-table-column-sorter-up`, {
              active: sortOrder === ASCEND
            }),
            style: {
              display: 'flex',
              marginLeft: 4
            }
          }, /*#__PURE__*/React.createElement(ArrowUp, {
            fontSize: 15,
            color: '#000'
          })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
            className: classNames(`ui-rc-table-column-sorter-up`, {
              active: sortOrder === DESCEND
            }),
            style: {
              display: 'flex',
              marginLeft: 4
            }
          }, /*#__PURE__*/React.createElement(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: classNames(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 = getFormat(colFormat, format);
          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
            if (record.children) {
              return renderContent(column, value, record, rowIndex, cellFormat);
            }
            if (groupColumns?.includes(column.field)) {
              return '';
            }
            return renderContent(column, value, record, rowIndex, cellFormat);
          }
          if (column.field === firstNonGroupColumn?.field && record.children) {
            const currentGroupColumn = flatColumns2(columns).find(it => it.field === record.field);
            if (currentGroupColumn?.template) {
              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
            }
            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
          }
          return 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.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.createElement(SortableHeaderCell, {
          columnKey: column.field
        }, /*#__PURE__*/React.createElement(HeaderContent, {
          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.useMemo(() => {
    return transformColumns(columns);
  }, [columns, transformColumns]);
  const sensors = useSensors(useSensor(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 = flatColumns2(columns).find(it => it.field === over?.id);
      const activeIndex = flatColumns2(columns).findIndex(i => i.field === active?.id);
      const overIndex = flatColumns2(columns).findIndex(i => i.field === over?.id);
      const rs = 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(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: removeColumns(columns, groupedColumns),
            flattenColumns: flatColumns2(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 = 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 = 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 = 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 = 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 = 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 : editAble ? GridEdit : Grid;
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
    sensors: sensors,
    modifiers: [restrictToHorizontalAxis],
    onDragEnd: onDragEnd,
    onDragOver: onDragOver,
    collisionDetection: closestCenter
  }, /*#__PURE__*/React.createElement(SortableContext, {
    items: columns.map(i => i.field),
    strategy: horizontalListSortingStrategy
  }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
    value: dragIndex
  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, 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.createElement(DragOverlay, {
    style: {
      width: 100
    }
  }, /*#__PURE__*/React.createElement("th", {
    style: {
      backgroundColor: '#c4c4c4',
      padding: 6,
      borderRadius: 6,
      fontWeight: 500
    }
  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Tooltip, {
    id: `${id}-tooltip-form-error`,
    style: {
      zIndex: 1999
    }
  }), /*#__PURE__*/React.createElement(Tooltip, {
    id: `${id}-tooltip-cell-content`,
    style: {
      zIndex: 1999
    },
    render: () => {
      if (tooltipContent) {
        return /*#__PURE__*/React.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
      }
      return undefined;
    }
  }));
};
export default InternalTable;