es-grid-template/es/ali-table/pipeline/features/treeMode.js

es-grid-template

import cx from 'classnames';
import React from 'react';
import { ExpansionCell, icons, InlineFlexCell } from "../../common-views";
import { internals } from "../../internals";
import { isLeafNode as standardIsLeafNode, mergeCellProps } from "../../utils";
import { flatColumnsWithoutParent, updateArrayByKey } from "../../../table-component/hook/utils";
export const treeMetaSymbol = Symbol('treeMetaSymbol');
export function treeMode(opts = {}) {
  return function treeModeStep(pipeline) {
    const stateKey = 'treeMode';
    const ctx = pipeline.ctx;
    const expandIconColumnIndex = opts.expandIconColumnIndex ?? 0;
    const isTreeArray = opts.isTreeArray;
    const primaryKey = pipeline.ensurePrimaryKey('treeMode');
    if (typeof primaryKey !== 'string') {
      throw new Error('treeMode Only strings are supported primaryKey');
    }
    const openKeys = opts.openKeys ?? pipeline.getStateAtKey(stateKey) ?? opts.defaultOpenKeys ?? [];
    const openKeySet = new Set(openKeys);
    const onChangeOpenKeys = (nextKeys, key, action) => {
      opts.onChangeOpenKeys?.(nextKeys, key, action);
      pipeline.setStateAtKey(stateKey, nextKeys, {
        key,
        action
      });
    };
    const toggle = rowKey => {
      const expanded = openKeySet.has(rowKey);
      if (expanded) {
        onChangeOpenKeys(openKeys.filter(key => key !== rowKey), rowKey, 'collapse');
      } else {
        onChangeOpenKeys([...openKeys, rowKey], rowKey, 'expand');
      }
    };
    const isLeafNode = opts.isLeafNode ?? standardIsLeafNode;
    const clickArea = opts.clickArea ?? 'cell';
    const treeMetaKey = opts.treeMetaKey ?? treeMetaSymbol;
    const stopClickEventPropagation = Boolean(opts.stopClickEventPropagation);

    // indents
    const iconWidth = ctx.indents.iconWidth;
    const iconIndent = opts.iconIndent ?? ctx.indents.iconIndent;
    const iconGap = opts.iconGap ?? ctx.indents.iconGap;
    const indentSize = opts.indentSize ?? ctx.indents.indentSize;
    return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
    function processDataSource(input) {
      const result = [];
      dfs(input, 0);
      function dfs(nodes, depth) {
        if (nodes == null) {
          return;
        }
        for (const node of nodes) {
          const rowKey = node[primaryKey];
          const expanded = openKeySet.has(rowKey);
          const isLeaf = isLeafNode(node, {
            depth,
            expanded,
            rowKey
          });
          const treeMeta = {
            depth,
            isLeaf,
            expanded,
            rowKey
          };
          result.push({
            [treeMetaKey]: treeMeta,
            ...node
          });
          if (!isLeaf && expanded) {
            dfs(node.children, depth + 1);
          }
        }
      }
      return result;
    }
    function processColumns(columns) {
      if (columns.length === 0) {
        return columns;
      }

      // const [firstCol, ...others] = columns

      const flatColumns = flatColumnsWithoutParent(columns);
      const firstCol = flatColumns[expandIconColumnIndex];

      // const template = (value: any, record: any, recordIndex: number) => {
      const template = args => {
        const {
          rowData: record,
          index: recordIndex
        } = args;
        const content = internals.safeRender(firstCol, record, recordIndex);
        if (record[treeMetaKey] == null) {
          return content;
        }
        if (!isTreeArray) {
          return /*#__PURE__*/React.createElement(React.Fragment, null, content);
        }
        const {
          rowKey,
          depth,
          isLeaf,
          expanded
        } = record[treeMetaKey];
        const indent = iconIndent + depth * indentSize;
        if (isLeaf) {
          return /*#__PURE__*/React.createElement(InlineFlexCell, {
            className: "expansion-cell leaf"
          }, /*#__PURE__*/React.createElement("span", {
            className: "expansion-content",
            style: {
              marginLeft: indent + iconWidth + iconGap
            }
          }, content));
        }
        const onClick = e => {
          if (stopClickEventPropagation) {
            e.stopPropagation();
          }
          toggle(rowKey);
        };
        const expandCls = expanded ? 'expanded' : 'collapsed';
        return /*#__PURE__*/React.createElement(ExpansionCell, {
          className: cx('expansion-cell', expandCls),
          style: {
            cursor: clickArea === 'content' ? 'pointer' : undefined
          },
          onClick: clickArea === 'content' ? onClick : undefined
        }, /*#__PURE__*/React.createElement(icons.CaretRight, {
          className: cx('expansion-icon', expandCls),
          style: {
            cursor: clickArea === 'icon' ? 'pointer' : undefined,
            marginLeft: indent,
            marginRight: iconGap
          },
          onClick: clickArea === 'icon' ? onClick : undefined
        }), /*#__PURE__*/React.createElement("span", {
          className: "expansion-content"
        }, content));
      };
      const getCellProps = (value, record, rowIndex) => {
        const prevProps = internals.safeGetCellProps(firstCol, record, rowIndex);
        if (record[treeMetaKey] == null) {
          return prevProps;
        }
        const {
          isLeaf,
          rowKey
        } = record[treeMetaKey];
        if (isLeaf) {
          return prevProps;
        }
        return mergeCellProps(prevProps, {
          onClick(e) {
            if (stopClickEventPropagation) {
              e.stopPropagation();
            }
            toggle(rowKey);
          },
          style: {
            cursor: 'pointer'
          }
        });
      };
      const newExpandColumn = {
        ...firstCol,
        title: /*#__PURE__*/React.createElement("span", {
          className: "ui-rc-table-column-title",
          style: {
            marginLeft: iconIndent + iconWidth + iconGap
          }
        }, internals.safeRenderHeader(firstCol)),
        template,
        getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps
      };
      const newColumns = updateArrayByKey(columns, newExpandColumn, 'field');
      return newColumns;

      // return [
      //   {
      //     ...firstCol,
      //     title: (
      //       <span style={{ marginLeft: iconIndent + iconWidth + iconGap }}>{internals.safeRenderHeader(firstCol)}</span>
      //     ),
      //     render,
      //     getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps,
      //   },
      //   ...others,
      // ]
    }
  };
}