2023-09-11 17:28:04 +08:00
|
|
|
import * as React from 'react';
|
2019-07-03 20:14:39 +08:00
|
|
|
import { List } from 'rc-field-form';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { StoreValue, ValidatorRule } from 'rc-field-form/lib/interface';
|
2023-09-11 17:28:04 +08:00
|
|
|
|
|
|
|
import { devUseWarning } from '../_util/warning';
|
2023-06-28 09:46:20 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2020-09-11 21:27:51 +08:00
|
|
|
import { FormItemPrefixContext } from './context';
|
2019-07-03 20:14:39 +08:00
|
|
|
|
2020-07-28 13:04:18 +08:00
|
|
|
export interface FormListFieldData {
|
2019-07-03 20:14:39 +08:00
|
|
|
name: number;
|
|
|
|
key: number;
|
2022-06-06 14:26:16 +08:00
|
|
|
/** @deprecated No need anymore Use key instead */
|
2022-06-13 11:26:16 +08:00
|
|
|
fieldKey?: number;
|
2019-07-03 20:14:39 +08:00
|
|
|
}
|
|
|
|
|
2020-07-28 13:04:18 +08:00
|
|
|
export interface FormListOperation {
|
2020-08-12 19:13:44 +08:00
|
|
|
add: (defaultValue?: StoreValue, insertIndex?: number) => void;
|
2020-07-15 22:17:17 +08:00
|
|
|
remove: (index: number | number[]) => void;
|
2019-12-24 20:36:27 +08:00
|
|
|
move: (from: number, to: number) => void;
|
2019-07-03 20:14:39 +08:00
|
|
|
}
|
|
|
|
|
2020-07-28 13:04:18 +08:00
|
|
|
export interface FormListProps {
|
2020-09-11 21:27:51 +08:00
|
|
|
prefixCls?: string;
|
2019-07-03 20:14:39 +08:00
|
|
|
name: string | number | (string | number)[];
|
2020-10-15 22:31:51 +08:00
|
|
|
rules?: ValidatorRule[];
|
2020-12-02 21:28:46 +08:00
|
|
|
initialValue?: any[];
|
2020-09-11 21:27:51 +08:00
|
|
|
children: (
|
|
|
|
fields: FormListFieldData[],
|
|
|
|
operation: FormListOperation,
|
2021-06-04 14:44:41 +08:00
|
|
|
meta: { errors: React.ReactNode[]; warnings: React.ReactNode[] },
|
2020-09-11 21:27:51 +08:00
|
|
|
) => React.ReactNode;
|
2019-07-03 20:14:39 +08:00
|
|
|
}
|
|
|
|
|
2020-09-11 21:27:51 +08:00
|
|
|
const FormList: React.FC<FormListProps> = ({
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
children,
|
|
|
|
...props
|
|
|
|
}) => {
|
2023-09-11 17:28:04 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2023-09-13 22:07:33 +08:00
|
|
|
const warning = devUseWarning('Form.List');
|
2023-09-11 17:28:04 +08:00
|
|
|
|
|
|
|
warning(
|
|
|
|
typeof props.name === 'number' ||
|
|
|
|
(Array.isArray(props.name) ? !!props.name.length : !!props.name),
|
|
|
|
'usage',
|
|
|
|
'Miss `name` prop.',
|
|
|
|
);
|
|
|
|
}
|
2019-07-03 20:14:39 +08:00
|
|
|
|
2020-09-11 21:27:51 +08:00
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
2021-11-26 12:18:21 +08:00
|
|
|
const contextValue = React.useMemo(
|
|
|
|
() => ({
|
|
|
|
prefixCls,
|
|
|
|
status: 'error' as const,
|
|
|
|
}),
|
|
|
|
[prefixCls],
|
|
|
|
);
|
2020-09-11 21:27:51 +08:00
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
return (
|
|
|
|
<List {...props}>
|
2020-12-09 17:12:32 +08:00
|
|
|
{(fields, operation, meta) => (
|
2021-11-26 12:18:21 +08:00
|
|
|
<FormItemPrefixContext.Provider value={contextValue}>
|
2020-12-09 17:12:32 +08:00
|
|
|
{children(
|
2022-11-19 13:47:33 +08:00
|
|
|
fields.map((field) => ({ ...field, fieldKey: field.key })),
|
2020-12-09 17:12:32 +08:00
|
|
|
operation,
|
|
|
|
{
|
|
|
|
errors: meta.errors,
|
2021-06-04 14:44:41 +08:00
|
|
|
warnings: meta.warnings,
|
2020-12-09 17:12:32 +08:00
|
|
|
},
|
|
|
|
)}
|
|
|
|
</FormItemPrefixContext.Provider>
|
|
|
|
)}
|
2019-07-03 20:14:39 +08:00
|
|
|
</List>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FormList;
|