ant-design/components/form/demo/form-item-path.tsx
lijianan 8b1f79c1f5
demo: update demo type { children: React.ReactNode } => React.PropsWithChildren (#48771)
* demo: update demo type React.ReactNode => React.PropsWithChildren

* fix: fix
2024-05-06 12:04:27 +08:00

62 lines
1.7 KiB
TypeScript

import React from 'react';
import { Button, Form, Input } from 'antd';
import type { FormItemProps } from 'antd';
const MyFormItemContext = React.createContext<(string | number)[]>([]);
interface MyFormItemGroupProps {
prefix: string | number | (string | number)[];
}
function toArr(str: string | number | (string | number)[]): (string | number)[] {
return Array.isArray(str) ? str : [str];
}
const MyFormItemGroup: React.FC<React.PropsWithChildren<MyFormItemGroupProps>> = ({
prefix,
children,
}) => {
const prefixPath = React.useContext(MyFormItemContext);
const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);
return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;
};
const MyFormItem = ({ name, ...props }: FormItemProps) => {
const prefixPath = React.useContext(MyFormItemContext);
const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;
return <Form.Item name={concatName} {...props} />;
};
const App: React.FC = () => {
const onFinish = (value: object) => {
console.log(value);
};
return (
<Form name="form_item_path" layout="vertical" onFinish={onFinish}>
<MyFormItemGroup prefix={['user']}>
<MyFormItemGroup prefix={['name']}>
<MyFormItem name="firstName" label="First Name">
<Input />
</MyFormItem>
<MyFormItem name="lastName" label="Last Name">
<Input />
</MyFormItem>
</MyFormItemGroup>
<MyFormItem name="age" label="Age">
<Input />
</MyFormItem>
</MyFormItemGroup>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
);
};
export default App;