Compare commits

..

No commits in common. "1.0" and "master" have entirely different histories.
1.0 ... master

7 changed files with 25 additions and 87 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "zy-react-library", "name": "zy-react-library",
"private": false, "private": false,
"version": "1.3.22", "version": "1.3.19",
"type": "module", "type": "module",
"description": "", "description": "",
"author": "LiuJiaNan", "author": "LiuJiaNan",

View File

@ -44,11 +44,6 @@ export interface FormBuilderProps<Values = any> extends Omit<FormProps, "form" |
form: FormInstance<Values>; form: FormInstance<Values>;
/** 表单提交时的回调函数 */ /** 表单提交时的回调函数 */
onFinish?: (values: Values) => void; onFinish?: (values: Values) => void;
/** 历史记录对象,用于返回上一页,默认使用 window.history.back */
history?: {
goBack?: () => void;
[key: string]: any;
};
} }
/** /**

View File

@ -21,7 +21,6 @@ const FormBuilder = (props) => {
showCancelButton = true, showCancelButton = true,
customActionButtons, customActionButtons,
extraActionButtons, extraActionButtons,
history,
loading = false, loading = false,
...restProps ...restProps
} = props; } = props;
@ -52,7 +51,7 @@ const FormBuilder = (props) => {
}, [showActionButtons]); }, [showActionButtons]);
const handleCancel = () => { const handleCancel = () => {
history?.goBack ? history.goBack() : window.history.back(); window.history.back();
}; };
return ( return (

View File

@ -3,7 +3,7 @@ import type { FormItemProps, Rule } from "antd/es/form";
import type { FormListFieldData } from "antd/es/form/FormList"; import type { FormListFieldData } from "antd/es/form/FormList";
import type { Gutter } from "antd/es/grid/row"; import type { Gutter } from "antd/es/grid/row";
import type { NamePath } from "rc-field-form/lib/interface"; import type { NamePath } from "rc-field-form/lib/interface";
import type { CSSProperties, ReactElement, ReactNode } from "react"; import type { ReactElement, ReactNode } from "react";
import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender"; import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender";
import type { DeepPartial } from "./FormBuilder"; import type { DeepPartial } from "./FormBuilder";
@ -131,10 +131,6 @@ export interface FormOptionBase<
dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Dependencies[]>; dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Dependencies[]>;
/** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */ /** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */
onlyForLabel?: IsOnlyForLabel; onlyForLabel?: IsOnlyForLabel;
/** Col 的内联样式,会合并到 Col 的 style 上,支持函数动态计算 */
colStyle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, CSSProperties | ((formValues: AllValues) => CSSProperties)>;
/** Col 内部、Form.Item 之前渲染的标题节点,支持函数动态计算 */
colTitle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ReactNode | ((formValues: AllValues) => ReactNode)>;
} }
/** /**
@ -161,10 +157,6 @@ export type FormOptionByRender<
checkboxCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "checkbox" ? number : never>; checkboxCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "checkbox" ? number : never>;
/** Form.List 独有的属性 */ /** Form.List 独有的属性 */
formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: AllValues) => FormListUniqueProps) : never>; formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: AllValues) => FormListUniqueProps) : never>;
/** FormList 每行的内联样式,仅 render 为 formList 时可用,支持函数按行计算 */
rowStyle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? CSSProperties | ((field: FormListFieldData, fieldIndex: number) => CSSProperties) : never>;
/** FormList 每行起始位置渲染的标题节点,仅 render 为 formList 时可用,支持函数按行计算 */
rowTitle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? ReactNode | ((field: FormListFieldData, fieldIndex: number) => ReactNode) : never>;
}; };
/** /**

View File

@ -84,8 +84,12 @@ const FormItemsRenderer = ({
}; };
}; };
// 设置日期组件的属性 // 获取传给formItem的属性
const setDateComponentProps = (option, formItemProps) => { const getFormItemProps = (option) => {
const formItemProps = typeof option.formItemProps === "function"
? option.formItemProps(getFormValues())
: (option.formItemProps || {});
// 为日期组件添加特殊处理 // 为日期组件添加特殊处理
if ([ if ([
FORM_ITEM_RENDER_ENUM.DATE, FORM_ITEM_RENDER_ENUM.DATE,
@ -113,15 +117,6 @@ const FormItemsRenderer = ({
formItemProps.getValueFromEvent = (_, dateString) => dateString; formItemProps.getValueFromEvent = (_, dateString) => dateString;
formItemProps.getValueProps = value => ({ value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined }); formItemProps.getValueProps = value => ({ value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined });
} }
};
// 获取传给 formItem 的属性
const getFormItemProps = (option) => {
const formItemProps = typeof option.formItemProps === "function"
? option.formItemProps(getFormValues())
: (option.formItemProps || {});
setDateComponentProps(option, formItemProps);
return formItemProps; return formItemProps;
}; };
@ -223,39 +218,6 @@ const FormItemsRenderer = ({
return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol }; return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
}; };
// 获取 col 样式
const getColStyle = (option) => {
return typeof option.colStyle === "function"
? option.colStyle(getFormValues())
: option.colStyle;
};
// 获取 col 标题Col 内部、Form.Item 之后)
const getColTitle = (option) => {
return typeof option.colTitle === "function"
? option.colTitle(getFormValues())
: option.colTitle;
};
// 获取 row 样式FormList 的每一行)
const getRowStyle = (option, field, fieldIndex) => {
return typeof option.rowStyle === "function"
? option.rowStyle(field, fieldIndex)
: option.rowStyle;
};
// 获取 row 标题FormList 每行末尾)
const getRowTitle = (option, field, fieldIndex) => {
return typeof option.rowTitle === "function"
? option.rowTitle(field, fieldIndex)
: option.rowTitle;
};
// 获取是否动态表单项
const getIsDynamicFormItem = (option, formItemProps) => {
return (option.shouldUpdate ?? option.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies);
};
// 获取 hidden // 获取 hidden
const getHidden = (hidden) => { const getHidden = (hidden) => {
// 支持动态计算 hidden // 支持动态计算 hidden
@ -302,7 +264,7 @@ const FormItemsRenderer = ({
case FORM_ITEM_RENDER_ENUM.SELECT: case FORM_ITEM_RENDER_ENUM.SELECT:
return ( return (
<Select placeholder={placeholder} showSearch={{ optionFilterProp: "children" }} allowClear {...componentProps}> <Select placeholder={placeholder} showSearch allowClear optionFilterProp="children" {...componentProps}>
{(option.items || []).map((item) => { {(option.items || []).map((item) => {
const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey); const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey);
return ( return (
@ -458,12 +420,8 @@ const FormItemsRenderer = ({
delete formItemProps.dependencies; delete formItemProps.dependencies;
delete formItemProps.shouldUpdate; delete formItemProps.shouldUpdate;
if (getHidden(option.hidden))
return null;
return ( return (
<Col key={getKey(option) || index} span={col.span} style={{ ...style, ...getColStyle(option) }}> <Col key={getKey(option) || index} span={col.span} style={style}>
{getColTitle(option)}
<Form.Item <Form.Item
name={option.name} name={option.name}
label={renderLabel(option)} label={renderLabel(option)}
@ -545,19 +503,18 @@ const FormItemsRenderer = ({
const componentProps = getComponentProps(option); const componentProps = getComponentProps(option);
return ( return (
<Col key={getKey(option) || index} span={col.span} style={{ ...style, ...getColStyle(option) }}> <Col key={getKey(option) || index} span={col.span} style={style}>
{getColTitle(option)}
<Form.List name={option.name} {...componentProps}> <Form.List name={option.name} {...componentProps}>
{(fields, { add, remove, move }) => ( {(fields, { add, remove, move }) => (
<> <>
{fields.map((field, fieldIndex) => { {fields.map((field, fieldIndex) => {
const listOptions = getListOptions(formListUniqueProps.options, field, fieldIndex, add, remove, move); const listOptions = getListOptions(formListUniqueProps.options, field, fieldIndex, add, remove, move);
const rowStyle = getRowStyle(option, field, fieldIndex);
const rowTitle = getRowTitle(option, field, fieldIndex);
return ( return (
<Row gutter={gutter} key={field.key} style={rowStyle}> <Row gutter={gutter} key={field.key}>
{rowTitle}
{listOptions.map((listOption, listIndex) => { {listOptions.map((listOption, listIndex) => {
if (getHidden(listOption.hidden))
return null;
const col = getCol(listOption); const col = getCol(listOption);
const formItemProps = getFormItemProps(listOption); const formItemProps = getFormItemProps(listOption);
@ -575,7 +532,7 @@ const FormItemsRenderer = ({
if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST) if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return renderFormList(params); return renderFormList(params);
if (getIsDynamicFormItem(listOption, formItemProps)) if ((listOption.shouldUpdate ?? listOption.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies))
return renderDynamicFormItem(params); return renderDynamicFormItem(params);
// 判断一个项是否需要显示按钮(不是 onlyForLabel 且不是隐藏的) // 判断一个项是否需要显示按钮(不是 onlyForLabel 且不是隐藏的)
@ -605,10 +562,8 @@ const FormItemsRenderer = ({
if (listIndex === lastShowIndex || isNextNestedFormList || isNextNoShow) { if (listIndex === lastShowIndex || isNextNestedFormList || isNextNoShow) {
delete formItemProps.dependencies; delete formItemProps.dependencies;
delete formItemProps.shouldUpdate; delete formItemProps.shouldUpdate;
return ( return (
<Col key={getKey(listOption) || listIndex} span={col.span} style={{ ...style, ...getColStyle(listOption) }}> <Col key={getKey(listOption) || listIndex} span={col.span} style={style}>
{getColTitle(listOption)}
<Form.Item <Form.Item
label={renderLabel(listOption)} label={renderLabel(listOption)}
labelCol={col.labelCol} labelCol={col.labelCol}
@ -619,7 +574,7 @@ const FormItemsRenderer = ({
{...formItemProps} {...formItemProps}
> >
<div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "space-between" }}> <div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "space-between" }}>
<div style={{ flex: 1, minWidth: 0 }}> <div style={{ flex: 1 }}>
<Form.Item <Form.Item
noStyle noStyle
rules={getRules(listOption)} rules={getRules(listOption)}
@ -677,6 +632,9 @@ const FormItemsRenderer = ({
return ( return (
<> <>
{options.map((option, index) => { {options.map((option, index) => {
if (getHidden(option.hidden))
return null;
const col = getCol(option); const col = getCol(option);
const style = getStyle(index); const style = getStyle(index);
const formItemProps = getFormItemProps(option); const formItemProps = getFormItemProps(option);
@ -699,7 +657,7 @@ const FormItemsRenderer = ({
return renderFormList(params); return renderFormList(params);
// 如果配置了 shouldUpdate 或 dependencies使用 Form.Item 的联动机制 // 如果配置了 shouldUpdate 或 dependencies使用 Form.Item 的联动机制
if (getIsDynamicFormItem(option, formItemProps)) if ((option.shouldUpdate ?? option.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies))
return renderDynamicFormItem(params); return renderDynamicFormItem(params);
// 普通表单项(静态配置) // 普通表单项(静态配置)

View File

@ -17,9 +17,7 @@ function HeaderBack(props) {
<> <>
<div <div
className="back" className="back"
onClick={() => { onClick={() => history?.goBack?.() || window.history.back()}
history?.goBack ? history.goBack() : window.history.back();
}}
> >
<ArrowLeftOutlined style={{ fontSize: 14 }} /> <ArrowLeftOutlined style={{ fontSize: 14 }} />
<span>返回</span> <span>返回</span>

View File

@ -61,11 +61,7 @@ function Page(props) {
{customActionButtons || ( {customActionButtons || (
<Space> <Space>
{extraActionButtons} {extraActionButtons}
<Button <Button onClick={() => history?.goBack?.() || window.history.back()}>
onClick={() => {
history?.goBack ? history.goBack() : window.history.back();
}}
>
{backButtonText} {backButtonText}
</Button> </Button>
</Space> </Space>