Skip to content

Commit f458f0e

Browse files
Ohh-889Ohh-889
committed
feat: Demonstration of using useform
1 parent eb1f0ab commit f458f0e

File tree

8 files changed

+317
-55
lines changed

8 files changed

+317
-55
lines changed

‎packages/ui/src/components/form/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export {
1111
useWatch
1212
} from 'skyroc-form';
1313

14+
export type { FormInstance } from 'skyroc-form';
15+
1416
export { default as FormField } from './FormField';
1517

1618
export type { FormFieldProps } from './types';

‎playground/src/app/(demo)/form/modules/UseForm.tsx‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
'use client';
2+
3+
import type { FormInstance } from 'soybean-react-ui';
4+
import { Button, Card, Form, FormField, Input, useFieldsState, useForm } from 'soybean-react-ui';
5+
6+
import { showToastCode } from './toast';
7+
8+
type Inputs = {
9+
confirmPassword: string;
10+
info: {
11+
age: number;
12+
familyInfo: {
13+
phone: string;
14+
};
15+
gender: string;
16+
hobbies: string;
17+
};
18+
password: string;
19+
username: string;
20+
};
21+
22+
interface StateEffectProps {
23+
form: FormInstance<Inputs>;
24+
}
25+
26+
const StateEffect = (props: StateEffectProps) => {
27+
const { form } = props;
28+
29+
const states = useFieldsState(form, [], { includeChildren: true });
30+
31+
console.log('states', states);
32+
33+
return null;
34+
};
35+
36+
const initialValues = {
37+
confirmPassword: '12345678',
38+
info: { age: 24, gender: 'male', hobbies: 'play lol' },
39+
password: '12345678',
40+
username: 'ohh'
41+
};
42+
43+
const UseForm = () => {
44+
const [form] = useForm<Inputs>();
45+
46+
function reset() {
47+
form.resetFields();
48+
}
49+
50+
function resetInfo() {
51+
form.resetFields(['info']);
52+
}
53+
54+
function getValues() {
55+
const values = form.getFieldsValue();
56+
57+
const state = form.getFields();
58+
59+
console.log('state', state);
60+
61+
showToastCode('getAllValues', values);
62+
}
63+
64+
function getInfoValues() {
65+
const values = form.getFieldValue('info');
66+
67+
const infoValues = form.getFieldsValue(['info']);
68+
69+
console.log('values', infoValues);
70+
71+
showToastCode('getInfoValues', values);
72+
}
73+
74+
function getInfoAge() {
75+
const value = form.getFieldValue('info.age');
76+
77+
const infoAgeValues = form.getFieldsValue(['info.age']);
78+
79+
console.log('infoAgeValues', infoAgeValues);
80+
81+
showToastCode('getInfoAge', value);
82+
}
83+
84+
function setInfoAge() {
85+
form.setFieldValue('info.age', 20);
86+
}
87+
88+
function getInfoFamilyInfo() {
89+
const value = form.getFieldValue('info.familyInfo.phone');
90+
91+
const infoFamilyInfoValues = form.getFieldsValue(['info.familyInfo.phone']);
92+
93+
console.log('infoFamilyInfoValues', infoFamilyInfoValues);
94+
95+
showToastCode('getInfoFamilyInfo', value);
96+
}
97+
98+
function setInfoFamilyInfo() {
99+
form.setFieldValue('info.familyInfo.phone', '1234567890');
100+
}
101+
102+
function setInfo() {
103+
form.setFieldsValue({ info: { gender: 'male', hobbies: 'reading' } });
104+
}
105+
106+
function setValues() {
107+
form.setFieldsValue({
108+
confirmPassword: '123456',
109+
info: { age: 19, gender: 'female', hobbies: 'play game' },
110+
password: '123456',
111+
username: 'test'
112+
});
113+
}
114+
115+
return (
116+
<Card title="UseForm">
117+
<Form
118+
className="w-[480px] max-sm:w-full space-y-4"
119+
form={form}
120+
initialValues={initialValues}
121+
>
122+
<FormField
123+
label="Username"
124+
name="username"
125+
>
126+
<Input />
127+
</FormField>
128+
129+
<FormField
130+
label="Password"
131+
name="password"
132+
>
133+
<Input />
134+
</FormField>
135+
136+
<FormField
137+
label="Confirm Password"
138+
name="confirmPassword"
139+
>
140+
<Input />
141+
</FormField>
142+
143+
<FormField
144+
label="Info Age"
145+
name="info.age"
146+
>
147+
<Input />
148+
</FormField>
149+
150+
<FormField
151+
label="Info Family Info"
152+
name="info.familyInfo.phone"
153+
>
154+
<Input />
155+
</FormField>
156+
157+
<FormField
158+
label="Info Gender"
159+
name="info.gender"
160+
>
161+
<Input />
162+
</FormField>
163+
164+
<FormField
165+
label="Info Hobbies"
166+
name="info.hobbies"
167+
>
168+
<Input />
169+
</FormField>
170+
171+
<div className="flex gap-2 flex-wrap">
172+
<Button
173+
type="button"
174+
onClick={getValues}
175+
>
176+
Get Values
177+
</Button>
178+
<Button
179+
type="button"
180+
onClick={getInfoValues}
181+
>
182+
Get Info Values
183+
</Button>
184+
<Button
185+
type="button"
186+
onClick={getInfoAge}
187+
>
188+
Get Info Age
189+
</Button>
190+
<Button
191+
type="button"
192+
onClick={getInfoFamilyInfo}
193+
>
194+
Get Info Family Info
195+
</Button>
196+
<Button
197+
type="button"
198+
onClick={setInfoAge}
199+
>
200+
Set Info Age
201+
</Button>
202+
<Button
203+
type="button"
204+
onClick={setInfoFamilyInfo}
205+
>
206+
Set Info Family Info
207+
</Button>
208+
<Button
209+
type="button"
210+
onClick={setInfo}
211+
>
212+
Set Info
213+
</Button>
214+
<Button
215+
type="button"
216+
onClick={setValues}
217+
>
218+
Set Values
219+
</Button>
220+
<Button
221+
type="button"
222+
onClick={reset}
223+
>
224+
Reset
225+
</Button>
226+
<Button
227+
type="button"
228+
onClick={resetInfo}
229+
>
230+
Reset Info
231+
</Button>
232+
<Button type="submit">Submit</Button>
233+
</div>
234+
</Form>
235+
236+
<StateEffect form={form} />
237+
</Card>
238+
);
239+
};
240+
241+
export default UseForm;

‎playground/src/app/(demo)/form/modules/toast.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ export function showToastCode(title: string, values: any) {
55
className: '!w-[400px]',
66
description: (
77
<pre className="mt-2 w-[360px] max-sm:w-screen rounded-md bg-neutral-950 p-4">
8-
<code className="text-white">{JSON.stringify(values, null, 2)}</code>
8+
<code className="text-white">
9+
{JSON.stringify(values, (_, value) => (value === undefined ? null : value), 2)}
10+
</code>
911
</pre>
1012
),
1113
position: 'top-center'

‎playground/src/app/(demo)/form/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import FieldChange from './modules/FieldChange';
44
import List from './modules/List';
55
import Preserve from './modules/Preserve';
66
import Reset from './modules/Reset';
7+
import UseForm from './modules/UseForm';
78
import UseWatch from './modules/UseWatch';
89
import Validate from './modules/validate';
910
import ValidateWarning from './modules/validateWaring';
@@ -15,6 +16,8 @@ const FormPage = () => {
1516

1617
<List />
1718

19+
<UseForm />
20+
1821
<FieldChange />
1922

2023
<Validate />

0 commit comments

Comments
 (0)