import { useState } from 'react'
|
import type { FC } from 'react'
|
import { ValidatingTip } from '../../key-validator/ValidateStatus'
|
import type {
|
CredentialFormSchema,
|
CredentialFormSchemaNumberInput,
|
CredentialFormSchemaRadio,
|
CredentialFormSchemaSecretInput,
|
CredentialFormSchemaSelect,
|
CredentialFormSchemaTextInput,
|
FormValue,
|
} from '../declarations'
|
import { FormTypeEnum } from '../declarations'
|
import { useLanguage } from '../hooks'
|
import Input from './Input'
|
import cn from '@/utils/classnames'
|
import { SimpleSelect } from '@/app/components/base/select'
|
import Tooltip from '@/app/components/base/tooltip'
|
import Radio from '@/app/components/base/radio'
|
type FormProps = {
|
className?: string
|
itemClassName?: string
|
fieldLabelClassName?: string
|
value: FormValue
|
onChange: (val: FormValue) => void
|
formSchemas: CredentialFormSchema[]
|
validating: boolean
|
validatedSuccess?: boolean
|
showOnVariableMap: Record<string, string[]>
|
isEditMode: boolean
|
readonly?: boolean
|
inputClassName?: string
|
isShowDefaultValue?: boolean
|
fieldMoreInfo?: (payload: CredentialFormSchema) => JSX.Element | null
|
}
|
|
const Form: FC<FormProps> = ({
|
className,
|
itemClassName,
|
fieldLabelClassName,
|
value,
|
onChange,
|
formSchemas,
|
validating,
|
validatedSuccess,
|
showOnVariableMap,
|
isEditMode,
|
readonly,
|
inputClassName,
|
isShowDefaultValue = false,
|
fieldMoreInfo,
|
}) => {
|
const language = useLanguage()
|
const [changeKey, setChangeKey] = useState('')
|
|
const handleFormChange = (key: string, val: string | boolean) => {
|
if (isEditMode && (key === '__model_type' || key === '__model_name'))
|
return
|
|
setChangeKey(key)
|
const shouldClearVariable: Record<string, string | undefined> = {}
|
if (showOnVariableMap[key]?.length) {
|
showOnVariableMap[key].forEach((clearVariable) => {
|
shouldClearVariable[clearVariable] = undefined
|
})
|
}
|
onChange({ ...value, [key]: val, ...shouldClearVariable })
|
}
|
|
const renderField = (formSchema: CredentialFormSchema) => {
|
const tooltip = formSchema.tooltip
|
const tooltipContent = (tooltip && (
|
<Tooltip
|
popupContent={
|
<div className='w-[200px]'>
|
{tooltip[language] || tooltip.en_US}
|
</div>}
|
triggerClassName='ml-1 w-4 h-4'
|
asChild={false}
|
/>
|
))
|
if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
|
const {
|
variable,
|
label,
|
placeholder,
|
required,
|
show_on,
|
} = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
|
|
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
|
return null
|
|
const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
|
return (
|
<div key={variable} className={cn(itemClassName, 'py-3')}>
|
<div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
|
{label[language] || label.en_US}
|
{
|
required && (
|
<span className='ml-1 text-red-500'>*</span>
|
)
|
}
|
{tooltipContent}
|
</div>
|
<Input
|
className={cn(inputClassName, `${disabled && 'cursor-not-allowed opacity-60'}`)}
|
value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
|
onChange={val => handleFormChange(variable, val)}
|
validated={validatedSuccess}
|
placeholder={placeholder?.[language] || placeholder?.en_US}
|
disabled={disabled}
|
type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
|
{...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
|
/>
|
{fieldMoreInfo?.(formSchema)}
|
{validating && changeKey === variable && <ValidatingTip />}
|
</div>
|
)
|
}
|
|
if (formSchema.type === FormTypeEnum.radio) {
|
const {
|
options,
|
variable,
|
label,
|
show_on,
|
required,
|
} = formSchema as CredentialFormSchemaRadio
|
|
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
|
return null
|
|
const disabled = isEditMode && (variable === '__model_type' || variable === '__model_name')
|
|
return (
|
<div key={variable} className={cn(itemClassName, 'py-3')}>
|
<div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
|
{label[language] || label.en_US}
|
{
|
required && (
|
<span className='ml-1 text-red-500'>*</span>
|
)
|
}
|
{tooltipContent}
|
</div>
|
<div className={`grid grid-cols-${options?.length} gap-3`}>
|
{
|
options.filter((option) => {
|
if (option.show_on.length)
|
return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
|
|
return true
|
}).map(option => (
|
<div
|
className={`
|
flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
|
${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
|
${disabled && '!cursor-not-allowed opacity-60'}
|
`}
|
onClick={() => handleFormChange(variable, option.value)}
|
key={`${variable}-${option.value}`}
|
>
|
<div className={`
|
flex justify-center items-center mr-2 w-4 h-4 border border-gray-300 rounded-full
|
${value[variable] === option.value && 'border-[5px] border-primary-600'}
|
`} />
|
<div className='text-sm text-gray-900'>{option.label[language] || option.label.en_US}</div>
|
</div>
|
))
|
}
|
</div>
|
{fieldMoreInfo?.(formSchema)}
|
{validating && changeKey === variable && <ValidatingTip />}
|
</div>
|
)
|
}
|
|
if (formSchema.type === 'select') {
|
const {
|
options,
|
variable,
|
label,
|
show_on,
|
required,
|
placeholder,
|
} = formSchema as CredentialFormSchemaSelect
|
|
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
|
return null
|
|
return (
|
<div key={variable} className={cn(itemClassName, 'py-3')}>
|
<div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
|
{label[language] || label.en_US}
|
|
{
|
required && (
|
<span className='ml-1 text-red-500'>*</span>
|
)
|
}
|
{tooltipContent}
|
</div>
|
<SimpleSelect
|
className={cn(inputClassName)}
|
disabled={readonly}
|
defaultValue={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
|
items={options.filter((option) => {
|
if (option.show_on.length)
|
return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
|
|
return true
|
}).map(option => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
|
onSelect={item => handleFormChange(variable, item.value as string)}
|
placeholder={placeholder?.[language] || placeholder?.en_US}
|
/>
|
{fieldMoreInfo?.(formSchema)}
|
{validating && changeKey === variable && <ValidatingTip />}
|
</div>
|
)
|
}
|
|
if (formSchema.type === 'boolean') {
|
const {
|
variable,
|
label,
|
show_on,
|
required,
|
} = formSchema as CredentialFormSchemaRadio
|
|
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
|
return null
|
|
return (
|
<div key={variable} className={cn(itemClassName, 'py-3')}>
|
<div className='flex items-center justify-between py-2 text-sm text-gray-900'>
|
<div className='flex items-center space-x-2'>
|
<span className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
|
{
|
required && (
|
<span className='ml-1 text-red-500'>*</span>
|
)
|
}
|
{tooltipContent}
|
</div>
|
<Radio.Group
|
className='flex items-center'
|
value={value[variable] === null ? undefined : (value[variable] ? 1 : 0)}
|
onChange={val => handleFormChange(variable, val === 1)}
|
>
|
<Radio value={1} className='!mr-1'>True</Radio>
|
<Radio value={0}>False</Radio>
|
</Radio.Group>
|
</div>
|
{fieldMoreInfo?.(formSchema)}
|
</div>
|
)
|
}
|
}
|
|
return (
|
<div className={className}>
|
{
|
formSchemas.map(formSchema => renderField(formSchema))
|
}
|
</div>
|
)
|
}
|
|
export default Form
|
