es-grid-template/es/table-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 "./style.scss";
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, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
import { convertToTanStackColumns } from "./hook/useColumns";
import { convertColumns } from "./hook/convert";
import { removeInvisibleColumns } from "../grid-component/hooks";
import { CustomProvider, ConfigProvider } 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,
    onExpandClick,
    // contextMenuClick,
    // contextMenuOpen,
    height,
    ignoreAccents,
    ...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([]);
  const [isExpandClick, setIsExpandClick] = React.useState(false);
  React.useEffect(() => {
    // setColumns(propsColumns as any)

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

    // return convertToTanStackColumns<RecordType>(columns)
  }, [t, columns, format, editAble]);
  const isDataTree = React.useMemo(() => {
    return isTreeArray(dataSource);
  }, [dataSource]);
  const columnPinning = React.useMemo(() => {
    return {
      left: getFixedFields(columns, 'left'),
      right: getFixedFields(columns, 'right')
    };
  }, [columns]);

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

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

  const {
    selectedRowKeys,
    defaultSelectedRowKeys
  } = selectionSettings ?? {};
  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
    value: selectedRowKeys
  });
  const mergedData = React.useMemo(() => {
    return filterDataByColumns(convertData, filterStates, sorterStates, mergedFilterKeys, ignoreAccents);
  }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents]);
  const columnVisibility = React.useMemo(() => {
    return getInvisibleColumns(columns);
  }, [columns]);
  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
    value: undefined
  });
  const triggerChangeColumns = (cols, keys, type) => {
    if (type === 'cellClick') {
      setColumns(cols);
    } else {
      setColumns(cols);
      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,
    dataSource: mergedData,
    locale: locale,
    lang: lang,
    format: format
    // columns={columns111 as any}
    ,
    columns: convertColumns(mergedColumns),
    propsColumns: columns,
    rowKey: rowKey,
    groupSetting: groupSetting,
    groupAble: groupAble,
    groupColumns: groupColumns,
    columnPinning: columnPinning,
    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
    triggerFilter: setFilterState,
    triggerSorter: setSorterStates,
    setMergedFilterKeys: setMergedFilterKeys,
    mergedFilterKeys: mergedFilterKeys,
    expanded: expanded,
    editAble: isFullScreen ? false : editAble,
    triggerChangeColumns: triggerChangeColumns,
    setExpanded: setExpanded,
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen,
    windowSize: windowSize,
    height: height,
    isDataTree: isDataTree,
    selectionSettings: selectionSettings,
    mergedSelectedKeys: mergedSelectedKeys,
    expandable: expandable,
    onExpandClick: onExpandClick,
    setColumns: setColumns,
    setIsExpandClick: setIsExpandClick
  })))));
};
export default InternalTable;