mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 20:01:59 +00:00
Fix code style format
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
const invalidFormatMessage = (field: string) => {
|
||||||
|
return `Invalid ${field} format`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { invalidFormatMessage };
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { invalidFormatMessage } from '../constants/messages';
|
||||||
import { TKeyValue, TPropValues, TStateSchema } from '../globals/types';
|
import { TKeyValue, TPropValues, TStateSchema } from '../globals/types';
|
||||||
|
|
||||||
const VALUE = 'value';
|
const VALUE = 'value';
|
||||||
@@ -27,10 +28,18 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
|
|||||||
}, {} as TKeyValue);
|
}, {} as TKeyValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const addValidator = (func: (input: string) => boolean, error: string) => {
|
||||||
|
return {
|
||||||
|
func: func,
|
||||||
|
error: invalidFormatMessage(error),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
isObject,
|
isObject,
|
||||||
isRequired,
|
isRequired,
|
||||||
getPropValues,
|
getPropValues,
|
||||||
|
addValidator,
|
||||||
VALUE,
|
VALUE,
|
||||||
ERROR,
|
ERROR,
|
||||||
REQUIRED_FIELD_ERROR,
|
REQUIRED_FIELD_ERROR,
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ import {
|
|||||||
isValidPhoneNumber,
|
isValidPhoneNumber,
|
||||||
isValidString,
|
isValidString,
|
||||||
} from '../../helpers/validators';
|
} from '../../helpers/validators';
|
||||||
|
import { addValidator } from '../../helpers/utils.ts';
|
||||||
|
|
||||||
const FormBtn = styled(Button)`
|
const FormBtn = styled(Button)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -49,6 +50,44 @@ const UserForm = ({ onClose }: IUserFormProp) => {
|
|||||||
address: { value: '', error: '' },
|
address: { value: '', error: '' },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const stateValidatorSchema = {
|
||||||
|
fullName: {
|
||||||
|
required: true,
|
||||||
|
validator: addValidator(
|
||||||
|
(input: string) => isValidString(input),
|
||||||
|
'full name',
|
||||||
|
),
|
||||||
|
},
|
||||||
|
identifiedCode: {
|
||||||
|
required: true,
|
||||||
|
validator: addValidator(
|
||||||
|
(input: string) => isValidNumber(input),
|
||||||
|
'identified code',
|
||||||
|
),
|
||||||
|
},
|
||||||
|
phone: {
|
||||||
|
required: true,
|
||||||
|
validator: addValidator(
|
||||||
|
(input: string) => isValidPhoneNumber(input),
|
||||||
|
'phone',
|
||||||
|
),
|
||||||
|
},
|
||||||
|
room: {
|
||||||
|
required: true,
|
||||||
|
validator: addValidator(
|
||||||
|
(input: string) => isValidNumber(input),
|
||||||
|
'room number',
|
||||||
|
),
|
||||||
|
},
|
||||||
|
address: {
|
||||||
|
required: true,
|
||||||
|
validator: addValidator(
|
||||||
|
(input: string) => isValidAddress(input),
|
||||||
|
'address',
|
||||||
|
),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
// Submit form
|
// Submit form
|
||||||
const onSubmitForm = (state: TKeyValue) => {
|
const onSubmitForm = (state: TKeyValue) => {
|
||||||
alert(JSON.stringify(state, null, 2));
|
alert(JSON.stringify(state, null, 2));
|
||||||
@@ -56,54 +95,32 @@ const UserForm = ({ onClose }: IUserFormProp) => {
|
|||||||
onResetForm();
|
onResetForm();
|
||||||
};
|
};
|
||||||
|
|
||||||
const { values, errors, dirty, handleOnChange, handleOnSubmit, disable } =
|
// prettier-ignore
|
||||||
|
const {
|
||||||
|
values,
|
||||||
|
errors,
|
||||||
|
dirty,
|
||||||
|
handleOnChange,
|
||||||
|
handleOnSubmit,
|
||||||
|
disable } =
|
||||||
useForm(
|
useForm(
|
||||||
stateSchema,
|
stateSchema,
|
||||||
{
|
stateValidatorSchema,
|
||||||
fullName: {
|
|
||||||
required: true,
|
|
||||||
validator: {
|
|
||||||
func: (input) => isValidString(input),
|
|
||||||
error: 'Invalid full name format.',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
identifiedCode: {
|
|
||||||
required: true,
|
|
||||||
validator: {
|
|
||||||
func: (input) => isValidNumber(input),
|
|
||||||
error: 'Invalid identified code format.',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
phone: {
|
|
||||||
required: true,
|
|
||||||
validator: {
|
|
||||||
func: (input) => isValidPhoneNumber(input),
|
|
||||||
error: 'Invalid phone format.',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
room: {
|
|
||||||
required: true,
|
|
||||||
validator: {
|
|
||||||
func: (input) => isValidNumber(input),
|
|
||||||
error: 'Invalid room number format.',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
address: {
|
|
||||||
required: true,
|
|
||||||
validator: {
|
|
||||||
func: (input) => isValidAddress(input),
|
|
||||||
error: 'Invalid address format.',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
onSubmitForm,
|
onSubmitForm,
|
||||||
);
|
);
|
||||||
|
|
||||||
const { fullName, identifiedCode, phone, room, address } = values;
|
// prettier-ignore
|
||||||
|
const {
|
||||||
|
fullName,
|
||||||
|
identifiedCode,
|
||||||
|
phone,
|
||||||
|
room,
|
||||||
|
address
|
||||||
|
} = values;
|
||||||
|
|
||||||
// Reset form
|
// Reset form
|
||||||
const onResetForm = () => {
|
const onResetForm = () => {
|
||||||
setReset(() => !reset);
|
setReset(!reset);
|
||||||
Object.keys(values).forEach((key) => (values[key] = ''));
|
Object.keys(values).forEach((key) => (values[key] = ''));
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -113,7 +130,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
|
|||||||
<FormRow
|
<FormRow
|
||||||
label="Full Name"
|
label="Full Name"
|
||||||
error={
|
error={
|
||||||
errors.fullName && dirty.fullName ? (errors.fullName as string) : ''
|
// prettier-ignore
|
||||||
|
errors.fullName && dirty.fullName ?
|
||||||
|
(errors.fullName as string)
|
||||||
|
: ''
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
@@ -142,7 +162,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
|
|||||||
|
|
||||||
<FormRow
|
<FormRow
|
||||||
label="Phone"
|
label="Phone"
|
||||||
error={errors.phone && dirty.phone ? (errors.phone as string) : ''}
|
error={
|
||||||
|
// prettier-ignore
|
||||||
|
errors.phone && dirty.phone ?
|
||||||
|
(errors.phone as string)
|
||||||
|
: ''
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -154,7 +179,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
|
|||||||
|
|
||||||
<FormRow
|
<FormRow
|
||||||
label="Room"
|
label="Room"
|
||||||
error={errors.room && dirty.room ? (errors.room as string) : ''}
|
error={
|
||||||
|
// prettier-ignore
|
||||||
|
errors.room && dirty.room ?
|
||||||
|
(errors.room as string)
|
||||||
|
: ''
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -167,7 +197,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
|
|||||||
<FormRow
|
<FormRow
|
||||||
label="Address"
|
label="Address"
|
||||||
error={
|
error={
|
||||||
errors.address && dirty.address ? (errors.address as string) : ''
|
// prettier-ignore
|
||||||
|
errors.address && dirty.address ?
|
||||||
|
(errors.address as string)
|
||||||
|
: ''
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<TextArea
|
<TextArea
|
||||||
|
|||||||
Reference in New Issue
Block a user