All files / src/table/addons indentable.tsx

100% Statements 18/18
90.91% Branches 10/11
100% Functions 3/3
100% Lines 18/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69                                                    1x   1x 2x               72x 63x     9x               9x   9x 8x 8x 8x 8x 8x 4x 4x   8x   8x   9x        
import React from "react";
import { TableAddon } from "../TableProps";
import { CheckTreeRelation } from "../../checktree";
 
/**
 * `indentable` 插件用于支持表格缩进样式。
 */
export interface IndentableOptions {
  /**
   * 子级相对父级缩进量
   * @default 20
   */
  indent?: number;
 
  /**
   * 行的层级关系
   */
  relations?: CheckTreeRelation;
 
  /**
   * 提供一个列的 `key`,将选择组件插入到一个目标列
   */
  targetColumnKey: string;
}
 
export function indentable(options: IndentableOptions): TableAddon {
  const { indent = 20, relations, targetColumnKey } = options;
 
  return {
    onInjectColumn: previous => (
      record,
      rowKey,
      recordIndex,
      column,
      columnIndex
    ) => {
      // 不是目标列
      if (!targetColumnKey || column.key !== targetColumnKey) {
        return previous(record, rowKey, recordIndex, column, columnIndex);
      }
 
      const { children: preChildren, props, ...result } = previous(
        record,
        rowKey,
        recordIndex,
        column,
        columnIndex
      );
 
      let children = preChildren;
      // 非表头
      if (recordIndex !== -1) {
        let paddingLeft = 0;
        let depth = 0;
        Eif (indent > 0) {
          let node = rowKey;
          while (relations && relations[node]) {
            depth += 1;
            node = relations[node];
          }
          paddingLeft = indent * depth;
        }
        children = <div style={{ paddingLeft }}>{children}</div>;
      }
      return { ...result, props, children };
    },
  };
}