SmartForm Series Props

TL;DR

Generate reusable forms at once through fieldsConfig, supporting Modal/Drawer forms with linkage, validation, upload, etc.

Components

• SmartForm (Inline Form)
• SmartModalForm (Modal Form)
• SmartDrawerForm (Drawer Form)

Minimal Example

import { SmartModalForm } from '@/components/admin/smart-form'

const fieldsConfig = [
  { key: 'name', title: 'Name', type: 'text', form: { required: true } },
  { key: 'enable', title: 'Enabled', type: 'switch', form: { defaultValue: true } },
]

<SmartModalForm
  title="Create"
  open={open}
  onOpenChange={setOpen}
  fieldsConfig={fieldsConfig}
  onFinish={async (values) => { await create(values); return true }}
/>

Common Props (Excerpt)

• fieldsConfig: FieldConfig[] (required)
• initialValues?: object
• onFinish: (values) => Promise<boolean> (SmartModal/Drawer returns true to close)
• onValuesChange?: (changed, all) => void
• layout?: 'horizontal' | 'vertical' | 'inline'
• disabled?: boolean
• readonly?: boolean
• grid?: boolean — Enable grid layout with colProps
• colProps?: { span?: number } — Field width ratio

Modal/Drawer Specific

• title: string
• open: boolean
• onOpenChange: (open: boolean) => void
• width?: number
• placement?: 'left' | 'right' (Drawer)

Field Linkage and Conditional Display

{
  key: 'discountValue',
  title: 'Discount Value',
  type: 'number',
  form: {
    dependencies: ['discountType'],
    fieldProps: (form) => ({ suffix: form.getFieldValue('discountType') === 'percent' ? '%' : '' }),
    visible: (form) => form.getFieldValue('discountType') !== undefined,
  }
}

Related

• Field Configuration: api/FIELDS_CONFIG
• CRUD Page: api/SMART_CRUD_PAGE