zy-react-library 1.0.78 → 1.0.79
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.
|
@@ -61,7 +61,7 @@ export interface FormOption {
|
|
|
61
61
|
tip?: ReactNode;
|
|
62
62
|
/** 是否隐藏,默认 false,支持函数动态计算 */
|
|
63
63
|
hidden?: boolean | ((formValues: FormValues) => boolean);
|
|
64
|
-
/**
|
|
64
|
+
/** 是否自定义渲染,完全交给外部控制渲染,默认 false */
|
|
65
65
|
customizeRender?: boolean;
|
|
66
66
|
/** 选项数据(用于 select、radio、checkbox) */
|
|
67
67
|
items?: OptionItem[];
|
|
@@ -135,8 +135,8 @@ const FormItemsRenderer = ({
|
|
|
135
135
|
|
|
136
136
|
// 获取key
|
|
137
137
|
const getKey = (option) => {
|
|
138
|
-
return option.key || option.name
|
|
139
|
-
}
|
|
138
|
+
return option.key || option.name;
|
|
139
|
+
};
|
|
140
140
|
|
|
141
141
|
// 渲染表单控件
|
|
142
142
|
const renderFormControl = (option) => {
|
|
@@ -272,6 +272,23 @@ const FormItemsRenderer = ({
|
|
|
272
272
|
return (
|
|
273
273
|
<>
|
|
274
274
|
{options.map((option, index) => {
|
|
275
|
+
// 列数
|
|
276
|
+
const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
|
|
277
|
+
const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
|
|
278
|
+
const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span };
|
|
279
|
+
|
|
280
|
+
// 使用 style 控制显示/隐藏
|
|
281
|
+
const style = collapse && index >= 3 ? { display: "none" } : undefined;
|
|
282
|
+
|
|
283
|
+
// 如果是 customizeRender 类型,完全交给外部控制渲染
|
|
284
|
+
if (option.customizeRender) {
|
|
285
|
+
return (
|
|
286
|
+
<Col key={getKey(option) || index} span={itemSpan} style={style}>
|
|
287
|
+
{option.render}
|
|
288
|
+
</Col>
|
|
289
|
+
);
|
|
290
|
+
}
|
|
291
|
+
|
|
275
292
|
// 如果是 onlyForLabel 类型,不渲染任何UI,只在表单中保存数据
|
|
276
293
|
if (option.onlyForLabel) {
|
|
277
294
|
return (
|
|
@@ -286,14 +303,6 @@ const FormItemsRenderer = ({
|
|
|
286
303
|
);
|
|
287
304
|
}
|
|
288
305
|
|
|
289
|
-
// 列数
|
|
290
|
-
const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
|
|
291
|
-
const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
|
|
292
|
-
const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span };
|
|
293
|
-
|
|
294
|
-
// 使用 style 控制显示/隐藏
|
|
295
|
-
const style = collapse && index >= 3 ? { display: "none" } : undefined;
|
|
296
|
-
|
|
297
306
|
// 如果是分割线
|
|
298
307
|
if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
|
|
299
308
|
return (
|
|
@@ -306,43 +315,39 @@ const FormItemsRenderer = ({
|
|
|
306
315
|
// 如果配置了 shouldUpdate 或 dependencies,使用 Form.Item 的联动机制
|
|
307
316
|
if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
|
|
308
317
|
return (
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
);
|
|
343
|
-
}}
|
|
344
|
-
</Form.Item>
|
|
345
|
-
)
|
|
318
|
+
<Form.Item
|
|
319
|
+
key={getKey(option) || index}
|
|
320
|
+
noStyle
|
|
321
|
+
preserve={false}
|
|
322
|
+
shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
|
|
323
|
+
dependencies={option.dependencies || option?.componentProps?.dependencies}
|
|
324
|
+
>
|
|
325
|
+
{() => {
|
|
326
|
+
// 支持动态计算 hidden
|
|
327
|
+
const hidden = typeof option.hidden === "function"
|
|
328
|
+
? option.hidden(getFormValues())
|
|
329
|
+
: (option.hidden ?? false);
|
|
330
|
+
|
|
331
|
+
if (hidden)
|
|
332
|
+
return null;
|
|
333
|
+
|
|
334
|
+
return (
|
|
335
|
+
<Col key={getKey(option) || index} span={itemSpan} style={style}>
|
|
336
|
+
<Form.Item
|
|
337
|
+
name={option.name}
|
|
338
|
+
label={renderLabel(option)}
|
|
339
|
+
rules={getRules(option)}
|
|
340
|
+
labelCol={itemLabelCol}
|
|
341
|
+
wrapperCol={itemWrapperCol}
|
|
342
|
+
preserve={false}
|
|
343
|
+
{...getFormItemProps(option)}
|
|
344
|
+
>
|
|
345
|
+
{renderFormControl(option)}
|
|
346
|
+
</Form.Item>
|
|
347
|
+
</Col>
|
|
348
|
+
);
|
|
349
|
+
}}
|
|
350
|
+
</Form.Item>
|
|
346
351
|
);
|
|
347
352
|
}
|
|
348
353
|
|
|
@@ -357,23 +362,17 @@ const FormItemsRenderer = ({
|
|
|
357
362
|
|
|
358
363
|
return (
|
|
359
364
|
<Col key={getKey(option) || index} span={itemSpan} style={style}>
|
|
360
|
-
|
|
361
|
-
option.
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
{...getFormItemProps(option)}
|
|
372
|
-
>
|
|
373
|
-
{renderFormControl(option)}
|
|
374
|
-
</Form.Item>
|
|
375
|
-
)
|
|
376
|
-
}
|
|
365
|
+
<Form.Item
|
|
366
|
+
name={option.name}
|
|
367
|
+
label={renderLabel(option)}
|
|
368
|
+
rules={getRules(option)}
|
|
369
|
+
labelCol={itemLabelCol}
|
|
370
|
+
wrapperCol={itemWrapperCol}
|
|
371
|
+
preserve={false}
|
|
372
|
+
{...getFormItemProps(option)}
|
|
373
|
+
>
|
|
374
|
+
{renderFormControl(option)}
|
|
375
|
+
</Form.Item>
|
|
377
376
|
</Col>
|
|
378
377
|
);
|
|
379
378
|
})}
|