Saturday, 20 January 2024

Multiple Schema types for react-hook-form useForm (schema type varies according to a form value)

I'm attempting to make a type vary according to a variable selection, I have a schema that is built like the following:

const schemaBasedOnColor = useMemo(() => {
    if (vendida === VendidaEnum[0]) {
      switch (receitaColor) {
        case CoresDeReceitaEnum.Branca:
          return yupResolver(receitaBrancaSchema) as Resolver<
            SchemaProps,
            ReceitaBrancaSchemaProps
          >
        case CoresDeReceitaEnum.Amarela:
          return yupResolver(receitaAmarelaSchema) as Resolver<
            SchemaProps,
            ReceitaAmarelaSchemaProps
          >
        default:
          return yupResolver(receitaAzulSchema) as Resolver<
            SchemaProps,
            ReceitaAzulSchemaProps
          >
      }
    }
    return schema
  }, [receitaColor, vendida])

 const getInitialValues = () => ({
    date: params?.dataReceita?.seconds
      ? moment(params?.dataReceita?.seconds * 1000).format('DD/MM/YYYY')
      : '',
    color: params?.tipo || 'Branca',
    dataVenda: params?.dataVenda?.seconds
      ? moment(params?.dataVenda?.seconds * 1000).format('DD/MM/YYYY')
      : '',
    imagens: createImageNoAllowedRemove(params?.imagens),
    crm: params?.crm || '',
    tipoDocumento: params?.tipoDocumento || '',
    nomeComprador: params?.comprador || '',
    documentoComprador: params?.documento || '',
    produto: params?.produto || '',
    laboratorio: params?.laboratorio || '',
    quantidade: params?.quantidade?.toString() || '',
    lotes: formatReceitaLoteQtdToString(params?.lotes as any),
  })

  const {
    control,
    formState: { errors, isDirty },
    handleSubmit,
    clearErrors,
    setError,
    setValue,
    getValues,
    reset,
    resetField,
    watch,
  } = useForm<SchemaProps>({
    resolver: schemaBasedOnColor,
    defaultValues: getInitialValues(),
  })

I attempted changing the schema type with that Resolver<> which did not work. This is the type error the resolver gives me:

Type 'ObjectSchema<{ date: string; crm: string | undefined; color: string; dataVenda: string; imagens: ({ url: string | undefined; extension: string | undefined; } | undefined)[]; }, AnyObject, { ...; }, ""> | Resolver<...>' is not assignable to type 'Resolver<SchemaProps, any> | undefined'.
  Type 'ObjectSchema<{ date: string; crm: string | undefined; color: string; dataVenda: string; imagens: ({ url: string | undefined; extension: string | undefined; } | undefined)[]; }, AnyObject, { ...; }, "">' is not assignable to type 'Resolver<SchemaProps, any>'.
    Type 'ObjectSchema<{ date: string; crm: string | undefined; color: string; dataVenda: string; imagens: ({ url: string | undefined; extension: string | undefined; } | undefined)[]; }, AnyObject, { ...; }, "">' provides no match for the signature '(values: SchemaProps, context: any, options: ResolverOptions<SchemaProps>): ResolverResult<SchemaProps> | Promise<...>'.ts(2322)
(property) resolver?: Resolver<SchemaProps, any> | undefined

This are the types:

import { ReceitasProps } from '@/components/FileCard/types'

export interface ReceitaBrancaSchemaProps {
  date: string
  dataVenda: string
  color: ReceitasProps['tipo']
  imagens: {
    url: string
    extension: string
    allowRemove?: boolean
  }[]
  crm: string | undefined
  tipoDocumento: string
  nomeComprador: string
  documentoComprador: string
  produto: string
  laboratorio: string
  quantidade: string
  lotes:
    | {
        lote: string | undefined
        loteQtd: string | undefined
      }[]
}

export interface ReceitaAzulSchemaProps {
  date: string
  dataVenda: string
  color: ReceitasProps['tipo']
  imagens: {
    url: string
    extension: string
    allowRemove?: boolean
  }[]
  telefone: string
  cep: string
  rua: string
  bairro: string
  cidade: string
  crm: string | undefined
  tipoDocumento: string
  nomeComprador: string
  documentoComprador: string
  produto: string
  laboratorio: string
  quantidade: string
  lotes:
    | {
        lote: string | undefined
        loteQtd: string | undefined
      }[]
}

export interface ReceitaAmarelaSchemaProps {
  date: string
  dataVenda: string
  color: ReceitasProps['tipo']
  imagens: {
    url: string
    extension: string
    allowRemove?: boolean
  }[]
  crm: string | undefined
  tipoDocumento: string
  nomeComprador: string
  documentoComprador: string
  produto: string
  laboratorio: string
  quantidade: string
  lotes:
    | {
        lote: string | undefined
        loteQtd: string | undefined
      }[]
}

export type SchemaProps =
  | ReceitaBrancaSchemaProps
  | ReceitaAzulSchemaProps
  | ReceitaAmarelaSchemaProps

For now ReceitaBrancaSchema and ReceitaAmarelaSchemaProps are equal, but they will be diferent



from Multiple Schema types for react-hook-form useForm (schema type varies according to a form value)

No comments:

Post a Comment