es-grid-template/lib/grid-component/table/Group.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 _react = _interopRequireWildcard(require("react"));
var _GridStyle = require("../GridStyle");
var _TableGrid = _interopRequireDefault(require("../TableGrid"));
var _hooks = require("../hooks");
var _ColumnsGroup = require("../ColumnsGroup/ColumnsGroup");
var _columns = require("../hooks/columns");
var _becoxyIcons = require("becoxy-icons");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// import type {ColumnsTable} from "../type";

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.default.useState(() => {
    if (defaultExpandedRowKeys) {
      return defaultExpandedRowKeys;
    }
    if (defaultExpandAllRows) {
      return (0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? [];
    }
    return [];
  });
  _react.default.useEffect(() => {
    if (defaultExpandedRowKeys) {
      setInnerExpandedKeys(defaultExpandedRowKeys);
    }
    if (defaultExpandAllRows) {
      setInnerExpandedKeys((0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? []);
    }
  }, [defaultExpandedRowKeys, defaultExpandAllRows, dataSource]);
  const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
  const onTriggerExpand = _react.default.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((0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? []);
  };
  const handleCollapseAllGroup = () => {
    setInnerExpandedKeys([]);
  };
  const handleOnGroup = value => {
    triggerGroupColumns?.(value);
  };
  const groupToolbar = () => {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: 'flex',
        gap: '10px',
        marginRight: 10
      }
    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/_react.default.createElement(_ColumnsGroup.ColumnsGroup, {
      t: t
      // defaultGroupColumns={['name']}
      ,
      unClearableLevel: groupSetting?.unClearableLevel
      // unClearableLevel={2}
      ,
      columns: columns ? (0, _columns.flatColumns2)(columns) : [],
      columnsGrouped: groupColumns,
      onSubmit: handleOnGroup
    }), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
      fontSize: 18,
      color: '#555555',
      onClick: handleCollapseAllGroup
    }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
      fontSize: 18,
      color: '#555555',
      onClick: handleExpandAllGroup
    })));
  };
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
    $heightTable: height,
    $heightScroll: scrollHeight,
    style: {
      position: 'relative'
    },
    id: id
  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, 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.default.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.default.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.default.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
  }))));
};
var _default = exports.default = Group;