es-grid-template/es/table-virtuoso/InternalTable.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { Fragment, useState } from 'react';
import 'react-resizable/css/styles.css';
import dayjs from 'dayjs';
import 'dayjs/locale/es';
import 'dayjs/locale/vi';
import { faker } from '@faker-js/faker';
import useMergedState from "rc-util/es/hooks/useMergedState";
import { getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, removeKeys } from "./hook/utils";
// import { convertToTanStackColumns } from './hook/useColumns'
import { removeInvisibleColumns } from "../grid-component/hooks";
import Grid from "./table/Grid";
import { removeColumns } from "../table-component/hook/utils";
import { OperatorFeature } from "../table-component/features/operator";
import { convertToTanStackColumns } from "../table-component/hook/useColumns";
import { ConfigProvider, CustomProvider } from 'rc-master-ui';
import { getLocale, getLocales } from "../locale/useLocale";
dayjs.extend(customParseFormat);
export const SELECTION_COLUMN = {};
const InternalTable = props => {
  const {
    t,
    columns: propsColumns,
    // columns,
    lang,
    locale,
    dataSource,
    editAble,
    format,
    groupAble,
    groupSetting,
    groupColumns,
    selectionSettings,
    expandable,
    onChooseColumns,
    height,
    pagination,
    allowResizing,
    infiniteScroll,
    sortMultiple,
    allowSortering,
    allowFiltering,
    ...rest
  } = props;
  const id = React.useMemo(() => {
    return faker.string.alpha(20);
  }, []);
  const language = React.useMemo(() => {
    return getLocale(lang);
  }, [lang]);
  const languages = React.useMemo(() => {
    return getLocales(lang);
  }, [lang]);
  const {
    defaultExpandedRowKeys,
    defaultExpandAllRows
  } = expandable || {};
  const rowKey = 'rowId';
  const prefix = 'ui-rc';
  const getWindowSize = () => {
    const {
      innerWidth,
      innerHeight
    } = window;
    return {
      innerWidth,
      innerHeight
    };
  };
  const [windowSize, setWindowSize] = useState(getWindowSize());
  React.useEffect(() => {
    const handleWindowResize = () => {
      setWindowSize(getWindowSize());
    };
    document.addEventListener('resize', handleWindowResize);
    return () => {
      document.removeEventListener('resize', handleWindowResize);
    };
  }, []);
  const [columnResizeMode] = React.useState('onChange');
  const [columnResizeDirection] = React.useState('ltr');
  const [rowSelection, setRowSelection] = React.useState({});

  // const [grouping, setGrouping] = React.useState<GroupingState>([])

  const [paginationState, setPagination] = React.useState({
    pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
    pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
  });
  const [columnSizing, setColumnSizing] = React.useState({});
  const [columnSizingInfo, setColumnSizingInfo] = React.useState({});

  // const [columnOrder, setColumnOrder] = React.useState<string[]>(() => columns.map(c => c.id!))

  const [columnFilters, setColumnFilters] = React.useState([]);
  const [operator, setOperator] = React.useState([]);
  const [sorting, setSorting] = React.useState([]);
  const [filterStates, setFilterState] = React.useState(null);
  const [sorterStates, setSorterStates] = React.useState([]);
  const [isFullScreen, setIsFullScreen] = React.useState(false);
  const [columns, setColumns] = React.useState([]);
  const [tableData, setTableData] = React.useState([]);
  const [expanded, setExpanded] = React.useState({});

  // const [visible, setVisible] = React.useState({visible: false, column: ''})

  const [columnVisibility, setColumnVisibility] = React.useState({});
  const originData = React.useMemo(() => {
    return addRowIdArray(dataSource);
  }, [dataSource]);
  const isDataOriginTree = React.useMemo(() => {
    return isTreeArray(originData);
  }, [originData]);
  React.useEffect(() => {
    if (groupColumns && groupColumns.length > 0 && groupSetting?.client !== false && isDataOriginTree === false) {
      const abc = groupArrayByColumns(originData, groupColumns);
      const rs = filterDataByColumns(abc, filterStates, sorterStates, []);
      setTableData(rs);
    } else {
      const rs = filterDataByColumns(originData, filterStates, sorterStates, []);
      setTableData(rs);
    }
  }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client, isDataOriginTree]);
  // }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client])

  React.useEffect(() => {
    // setColumns(updateWidthsByOther(propsColumns, columns))
    setColumns(propsColumns);
  }, [propsColumns]);
  const mergedColumns = React.useMemo(() => {
    return convertToTanStackColumns({
      t,
      columns,
      format,
      editAble
    });
  }, [t, columns, format, editAble]);
  const isDataTree = React.useMemo(() => {
    return isTreeArray(tableData);
  }, [tableData]);
  const columnPinning = React.useMemo(() => {
    return {
      left: getFixedFields(columns, 'left'),
      right: getFixedFields(columns, 'right')
    };
  }, [columns]);

  // ========================= Keys =========================
  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(originData), {
    value: undefined
  });

  // ========================= Keys =========================

  const {
    selectedRowKeys,
    defaultSelectedRowKeys
  } = selectionSettings ?? {};
  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
    value: selectedRowKeys
  });

  // const mergedData = React.useMemo(() => {

  //   return filterDataByColumns(tableData, filterStates, sorterStates, mergedFilterKeys)

  // }, [tableData, filterStates, mergedFilterKeys, sorterStates])

  // const columnVisibility = React.useMemo(() => {
  //   return getInvisibleColumns(columns)
  // }, [columns])

  React.useEffect(() => {
    const a = getInvisibleColumns(columns);
    const bcd = convertToObj(groupColumns);
    setColumnVisibility({
      ...a,
      ...bcd
    });
  }, [columns, groupColumns]);
  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
    value: undefined
  });
  const triggerChangeColumns = (cols, keys, type) => {
    if (type === 'cellClick') {
      setColumns(cols);
    } else {
      const aa = flatColumns2(columns).map(it => it.field);
      const rsss = getDiffent2Array(aa, keys);
      setColumnsHiddenKeys(rsss);
      onChooseColumns?.({
        showColumns: removeInvisibleColumns([...cols]),
        columns: [...cols],
        flattenColumns: convertFlatColumn1([...cols])
      });
    }
  };
  const table = useReactTable({
    _features: [OperatorFeature],
    data: tableData,
    // data: mergedData,
    columns: mergedColumns,
    state: {
      rowSelection,
      expanded,
      columnPinning,
      columnVisibility: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
      pagination: pagination && !infiniteScroll ? paginationState : undefined,
      // grouping,
      columnSizing,
      // columnOrder,
      columnFilters,
      operator,
      sorting,
      columnSizingInfo
    },
    getCoreRowModel: getCoreRowModel(),
    getRowId(originalRow) {
      return originalRow.rowId;
    },
    getSubRows: row => row.children,
    // --------------RowSelection -----------------
    enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
    enableMultiRowSelection: selectionSettings && (selectionSettings.mode === 'checkbox' || selectionSettings.type !== 'single'),
    enableRowSelection: row => {
      if (selectionSettings?.getCheckboxProps) {
        return !selectionSettings?.getCheckboxProps(row.original)?.disabled;
      }
      return true;
    },
    onRowSelectionChange: setRowSelection,
    // --------------RowSelection END-----------------

    // ColumnSizing
    enableColumnResizing: allowResizing !== false,
    columnResizeMode,
    columnResizeDirection,
    onColumnSizingChange: setColumnSizing,
    onColumnSizingInfoChange: setColumnSizingInfo,
    // ColumnSizing

    // ColumnSorting
    // getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    enableMultiSort: sortMultiple !== false,
    isMultiSortEvent: () => sortMultiple === false ? false : true,
    enableSorting: allowSortering !== false,
    // ColumnSorting

    enableFilters: allowFiltering !== false,
    onColumnFiltersChange: setColumnFilters,
    onColumnOperatorChange: setOperator,
    // getFilteredRowModel: getFilteredRowModel(),

    // onColumnOrderChange: setColumnOrder,

    // onGroupingChange: setGrouping,
    getGroupedRowModel: getGroupedRowModel(),
    // onExpandedChange: setExpanded,
    getExpandedRowModel: getExpandedRowModel(),
    getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
    onPaginationChange: setPagination,
    onColumnVisibilityChange: setColumnVisibility
    // onColumnPinningChange,

    // debugTable: true
  });
  React.useEffect(() => {
    if (defaultExpandAllRows) {
      const allKeys = findAllChildrenKeys2(tableData, rowKey, 'children');
      setExpanded(convertToObjTrue(allKeys));
    } else {
      if (defaultExpandedRowKeys) {
        setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
      }
    }
  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData]);
  const triggerGroupColumns = groupedColumns => {
    // const abc = updateColumnsByGroup(columns, groupedColumns)

    const bcd = convertToObj(groupedColumns);

    // const a = getInvisibleColumns(columns)

    const prev = groupColumns ?? [];
    const bbb = prev.filter(item => !groupedColumns.includes(item));
    const ccc = removeKeys(columnVisibility, bbb);
    const rs = {
      ...ccc,
      ...bcd
    };
    setColumnVisibility(rs);

    // table.setColumnVisibility(rs)

    if (groupSetting) {
      if (groupSetting.onGroup) {
        groupSetting.onGroup({
          columnGrouped: groupedColumns,
          columns: removeColumns(columns, groupedColumns),
          flattenColumns: flatColumns2(removeColumns(columns, groupedColumns))
        });
      }
      if (groupSetting.client === false) {

        // group server => không xử lý gì
      } else {
        // group client

        table.resetRowSelection();
        table.resetExpanded();
        setRowSelection({});
        setExpanded({});
      }
    }
  };

  // useEffect(() => {

  //   table.toggleAllRowsExpanded(true)

  // }, [tableData ])

  const triggerFilter = args => {
    // table.resetRowSelection()
    // table.resetExpanded()

    // setRowSelection({})
    setExpanded({});
    setFilterState(args);

    // const rs = filterDataByColumns(originData, args, sorterStates, [])

    // const allKeys = findAllChildrenKeys2<RecordType>(rs, rowKey, 'children')

    // setExpanded(convertToObjTrue(allKeys))

    // setTableData(rs)
  };
  const triggerSorter = args => {
    // table.resetRowSelection()
    // table.resetExpanded()

    // setRowSelection({})
    // setExpanded({})

    setSorterStates(args);

    // const rs = filterDataByColumns(originData, filterStates, args, [])
    // setTableData(rs)
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
    locale: language
  }, /*#__PURE__*/React.createElement(CustomProvider, {
    locale: languages
  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
    t: t,
    id: id,
    table: table,
    prefix: prefix,
    originData: originData
    // dataSource={mergedData}
    ,
    dataSource: tableData,
    locale: locale,
    format: format
    // columns={convertColumns(mergedColumns)}
    ,
    columns: mergedColumns,
    propsColumns: columns,
    rowKey: rowKey,
    groupSetting: groupSetting,
    groupAble: groupAble,
    groupColumns: groupColumns,
    columnPinning: columnPinning,
    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
    triggerFilter: triggerFilter,
    triggerSorter: triggerSorter,
    setMergedFilterKeys: setMergedFilterKeys,
    mergedFilterKeys: mergedFilterKeys,
    editAble: false,
    triggerChangeColumns: triggerChangeColumns,
    triggerGroupColumns: triggerGroupColumns,
    expanded: expanded,
    setExpanded: setExpanded,
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen,
    windowSize: windowSize,
    height: height,
    isDataTree: isDataTree,
    selectionSettings: selectionSettings,
    mergedSelectedKeys: mergedSelectedKeys,
    expandable: expandable,
    setColumns: setColumns,
    columnFilters: columnFilters,
    columnSizing: columnSizing,
    columnSizingInfo: columnSizingInfo,
    setColumnSizing: setColumnSizing,
    rowSelection: rowSelection,
    pagination: pagination
  })))));
};
export default InternalTable;