SchemaForm

Build form use JSON-schema liked

Usage

npm install @wii/schema-form

import { FC } from 'react';
import SchemaForm from '@wii/schema-form';

const BasicForm: FC = () => {
  return (
    <SchemaForm
      initialValues={{ autoRegister: true }}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      style={{ width: 600 }}
      fields={[
        {
          type: 'Input',
          name: 'username',
          label: '用户名',
          rules: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'Password',
          name: 'password',
          label: '密码',
          rules: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'Switch',
          name: 'autoRegister',
          label: '是否自动注册',
          valuePropName: 'checked',
          extra: '控制隐藏字段',
        },
        {
          type: 'Input',
          name: 'mobile',
          rematch: true,
          dependencies: ['autoRegister'],
          label: '手机号',
          preserve: false,
          extra: '依赖是否自动注册字段',
          rules: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'List',
          name: 'addresses',
          label: '联系地址',
          rematch: true,
          dependencies: ['autoRegister'],
          field: {
            type: 'Compose',
            span: 8,
            fields: [
              {
                type: 'Select',
                name: 'province',
                inputProps: {
                  placeholder: '省',
                  options: [
                    {
                      value: '重庆市',
                    },
                  ],
                },
              },
              {
                type: 'Select',
                name: 'city',
                inputProps: {
                  placeholder: '市',
                  options: [
                    {
                      value: '重庆市',
                    },
                  ],
                },
              },
              {
                type: 'Select',
                name: 'county',
                inputProps: {
                  placeholder: '县/区',
                  options: [
                    {
                      value: '渝北区',
                    },
                  ],
                },
              },
              {
                type: 'Input',
                name: 'detail',
                colProps: {
                  span: 24,
                },
                inputProps: {
                  placeholder: '详细地址',
                },
              },
            ],
          },
        },
        {
          type: 'Compose',
          span: '',
          gutter: 8,
          fields: [
            {
              type: 'Button',
              colProps: {
                offset: 4,
              },
              inputProps: {
                children: '提交',
                htmlType: 'submit',
                type: 'primary',
              },
            },
            {
              type: 'Button',
              inputProps: {
                children: '重置',
                htmlType: 'reset',
              },
            },
          ],
        },
      ]}
    />
  );
};

export default BasicForm;