es-grid-template/lib/table-component/table/Grid.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _reactTable = require("@tanstack/react-table");
var _core = require("@dnd-kit/core");
var _modifiers = require("@dnd-kit/modifiers");
var _sortable = require("@dnd-kit/sortable");
var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
var _becoxyIcons = require("becoxy-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMasterUi = require("rc-master-ui");
var _react = _interopRequireDefault(require("react"));
var _ColumnsChoose = require("../ColumnsChoose");
var _TableContainer = _interopRequireDefault(require("../TableContainer"));
var _operator = require("../features/operator");
var _utils = require("../hook/utils");
// import { makeData } from "../default/makeData";

// import {  flattenArray, getFixedFields, getInvisibleColumns, unFlattenData, updateOrInsert } from './hook/utils'

// import { faker } from '@faker-js/faker'

const Grid = props => {
  const {
    t,
    id,
    prefix,
    dataSource,
    originData,
    columns,
    propsColumns,
    pagination,
    expanded,
    columnVisibility,
    columnPinning,
    selectionSettings,
    rowSelected,
    sortMultiple,
    triggerSorter,
    triggerFilter,
    setMergedFilterKeys,
    onSorter,
    onFilter,
    showToolbar,
    isFullScreen,
    fullScreen,
    toolbarItems,
    actionTemplate,
    showColumnChoose,
    groupColumns,
    height,
    ...rest
  } = props;
  const bottomToolbarRef = _react.default.useRef(null);
  const topToolbarRef = _react.default.useRef(null);
  const [tableHeight, settableHeight] = _react.default.useState(0);
  const [columnResizeMode] = _react.default.useState('onChange');
  const [columnResizeDirection] = _react.default.useState('ltr');
  const [paginationState, setPagination] = _react.default.useState({
    pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
    pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
  });
  const [rowSelection, setRowSelection] = _react.default.useState({});
  const [grouping, setGrouping] = _react.default.useState([]);
  const [columnSizing, setColumnSizing] = _react.default.useState({});
  const [columnFilters, setColumnFilters] = _react.default.useState([]);
  const [operator, setOperator] = _react.default.useState([]);
  const [sorting, setSorting] = _react.default.useState([]);
  const [columnOrder, setColumnOrder] = _react.default.useState(() => columns.map(c => c.id));
  const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
    isChange: false,
    type: '',
    rowData: {}
  });
  const [sorterChange, setSorterChange] = _react.default.useState(false);
  const [filterChange, setFilterChange] = _react.default.useState(false);
  const table = (0, _reactTable.useReactTable)({
    _features: [_operator.OperatorFeature],
    data: dataSource,
    columns: columns,
    state: {
      rowSelection,
      expanded,
      columnPinning,
      columnVisibility,
      pagination: pagination ? paginationState : undefined,
      grouping,
      columnSizing,
      columnOrder,
      columnFilters,
      operator,
      sorting
    },
    getCoreRowModel: (0, _reactTable.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: true,
    onRowSelectionChange: setRowSelection,
    // RowSelection

    // ColumnSizing
    columnResizeMode,
    columnResizeDirection,
    onColumnSizingChange: setColumnSizing,
    // ColumnSizing

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

    onColumnFiltersChange: setColumnFilters,
    onColumnOperatorChange: setOperator,
    // getFilteredRowModel: getFilteredRowModel(),

    onColumnOrderChange: setColumnOrder,
    onGroupingChange: setGrouping,
    getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
    // onExpandedChange: setExpanded,
    getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
    getPaginationRowModel: pagination ? (0, _reactTable.getPaginationRowModel)() : undefined,
    onPaginationChange: setPagination,
    // onColumnVisibilityChange: setColumnVisibility,
    // onColumnPinningChange,

    debugTable: true
  });
  _react.default.useEffect(() => {
    if (isSelectionChange.isChange) {
      const aa = table.getState().rowSelection;
      const dataTable = table.getRowModel().flatRows;
      const ids = Object.keys(aa);
      const ssss = dataTable.filter(it => ids.includes(it.id));
      const rs = ssss.map(it => it.original);
      rowSelected?.({
        type: isSelectionChange.type,
        rowData: isSelectionChange.rowData,
        selected: rs
      });
    }
  }, [isSelectionChange, rowSelected, rowSelection, table]);
  _react.default.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);
      }
    }
  }, [onSorter, sorterChange, sorting, table, triggerSorter]);
  _react.default.useEffect(() => {
    if (filterChange) {
      // const filterState = table.getState().columnFilters
      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
          // ...(match && { operator: match.operator })
        };
      });
      if (onFilter) {
        onFilter?.((0, _utils.convertFilters)(merged));
      } else {
        triggerFilter((0, _utils.convertFilters)(merged));
        const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
        setMergedFilterKeys((0, _utils.getAllRowKey)(b));
      }
    }
  }, [filterChange, onFilter, originData, setMergedFilterKeys, table, triggerFilter, columnFilters]);
  _react.default.useEffect(() => {
    const totalHeight = height;
    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
    }
  }, [id, columns, height]);

  // 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 (0, _sortable.arrayMove)(cols, oldIndex, newIndex); //this is just a splice util
      });
    }
  }
  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefix}-grid`,
    style: {
      height: height ?? undefined
    }
  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
    ref: topToolbarRef,
    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: '.75rem'
    }
  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: 1,
      overflow: 'hidden'
    }
  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
    mode: 'scroll'
  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
    fontSize: 16
    // onClick={() => handleFullScreen?.()}
    ,
    "data-tooltip-id": "tooltip-icon",
    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
    fontSize: 16
    // onClick={() => handleFullScreen?.()}
    ,
    "data-tooltip-id": "tooltip-icon",
    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: '.75rem'
    }
  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
    showSizeChanger: true,
    responsive: true,
    size: 'small',
    rootClassName: 'top-pagination',
    showTotal: (total, range) =>
    // @ts-ignore
    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
    columns: propsColumns,
    t: t,
    columnsGroup: groupColumns
    // triggerChangeColumns={triggerChangeColumns}
  })))), /*#__PURE__*/_react.default.createElement(_core.DndContext, {
    collisionDetection: _core.closestCenter,
    modifiers: [_modifiers.restrictToHorizontalAxis],
    onDragEnd: handleDragEnd,
    sensors: sensors
  }, /*#__PURE__*/_react.default.createElement(_TableContainer.default, (0, _extends2.default)({}, rest, {
    id: id,
    table: table,
    editAble: false,
    dataSource: dataSource,
    originData: originData,
    prefix: prefix,
    selectionSettings: selectionSettings,
    setIsSelectionChange: setIsSelectionChange,
    setSorterChange: setSorterChange,
    setFilterChange: setFilterChange,
    tableHeight: tableHeight
    // setMergedFilterKeys={setMergedFilterKeys}
  }))), /*#__PURE__*/_react.default.createElement("div", {
    ref: bottomToolbarRef
  }, pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
  // style={{padding: '0.75rem 1rem'}}
  , {
    rootClassName: 'pagination-template',
    showSizeChanger: true,
    responsive: true,
    size: 'small',
    total: pagination.total,
    pageSize: paginationState.pageSize,
    pageSizeOptions: [20, 50, 100, 1000, 10000],
    onChange: (page, pageSize) => {
      if (pagination.onChange) {
        pagination.onChange(page, pageSize);
      } else {
        table.setPageIndex(page - 1);
        table.setPageSize(pageSize);
      }
    }
  })));
};
var _default = exports.default = Grid;