react-antd-xform 1.0.6 → 1.0.8
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/array-helper.js +11 -19
- package/dist/form/common-utils.js +1 -3
- package/dist/form/context/formEnvContext.js +4 -1
- package/dist/form/extend/form-array.js +26 -22
- package/dist/form/extend/form-check.js +5 -7
- package/dist/form/extend/form-effect.js +10 -7
- package/dist/form/extend/form-layout.js +11 -23
- package/dist/form/extend/form-model-consumer.js +3 -1
- package/dist/form/extend/form-object.js +11 -9
- package/dist/form/extend/form-reset.js +1 -9
- package/dist/form/extend/form-submit.js +5 -10
- package/dist/form/form-item.js +79 -95
- package/dist/form/helpers/AsyncValue.js +17 -19
- package/dist/form/model-utils.js +54 -46
- package/dist/form/model.js +42 -69
- package/dist/form-ui/common-utils.js +101 -102
- package/dist/form-ui/default-component.d.ts +3 -2
- package/dist/form-ui/default-component.js +114 -43
- package/dist/form-ui/render-preview.d.ts +29 -0
- package/dist/form-ui/render-preview.js +50 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js +1 -1
- package/package.json +3 -1
|
@@ -4,10 +4,7 @@ import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invari
|
|
|
4
4
|
import { Form } from "./index.js";
|
|
5
5
|
import { composeValue } from "./common-utils.js";
|
|
6
6
|
function invariantArrayShapeIsAutoOrArray(arrayModel) {
|
|
7
|
-
invariant(
|
|
8
|
-
arrayModel._valueShape === "auto" || arrayModel._valueShape === "array",
|
|
9
|
-
'arrayModel._valueShape should be "auto" or "array"'
|
|
10
|
-
);
|
|
7
|
+
invariant(arrayModel._valueShape === "auto" || arrayModel._valueShape === "array", 'arrayModel._valueShape should be "auto" or "array"');
|
|
11
8
|
}
|
|
12
9
|
function updateSubModelsNames(arrayModel) {
|
|
13
10
|
arrayModel._subModels.forEach((mod, index) => {
|
|
@@ -34,10 +31,7 @@ const arrayHelpers = {
|
|
|
34
31
|
if (arrayModel.values == null) {
|
|
35
32
|
arrayModel.values = [];
|
|
36
33
|
}
|
|
37
|
-
const value = composeValue(
|
|
38
|
-
typeof itemFactory === "function" ? itemFactory(arrayModel) : itemFactory,
|
|
39
|
-
{}
|
|
40
|
-
);
|
|
34
|
+
const value = composeValue(typeof itemFactory === "function" ? itemFactory(arrayModel) : itemFactory, {});
|
|
41
35
|
arrayModel.values.push(value);
|
|
42
36
|
}),
|
|
43
37
|
delete: action((arrayModel, itemIndex) => {
|
|
@@ -90,18 +84,16 @@ const arrayHelpers = {
|
|
|
90
84
|
arrayModel._subModels.length = 0;
|
|
91
85
|
}
|
|
92
86
|
}),
|
|
93
|
-
move: action(
|
|
94
|
-
(arrayModel
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
reorderInPlace(arrayModel.values, fromIndex, toIndex);
|
|
98
|
-
}
|
|
99
|
-
if (Array.isArray(arrayModel._subModels)) {
|
|
100
|
-
reorderInPlace(arrayModel._subModels, fromIndex, toIndex);
|
|
101
|
-
updateSubModelsNames(arrayModel);
|
|
102
|
-
}
|
|
87
|
+
move: action((arrayModel, fromIndex, toIndex) => {
|
|
88
|
+
invariantArrayShapeIsAutoOrArray(arrayModel);
|
|
89
|
+
if (Array.isArray(arrayModel.values)) {
|
|
90
|
+
reorderInPlace(arrayModel.values, fromIndex, toIndex);
|
|
103
91
|
}
|
|
104
|
-
|
|
92
|
+
if (Array.isArray(arrayModel._subModels)) {
|
|
93
|
+
reorderInPlace(arrayModel._subModels, fromIndex, toIndex);
|
|
94
|
+
updateSubModelsNames(arrayModel);
|
|
95
|
+
}
|
|
96
|
+
}),
|
|
105
97
|
renderArrayItem(arrayModel, itemIndex, itemContent) {
|
|
106
98
|
const itemModel = arrayModel.getSubModel(itemIndex);
|
|
107
99
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.ModelProvider, { value: itemModel, children: itemContent(itemIndex, itemModel) }, itemModel.id);
|
|
@@ -16,7 +16,10 @@ function FormEnvProvider({
|
|
|
16
16
|
...override
|
|
17
17
|
}) {
|
|
18
18
|
const parent = useFormEnv();
|
|
19
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvContext.Provider, { value: {
|
|
19
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvContext.Provider, { value: {
|
|
20
|
+
...parent,
|
|
21
|
+
...override
|
|
22
|
+
}, children });
|
|
20
23
|
}
|
|
21
24
|
export {
|
|
22
25
|
FormEnvProvider,
|
|
@@ -4,30 +4,34 @@ import { useModel, ModelProvider } from "../context/modelContext.js";
|
|
|
4
4
|
import { range } from "../common-utils.js";
|
|
5
5
|
import { arrayHelpers } from "../array-helper.js";
|
|
6
6
|
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";
|
|
7
|
-
const defaultArrayLayout = ({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
const defaultArrayLayout = ({
|
|
8
|
+
arrayModel,
|
|
9
|
+
itemContent,
|
|
10
|
+
itemCount
|
|
11
|
+
}) => {
|
|
12
|
+
return range(itemCount).map((itemIndex) => arrayHelpers.renderArrayItem(arrayModel, itemIndex, itemContent));
|
|
11
13
|
};
|
|
12
|
-
const FormArray = observer(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
return null;
|
|
24
|
-
}
|
|
25
|
-
const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
|
|
26
|
-
const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
|
|
27
|
-
const itemContent = typeof children === "function" ? children : () => children;
|
|
28
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({ arrayModel, itemCount, itemContent }) });
|
|
14
|
+
const FormArray = observer(({
|
|
15
|
+
name,
|
|
16
|
+
children,
|
|
17
|
+
layout,
|
|
18
|
+
arrayModel: arrayModelProp,
|
|
19
|
+
use
|
|
20
|
+
}) => {
|
|
21
|
+
var _a;
|
|
22
|
+
const parent = useModel();
|
|
23
|
+
if (use === false) {
|
|
24
|
+
return null;
|
|
29
25
|
}
|
|
30
|
-
);
|
|
26
|
+
const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
|
|
27
|
+
const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
|
|
28
|
+
const itemContent = typeof children === "function" ? children : () => children;
|
|
29
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({
|
|
30
|
+
arrayModel,
|
|
31
|
+
itemCount,
|
|
32
|
+
itemContent
|
|
33
|
+
}) });
|
|
34
|
+
});
|
|
31
35
|
export {
|
|
32
36
|
FormArray
|
|
33
37
|
};
|
|
@@ -23,13 +23,11 @@ const FormCheck = observer(function FormCheck2({
|
|
|
23
23
|
};
|
|
24
24
|
useLayoutEffect(() => check._track(checkConfig));
|
|
25
25
|
useEffect(() => {
|
|
26
|
-
return reaction(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
{ fireImmediately: checkConfig.validateOnMount }
|
|
32
|
-
);
|
|
26
|
+
return reaction(convertWatchableToExpression(watch, model), () => {
|
|
27
|
+
check.validate();
|
|
28
|
+
}, {
|
|
29
|
+
fireImmediately: checkConfig.validateOnMount
|
|
30
|
+
});
|
|
33
31
|
}, [check, model, ...deps]);
|
|
34
32
|
if (renderError === true) {
|
|
35
33
|
return check.error;
|
|
@@ -17,13 +17,16 @@ const FormEffect = observer(function FormEffect2({
|
|
|
17
17
|
effectRef.current = effect;
|
|
18
18
|
});
|
|
19
19
|
useEffect(() => {
|
|
20
|
-
return reaction(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
return reaction(convertWatchableToExpression(watch, model), (next, prev) => {
|
|
21
|
+
effectRef.current(next, {
|
|
22
|
+
model,
|
|
23
|
+
prev,
|
|
24
|
+
next
|
|
25
|
+
});
|
|
26
|
+
}, {
|
|
27
|
+
fireImmediately,
|
|
28
|
+
equals
|
|
29
|
+
});
|
|
27
30
|
}, deps);
|
|
28
31
|
return null;
|
|
29
32
|
});
|
|
@@ -141,29 +141,17 @@ function FormLayout({
|
|
|
141
141
|
inlineError,
|
|
142
142
|
containerProps
|
|
143
143
|
}) {
|
|
144
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
"xform-container",
|
|
156
|
-
{
|
|
157
|
-
horizontal: labelPosition === "left",
|
|
158
|
-
vertical: labelPosition === "top",
|
|
159
|
-
"inline-error": labelPosition === "top" && inlineError
|
|
160
|
-
},
|
|
161
|
-
className
|
|
162
|
-
),
|
|
163
|
-
...containerProps,
|
|
164
|
-
children
|
|
165
|
-
}
|
|
166
|
-
);
|
|
144
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayoutContainer, { style: {
|
|
145
|
+
"--label-width": asCSSLength(labelWidth),
|
|
146
|
+
"--control-width": asCSSLength(controlWidth),
|
|
147
|
+
"--form-item-gap": asCSSLength(formItemGap),
|
|
148
|
+
"--form-item-label-top-position": asCSSLength(defaultLabelTopPosition),
|
|
149
|
+
...style
|
|
150
|
+
}, className: cx("xform-container", {
|
|
151
|
+
horizontal: labelPosition === "left",
|
|
152
|
+
vertical: labelPosition === "top",
|
|
153
|
+
"inline-error": labelPosition === "top" && inlineError
|
|
154
|
+
}, className), ...containerProps, children });
|
|
167
155
|
}
|
|
168
156
|
export {
|
|
169
157
|
FormLayout
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
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";
|
|
2
2
|
import { useModel } from "../context/modelContext.js";
|
|
3
3
|
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";
|
|
4
|
-
const FormModelConsumer = observer(({
|
|
4
|
+
const FormModelConsumer = observer(({
|
|
5
|
+
children
|
|
6
|
+
}) => {
|
|
5
7
|
const model = useModel();
|
|
6
8
|
return children(model);
|
|
7
9
|
});
|
|
@@ -2,16 +2,18 @@ import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/no
|
|
|
2
2
|
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";
|
|
3
3
|
import { useModel, ModelProvider } from "../context/modelContext.js";
|
|
4
4
|
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";
|
|
5
|
-
const FormObject = observer(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return
|
|
5
|
+
const FormObject = observer(({
|
|
6
|
+
name,
|
|
7
|
+
children,
|
|
8
|
+
use
|
|
9
|
+
}) => {
|
|
10
|
+
const parent = useModel();
|
|
11
|
+
if (use === false) {
|
|
12
|
+
return null;
|
|
13
13
|
}
|
|
14
|
-
);
|
|
14
|
+
const model = name === "&" ? parent : parent.getSubModel(name);
|
|
15
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children });
|
|
16
|
+
});
|
|
15
17
|
export {
|
|
16
18
|
FormObject
|
|
17
19
|
};
|
|
@@ -10,15 +10,7 @@ function FormReset({
|
|
|
10
10
|
}) {
|
|
11
11
|
const model = useModel();
|
|
12
12
|
const formEnv = useFormEnv();
|
|
13
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
14
|
-
ButtonComponent,
|
|
15
|
-
{
|
|
16
|
-
...props,
|
|
17
|
-
onClick: action(() => modelUtils.reset(model, formEnv)),
|
|
18
|
-
children,
|
|
19
|
-
...props
|
|
20
|
-
}
|
|
21
|
-
);
|
|
13
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonComponent, { ...props, onClick: action(() => modelUtils.reset(model, formEnv)), children, ...props });
|
|
22
14
|
}
|
|
23
15
|
export {
|
|
24
16
|
FormReset
|
|
@@ -8,20 +8,15 @@ function FormSubmit({
|
|
|
8
8
|
...props
|
|
9
9
|
}) {
|
|
10
10
|
const model = useModel();
|
|
11
|
-
const {
|
|
11
|
+
const {
|
|
12
|
+
onSubmit,
|
|
13
|
+
onError
|
|
14
|
+
} = useFormEnv();
|
|
12
15
|
const submitOptions = {
|
|
13
16
|
onSubmit,
|
|
14
17
|
onError
|
|
15
18
|
};
|
|
16
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
17
|
-
ButtonComponent,
|
|
18
|
-
{
|
|
19
|
-
...props,
|
|
20
|
-
onClick: () => modelUtils.submit(model, submitOptions),
|
|
21
|
-
children,
|
|
22
|
-
...props
|
|
23
|
-
}
|
|
24
|
-
);
|
|
19
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonComponent, { ...props, onClick: () => modelUtils.submit(model, submitOptions), children, ...props });
|
|
25
20
|
}
|
|
26
21
|
export {
|
|
27
22
|
FormSubmit
|
package/dist/form/form-item.js
CHANGED
|
@@ -61,30 +61,22 @@ function FormItemView({
|
|
|
61
61
|
labelStyle,
|
|
62
62
|
controlStyle
|
|
63
63
|
}) {
|
|
64
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
65
|
-
"
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
children
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
children,
|
|
81
|
-
help && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "help", children: help }),
|
|
82
|
-
error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-message", children: error })
|
|
83
|
-
] }),
|
|
84
|
-
rightNode
|
|
85
|
-
]
|
|
86
|
-
}
|
|
87
|
-
);
|
|
64
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-xform-id": htmlId, className: cx("form-item", className), style: {
|
|
65
|
+
"--label-width": asCSSLength(labelWidth),
|
|
66
|
+
"--control-width": asCSSLength(controlWidth),
|
|
67
|
+
...style
|
|
68
|
+
}, children: [
|
|
69
|
+
label == null && tip == null ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "form-item-label", htmlFor: htmlId, style: labelStyle, children: [
|
|
70
|
+
asterisk && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required-indicator" }),
|
|
71
|
+
label && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "form-item-label-text", children: label })
|
|
72
|
+
] }),
|
|
73
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "form-item-control", style: controlStyle, children: [
|
|
74
|
+
children,
|
|
75
|
+
help && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "help", children: help }),
|
|
76
|
+
error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-message", children: error })
|
|
77
|
+
] }),
|
|
78
|
+
rightNode
|
|
79
|
+
] });
|
|
88
80
|
}
|
|
89
81
|
function createFormItem(inputOptions) {
|
|
90
82
|
const options = processCreationOptions(inputOptions);
|
|
@@ -99,6 +91,7 @@ function createFormItem(inputOptions) {
|
|
|
99
91
|
}) {
|
|
100
92
|
const formEnv = useFormEnv();
|
|
101
93
|
const model = useModel();
|
|
94
|
+
const variant = formEnv.variant;
|
|
102
95
|
const field = resolveField(fieldProp, model, name, props.value);
|
|
103
96
|
const isPreview = composeValue(props.isPreview, formEnv.isPreview);
|
|
104
97
|
const error = composeValue(props.error, field.state.error);
|
|
@@ -107,15 +100,15 @@ function createFormItem(inputOptions) {
|
|
|
107
100
|
const htmlId = Field.getHtmlId(formEnv.htmlIdPrefix, field);
|
|
108
101
|
const componentProps = {
|
|
109
102
|
id: htmlId,
|
|
110
|
-
|
|
103
|
+
variant,
|
|
104
|
+
...isPreview ? {
|
|
105
|
+
isPreview: true
|
|
106
|
+
} : null,
|
|
111
107
|
// dataSource, readOnly, disabled,options 允许直接透传
|
|
112
108
|
...pick(props, ["dataSource", "readOnly", "disabled", "options"]),
|
|
113
109
|
...componentPropsProp,
|
|
114
110
|
// status 优先用 prop 中的值,然后再根据 error 自动判断
|
|
115
|
-
[options.statusPropName]: composeValue(
|
|
116
|
-
componentPropsProp == null ? void 0 : componentPropsProp[options.statusPropName],
|
|
117
|
-
composeValue(props[options.statusPropName], error ? "error" : void 0)
|
|
118
|
-
),
|
|
111
|
+
[options.statusPropName]: composeValue(componentPropsProp == null ? void 0 : componentPropsProp[options.statusPropName], composeValue(props[options.statusPropName], error ? "error" : void 0)),
|
|
119
112
|
[options.valuePropName]: composeValue(props[options.valuePropName], value),
|
|
120
113
|
onChange: composeValue(props.onChange, field.handleChange),
|
|
121
114
|
onFocus: composeValue(props.onFocus, field.handleFocus),
|
|
@@ -140,15 +133,13 @@ function createFormItem(inputOptions) {
|
|
|
140
133
|
useLayoutEffect(() => field._track(fieldConfig));
|
|
141
134
|
useLayoutEffect(() => {
|
|
142
135
|
if (fieldConfig.writeDefaultValueToModel === "force") {
|
|
143
|
-
return reaction(
|
|
144
|
-
(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
{ fireImmediately: true }
|
|
151
|
-
);
|
|
136
|
+
return reaction(() => field.value, () => {
|
|
137
|
+
if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
|
|
138
|
+
field.value = fieldConfig.defaultValueProp;
|
|
139
|
+
}
|
|
140
|
+
}, {
|
|
141
|
+
fireImmediately: true
|
|
142
|
+
});
|
|
152
143
|
} else if (fieldConfig.writeDefaultValueToModel) {
|
|
153
144
|
if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
|
|
154
145
|
runInAction(() => {
|
|
@@ -176,29 +167,11 @@ function createFormItem(inputOptions) {
|
|
|
176
167
|
return null;
|
|
177
168
|
}
|
|
178
169
|
}
|
|
179
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
help: props.help,
|
|
185
|
-
asterisk: props.asterisk ?? props.required,
|
|
186
|
-
error,
|
|
187
|
-
tip: props.tip,
|
|
188
|
-
style: props.style,
|
|
189
|
-
className: cx(props.className, {
|
|
190
|
-
"form-item-hidden": options.hidden,
|
|
191
|
-
"form-item-preview": isPreview,
|
|
192
|
-
"auto-control-width": options.hasIntrinsicWidth
|
|
193
|
-
}),
|
|
194
|
-
labelWidth: props.labelWidth,
|
|
195
|
-
labelStyle: props.labelStyle,
|
|
196
|
-
controlWidth: props.controlWidth,
|
|
197
|
-
controlStyle: props.controlStyle,
|
|
198
|
-
rightNode: props.rightNode,
|
|
199
|
-
children: isPreview ? renderPreview(componentProps) : options.render(componentProps)
|
|
200
|
-
}
|
|
201
|
-
);
|
|
170
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemView, { htmlId, label: props.label, help: props.help, asterisk: props.asterisk ?? props.required, error, tip: props.tip, style: props.style, className: cx(props.className, {
|
|
171
|
+
"form-item-hidden": options.hidden,
|
|
172
|
+
"form-item-preview": isPreview,
|
|
173
|
+
"auto-control-width": options.hasIntrinsicWidth
|
|
174
|
+
}), labelWidth: props.labelWidth, labelStyle: props.labelStyle, controlWidth: props.controlWidth, controlStyle: props.controlStyle, rightNode: props.rightNode, children: isPreview ? renderPreview(componentProps) : options.render(componentProps) });
|
|
202
175
|
}
|
|
203
176
|
FormItemComponent.displayName = `FormItem__${options.name}`;
|
|
204
177
|
return observer(FormItemComponent);
|
|
@@ -210,34 +183,33 @@ for (const config of ALL_COMPONENTS) {
|
|
|
210
183
|
}
|
|
211
184
|
const AnonymousFormItem = createFormItem({
|
|
212
185
|
name: "anonymous",
|
|
213
|
-
render({
|
|
186
|
+
render({
|
|
187
|
+
$Component: Component,
|
|
188
|
+
...props
|
|
189
|
+
}) {
|
|
214
190
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props });
|
|
215
191
|
}
|
|
216
192
|
});
|
|
217
193
|
const NotFound = createFormItem({
|
|
218
194
|
name: "notFound",
|
|
219
195
|
isEmpty: () => false,
|
|
220
|
-
render({
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
"没有找到对应组件,请检查组件名称是否拼写正确"
|
|
238
|
-
]
|
|
239
|
-
}
|
|
240
|
-
);
|
|
196
|
+
render({
|
|
197
|
+
$Component
|
|
198
|
+
}) {
|
|
199
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
|
|
200
|
+
border: "1px dashed red",
|
|
201
|
+
fontSize: 14,
|
|
202
|
+
padding: 4,
|
|
203
|
+
color: "red"
|
|
204
|
+
}, children: [
|
|
205
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("code", { children: [
|
|
206
|
+
"<FormItem component='",
|
|
207
|
+
$Component,
|
|
208
|
+
"' />"
|
|
209
|
+
] }),
|
|
210
|
+
" ",
|
|
211
|
+
"没有找到对应组件,请检查组件名称是否拼写正确"
|
|
212
|
+
] });
|
|
241
213
|
}
|
|
242
214
|
});
|
|
243
215
|
const Hidden = createFormItem({
|
|
@@ -248,38 +220,50 @@ const Hidden = createFormItem({
|
|
|
248
220
|
isEmpty() {
|
|
249
221
|
return false;
|
|
250
222
|
},
|
|
251
|
-
render({
|
|
223
|
+
render({
|
|
224
|
+
id,
|
|
225
|
+
value
|
|
226
|
+
}) {
|
|
252
227
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", value: stringifyObject(value), id });
|
|
253
228
|
}
|
|
254
229
|
});
|
|
255
|
-
function FormItem({
|
|
230
|
+
function FormItem({
|
|
231
|
+
use,
|
|
232
|
+
component,
|
|
233
|
+
...props
|
|
234
|
+
}) {
|
|
256
235
|
const formEnv = useFormEnv();
|
|
257
236
|
const variant = formEnv.variant;
|
|
258
237
|
if (use === false) {
|
|
259
238
|
return null;
|
|
260
239
|
}
|
|
261
240
|
if (component == null) {
|
|
262
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: {
|
|
241
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: {
|
|
242
|
+
$Component: String(component)
|
|
243
|
+
} });
|
|
263
244
|
} else if (typeof component === "string") {
|
|
264
245
|
if (component === "hidden") {
|
|
265
246
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(Hidden, { ...props });
|
|
266
247
|
}
|
|
267
248
|
const Comp = COMPONENT_DICT[component];
|
|
268
249
|
if (Comp == null) {
|
|
269
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: {
|
|
250
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: {
|
|
251
|
+
$Component: component
|
|
252
|
+
} });
|
|
270
253
|
}
|
|
271
254
|
return React.createElement(Comp, {
|
|
272
255
|
...props,
|
|
273
|
-
componentProps: {
|
|
256
|
+
componentProps: {
|
|
257
|
+
...props.componentProps,
|
|
258
|
+
variant
|
|
259
|
+
}
|
|
274
260
|
});
|
|
275
261
|
} else {
|
|
276
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
}
|
|
282
|
-
);
|
|
262
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(AnonymousFormItem, { ...props, componentProps: {
|
|
263
|
+
...props.componentProps,
|
|
264
|
+
variant,
|
|
265
|
+
$Component: component
|
|
266
|
+
} });
|
|
283
267
|
}
|
|
284
268
|
}
|
|
285
269
|
export {
|
|
@@ -71,27 +71,25 @@ const _AsyncValue = class _AsyncValue {
|
|
|
71
71
|
this.name = typeof options.name === "string" ? options.name : `AsyncValue_${_AsyncValue._globalCount++}`;
|
|
72
72
|
this._atom = createAtom(`${this.name}#state`);
|
|
73
73
|
this._refreshAtom = createAtom(`${this.name}#refresh`);
|
|
74
|
-
makeObservable(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
);
|
|
74
|
+
makeObservable(this, {
|
|
75
|
+
status: computed,
|
|
76
|
+
error: computed,
|
|
77
|
+
_inner_current: computed({
|
|
78
|
+
name: `${this.name}.inner_current`
|
|
79
|
+
}),
|
|
80
|
+
isLoading: computed,
|
|
81
|
+
isError: computed,
|
|
82
|
+
isReady: computed
|
|
83
|
+
}, {
|
|
84
|
+
name: this.name
|
|
85
|
+
});
|
|
86
86
|
this._disposers.push(this._stop);
|
|
87
87
|
this._disposers.push(onBecomeObserved(this._atom, this._start));
|
|
88
|
-
this._disposers.push(
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
})
|
|
94
|
-
);
|
|
88
|
+
this._disposers.push(onBecomeUnobserved(this._atom, () => {
|
|
89
|
+
if (!this.options.keepAlive) {
|
|
90
|
+
this._stop();
|
|
91
|
+
}
|
|
92
|
+
}));
|
|
95
93
|
this._disposers.push(() => {
|
|
96
94
|
this._status = "ready";
|
|
97
95
|
this._current = null;
|