react-antd-xform 1.0.10 → 1.0.12-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/form/context/formEnvContext.d.ts +1 -1
- package/dist/form/context/modelContext.d.ts +1 -1
- package/dist/form/extend/form-array.d.ts +2 -2
- package/dist/form/extend/form-array.js +2 -2
- package/dist/form/extend/form-check.d.ts +2 -2
- package/dist/form/extend/form-check.js +1 -1
- package/dist/form/extend/form-effect.d.ts +2 -2
- package/dist/form/extend/form-effect.js +1 -1
- package/dist/form/extend/form-layout.d.ts +1 -1
- package/dist/form/extend/form-layout.js +1 -1
- package/dist/form/extend/form-model-consumer.d.ts +1 -1
- package/dist/form/extend/form-reset.js +2 -2
- package/dist/form/extend/form-submit.js +1 -1
- package/dist/form/form/index.d.ts +34 -0
- package/dist/form/form/index.js +47 -0
- package/dist/form/{form-item.d.ts → form-item/index.d.ts} +4 -1
- package/dist/form/{form-item.js → form-item/index.js} +14 -11
- package/dist/form/{array-helper.d.ts → helpers/array-helper.d.ts} +2 -2
- package/dist/form/{array-helper.js → helpers/array-helper.js} +4 -4
- package/dist/form/index.d.ts +9 -33
- package/dist/form/{model-utils.d.ts → model/model-utils.d.ts} +1 -1
- package/dist/form/{model-utils.js → model/model-utils.js} +2 -2
- package/dist/form/{model.d.ts → model/model.d.ts} +3 -2
- package/dist/form/{model.js → model/model.js} +4 -3
- package/dist/form/{type.d.ts → types/index.d.ts} +2 -2
- package/dist/form/{common-utils.d.ts → utils/common-utils.d.ts} +2 -2
- package/dist/form/{common-utils.js → utils/common-utils.js} +2 -2
- package/dist/form-ui/{default-component.d.ts → default-components/index.d.ts} +2 -2
- package/dist/form-ui/{default-component.js → default-components/index.js} +20 -20
- package/dist/form-ui/{render-preview.d.ts → default-components/utils/render-preview.d.ts} +19 -19
- package/dist/form-ui/default-components/utils/render-preview.js +97 -0
- package/dist/form-ui/{common-utils.js → default-components/utils/value-change.js} +4 -4
- package/dist/form-ui/extend/array-table/index.d.ts +9 -0
- package/dist/form-ui/extend/array-table/index.js +149 -0
- package/dist/form-ui/extend/array-table/utils/calculateArrayTableData.d.ts +5 -0
- package/dist/form-ui/extend/array-table/utils/calculateArrayTableData.js +160 -0
- package/dist/form-ui/extend/array-table/utils/columm-utils.d.ts +17 -0
- package/dist/form-ui/extend/array-table/utils/columm-utils.js +52 -0
- package/dist/form-ui/extend/array-table/utils/tree-utils.d.ts +7 -0
- package/dist/form-ui/extend/array-table/utils/tree-utils.js +30 -0
- package/dist/form-ui/index.d.ts +2 -0
- package/dist/form-ui/types/index.d.ts +9 -0
- package/dist/index.d.ts +2 -9
- package/dist/index.js +7 -5
- package/package.json +1 -1
- package/dist/form/index.js +0 -45
- package/dist/form-ui/render-preview.js +0 -116
- /package/dist/form/{enum.d.ts → types/enum.d.ts} +0 -0
- /package/dist/form/{enum.js → types/enum.js} +0 -0
- /package/dist/form-ui/{common-utils.d.ts → default-components/utils/value-change.d.ts} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/** 通用默认预览,直接使用value进行设置 */
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const renderValueToPreview: (props: {
|
|
3
3
|
value: string;
|
|
4
4
|
}) => React.ReactNode;
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const renderSelectToPreview: (props: {
|
|
6
6
|
value: string | number | (string | number)[] | null | undefined;
|
|
7
7
|
options: {
|
|
8
8
|
label: string;
|
|
@@ -10,63 +10,63 @@ export declare const useSelectToPreview: (props: {
|
|
|
10
10
|
}[];
|
|
11
11
|
}) => React.ReactNode;
|
|
12
12
|
/** 日期预览 */
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const renderDatePreview: (props: {
|
|
14
14
|
value: any;
|
|
15
15
|
}) => React.ReactNode;
|
|
16
16
|
/** 日期范围预览 */
|
|
17
|
-
export declare const
|
|
17
|
+
export declare const renderDateRangePreview: (props: {
|
|
18
18
|
value: [any, any] | null | undefined;
|
|
19
19
|
}) => React.ReactNode;
|
|
20
20
|
/** 时间预览 */
|
|
21
|
-
export declare const
|
|
21
|
+
export declare const renderTimePreview: (props: {
|
|
22
22
|
value: any;
|
|
23
23
|
}) => React.ReactNode;
|
|
24
24
|
/** 时间范围预览 */
|
|
25
|
-
export declare const
|
|
25
|
+
export declare const renderTimeRangePreview: (props: {
|
|
26
26
|
value: [any, any] | null | undefined;
|
|
27
27
|
}) => React.ReactNode;
|
|
28
28
|
/** 多选/标签类预览 */
|
|
29
|
-
export declare const
|
|
29
|
+
export declare const renderMultiplePreview: (props: {
|
|
30
30
|
value: any[];
|
|
31
31
|
}) => React.ReactNode;
|
|
32
32
|
/** 开关类预览 */
|
|
33
|
-
export declare const
|
|
33
|
+
export declare const renderBooleanPreview: (props: {
|
|
34
34
|
value: boolean;
|
|
35
35
|
}) => React.ReactNode;
|
|
36
36
|
/** 评分预览 */
|
|
37
|
-
export declare const
|
|
37
|
+
export declare const renderRatePreview: (props: {
|
|
38
38
|
value: number;
|
|
39
39
|
}) => React.ReactNode;
|
|
40
40
|
/** 颜色预览(返回色块) */
|
|
41
|
-
export declare const
|
|
41
|
+
export declare const renderColorPreview: (props: {
|
|
42
42
|
value: string;
|
|
43
43
|
}) => React.ReactNode;
|
|
44
44
|
export declare const PREVIEW_RENDERERS: {
|
|
45
|
-
readonly
|
|
45
|
+
readonly renderValueToPreview: (props: {
|
|
46
46
|
value: string;
|
|
47
47
|
}) => React.ReactNode;
|
|
48
|
-
readonly
|
|
48
|
+
readonly renderDatePreview: (props: {
|
|
49
49
|
value: any;
|
|
50
50
|
}) => React.ReactNode;
|
|
51
|
-
readonly
|
|
51
|
+
readonly renderDateRangePreview: (props: {
|
|
52
52
|
value: [any, any] | null | undefined;
|
|
53
53
|
}) => React.ReactNode;
|
|
54
|
-
readonly
|
|
54
|
+
readonly renderTimePreview: (props: {
|
|
55
55
|
value: any;
|
|
56
56
|
}) => React.ReactNode;
|
|
57
|
-
readonly
|
|
57
|
+
readonly renderTimeRangePreview: (props: {
|
|
58
58
|
value: [any, any] | null | undefined;
|
|
59
59
|
}) => React.ReactNode;
|
|
60
|
-
readonly
|
|
60
|
+
readonly renderMultiplePreview: (props: {
|
|
61
61
|
value: any[];
|
|
62
62
|
}) => React.ReactNode;
|
|
63
|
-
readonly
|
|
63
|
+
readonly renderBooleanPreview: (props: {
|
|
64
64
|
value: boolean;
|
|
65
65
|
}) => React.ReactNode;
|
|
66
|
-
readonly
|
|
66
|
+
readonly renderRatePreview: (props: {
|
|
67
67
|
value: number;
|
|
68
68
|
}) => React.ReactNode;
|
|
69
|
-
readonly
|
|
69
|
+
readonly renderColorPreview: (props: {
|
|
70
70
|
value: string;
|
|
71
71
|
}) => React.ReactNode;
|
|
72
72
|
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import dayjs from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
|
|
3
|
+
const renderValueToPreview = (props) => {
|
|
4
|
+
const {
|
|
5
|
+
value
|
|
6
|
+
} = props;
|
|
7
|
+
return value != null && value !== "" ? `${value}` : "--";
|
|
8
|
+
};
|
|
9
|
+
const renderSelectToPreview = (props) => {
|
|
10
|
+
const {
|
|
11
|
+
value,
|
|
12
|
+
options
|
|
13
|
+
} = props;
|
|
14
|
+
if (value === null || value === void 0) {
|
|
15
|
+
return "--";
|
|
16
|
+
}
|
|
17
|
+
if (Array.isArray(value)) {
|
|
18
|
+
if (value.length === 0) return "--";
|
|
19
|
+
const labels = value.map((val) => {
|
|
20
|
+
const matched = options.find((item) => item.value === val);
|
|
21
|
+
return matched ? matched.label : null;
|
|
22
|
+
}).filter(Boolean);
|
|
23
|
+
return labels.length > 0 ? labels.join("、") : "--";
|
|
24
|
+
}
|
|
25
|
+
const matchedOption = options.find((item) => item.value === value);
|
|
26
|
+
return matchedOption ? matchedOption.label : "--";
|
|
27
|
+
};
|
|
28
|
+
const renderDatePreview = (props) => {
|
|
29
|
+
const {
|
|
30
|
+
value
|
|
31
|
+
} = props;
|
|
32
|
+
return value ? dayjs(value).format("YYYY-MM-DD") : "--";
|
|
33
|
+
};
|
|
34
|
+
const renderDateRangePreview = (props) => {
|
|
35
|
+
const {
|
|
36
|
+
value
|
|
37
|
+
} = props;
|
|
38
|
+
if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
|
|
39
|
+
return `${dayjs(value[0]).format("YYYY-MM-DD")} ~ ${dayjs(value[1]).format("YYYY-MM-DD")}`;
|
|
40
|
+
};
|
|
41
|
+
const renderTimePreview = (props) => {
|
|
42
|
+
const {
|
|
43
|
+
value
|
|
44
|
+
} = props;
|
|
45
|
+
return value ? dayjs(value).format("HH:mm:ss") : "--";
|
|
46
|
+
};
|
|
47
|
+
const renderTimeRangePreview = (props) => {
|
|
48
|
+
const {
|
|
49
|
+
value
|
|
50
|
+
} = props;
|
|
51
|
+
if (!Array.isArray(value) || !value[0] || !value[1]) return "--";
|
|
52
|
+
return `${dayjs(value[0]).format("HH:mm")} ~ ${dayjs(value[1]).format("HH:mm")}`;
|
|
53
|
+
};
|
|
54
|
+
const renderMultiplePreview = (props) => {
|
|
55
|
+
const {
|
|
56
|
+
value
|
|
57
|
+
} = props;
|
|
58
|
+
return Array.isArray(value) && value.length > 0 ? value.join(", ") : "--";
|
|
59
|
+
};
|
|
60
|
+
const renderBooleanPreview = (props) => {
|
|
61
|
+
const {
|
|
62
|
+
value
|
|
63
|
+
} = props;
|
|
64
|
+
return typeof value === "boolean" ? value ? "是" : "否" : "--";
|
|
65
|
+
};
|
|
66
|
+
const renderRatePreview = (props) => {
|
|
67
|
+
const {
|
|
68
|
+
value
|
|
69
|
+
} = props;
|
|
70
|
+
return typeof value === "number" ? "★".repeat(value) + "☆".repeat(5 - value) : "--";
|
|
71
|
+
};
|
|
72
|
+
const renderColorPreview = (props) => {
|
|
73
|
+
const {
|
|
74
|
+
value
|
|
75
|
+
} = props;
|
|
76
|
+
if (!value) return "--";
|
|
77
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: {
|
|
78
|
+
display: "inline-block",
|
|
79
|
+
width: 16,
|
|
80
|
+
height: 16,
|
|
81
|
+
border: "1px solid #ddd",
|
|
82
|
+
backgroundColor: value,
|
|
83
|
+
borderRadius: 3
|
|
84
|
+
} });
|
|
85
|
+
};
|
|
86
|
+
export {
|
|
87
|
+
renderBooleanPreview,
|
|
88
|
+
renderColorPreview,
|
|
89
|
+
renderDatePreview,
|
|
90
|
+
renderDateRangePreview,
|
|
91
|
+
renderMultiplePreview,
|
|
92
|
+
renderRatePreview,
|
|
93
|
+
renderSelectToPreview,
|
|
94
|
+
renderTimePreview,
|
|
95
|
+
renderTimeRangePreview,
|
|
96
|
+
renderValueToPreview
|
|
97
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
2
|
import React, { useMemo, useCallback } from "react";
|
|
3
|
-
import dayjs from "
|
|
4
|
-
import weekYear from "
|
|
5
|
-
import weekOfYear from "
|
|
3
|
+
import dayjs from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
|
|
4
|
+
import weekYear from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekYear.js";
|
|
5
|
+
import weekOfYear from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekOfYear.js";
|
|
6
6
|
dayjs.extend(weekOfYear);
|
|
7
7
|
dayjs.extend(weekYear);
|
|
8
8
|
if (!dayjs.__patchedForAntd__) {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FormArrayLayoutInput } from '../../../form';
|
|
2
|
+
import { ArrayTableOptions } from '../../types';
|
|
3
|
+
export declare const TableRowOperations: (({ operations, arrayModel, itemIndex }: any) => import("react/jsx-runtime").JSX.Element) & {
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
export declare function arrayTable({ orderColumn, style, className, operations, operationColumn, tableImplementation: Table, tableProps, }?: ArrayTableOptions): (input: FormArrayLayoutInput) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare namespace arrayTable {
|
|
8
|
+
var Group: (_props: any) => any;
|
|
9
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { action } from "mobx";
|
|
4
|
+
import "../../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
5
|
+
import { Table, Popconfirm, Button } from "antd";
|
|
6
|
+
import { enhanceTableColumns } from "./utils/columm-utils.js";
|
|
7
|
+
import { calculateArrayTableData } from "./utils/calculateArrayTableData.js";
|
|
8
|
+
import { observer } from "../../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
|
|
9
|
+
import { Form } from "../../../form/form/index.js";
|
|
10
|
+
import { useFormEnv } from "../../../form/context/formEnvContext.js";
|
|
11
|
+
import { arrayHelpers } from "../../../form/helpers/array-helper.js";
|
|
12
|
+
const AntdTableRow = (props) => {
|
|
13
|
+
const {
|
|
14
|
+
children,
|
|
15
|
+
...restProps
|
|
16
|
+
} = props;
|
|
17
|
+
if (!props["data-row-type"] || props["data-row-type"] !== "data") {
|
|
18
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { ...restProps, children });
|
|
19
|
+
}
|
|
20
|
+
const {
|
|
21
|
+
record
|
|
22
|
+
} = props;
|
|
23
|
+
const {
|
|
24
|
+
hiddenItems,
|
|
25
|
+
effects,
|
|
26
|
+
checks,
|
|
27
|
+
itemIndex
|
|
28
|
+
} = record;
|
|
29
|
+
const hiddenItemsElements = hiddenItems.map((item) => React.cloneElement(item, {
|
|
30
|
+
renderHiddenFormItemView: false
|
|
31
|
+
}));
|
|
32
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Form.Object, { name: String(itemIndex), children: [
|
|
33
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("tr", { ...restProps, children }),
|
|
34
|
+
effects,
|
|
35
|
+
checks,
|
|
36
|
+
hiddenItemsElements
|
|
37
|
+
] });
|
|
38
|
+
};
|
|
39
|
+
function resolveOperationConfig(rowIndex, config, defaultConfig) {
|
|
40
|
+
if (typeof config === "function") {
|
|
41
|
+
return resolveOperationConfig(rowIndex, config(rowIndex), defaultConfig);
|
|
42
|
+
}
|
|
43
|
+
if (typeof config === "boolean") {
|
|
44
|
+
return {
|
|
45
|
+
...defaultConfig,
|
|
46
|
+
show: Boolean(config)
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
return {
|
|
50
|
+
...defaultConfig,
|
|
51
|
+
show: defaultConfig.show || Boolean(config),
|
|
52
|
+
...config
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
const TableRowOperations = observer(({
|
|
56
|
+
operations,
|
|
57
|
+
arrayModel,
|
|
58
|
+
itemIndex
|
|
59
|
+
}) => {
|
|
60
|
+
const {
|
|
61
|
+
isPreview
|
|
62
|
+
} = useFormEnv();
|
|
63
|
+
if (isPreview) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
const delete_ = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.delete, {
|
|
67
|
+
show: false,
|
|
68
|
+
disabled: false,
|
|
69
|
+
label: "删除",
|
|
70
|
+
confirm: true
|
|
71
|
+
});
|
|
72
|
+
const move = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.move, {
|
|
73
|
+
show: false,
|
|
74
|
+
disabled: false
|
|
75
|
+
});
|
|
76
|
+
const moveUp = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.moveUp, {
|
|
77
|
+
...move,
|
|
78
|
+
label: "上移"
|
|
79
|
+
});
|
|
80
|
+
const moveDown = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.moveDown, {
|
|
81
|
+
...move,
|
|
82
|
+
label: "下移"
|
|
83
|
+
});
|
|
84
|
+
const buttons = [["moveUp", moveUp, arrayHelpers.moveUp], ["moveDown", moveDown, arrayHelpers.moveDown], ["delete", delete_, arrayHelpers.delete]];
|
|
85
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: buttons.map(([key, config, handler]) => {
|
|
86
|
+
if (!config.show) {
|
|
87
|
+
return null;
|
|
88
|
+
}
|
|
89
|
+
const callback = action(() => handler(arrayModel, itemIndex));
|
|
90
|
+
if (key === "delete" && config.confirm) {
|
|
91
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm, { title: "确定要删除么?", onConfirm: callback, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "link", disabled: config.disabled, children: config.label }) }, key);
|
|
92
|
+
}
|
|
93
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "link", disabled: config.disabled, onClick: callback, children: config.label }, key);
|
|
94
|
+
}) });
|
|
95
|
+
});
|
|
96
|
+
function arrayTable({
|
|
97
|
+
orderColumn,
|
|
98
|
+
style,
|
|
99
|
+
className,
|
|
100
|
+
operations,
|
|
101
|
+
operationColumn,
|
|
102
|
+
tableImplementation: Table$1 = Table,
|
|
103
|
+
tableProps
|
|
104
|
+
} = {}) {
|
|
105
|
+
return (input) => {
|
|
106
|
+
const {
|
|
107
|
+
arrayModel
|
|
108
|
+
} = input;
|
|
109
|
+
const {
|
|
110
|
+
columns,
|
|
111
|
+
dataSource
|
|
112
|
+
} = calculateArrayTableData(input);
|
|
113
|
+
const {
|
|
114
|
+
components,
|
|
115
|
+
...restTableProps
|
|
116
|
+
} = tableProps || {};
|
|
117
|
+
const enhancedColumns = enhanceTableColumns(columns, {
|
|
118
|
+
orderColumn,
|
|
119
|
+
operationColumn,
|
|
120
|
+
operations,
|
|
121
|
+
arrayModel
|
|
122
|
+
});
|
|
123
|
+
const processedDataSource = dataSource.map((item) => ({
|
|
124
|
+
...item,
|
|
125
|
+
"data-row-type": "data"
|
|
126
|
+
}));
|
|
127
|
+
const tableComponents = {
|
|
128
|
+
body: {
|
|
129
|
+
row: (props) => {
|
|
130
|
+
const record = processedDataSource.find((item) => item.rowKey === props["data-row-key"]);
|
|
131
|
+
return React.createElement(AntdTableRow, {
|
|
132
|
+
...props,
|
|
133
|
+
record,
|
|
134
|
+
"data-row-type": record ? "data" : "other"
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
...components
|
|
139
|
+
};
|
|
140
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, { className, style, rowKey: "rowKey", columns: enhancedColumns, dataSource: processedDataSource, scroll: {
|
|
141
|
+
x: true
|
|
142
|
+
}, components: tableComponents, ...restTableProps });
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
arrayTable.Group = (_props) => null;
|
|
146
|
+
export {
|
|
147
|
+
TableRowOperations,
|
|
148
|
+
arrayTable
|
|
149
|
+
};
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import cx from "../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
4
|
+
import { arrayTable } from "../index.js";
|
|
5
|
+
import { collectNodes, isLeafNode } from "./tree-utils.js";
|
|
6
|
+
import { arrayHelpers } from "../../../../form/helpers/array-helper.js";
|
|
7
|
+
import { FormItem } from "../../../../form/form-item/index.js";
|
|
8
|
+
import { Form } from "../../../../form/form/index.js";
|
|
9
|
+
const range = (n) => {
|
|
10
|
+
const result = [];
|
|
11
|
+
for (let i = 0; i < n; i++) {
|
|
12
|
+
result.push(i);
|
|
13
|
+
}
|
|
14
|
+
return result;
|
|
15
|
+
};
|
|
16
|
+
function extractFormItemJSXElements(node, startColIndex = 0) {
|
|
17
|
+
if (node == null) {
|
|
18
|
+
return {
|
|
19
|
+
result: [],
|
|
20
|
+
flatCount: 0
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
if (node.type == React.Fragment) {
|
|
24
|
+
return extractFormItemJSXElements(node.props.children, startColIndex);
|
|
25
|
+
}
|
|
26
|
+
let flatCount = 0;
|
|
27
|
+
const result = [];
|
|
28
|
+
const array = React.Children.toArray(node);
|
|
29
|
+
for (const item of array) {
|
|
30
|
+
if ((item == null ? void 0 : item.type) === FormItem || (item == null ? void 0 : item.type) === Form.ItemView) {
|
|
31
|
+
result.push({
|
|
32
|
+
...item,
|
|
33
|
+
colIndex: startColIndex + flatCount
|
|
34
|
+
});
|
|
35
|
+
flatCount += 1;
|
|
36
|
+
} else if ((item == null ? void 0 : item.type) === arrayTable.Group) {
|
|
37
|
+
const subRet = extractFormItemJSXElements(item.props.children, startColIndex + flatCount);
|
|
38
|
+
result.push({
|
|
39
|
+
...item,
|
|
40
|
+
children: subRet.result
|
|
41
|
+
});
|
|
42
|
+
flatCount += subRet.flatCount;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
return {
|
|
46
|
+
result,
|
|
47
|
+
flatCount
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
function extractFormEffectJSXElements(node) {
|
|
51
|
+
const isFormEffectJSXElement = (item) => {
|
|
52
|
+
var _a;
|
|
53
|
+
return (item == null ? void 0 : item.type) === Form.Effect || ((_a = item == null ? void 0 : item.props) == null ? void 0 : _a["x-effect"]);
|
|
54
|
+
};
|
|
55
|
+
if (node == null) {
|
|
56
|
+
return [];
|
|
57
|
+
}
|
|
58
|
+
if (node.type == React.Fragment) {
|
|
59
|
+
return React.Children.toArray(node.props.children).filter(isFormEffectJSXElement);
|
|
60
|
+
} else {
|
|
61
|
+
return React.Children.toArray(node).filter(isFormEffectJSXElement);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function extractFormCheckJSXElements(node) {
|
|
65
|
+
const isFormCheckJSXElement = (item) => (item == null ? void 0 : item.type) === Form.Check;
|
|
66
|
+
if (node == null) {
|
|
67
|
+
return [];
|
|
68
|
+
}
|
|
69
|
+
if (node.type == React.Fragment) {
|
|
70
|
+
return React.Children.toArray(node.props.children).filter(isFormCheckJSXElement);
|
|
71
|
+
} else {
|
|
72
|
+
return React.Children.toArray(node).filter(isFormCheckJSXElement);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
function extractHiddenJSXElements(node) {
|
|
76
|
+
const isHiddenItemJSXElement = (item) => item.props.component === "hidden";
|
|
77
|
+
if (node == null) {
|
|
78
|
+
return [];
|
|
79
|
+
}
|
|
80
|
+
if (node.type == React.Fragment) {
|
|
81
|
+
return React.Children.toArray(node.props.children).filter(isHiddenItemJSXElement);
|
|
82
|
+
} else {
|
|
83
|
+
return React.Children.toArray(node).filter(isHiddenItemJSXElement);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
function calculateArrayTableData({
|
|
87
|
+
itemContent,
|
|
88
|
+
itemCount,
|
|
89
|
+
arrayModel
|
|
90
|
+
}) {
|
|
91
|
+
const dataSource = range(itemCount).map((itemIndex) => {
|
|
92
|
+
const renderedContent = itemContent(itemIndex, arrayModel.getSubModel(itemIndex));
|
|
93
|
+
const formItems = extractFormItemJSXElements(renderedContent).result;
|
|
94
|
+
const flattenFormItems = collectNodes(formItems, "leaf-only");
|
|
95
|
+
const effects = extractFormEffectJSXElements(renderedContent);
|
|
96
|
+
const checks = extractFormCheckJSXElements(renderedContent);
|
|
97
|
+
const hiddenItems = extractHiddenJSXElements(renderedContent);
|
|
98
|
+
return {
|
|
99
|
+
rowKey: arrayHelpers.getKey(arrayModel, itemIndex),
|
|
100
|
+
itemIndex,
|
|
101
|
+
formItems,
|
|
102
|
+
flattenFormItems,
|
|
103
|
+
effects,
|
|
104
|
+
checks,
|
|
105
|
+
hiddenItems
|
|
106
|
+
};
|
|
107
|
+
});
|
|
108
|
+
let columnsShape;
|
|
109
|
+
if (dataSource.length > 0) {
|
|
110
|
+
columnsShape = dataSource[0].formItems;
|
|
111
|
+
} else {
|
|
112
|
+
columnsShape = extractFormItemJSXElements(itemContent(0, arrayModel.getSubModel(0))).result;
|
|
113
|
+
}
|
|
114
|
+
function convertColumn(item) {
|
|
115
|
+
if (item.props.component === "hidden") {
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
return {
|
|
119
|
+
// Antd Table列定义
|
|
120
|
+
key: `col_${item.colIndex}`,
|
|
121
|
+
dataIndex: `col_${item.colIndex}`,
|
|
122
|
+
render: (value, record) => {
|
|
123
|
+
const formItem = record.flattenFormItems[item.colIndex];
|
|
124
|
+
return React.cloneElement(formItem, {
|
|
125
|
+
className: cx(formItem.className, "minimal")
|
|
126
|
+
});
|
|
127
|
+
},
|
|
128
|
+
title: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
129
|
+
(item.props.asterisk ?? item.props.required) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required-indicator" }),
|
|
130
|
+
item.props.label
|
|
131
|
+
] }),
|
|
132
|
+
width: item.props.width,
|
|
133
|
+
fixed: item.props.lock ? "left" : void 0,
|
|
134
|
+
align: item.props.align,
|
|
135
|
+
...item.props["x-column"] ?? item.props["x-table-column"]
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
function convertGroup(group) {
|
|
139
|
+
return {
|
|
140
|
+
key: group.props.name,
|
|
141
|
+
title: group.props.label || group.props.name,
|
|
142
|
+
children: convert(group.children),
|
|
143
|
+
width: group.props.width,
|
|
144
|
+
fixed: group.props.lock ? "left" : void 0,
|
|
145
|
+
align: group.props.align,
|
|
146
|
+
...group.props["x-column"] ?? group.props["x-table-column"]
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
const convert = (nodes) => {
|
|
150
|
+
return nodes.map((n) => isLeafNode(n) ? convertColumn(n) : convertGroup(n)).filter(Boolean);
|
|
151
|
+
};
|
|
152
|
+
const columns = convert(columnsShape);
|
|
153
|
+
return {
|
|
154
|
+
dataSource,
|
|
155
|
+
columns
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
export {
|
|
159
|
+
calculateArrayTableData
|
|
160
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 创建序号列配置
|
|
3
|
+
*/
|
|
4
|
+
export declare function createOrderColumn(orderColumn: any): any;
|
|
5
|
+
/**
|
|
6
|
+
* 创建操作列配置
|
|
7
|
+
*/
|
|
8
|
+
export declare function createOperationColumn(operationColumn: any, operations: any, arrayModel: any): any;
|
|
9
|
+
/**
|
|
10
|
+
* 增强表格列配置 - 添加序号列和操作列
|
|
11
|
+
*/
|
|
12
|
+
export declare function enhanceTableColumns(originalColumns: any[], options: {
|
|
13
|
+
orderColumn?: any;
|
|
14
|
+
operationColumn?: any;
|
|
15
|
+
operations?: any;
|
|
16
|
+
arrayModel: any;
|
|
17
|
+
}): any[];
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import { TableRowOperations } from "../index.js";
|
|
3
|
+
function createOrderColumn(orderColumn) {
|
|
4
|
+
if (!orderColumn) return null;
|
|
5
|
+
return {
|
|
6
|
+
key: "order",
|
|
7
|
+
title: "#",
|
|
8
|
+
width: 50,
|
|
9
|
+
fixed: "left",
|
|
10
|
+
align: "right",
|
|
11
|
+
...orderColumn,
|
|
12
|
+
render: (_, record) => {
|
|
13
|
+
return record.itemIndex + 1;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
function createOperationColumn(operationColumn, operations, arrayModel) {
|
|
18
|
+
if (!operationColumn && !operations) return null;
|
|
19
|
+
return {
|
|
20
|
+
key: "operations",
|
|
21
|
+
title: "",
|
|
22
|
+
width: 120,
|
|
23
|
+
fixed: "right",
|
|
24
|
+
...operationColumn,
|
|
25
|
+
render: (_, record) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
|
|
26
|
+
padding: "8px"
|
|
27
|
+
}, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRowOperations, { arrayModel, itemIndex: record.itemIndex, operations }) })
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
function enhanceTableColumns(originalColumns, options) {
|
|
31
|
+
const {
|
|
32
|
+
orderColumn,
|
|
33
|
+
operationColumn,
|
|
34
|
+
operations,
|
|
35
|
+
arrayModel
|
|
36
|
+
} = options;
|
|
37
|
+
const enhancedColumns = [...originalColumns];
|
|
38
|
+
const orderCol = createOrderColumn(orderColumn);
|
|
39
|
+
if (orderCol) {
|
|
40
|
+
enhancedColumns.unshift(orderCol);
|
|
41
|
+
}
|
|
42
|
+
const operationCol = createOperationColumn(operationColumn, operations, arrayModel);
|
|
43
|
+
if (operationCol) {
|
|
44
|
+
enhancedColumns.push(operationCol);
|
|
45
|
+
}
|
|
46
|
+
return enhancedColumns;
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
createOperationColumn,
|
|
50
|
+
createOrderColumn,
|
|
51
|
+
enhanceTableColumns
|
|
52
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface AbstractTreeNode {
|
|
2
|
+
children?: AbstractTreeNode[];
|
|
3
|
+
}
|
|
4
|
+
/** 判断是否为叶子节点 */
|
|
5
|
+
export declare function isLeafNode<T extends AbstractTreeNode>(node: T): boolean;
|
|
6
|
+
/** 遍历所有节点,并将节点收集到一个数组中 */
|
|
7
|
+
export declare function collectNodes<T extends AbstractTreeNode>(nodes: T[], order?: 'pre' | 'post' | 'leaf-only'): T[];
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
function isLeafNode(node) {
|
|
2
|
+
return !node.children || node.children.length === 0;
|
|
3
|
+
}
|
|
4
|
+
function collectNodes(nodes, order = "pre") {
|
|
5
|
+
const result = [];
|
|
6
|
+
function dfs(nodes2) {
|
|
7
|
+
if (!nodes2) return;
|
|
8
|
+
for (const node of nodes2) {
|
|
9
|
+
if (isLeafNode(node)) {
|
|
10
|
+
result.push(node);
|
|
11
|
+
} else {
|
|
12
|
+
if (order === "pre") {
|
|
13
|
+
result.push(node);
|
|
14
|
+
dfs(node.children);
|
|
15
|
+
} else if (order === "post") {
|
|
16
|
+
dfs(node.children);
|
|
17
|
+
result.push(node);
|
|
18
|
+
} else {
|
|
19
|
+
dfs(node.children);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
dfs(nodes);
|
|
25
|
+
return result;
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
collectNodes,
|
|
29
|
+
isLeafNode
|
|
30
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { FormEnvProvider, useFormEnv } from './form/context/formEnvContext';
|
|
4
|
-
import { FormItem, createFormItem } from './form/form-item';
|
|
5
|
-
import { FormModel } from './form/model';
|
|
6
|
-
import { arrayHelpers } from './form/array-helper';
|
|
7
|
-
import { AsyncValue } from './form/helpers/AsyncValue';
|
|
8
|
-
import { modelUtils } from './form/model-utils';
|
|
9
|
-
export { Form, FormEnvProvider, useFormEnv, useModel, FormItem, createFormItem, FormModel, arrayHelpers, AsyncValue, modelUtils, };
|
|
1
|
+
export * from './form';
|
|
2
|
+
export * from './form-ui';
|