feat: Replace BaseVarType with BaseFieldType for consistent field type usage across components

pull/21398/head
twwu 1 year ago
parent d1f0e6e5c2
commit 8367ae85de

@ -1,5 +1,5 @@
import React, { useMemo } from 'react' import React, { useMemo } from 'react'
import { type BaseConfiguration, BaseVarType } from './types' import { type BaseConfiguration, BaseFieldType } from './types'
import { withForm } from '../..' import { withForm } from '../..'
import { useStore } from '@tanstack/react-form' import { useStore } from '@tanstack/react-form'
@ -36,7 +36,7 @@ const BaseField = <T,>({
if (!isAllConditionsMet) if (!isAllConditionsMet)
return <></> return <></>
if (type === BaseVarType.textInput) { if (type === BaseFieldType.textInput) {
return ( return (
<form.AppField <form.AppField
name={variable} name={variable}
@ -55,7 +55,7 @@ const BaseField = <T,>({
) )
} }
if (type === BaseVarType.numberInput) { if (type === BaseFieldType.numberInput) {
return ( return (
<form.AppField <form.AppField
name={variable} name={variable}
@ -76,7 +76,7 @@ const BaseField = <T,>({
) )
} }
if (type === BaseVarType.checkbox) { if (type === BaseFieldType.checkbox) {
return ( return (
<form.AppField <form.AppField
name={variable} name={variable}
@ -89,7 +89,7 @@ const BaseField = <T,>({
) )
} }
if (type === BaseVarType.select) { if (type === BaseFieldType.select) {
return ( return (
<form.AppField <form.AppField
name={variable} name={variable}

@ -2,7 +2,7 @@ import type { DeepKeys } from '@tanstack/react-form'
import type { FormType } from '../..' import type { FormType } from '../..'
import type { Option } from '../../../select/pure' import type { Option } from '../../../select/pure'
export enum BaseVarType { export enum BaseFieldType {
textInput = 'textInput', textInput = 'textInput',
numberInput = 'numberInput', numberInput = 'numberInput',
checkbox = 'checkbox', checkbox = 'checkbox',
@ -31,7 +31,7 @@ export type BaseConfiguration<T> = {
required: boolean required: boolean
showOptional?: boolean // show optional label showOptional?: boolean // show optional label
showConditions: ShowCondition<T>[] // Show this field only when all conditions are met showConditions: ShowCondition<T>[] // Show this field only when all conditions are met
type: BaseVarType type: BaseFieldType
tooltip?: string // Tooltip for this field tooltip?: string // Tooltip for this field
} & NumberConfiguration & SelectConfiguration } & NumberConfiguration & SelectConfiguration

@ -1,6 +1,6 @@
import type { ZodSchema, ZodString } from 'zod' import type { ZodSchema, ZodString } from 'zod'
import { z } from 'zod' import { z } from 'zod'
import { type BaseConfiguration, BaseVarType } from './types' import { type BaseConfiguration, BaseFieldType } from './types'
export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => { export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
const shape: Record<string, ZodSchema> = {} const shape: Record<string, ZodSchema> = {}
@ -9,16 +9,16 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
let zodType let zodType
switch (field.type) { switch (field.type) {
case BaseVarType.textInput: case BaseFieldType.textInput:
zodType = z.string() zodType = z.string()
break break
case BaseVarType.numberInput: case BaseFieldType.numberInput:
zodType = z.number() zodType = z.number()
break break
case BaseVarType.checkbox: case BaseFieldType.checkbox:
zodType = z.boolean() zodType = z.boolean()
break break
case BaseVarType.select: case BaseFieldType.select:
zodType = z.string() zodType = z.string()
break break
default: default:
@ -27,7 +27,7 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
} }
if (field.required) { if (field.required) {
if ([BaseVarType.textInput].includes(field.type)) if ([BaseFieldType.textInput].includes(field.type))
zodType = (zodType as ZodString).nonempty(`${field.label} is required`) zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
} }
else { else {
@ -35,17 +35,17 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
} }
if (field.maxLength) { if (field.maxLength) {
if ([BaseVarType.textInput].includes(field.type)) if ([BaseFieldType.textInput].includes(field.type))
zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`) zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`)
} }
if (field.min) { if (field.min) {
if ([BaseVarType.numberInput].includes(field.type)) if ([BaseFieldType.numberInput].includes(field.type))
zodType = (zodType as ZodString).min(field.min, `${field.label} must be at least ${field.min}`) zodType = (zodType as ZodString).min(field.min, `${field.label} must be at least ${field.min}`)
} }
if (field.max) { if (field.max) {
if ([BaseVarType.numberInput].includes(field.type)) if ([BaseFieldType.numberInput].includes(field.type))
zodType = (zodType as ZodString).max(field.max, `${field.label} exceeds max value of ${field.max}`) zodType = (zodType as ZodString).max(field.max, `${field.label} exceeds max value of ${field.max}`)
} }

@ -1,6 +1,6 @@
'use client' 'use client'
import BaseForm from '../components/base/form/form-scenarios/base' import BaseForm from '../components/base/form/form-scenarios/base'
import { BaseVarType } from '../components/base/form/form-scenarios/base/types' import { BaseFieldType } from '../components/base/form/form-scenarios/base/types'
export default function Page() { export default function Page() {
return ( return (
@ -16,21 +16,21 @@ export default function Page() {
}} }}
configurations={[ configurations={[
{ {
type: BaseVarType.textInput, type: BaseFieldType.textInput,
variable: 'variable', variable: 'variable',
label: 'Variable', label: 'Variable',
required: true, required: true,
showConditions: [], showConditions: [],
}, },
{ {
type: BaseVarType.textInput, type: BaseFieldType.textInput,
variable: 'label', variable: 'label',
label: 'Label', label: 'Label',
required: true, required: true,
showConditions: [], showConditions: [],
}, },
{ {
type: BaseVarType.numberInput, type: BaseFieldType.numberInput,
variable: 'maxLength', variable: 'maxLength',
label: 'Max Length', label: 'Max Length',
required: true, required: true,
@ -39,14 +39,14 @@ export default function Page() {
min: 1, min: 1,
}, },
{ {
type: BaseVarType.checkbox, type: BaseFieldType.checkbox,
variable: 'required', variable: 'required',
label: 'Required', label: 'Required',
required: true, required: true,
showConditions: [], showConditions: [],
}, },
{ {
type: BaseVarType.select, type: BaseFieldType.select,
variable: 'type', variable: 'type',
label: 'Type', label: 'Type',
required: true, required: true,

Loading…
Cancel
Save