diff --git a/src/components/forms/FormSchema/FormSchema.types.ts b/src/components/forms/FormSchema/FormSchema.types.ts index ead364861..28065583e 100644 --- a/src/components/forms/FormSchema/FormSchema.types.ts +++ b/src/components/forms/FormSchema/FormSchema.types.ts @@ -1,6 +1,6 @@ import { RadioTypes } from 'src/components/utils/Inputs/Radio/Radio.types'; import { FilterConstant } from 'src/constants'; -import { AnyCantFix, AnyToFix } from 'src/utils/Types'; +import { AnyToFix } from 'src/utils/Types'; const FormComponents = { DATEPICKER: 'datepicker', @@ -32,7 +32,9 @@ export type FieldValue = type MultiFilterConstant = M extends true ? FilterConstant[] - : FilterConstant; + : M extends false + ? FilterConstant + : FilterConstant | FilterConstant[]; interface FormComponentValues extends Record { @@ -96,35 +98,30 @@ type InputComponent = | SelectComponent | SelectRequestComponent; -interface FormFieldCommonProperties { - id: string; - name: string; -} +// export type FormFieldName = keyof S & string; -interface FormTypes { - test: string; +interface FormFieldCommonProperties { + id: S; + name: S; } -export type FormType = keyof FormTypes; +// export type GetValueType = (name: FormFieldName) => S[FormFieldName]; -// export type GetValueType = (name: K) => FormTypes[K]; export type GetValueType = (name: string) => AnyToFix; -interface Rule { - method: ( - fieldValue: FormComponentValues[T], - fieldValues: { [K in FormType]: FormTypes[K] } - ) => boolean; +interface Rule { + method: (fieldValue: FormComponentValues[T], fieldValues: S) => boolean; args?: AnyToFix[]; message: string; } interface FormFieldInputCommonProperties< T extends InputComponent, - M extends boolean = false -> extends FormFieldCommonProperties { + S, + M extends boolean = boolean +> extends FormFieldCommonProperties { isRequired?: boolean; - rules?: Rule[]; + rules?: Rule[]; title: string | JSX.Element | ((getValue: GetValueType) => string); disabled?: boolean; disable?: (getValue: GetValueType) => boolean; @@ -134,8 +131,8 @@ interface FormFieldInputCommonProperties< showLabel?: boolean; } -export interface FormFieldTextInput - extends FormFieldInputCommonProperties { +export interface FormFieldTextInput + extends FormFieldInputCommonProperties { component: TextInputComponent; type?: 'text' | 'email' | 'password'; rows?: number; @@ -145,17 +142,17 @@ export interface FormFieldTextInput max?: string; } -export interface FormFieldCheckBox - extends FormFieldInputCommonProperties { +export interface FormFieldCheckBox + extends FormFieldInputCommonProperties { component: CheckBoxComponent; } -export interface FormFieldSelect - extends FormFieldInputCommonProperties { +export interface FormFieldSelect + extends FormFieldInputCommonProperties { component: SelectComponent; dynamicFilter?: (getValue: GetValueType) => string; fieldsToReset?: string[]; - options?: K; + options?: FilterConstant[]; loadOptions?: ( callback: (options: FilterConstant[] | RadioTypes[]) => void, inputValue?: string, @@ -164,93 +161,81 @@ export interface FormFieldSelect errorMessage?: string; limit?: number; } -export interface FormFieldSelectRequestCommon< - K extends FilterConstant[], - M extends boolean -> extends FormFieldInputCommonProperties { +export interface FormFieldSelectRequestCommon + extends FormFieldInputCommonProperties { component: SelectRequestComponent; fieldsToReset?: string[]; - options?: K; + options?: FilterConstant[]; loadOptions?: ( callback: (options: FilterConstant[] | RadioTypes[]) => void, inputValue?: string, getValue?: GetValueType ) => Promise | void; openMenuOnClick?: boolean; - isMulti?: boolean | ((getValue: (name: string) => AnyToFix) => boolean); } // TODO fix type depending on is Multi -interface FormFieldSelectRequestMulti - extends FormFieldSelectRequestCommon { - isMulti?: true; +interface FormFieldSelectRequestMulti + extends FormFieldSelectRequestCommon { + isMulti: true; } -interface FormFieldSelectRequestSingle - extends FormFieldSelectRequestCommon { - isMulti?: false; +interface FormFieldSelectRequestSingle + extends FormFieldSelectRequestCommon { + isMulti: false; } -export type FormFieldSelectRequest = - | FormFieldSelectRequestMulti - | FormFieldSelectRequestSingle +interface FormFieldSelectRequestMethod + extends FormFieldSelectRequestCommon { + isMulti: (getValue: (name: string) => AnyToFix) => boolean; +} -export type FormFieldInput = - | FormFieldTextInput - | FormFieldCheckBox - | FormFieldSelect - | FormFieldSelectRequest; +type FormFieldSelectRequestOmit = Omit< + FormFieldSelectRequestCommon, + 'isMulti' +>; -export interface FormFieldText extends FormFieldCommonProperties { - id: string; - name: string; +export type FormFieldSelectRequest = + | FormFieldSelectRequestMulti + | FormFieldSelectRequestSingle + | FormFieldSelectRequestOmit + | FormFieldSelectRequestMethod; + +export type FormFieldInput = + | FormFieldTextInput + | FormFieldCheckBox + | FormFieldSelect + | FormFieldSelectRequest; + +export interface FormFieldText extends FormFieldCommonProperties { title: string | ((getValue: GetValueType) => string); component: TextComponent; hide?: (getValue: GetValueType, fieldOptions?: AnyToFix) => boolean; hidden?: boolean; } -export interface FormFieldMultiple extends FormFieldCommonProperties { - id: string; - name: string; +export interface FormFieldMultiple extends FormFieldCommonProperties { action: string; component: MultipleComponent; - fields: FormFieldInput[]; + fields: FormFieldInput[]; hide?: (getValue: GetValueType) => boolean; hidden?: boolean; } -export interface FormFieldGroup extends FormFieldCommonProperties { +export interface FormFieldGroup extends FormFieldCommonProperties { component: GroupComponent; - fields: (FormFieldInput | FormFieldText)[]; + fields: (FormFieldInput | FormFieldText)[]; hide?: (getValue: GetValueType) => boolean; hidden?: boolean; } -export type FormField = - | FormFieldInput - | FormFieldText - | FormFieldMultiple - | FormFieldGroup; +export type FormField = + | FormFieldInput + | FormFieldText + | FormFieldMultiple + | FormFieldGroup; export interface FormSchema { id: string; - fields: FormField[]; + fields: FormField[]; } - -const test: FormFieldSelectRequest = { - component: undefined, - id: '', - name: '', - options: undefined, - title: undefined, - isMulti: true, - rules: [ - { - method: (fieldValue) => { - return true; - }, - message: 'oui', - }, - ], -}; diff --git a/src/components/forms/FormWithValidation.tsx b/src/components/forms/FormWithValidation.tsx index 77f5b013f..8bb02a9fa 100644 --- a/src/components/forms/FormWithValidation.tsx +++ b/src/components/forms/FormWithValidation.tsx @@ -24,12 +24,12 @@ import { } from './FormSchema'; import { StyledForm } from './Forms.styles'; -interface FormWithValidationProps { +interface FormWithValidationProps { defaultValues?: AnyToFix; // to be typed onCancel?: () => void; onSubmit: (arg1: AnyToFix, arg2: AnyToFix) => void; // to be typed onError?: (any) => void; - formSchema: FormSchema; + formSchema: FormSchema; submitText?: string; cancelText?: string; enterToSubmit?: boolean; @@ -37,7 +37,7 @@ interface FormWithValidationProps { export const FormWithValidation = forwardRef< { resetForm: () => void }, - FormWithValidationProps + FormWithValidationProps >( ( { @@ -49,7 +49,7 @@ export const FormWithValidation = forwardRef< onCancel, enterToSubmit = false, onError, - }, + }: FormWithValidationProps, ref ) => { const { id: formId, fields } = formSchema; @@ -65,7 +65,7 @@ export const FormWithValidation = forwardRef< ); const { handleSubmit, control, reset, getValues, resetField, watch } = - useForm({ + useForm({ defaultValues, shouldUnregister: true, }); diff --git a/src/components/forms/fields/GenericField.tsx b/src/components/forms/fields/GenericField.tsx index 7d7dd6637..a061c903a 100644 --- a/src/components/forms/fields/GenericField.tsx +++ b/src/components/forms/fields/GenericField.tsx @@ -31,10 +31,10 @@ import { CommonInputProps } from 'src/components/utils/Inputs/Inputs.types'; import { AnyToFix } from 'src/utils/Types'; -interface GenericFieldProps { - field: FormFieldInput; +interface GenericFieldProps { + field: FormFieldInput; formId: string; - getValue: GetValueType; + getValue: GetValueType; fieldOptions?: AnyToFix; updateFieldOptions?: (newFieldOption?: { [K in string]: AnyToFix }) => void; control: Control; @@ -42,7 +42,7 @@ interface GenericFieldProps { watch: UseFormWatch; } -export const GenericField = ({ +export function GenericField({ field, formId, getValue, @@ -51,7 +51,7 @@ export const GenericField = ({ control, resetField, watch, -}: GenericFieldProps) => { +}: GenericFieldProps) { const rules = field.rules?.reduce((acc, curr, index) => { return { ...acc, diff --git a/src/components/forms/schemas/formAddUser.tsx b/src/components/forms/schemas/formAddUser.tsx index 69c587dbc..ac8432288 100644 --- a/src/components/forms/schemas/formAddUser.tsx +++ b/src/components/forms/schemas/formAddUser.tsx @@ -211,10 +211,10 @@ export const formAddUser: FormSchema = { id: 'userToLinkId', name: 'userToLinkId', component: 'select-async', - /* isMulti: (getValue) => { + isMulti: (getValue) => { const role = getValue('role'); return role === USER_ROLES.COACH_EXTERNAL; - }, */ + }, hide: (getValue) => { const role = getValue('role') as UserRole; const organizationId = ( diff --git a/src/components/forms/schemas/formChangePassword.ts b/src/components/forms/schemas/formChangePassword.ts index 69e0c0ec8..ce423c368 100644 --- a/src/components/forms/schemas/formChangePassword.ts +++ b/src/components/forms/schemas/formChangePassword.ts @@ -22,7 +22,6 @@ export const formChangePassword: FormSchema = { rules: [ { method: (fieldValue) => passwordStrength(fieldValue).id >= 2, - message: 'Doit répondre aux critères ci-dessus', }, ], diff --git a/src/components/forms/schemas/formCompanyContact.ts b/src/components/forms/schemas/formCompanyContact.ts index 9e68f97e4..a290af8db 100644 --- a/src/components/forms/schemas/formCompanyContact.ts +++ b/src/components/forms/schemas/formCompanyContact.ts @@ -1,11 +1,11 @@ import { isValidPhoneNumber } from 'react-phone-number-input/mobile'; +import validator from 'validator'; import { FormSchema } from '../FormSchema'; import { COMPANY_APPROACHES_FILTERS, COMPANY_CONTACT_ZONES_FILTERS, HEARD_ABOUT_FILTERS, } from 'src/constants'; -import validator from "validator"; export const formCompanyContact: FormSchema = { id: 'form-company-contact', @@ -17,7 +17,6 @@ export const formCompanyContact: FormSchema = { title: 'Votre prénom*', isRequired: true, maxLength: 80, - }, { id: 'lastName', diff --git a/src/components/forms/schemas/formResetPassword.ts b/src/components/forms/schemas/formResetPassword.ts index fbf78bead..5195e9258 100644 --- a/src/components/forms/schemas/formResetPassword.ts +++ b/src/components/forms/schemas/formResetPassword.ts @@ -1,6 +1,10 @@ import { passwordStrength } from 'check-password-strength'; import { FormSchema } from '../FormSchema'; +interface Schema { + newPassword: string; + confirmPassword: string; +} export const formResetPassword: FormSchema = { id: 'form-reset-pwd', fields: [ @@ -16,7 +20,6 @@ export const formResetPassword: FormSchema = { method: (fieldValue) => { return passwordStrength(fieldValue).id >= 2; }, - message: 'Doit répondre aux critères ci-dessus', }, ], @@ -30,15 +33,13 @@ export const formResetPassword: FormSchema = { isRequired: true, rules: [ { - method: (fieldValue) => - passwordStrength(fieldValue).id >= 2, + method: (fieldValue) => passwordStrength(fieldValue).id >= 2, message: 'Doit répondre aux critères ci-dessus', }, { method: (fieldValue, fieldValues) => { return fieldValues.newPassword === fieldValue; }, - message: 'Les deux mots de passe ne correspondent pas', }, ], diff --git a/src/components/forms/schemas/formSendExternalMessage.ts b/src/components/forms/schemas/formSendExternalMessage.ts index f368da2de..4944a557c 100644 --- a/src/components/forms/schemas/formSendExternalMessage.ts +++ b/src/components/forms/schemas/formSendExternalMessage.ts @@ -1,10 +1,10 @@ import { isValidPhoneNumber } from 'react-phone-number-input/mobile'; +import validator from 'validator'; import { FormSchema } from '../FormSchema'; import { EXTERNAL_MESSAGE_SUBJECT_FILTERS, EXTERNAL_MESSAGE_CONTACT_TYPE_FILTERS, } from 'src/constants'; -import validator from "validator"; export const formSendExternalMessage: FormSchema = { id: 'form-send-external-message', @@ -40,7 +40,6 @@ export const formSendExternalMessage: FormSchema = { rules: [ { method: (fieldValue) => validator.isEmail(fieldValue), - message: 'Adresse e-mail invalide', }, ], @@ -57,8 +56,7 @@ export const formSendExternalMessage: FormSchema = { title: 'Numéro de téléphone', rules: [ { - method: (fieldValue) => - isValidPhoneNumber(fieldValue, 'FR'), + method: (fieldValue) => isValidPhoneNumber(fieldValue, 'FR'), message: 'Numéro de téléphone invalide', }, ],