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

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import { Modal } from 'antd';
import { faker } from '@faker-js/faker';
import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
import { arrayMove } from '@dnd-kit/sortable';
import React, { Fragment } from 'react';
import { convertFilters, filterByIds, filterDataByColumns, getAllRowKey } from "../hook/utils";
import classNames from 'classnames';
import TableContainer from "./TableContainer";
import { GridStyle } from "../style";
const Grid = props => {
  const {
    theme,
    t,
    id,
    prefix,
    dataSource,
    originData,
    columns,
    propsColumns,
    setColumns,
    pagination,
    expanded,
    setExpanded,
    columnHidden,
    columnPinning,
    selectionSettings,
    rowSelected,
    sortMultiple,
    triggerSorter,
    triggerFilter,
    setMergedFilterKeys,
    onSorter,
    onFilter,
    allowFiltering,
    allowSortering,
    // groupColumns,
    // height= 700,
    height,
    minHeight,
    editAble,
    triggerChangeColumns,
    infiniteScroll,
    mergedSelectedKeys,
    allowResizing,
    windowSize,
    table,
    columnSizing,
    columnSizingInfo,
    setColumnSizing,
    columnFilters,
    setColumnOrder,
    rowSelection,
    className: tableClassNames,
    ...rest
  } = props;
  const [isSelectionChange, setIsSelectionChange] = React.useState({
    isChange: false,
    type: '',
    rowData: {},
    rowsData: []
  });
  const [sorterChange, setSorterChange] = React.useState(false);
  const [filterChange, setFilterChange] = React.useState(false);
  const [isFullScreen, setIsFullScreen] = React.useState(false);

  // React.useEffect(() => {

  //   const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection)

  //   if (!isEqual) {

  //     setRowSelection(convertToObjTrue(mergedSelectedKeys))
  //   }

  // }, [mergedSelectedKeys])

  React.useEffect(() => {
    if (isSelectionChange.isChange) {
      const aa = table.getState().rowSelection;
      const ids = Object.keys(aa);
      const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại

      const rs = ssss.map(it => it.original);
      rowSelected?.({
        type: isSelectionChange.type,
        rowData: isSelectionChange.rowData,
        selected: rs
      });
    }
  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
  React.useEffect(() => {
    if (sorterChange) {
      const aa = table.getState().sorting;
      const rs = aa.map(it => {
        return {
          columnKey: it.id,
          field: it.id,
          order: it.desc ? 'descend' : 'ascend'
        };
      });
      if (onSorter) {
        onSorter?.(rs);
      } else {
        triggerSorter(rs);
      }
      setSorterChange(false);
    }
  }, [onSorter, sorterChange, table, triggerSorter]);
  React.useEffect(() => {
    if (filterChange) {
      const operatorState = table.getState().operator;
      const merged = columnFilters.map(filter => {
        const match = operatorState.find(op => op.id === filter.id);
        const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
        return {
          field: filter.id,
          key: filter.id,
          column: col,
          filteredKeys: filter.value,
          operator: match ? match.operator : undefined
        };
      });
      if (onFilter) {
        onFilter?.(convertFilters(merged));
      } else {
        triggerFilter(convertFilters(merged));
        const b = filterDataByColumns(originData, convertFilters(merged), [], []);
        setMergedFilterKeys(getAllRowKey(b));
      }
    }
  }, [filterChange, onFilter, originData, setMergedFilterKeys, table, triggerFilter, columnFilters]);

  // reorder columns after drag & drop
  function handleDragEnd(event) {
    const {
      active,
      over
    } = event;
    if (active && over && active.id !== over.id) {
      setColumnOrder?.(cols => {
        const oldIndex = cols.indexOf(active.id);
        const newIndex = cols.indexOf(over.id);
        return arrayMove(cols, oldIndex, newIndex); //this is just a splice util
      });
    }
  }
  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
  const ContainerComponent = TableContainer;
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
    $prefix: prefix,
    $theme: {
      theme: theme?.theme,
      ...theme
    },
    className: classNames(`${prefix}-grid ${tableClassNames}`, {
      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
    }),
    style: {
      minHeight: minHeight ?? undefined,
      maxHeight: height ?? undefined,
      backgroundColor: theme?.backgroundColor ?? undefined
    }
  }, /*#__PURE__*/React.createElement(DndContext, {
    collisionDetection: closestCenter,
    modifiers: [restrictToHorizontalAxis],
    onDragEnd: handleDragEnd,
    sensors: sensors
  }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({}, rest, {
    id: id,
    t: t,
    windowSize: windowSize,
    table: table,
    editAble: false,
    dataSource: dataSource,
    originData: originData,
    prefix: prefix,
    selectionSettings: selectionSettings,
    isSelectionChange: isSelectionChange,
    setIsSelectionChange: setIsSelectionChange,
    setSorterChange: setSorterChange,
    setFilterChange: setFilterChange,
    height: height ?? minHeight ?? 700,
    minHeight: minHeight,
    pagination: pagination,
    columns: columns,
    propsColumns: propsColumns,
    triggerChangeColumns: triggerChangeColumns,
    columnHidden: columnHidden,
    setExpanded: setExpanded,
    expanded: expanded,
    infiniteScroll: infiniteScroll,
    setMergedFilterKeys: setMergedFilterKeys,
    setColumnSizing: setColumnSizing,
    setColumns: setColumns,
    columnSizing: columnSizing,
    columnSizingInfo: columnSizingInfo,
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen
  })))), /*#__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
      }
    },
    destroyOnClose: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      paddingTop: 40
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames(`${prefix}-grid`, {
      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
    }),
    style: {
      // minHeight: minHeight ?? undefined,
      maxHeight: windowSize.innerHeight - 70
    }
  }, /*#__PURE__*/React.createElement(DndContext, {
    collisionDetection: closestCenter,
    modifiers: [restrictToHorizontalAxis],
    onDragEnd: handleDragEnd,
    sensors: sensors
  }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({}, rest, {
    id: faker.string.alpha(20),
    t: t,
    table: table,
    editAble: false,
    dataSource: dataSource,
    originData: originData,
    prefix: prefix,
    selectionSettings: selectionSettings,
    isSelectionChange: isSelectionChange,
    setIsSelectionChange: setIsSelectionChange,
    setSorterChange: setSorterChange,
    setFilterChange: setFilterChange,
    height: windowSize.innerHeight - 70,
    minHeight: minHeight,
    pagination: pagination,
    columns: columns,
    windowSize: windowSize,
    propsColumns: propsColumns,
    triggerChangeColumns: triggerChangeColumns,
    columnHidden: columnHidden,
    setExpanded: setExpanded,
    expanded: expanded,
    infiniteScroll: infiniteScroll,
    setMergedFilterKeys: setMergedFilterKeys,
    setColumns: setColumns,
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen,
    setColumnSizing: setColumnSizing,
    columnSizing: columnSizing,
    columnSizingInfo: columnSizingInfo
  })))))));
};
export default Grid;