es-grid-template/es/group-component/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 "../table-component";
import { faker } from '@faker-js/faker';
import useMergedState from "rc-util/es/hooks/useMergedState";
import Grid from "./table/Grid";
import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
import { convertToTanStackColumns } from "./hook/useColumns";
import { convertColumns } from "./hook/convert";
import { removeInvisibleColumns } from "../grid-component/hooks";
import { groupArrayByColumns } from "../table-virtuoso/hook/utils";
import { ConfigProvider, CustomProvider } from 'rc-master-ui';
import { getLocale, getLocales } from "../locale/useLocale";
dayjs.extend(customParseFormat);
const InternalTable = props => {
  const {
    t,
    columns: propsColumns,
    // columns,
    lang,
    locale,
    dataSource,
    editAble,
    format,
    groupAble,
    groupSetting,
    groupColumns,
    selectionSettings,
    expandable,
    onChooseColumns,
    // contextMenuClick,
    // contextMenuOpen,
    height,
    ...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 [filterStates, setFilterState] = React.useState(null);
  const [sorterStates, setSorterStates] = React.useState([]);
  const [isFullScreen, setIsFullScreen] = React.useState(false);
  const [columns, setColumns] = React.useState([]);
  React.useEffect(() => {
    // setColumns(propsColumns as any)

    setColumns(updateWidthsByOther(propsColumns, columns));
  }, [propsColumns]);
  const originData = React.useMemo(() => {
    return addRowIdArray(dataSource);
  }, [dataSource]);
  const [expanded, setExpanded] = React.useState({});
  const [columnPinning, setColumnPinning] = React.useState({});
  const [columnVisibility, setColumnVisibility] = React.useState({});
  const convertData = React.useMemo(() => {
    if (groupAble && groupSetting?.client !== false) {
      return groupArrayByColumns(originData, groupColumns);
    }
    return originData;
  }, [originData, groupAble, groupColumns, groupSetting?.client]);
  const mergedColumns = React.useMemo(() => {
    return convertToTanStackColumns({
      t,
      columns,
      format,
      editAble
    });

    // return convertToTanStackColumns<RecordType>(columns)
  }, [t, columns, format, editAble, groupColumns]);
  const isDataTree = React.useMemo(() => {
    return isTreeArray(convertData);
  }, [convertData]);

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

  //   return isTreeArray(originData)

  // }, [originData])

  // const columnPinning = React.useMemo(() => {
  //   return {
  //     left: groupColumns ? [...getFixedFields(columns, 'left'), ...groupColumns] : getFixedFields(columns, 'left'),
  //     right: getFixedFields(columns, 'right')
  //   }
  // }, [columns, groupColumns])

  React.useEffect(() => {
    const abc = {
      // left: groupColumns ? [...getFixedFields(columns, 'left'), ...groupColumns] : getFixedFields(columns, 'left'),
      left: getFixedFields(columns, 'left'),
      right: getFixedFields(columns, 'right')
    };
    setColumnPinning(abc);
  }, [columns]);

  // ========================= Keys =========================
  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(convertData), {
    value: undefined
  });
  React.useEffect(() => {
    if (defaultExpandAllRows) {
      const allKeys = findAllChildrenKeys2(convertData, rowKey, 'children');
      setExpanded(convertToObjTrue(allKeys));
    } else {
      if (defaultExpandedRowKeys) {
        setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
      }
    }
  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);

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

  const {
    selectedRowKeys,
    defaultSelectedRowKeys
  } = selectionSettings ?? {};
  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
    value: selectedRowKeys
  });
  const mergedData = React.useMemo(() => {
    return filterDataByColumns(convertData, filterStates, sorterStates, mergedFilterKeys);
  }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
  React.useEffect(() => {
    const a = getInvisibleColumns(columns);

    // const bcd = convertToObj(groupColumns)

    setColumnVisibility({
      ...a
    });
  }, [columns]);
  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])
      });
    }
  };
  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,
    prefix: prefix

    // originData={convertData}
    ,
    originData: originData,
    dataSource: mergedData,
    locale: locale,
    format: format
    // columns={columns111 as any}
    ,
    columns: convertColumns(mergedColumns),
    propsColumns: columns,
    rowKey: rowKey,
    groupSetting: groupSetting,
    groupAble: groupAble,
    groupColumns: groupColumns,
    columnPinning: columnPinning,
    setColumnPinning: setColumnPinning,
    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
    triggerFilter: setFilterState,
    triggerSorter: setSorterStates,
    setMergedFilterKeys: setMergedFilterKeys,
    mergedFilterKeys: mergedFilterKeys,
    expanded: expanded,
    editAble: isFullScreen ? false : editAble,
    triggerChangeColumns: triggerChangeColumns
    // triggerGroupColumns={triggerGroupColumns}
    ,

    setExpanded: setExpanded,
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen,
    windowSize: windowSize,
    height: height,
    isDataTree: isDataTree,
    selectionSettings: selectionSettings,
    mergedSelectedKeys: mergedSelectedKeys,
    expandable: expandable,
    setColumns: setColumns,
    columnVisibility: columnVisibility,
    setColumnVisibility: setColumnVisibility
  })))));
};
export default InternalTable;