es-grid-template/es/grid-component/table/Group.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { Fragment } from 'react';
import { GridStyle } from "../GridStyle";
import TableGrid from "../TableGrid";
// import type {ColumnsTable} from "../type";

import { findAllChildrenKeys } from "../hooks";
import { ColumnsGroup } from "../ColumnsGroup/ColumnsGroup";
import { flatColumns2 } from "../hooks/columns";
import { Collapse2, Expand2 } from "becoxy-icons";
const Group = props => {
  const {
    t,
    id,
    columns,
    height,
    scrollHeight,
    style,
    rowHoverable,
    groupAble,
    expandable,
    dataSource,
    rowKey,
    getRowKey,
    groupSetting,
    groupColumns,
    triggerGroupColumns,
    onExpandClick,
    ...rest
  } = props;
  const {
    defaultExpandedRowKeys,
    defaultExpandAllRows
  } = expandable || {};
  const childrenColumnName = 'children';
  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
    if (defaultExpandedRowKeys) {
      return defaultExpandedRowKeys;
    }
    if (defaultExpandAllRows) {
      return findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? [];
    }
    return [];
  });
  React.useEffect(() => {
    if (defaultExpandedRowKeys) {
      setInnerExpandedKeys(defaultExpandedRowKeys);
    }
    if (defaultExpandAllRows) {
      setInnerExpandedKeys(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
    }
  }, [defaultExpandedRowKeys, defaultExpandAllRows, dataSource]);
  const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
  const onTriggerExpand = React.useCallback(record => {
    const key = getRowKey(record, dataSource.indexOf(record));
    let newExpandedKeys;
    const hasKey = mergedExpandedKeys.has(key);
    if (hasKey) {
      mergedExpandedKeys.delete(key);
      newExpandedKeys = [...mergedExpandedKeys];
    } else {
      newExpandedKeys = [...mergedExpandedKeys, key];
      // gọi sự kiện expand

      onExpandClick?.({
        expandedKeys: newExpandedKeys,
        key: key,
        rowData: record
      });
    }
    setInnerExpandedKeys(newExpandedKeys);
  }, [getRowKey, dataSource, mergedExpandedKeys, onExpandClick]);
  const handleExpandAllGroup = () => {
    setInnerExpandedKeys(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
  };
  const handleCollapseAllGroup = () => {
    setInnerExpandedKeys([]);
  };
  const handleOnGroup = value => {
    triggerGroupColumns?.(value);
  };
  const groupToolbar = () => {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        gap: '10px',
        marginRight: 10
      }
    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
      t: t
      // defaultGroupColumns={['name']}
      ,
      unClearableLevel: groupSetting?.unClearableLevel
      // unClearableLevel={2}
      ,
      columns: columns ? flatColumns2(columns) : [],
      columnsGrouped: groupColumns,
      onSubmit: handleOnGroup
    }), /*#__PURE__*/React.createElement(Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/React.createElement(Collapse2, {
      fontSize: 18,
      color: '#555555',
      onClick: handleCollapseAllGroup
    }) : /*#__PURE__*/React.createElement(Expand2, {
      fontSize: 18,
      color: '#555555',
      onClick: handleExpandAllGroup
    })));
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
    $heightTable: height,
    $heightScroll: scrollHeight,
    style: {
      position: 'relative'
    },
    id: id
  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
    t: t,
    id: id,
    rowKey: rowKey,
    columns: columns,
    style: {
      ...style,
      minHeight: height
    },
    rowHoverable: rowHoverable ?? true,
    dataSource: dataSource,
    getRowKey: getRowKey,
    groupAble: groupAble,
    groupSetting: groupSetting,
    expandable: {
      expandIconColumnIndex: 3,
      defaultExpandAllRows: true,
      indentSize: 25,
      expandIcon: args => {
        const {
          record,
          expanded,
          onExpand
        } = args;

        // @ts-ignore
        if (record?.children?.length > 0 || record?.isChildren) {
          return expanded ? /*#__PURE__*/React.createElement("button", {
            onClick: e => {
              e.preventDefault();
              e.stopPropagation();
              onExpand(record, e);
              if (groupAble) {
                onTriggerExpand(record);
              }
            },
            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
          }) : /*#__PURE__*/React.createElement("button", {
            onClick: e => {
              e.preventDefault();
              e.stopPropagation();
              onExpand(record, e);
              if (groupAble) {
                onTriggerExpand(record);
              }
            },
            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
          });
        } else {
          return /*#__PURE__*/React.createElement("button", {
            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
          });
        }
      },
      expandedRowKeys: groupAble ? innerExpandedKeys : undefined,
      ...expandable
    },
    groupToolbar: groupToolbar,
    groupColumns: groupColumns
  }))));
};
export default Group;