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 };
},
};
}
|