SmartForm Guide

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

<SmartModalForm
  title="Add User"
  open={modalOpen}
  onOpenChange={setModalOpen}
  fieldsConfig={fieldsConfig}
  onFinish={async (values) => {
    await createUser(values)
    return true  // Return true to close modal
  }}
/>

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

<SmartDrawerForm
  title="Edit User"
  open={drawerOpen}
  onOpenChange={setDrawerOpen}
  fieldsConfig={fieldsConfig}
  initialValues={currentRecord}
  onFinish={async (values) => {
    await updateUser(values)
    return true
  }}
  width={600}
/>

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

<SmartForm
  fieldsConfig={fieldsConfig}
  initialValues={initialData}
  onFinish={async (values) => {
    await saveData(values)
  }}
  submitter={{
    searchConfig: {
      submitText: 'Save',
      resetText: 'Reset',
    },
  }}
/>

const fieldsConfig = [
  {
    key: 'name',
    title: 'Username',
    type: 'text',
    form: {
      required: true,
      placeholder: 'Enter username',
      rules: [
        { min: 2, message: 'At least 2 characters' },
        { max: 20, message: 'At most 20 characters' },
      ],
    },
  },
]

{
  key: 'name',
  title: 'Name',
  type: 'text',
  form: {
    required: true,
    placeholder: 'Enter name',
    maxLength: 100,
    showCount: true,  // Show character count
  },
}

{
  key: 'description',
  title: 'Description',
  type: 'textarea',
  form: {
    rows: 4,
    maxLength: 500,
    showCount: true,
    placeholder: 'Enter description',
  },
}

{
  key: 'price',
  title: 'Price',
  type: 'number',
  form: {
    min: 0,
    max: 99999,
    precision: 2,     // Decimal places
    step: 0.01,       // Step
    prefix: '$',      // Prefix
    suffix: '',       // Suffix
  },
}

{
  key: 'status',
  title: 'Status',
  type: 'select',
  options: [
    { label: 'Enabled', value: 'active' },
    { label: 'Disabled', value: 'inactive' },
  ],
  form: {
    required: true,
    defaultValue: 'active',
    allowClear: true,
    showSearch: true,  // Searchable
  },
}

// Dynamic Options
{
  key: 'categoryId',
  title: 'Category',
  type: 'select',
  options: async () => {
    const res = await getCategoryList()
    return res.data.map(item => ({
      label: item.name,
      value: item.id,
    }))
  },
}

{
  key: 'enable',
  title: 'Enabled',
  type: 'switch',
  form: {
    defaultValue: true,
    checkedChildren: 'On',
    unCheckedChildren: 'Off',
  },
}

// Date
{
  key: 'birthday',
  title: 'Birthday',
  type: 'date',
  form: {
    format: 'YYYY-MM-DD',
  },
}

// DateTime
{
  key: 'publishTime',
  title: 'Publish Time',
  type: 'datetime',
  form: {
    format: 'YYYY-MM-DD HH:mm:ss',
    showTime: true,
  },
}

{
  key: 'parentId',
  title: 'Parent Category',
  type: 'tree-select',
  options: async () => {
    const res = await getCategoryTree()
    return res.data
  },
  form: {
    allowClear: true,
    showSearch: true,
    treeDefaultExpandAll: true,
    placeholder: 'Select parent category',
  },
}

{
  key: 'avatar',
  title: 'Avatar',
  type: 'image',
  form: {
    maxCount: 1,
    accept: 'image/*',
    maxSize: 2,  // MB
    tip: 'Supports jpg, png format, max 2MB',
  },
}

{
  key: 'gallery',
  title: 'Gallery',
  type: 'images',
  form: {
    maxCount: 9,
    accept: 'image/*',
    maxSize: 5,
  },
}

{
  key: 'content',
  title: 'Content',
  type: 'markdown',
  form: {
    height: 400,
    placeholder: 'Enter article content...',
  },
}

{
  key: 'icon',
  title: 'Icon',
  type: 'icon',
  form: {
    placeholder: 'Select icon',
  },
}

{
  key: 'config',
  title: 'Configuration',
  type: 'json',
  form: {
    height: 200,
    defaultValue: {},
  },
}

const fieldsConfig = [
  {
    key: 'discountType',
    title: 'Discount Type',
    type: 'select',
    options: [
      { label: 'Fixed Amount', value: 'fixed' },
      { label: 'Percentage', value: 'percent' },
    ],
  },
  {
    key: 'discountValue',
    title: 'Discount Value',
    type: 'number',
    form: {
      // Dependent Field
      dependencies: ['discountType'],
      // Dynamic Configuration
      fieldProps: (form) => {
        const type = form.getFieldValue('discountType')
        return {
          suffix: type === 'percent' ? '%' : '',
          max: type === 'percent' ? 100 : 99999,
        }
      },
    },
  },
]

{
  key: 'reason',
  title: 'Rejection Reason',
  type: 'textarea',
  form: {
    // Only show when status is rejected
    dependencies: ['status'],
    visible: (form) => form.getFieldValue('status') === 'rejected',
    required: (form) => form.getFieldValue('status') === 'rejected',
  },
}

{
  key: 'password',
  title: 'Password',
  type: 'text',
  form: {
    required: true,
    rules: [
      { min: 8, message: 'Password at least 8 characters' },
      {
        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
        message: 'Password must contain uppercase, lowercase letters and numbers',
      },
      {
        validator: async (_, value) => {
          if (value && value.includes(' ')) {
            throw new Error('Password cannot contain spaces')
          }
        },
      },
    ],
  },
}

<SmartModalForm
  fieldsConfig={fieldsConfig}
  // Form Layout
  layout="horizontal"
  labelCol={{ span: 6 }}
  wrapperCol={{ span: 18 }}
  // Or use grid layout
  grid={true}
  colProps={{ span: 12 }}  // Each field takes half width
/>

// Control individual field width
{
  key: 'description',
  title: 'Description',
  type: 'textarea',
  form: {
    colSpan: 24,  // Full row width
  },
}

const fieldsConfig = [
  // Basic Info Group
  {
    key: 'basicInfo',
    title: 'Basic Information',
    type: 'group',
    children: [
      { key: 'name', title: 'Name', type: 'text' },
      { key: 'code', title: 'Code', type: 'text' },
    ],
  },
  // Advanced Config Group
  {
    key: 'advancedConfig',
    title: 'Advanced Configuration',
    type: 'group',
    children: [
      { key: 'enable', title: 'Enabled', type: 'switch' },
      { key: 'remark', title: 'Remarks', type: 'textarea' },
    ],
  },
]