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

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import { features, useTablePipeline } from "./pipeline";
import * as fusion from '@alifd/next';
import { useLocale } from "rc-master-ui/es/locale";
import { faker } from "@faker-js/faker";
import React from "react";
import "./base-table/styles.scss";
import { addRowIdArray, filterDataByColumns, flatColumns2,
// getInvisibleColumns, 
getVisibleFields, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
import { CustomProvider, ConfigProvider } from 'rc-master-ui';
import { Modal } from 'antd';
import { getLocale, getLocales } from "../locale/useLocale";
import { TableContext } from "./useContext";
import Grid from "./Grid";
import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
const InternalTable = props => {
  const {
    t,
    columns: propColumns,
    dataSource,
    allowFiltering,
    allowSortering,
    allowResizing,
    groupAble,
    groupColumns,
    groupSetting,
    lang,
    pagination,
    locale,
    fullScreenTitle,
    wrapSettings,
    ignoreAccents,
    rowSelected,
    selectionSettings,
    expandable,
    sortMultiple,
    onFilter,
    defaultFilter,
    onSorter,
    defaultSorter,
    footerDataSource,
    summary,
    useVirtual,
    ...rest
  } = props;
  const prefix = 'ui-rc';
  const rowKey = 'rowId';
  const childrenKey = 'children';
  const [tableLocal] = useLocale('Table');
  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 getWindowSize = () => {
    const {
      innerWidth,
      innerHeight
    } = window;
    return {
      innerWidth,
      innerHeight
    };
  };
  const [windowSize, setWindowSize] = React.useState(getWindowSize());
  React.useEffect(() => {
    const handleWindowResize = () => {
      setWindowSize(getWindowSize());
    };
    document.addEventListener('resize', handleWindowResize);
    return () => {
      document.removeEventListener('resize', handleWindowResize);
    };
  }, []);
  const [visibleKeys, setVisibleKeys] = React.useState(undefined);
  const [filterState, setFilterState] = React.useState(undefined);
  const [sortState, setSortState] = React.useState(undefined);
  const columns = React.useMemo(() => {
    return sortByType(propColumns);
  }, [propColumns]);
  const convertData = React.useMemo(() => {
    if (groupAble && groupSetting && groupSetting.client !== false) {
      return groupArrayByColumns(dataSource, groupColumns);
    }
    return addRowIdArray(dataSource);
  }, [dataSource, groupAble, groupColumns, groupSetting]);
  const isDataTree = React.useMemo(() => {
    return isTreeArray(convertData);
  }, [convertData]);
  const mergedData = React.useMemo(() => {
    const shouldSkip = onFilter && onSorter;
    if (shouldSkip) {
      return convertData;
    }
    return filterDataByColumns(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
  }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
  const footerData = React.useMemo(() => {
    if (!summary) {
      return undefined;
    }
    if (footerDataSource) {
      return footerDataSource;
    }
    const flatColumns = flatColumns2(columns);
    const a = sumFields(flatColumns, dataSource, childrenKey);
    return [a];
  }, [columns, dataSource, footerDataSource, summary]);
  const expandAllKeys = React.useMemo(() => {
    if (expandable?.defaultExpandAllRows && isDataTree) {
      return getParentKeysLarge(convertData, rowKey, childrenKey);
    }
    return undefined;
  }, [expandable?.defaultExpandAllRows, convertData, isDataTree]);
  const [isFullScreen, setIsFullScreen] = React.useState(false);
  const defaultFilterConvert = React.useMemo(() => {
    if (defaultFilter) {
      return revertConvertFilters(defaultFilter);
    }
    return undefined;
  }, [defaultFilter]);

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

  const columnVisibility = React.useMemo(() => {
    return getVisibleFields(columns);
  }, [columns]);
  const pipeline = useTablePipeline({
    components: fusion
  }).input({
    dataSource: mergedData,
    columns
  }).primaryKey(rowKey)
  // .mapDataSource((dta) => collectNodes(dta, 'pre'))
  // .snapshot('flat')
  .use(features.hiddenColumns({
    columns,
    visibleKeys: visibleKeys ?? columnVisibility
    // visibleKeys: ['name']
    // visibleKeys
  })).use(features.treeSelect({
    tree: mergedData,
    value: selectionSettings?.selectedRowKeys,
    defaultValue: selectionSettings?.defaultSelectedRowKeys,
    // rootKey: selectionSettings?.hideSelectAll,
    rootKey: selectionSettings?.hideSelectAll || selectionSettings?.type === 'single' ? undefined : 'root',
    // rootKey: 'root',
    checkStrictly: selectionSettings?.checkStrictly,
    // checkStrictly: true,
    checkedStrategy: isDataTree ? selectionSettings?.checkedStrategy : 'all',
    // checkedStrategy: 'parent',

    mode: selectionSettings?.mode,
    type: selectionSettings?.type,
    highlightRowWhenSelected: true,
    isDisabled(row) {
      return !!selectionSettings?.getCheckboxProps?.(row)?.disabled;
    },
    checkboxColumn: {
      lock: true
    },
    clickArea: selectionSettings?.checkboxOnly ? 'checkbox' : 'row',
    // clickArea: 'row',
    onChange: (nextValue, rowData, type) => {
      const rs = getRowsByKeysKeepTreeOrder(nextValue, mergedData ?? [], rowKey);
      rowSelected?.({
        type,
        rowData,
        selected: rs
      });
    }

    // clickArea: 'checkbox'
  })).use(features.treeMode({
    clickArea: 'icon',
    stopClickEventPropagation: true,
    expandIconColumnIndex: expandable?.expandIconColumnIndex,
    defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys,
    isTreeArray: !!isDataTree
  })).use(features.columnCustom({
    id,
    t,
    columns,
    mode: sortMultiple !== false ? 'multiple' : 'single',
    dataSource: mergedData,
    columnResizeMode: 'onChange',
    disableUserSelectWhenResizing: true,
    allowFiltering,
    allowSortering,
    allowResizing,
    tableLocal,
    locale,
    prefix,
    wrapSettings,
    ignoreAccents,
    currentPage: pagination ? pagination?.currentPage : undefined,
    pageSize: pagination ? pagination?.pageSize : undefined,
    isDataTree,
    defaultFilter: defaultFilterConvert,
    defaultSorter,
    onFilter(val) {
      // const rs  = 

      if (onFilter) {
        onFilter(val);
      } else {
        setFilterState(val);
      }
    },
    onSorter(val) {
      if (onSorter) {
        onSorter(val);
      } else {
        setSortState(val);
      }
    }
  })).use(features.paginationFeature({
    pagination
  }));

  // const onResizeEnd = (args: any[]) => {

  // }

  return /*#__PURE__*/React.createElement(ConfigProvider, {
    locale: language,
    theme: {
      token: {
        // colorPrimary: '#eb4619',
        // colorLink: '#eb4619',
      },
      components: {
        Dropdown: {
          zIndexPopup: 1158
        },
        Popover: {
          zIndexPopup: 1158
        }
      }
    }
  }, /*#__PURE__*/React.createElement(CustomProvider, {
    locale: languages
  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
    value: {
      prefix,
      id,
      rowKey,
      dataSource: mergedData,
      originData: convertData,
      windowSize,
      lang,
      locale
    }
  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
    id: id,
    useVirtual: {
      header: false,
      horizontal: useVirtual?.horizontal ?? true,
      vertical: useVirtual?.vertical ?? true
    },
    isFullScreen: isFullScreen,
    pagination: pagination,
    setIsFullScreen: setIsFullScreen,
    pipeline: pipeline
  }, pipeline.getProps(), {
    originData: convertData,
    originColumns: columns,
    groupColumns: groupColumns,
    setVisibleKeys: setVisibleKeys,
    footerDataSource: footerData,
    onFilter: onFilter,
    onSorter: onSorter,
    defaultFilter: defaultFilter,
    defaultSorter: defaultSorter
  })), /*#__PURE__*/React.createElement(Modal, {
    open: isFullScreen,
    footer: null,
    centered: true,
    closable: true,
    width: '100%',
    style: {
      maxWidth: '100%',
      height: '100%'
    },
    onCancel: () => setIsFullScreen(false),
    styles: {
      content: {
        height: '100vh',
        borderRadius: 0,
        padding: '15px 10px'
      },
      wrapper: {
        zIndex: 1050
      }
    },
    title: /*#__PURE__*/React.createElement("div", {
      style: {
        minHeight: 24
      }
    }, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
    destroyOnClose: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {}
  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
    id: id,
    useVirtual: {
      header: false,
      horizontal: useVirtual?.horizontal ?? true,
      vertical: useVirtual?.vertical ?? true
    },
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen,
    pipeline: pipeline,
    pagination: pagination
  }, pipeline.getProps(), {
    originData: convertData,
    originColumns: columns,
    groupColumns: groupColumns,
    setVisibleKeys: setVisibleKeys,
    footerDataSource: footerData,
    onFilter: onFilter,
    onSorter: onSorter,
    defaultFilter: defaultFilter,
    defaultSorter: defaultSorter
  })))))));
};
export default InternalTable;