Skip to content

Commit 472c8c1

Browse files
Mini-ghostMini-ghost
committed
refactor: use enum to reduce code
1 parent b773400 commit 472c8c1

File tree

1 file changed

+104
-51
lines changed

1 file changed

+104
-51
lines changed

‎packages/core/src/composables/useForm.ts

Lines changed: 104 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -75,30 +75,53 @@ const enum ACTION_TYPE {
7575
RESET_FORM,
7676
}
7777

78+
const enum MESSAGE_KEY {
79+
TYPE = 't',
80+
PAYLOAD = 'p',
81+
}
82+
7883
type FormMessage<Values extends FormValues> =
79-
| { type: ACTION_TYPE.SUBMIT_ATTEMPT }
80-
| { type: ACTION_TYPE.SUBMIT_SUCCESS }
81-
| { type: ACTION_TYPE.SUBMIT_FAILURE }
82-
| { type: ACTION_TYPE.SET_VALUES; payload: Values }
83-
| { type: ACTION_TYPE.SET_FIELD_VALUE; payload: { path: string; value: any } }
84+
| { [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_ATTEMPT }
85+
| { [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_SUCCESS }
86+
| { [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_FAILURE }
87+
| {
88+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_VALUES;
89+
[MESSAGE_KEY.PAYLOAD]: Values;
90+
}
91+
| {
92+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_FIELD_VALUE;
93+
[MESSAGE_KEY.PAYLOAD]: { path: string; value: any };
94+
}
95+
| {
96+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_TOUCHED;
97+
[MESSAGE_KEY.PAYLOAD]: { path: string; touched?: boolean };
98+
}
99+
| {
100+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ERRORS;
101+
[MESSAGE_KEY.PAYLOAD]: FormErrors<Values>;
102+
}
103+
| {
104+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_FIELD_ERROR;
105+
[MESSAGE_KEY.PAYLOAD]: { path: string; error: string };
106+
}
84107
| {
85-
type: ACTION_TYPE.SET_TOUCHED;
86-
payload: { path: string; touched?: boolean };
108+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISSUBMITTING;
109+
[MESSAGE_KEY.PAYLOAD]: boolean;
87110
}
88-
| { type: ACTION_TYPE.SET_ERRORS; payload: FormErrors<Values> }
89111
| {
90-
type: ACTION_TYPE.SET_FIELD_ERROR;
91-
payload: { path: string; error: string };
112+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISVALIDATING;
113+
[MESSAGE_KEY.PAYLOAD]: boolean;
92114
}
93-
| { type: ACTION_TYPE.SET_ISSUBMITTING; payload: boolean }
94-
| { type: ACTION_TYPE.SET_ISVALIDATING; payload: boolean }
95-
| { type: ACTION_TYPE.RESET_FORM; payload: FormResetState<Values> };
115+
| {
116+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.RESET_FORM;
117+
[MESSAGE_KEY.PAYLOAD]: FormResetState<Values>;
118+
};
96119

97120
function reducer<Values extends FormValues>(
98121
state: FormState<Values>,
99122
message: FormMessage<Values>,
100123
) {
101-
switch (message.type) {
124+
switch (message[MESSAGE_KEY.TYPE]) {
102125
case ACTION_TYPE.SUBMIT_ATTEMPT:
103126
state.isSubmitting.value = true;
104127
state.submitCount.value = state.submitCount.value + 1;
@@ -114,37 +137,49 @@ function reducer<Values extends FormValues>(
114137
delete state.values[key];
115138
});
116139

117-
keysOf(message.payload).forEach((path) => {
118-
(state.values as Values)[path] = message.payload[path];
140+
keysOf(message[MESSAGE_KEY.PAYLOAD]).forEach((path) => {
141+
(state.values as Values)[path] = message[MESSAGE_KEY.PAYLOAD][path];
119142
});
120143
return;
121144
case ACTION_TYPE.SET_FIELD_VALUE:
122-
set(state.values, message.payload.path, deepClone(message.payload.value));
145+
set(
146+
state.values,
147+
message[MESSAGE_KEY.PAYLOAD].path,
148+
deepClone(message[MESSAGE_KEY.PAYLOAD].value),
149+
);
123150
return;
124151
case ACTION_TYPE.SET_TOUCHED:
125-
set(state.touched.value, message.payload.path, message.payload.touched);
152+
set(
153+
state.touched.value,
154+
message[MESSAGE_KEY.PAYLOAD].path,
155+
message[MESSAGE_KEY.PAYLOAD].touched,
156+
);
126157
return;
127158
case ACTION_TYPE.SET_ERRORS:
128-
state.errors.value = message.payload;
159+
state.errors.value = message[MESSAGE_KEY.PAYLOAD];
129160
return;
130161
case ACTION_TYPE.SET_FIELD_ERROR:
131-
set(state.errors.value, message.payload.path, message.payload.error);
162+
set(
163+
state.errors.value,
164+
message[MESSAGE_KEY.PAYLOAD].path,
165+
message[MESSAGE_KEY.PAYLOAD].error,
166+
);
132167
return;
133168
case ACTION_TYPE.SET_ISSUBMITTING:
134-
state.isSubmitting.value = message.payload;
169+
state.isSubmitting.value = message[MESSAGE_KEY.PAYLOAD];
135170
return;
136171
case ACTION_TYPE.SET_ISVALIDATING:
137-
state.isValidating.value = message.payload;
172+
state.isValidating.value = message[MESSAGE_KEY.PAYLOAD];
138173
return;
139174
case ACTION_TYPE.RESET_FORM:
140175
reducer(state, {
141-
type: ACTION_TYPE.SET_VALUES,
142-
payload: message.payload.values,
176+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_VALUES,
177+
[MESSAGE_KEY.PAYLOAD]: message[MESSAGE_KEY.PAYLOAD].values,
143178
});
144179

145-
state.touched.value = message.payload.touched;
146-
state.errors.value = message.payload.errors;
147-
state.submitCount.value = message.payload.submitCount;
180+
state.touched.value = message[MESSAGE_KEY.PAYLOAD].touched;
181+
state.errors.value = message[MESSAGE_KEY.PAYLOAD].errors;
182+
state.submitCount.value = message[MESSAGE_KEY.PAYLOAD].submitCount;
148183
}
149184
}
150185

@@ -234,8 +269,8 @@ export function useForm<Values extends FormValues = FormValues>(
234269

235270
const setFieldTouched = (name: string, touched = true) => {
236271
dispatch({
237-
type: ACTION_TYPE.SET_TOUCHED,
238-
payload: {
272+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_TOUCHED,
273+
[MESSAGE_KEY.PAYLOAD]: {
239274
path: name,
240275
touched,
241276
},
@@ -248,8 +283,8 @@ export function useForm<Values extends FormValues = FormValues>(
248283

249284
const setValues = (values: Values, shouldValidate?: boolean) => {
250285
dispatch({
251-
type: ACTION_TYPE.SET_VALUES,
252-
payload: values,
286+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_VALUES,
287+
[MESSAGE_KEY.PAYLOAD]: values,
253288
});
254289

255290
const willValidate =
@@ -268,8 +303,8 @@ export function useForm<Values extends FormValues = FormValues>(
268303
shouldValidate?: boolean,
269304
) => {
270305
dispatch({
271-
type: ACTION_TYPE.SET_FIELD_VALUE,
272-
payload: {
306+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_FIELD_VALUE,
307+
[MESSAGE_KEY.PAYLOAD]: {
273308
path: name,
274309
value,
275310
},
@@ -300,8 +335,8 @@ export function useForm<Values extends FormValues = FormValues>(
300335

301336
if (shouldSetValue) {
302337
dispatch({
303-
type: ACTION_TYPE.SET_FIELD_ERROR,
304-
payload: {
338+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_FIELD_ERROR,
339+
[MESSAGE_KEY.PAYLOAD]: {
305340
path: name,
306341
error,
307342
},
@@ -321,8 +356,8 @@ export function useForm<Values extends FormValues = FormValues>(
321356

322357
if (shouldSetValue) {
323358
dispatch({
324-
type: ACTION_TYPE.SET_TOUCHED,
325-
payload: {
359+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_TOUCHED,
360+
[MESSAGE_KEY.PAYLOAD]: {
326361
path: name,
327362
touched,
328363
},
@@ -363,7 +398,10 @@ export function useForm<Values extends FormValues = FormValues>(
363398
};
364399

365400
const setSubmitting = (isSubmitting: boolean) => {
366-
dispatch({ type: ACTION_TYPE.SET_ISSUBMITTING, payload: isSubmitting });
401+
dispatch({
402+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISSUBMITTING,
403+
[MESSAGE_KEY.PAYLOAD]: isSubmitting,
404+
});
367405
};
368406

369407
const getFieldValue = (name: MaybeRef<string>) => {
@@ -455,7 +493,10 @@ export function useForm<Values extends FormValues = FormValues>(
455493
};
456494

457495
const runAllValidateHandler = (values: Values = state.values) => {
458-
dispatch({ type: ACTION_TYPE.SET_ISVALIDATING, payload: true });
496+
dispatch({
497+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISVALIDATING,
498+
[MESSAGE_KEY.PAYLOAD]: true,
499+
});
459500
return Promise.all([
460501
runFieldValidateHandler(values),
461502
options.validate ? runValidateHandler(values) : {},
@@ -468,19 +509,25 @@ export function useForm<Values extends FormValues = FormValues>(
468509
},
469510
);
470511

471-
dispatch({ type: ACTION_TYPE.SET_ERRORS, payload: errors });
512+
dispatch({
513+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ERRORS,
514+
[MESSAGE_KEY.PAYLOAD]: errors,
515+
});
472516

473517
return errors;
474518
})
475519
.finally(() => {
476-
dispatch({ type: ACTION_TYPE.SET_ISVALIDATING, payload: false });
520+
dispatch({
521+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISVALIDATING,
522+
[MESSAGE_KEY.PAYLOAD]: false,
523+
});
477524
});
478525
};
479526

480527
const handleSubmit = (event?: Event) => {
481528
event?.preventDefault();
482529

483-
dispatch({ type: ACTION_TYPE.SUBMIT_ATTEMPT });
530+
dispatch({ [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_ATTEMPT });
484531

485532
runAllValidateHandler().then((errors) => {
486533
const isValid = keysOf(errors).length === 0;
@@ -493,14 +540,14 @@ export function useForm<Values extends FormValues = FormValues>(
493540

494541
maybePromise
495542
.then((result) => {
496-
dispatch({ type: ACTION_TYPE.SUBMIT_SUCCESS });
543+
dispatch({ [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_SUCCESS });
497544
return result;
498545
})
499546
.catch(() => {
500-
dispatch({ type: ACTION_TYPE.SUBMIT_FAILURE });
547+
dispatch({ [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_FAILURE });
501548
});
502549
} else {
503-
dispatch({ type: ACTION_TYPE.SUBMIT_FAILURE });
550+
dispatch({ [MESSAGE_KEY.TYPE]: ACTION_TYPE.SUBMIT_FAILURE });
504551
onInvalid?.(errors);
505552
}
506553
});
@@ -516,8 +563,8 @@ export function useForm<Values extends FormValues = FormValues>(
516563
initialTouched = deepClone(touched);
517564

518565
dispatch({
519-
type: ACTION_TYPE.RESET_FORM,
520-
payload: {
566+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.RESET_FORM,
567+
[MESSAGE_KEY.PAYLOAD]: {
521568
values,
522569
touched,
523570
errors,
@@ -552,16 +599,22 @@ export function useForm<Values extends FormValues = FormValues>(
552599

553600
const validateField: ValidateField<Values> = (name) => {
554601
if (fieldRegistry[name] && isFunction(fieldRegistry[name].validate)) {
555-
dispatch({ type: ACTION_TYPE.SET_ISVALIDATING, payload: true });
602+
dispatch({
603+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISVALIDATING,
604+
[MESSAGE_KEY.PAYLOAD]: true,
605+
});
556606
return runSingleFieldValidateHandler(name, get(state.values, name))
557607
.then((error) => {
558608
dispatch({
559-
type: ACTION_TYPE.SET_FIELD_ERROR,
560-
payload: { path: name, error },
609+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_FIELD_ERROR,
610+
[MESSAGE_KEY.PAYLOAD]: { path: name, error },
561611
});
562612
})
563613
.finally(() => {
564-
dispatch({ type: ACTION_TYPE.SET_ISVALIDATING, payload: false });
614+
dispatch({
615+
[MESSAGE_KEY.TYPE]: ACTION_TYPE.SET_ISVALIDATING,
616+
[MESSAGE_KEY.PAYLOAD]: false,
617+
});
565618
});
566619
}
567620
return Promise.resolve();

0 commit comments

Comments
 (0)