@zddi/components

快速开始

是一个只需要定义 fields 就可以用函数形式渲染 React 表单组件， 包含 form, confirm, deleteConfirm, setColumns, cardForm

安装

# 第三组件，提供拖动操作
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

# 依赖内部, 利用React Portal 提供弹窗功能
npm install @zddi/portal @zddi/modal

# 核心
npm install @zddi/components

入门示例

简单新建例子

// 入口引入样式
// 弹窗样式
import '@zddi/modal/modal.css'

// Ant design 样式
import 'antd/dist/antd.css'

import { Modal } from '@zddi/components'

const genCreateFields = () => [
   {
        name: 'name',
        label: '名字',
        type: 'input',
        required: true,
        defaultValue: 'X Z',
    }
]

Modal.form({
		title: '简单新建例子',
    fields: genCreateFields(),
    submit: (result) => { return console.log(result)}
});

简单编辑例子

 Modal.form({
      title: '简单编辑例子',
      fields: genCreateFields(),
      data: { name: 'zhansan' }, // 和新建区别是可以通过data字段设置回显值
      submit: async (data) => {
          console.log(data)
          throw new Error(`submit data ${JSON.stringify(data)}`)
      }
  })

API

Modal.form(options)

| 参数 | 说明 | 类型 | 默认值 | | | ------------- | ----------------------------------------------------------- | ------------------------------------------------------------ | ------ | ---- | | className | 自定义Form 样式，控制label字段宽度可以设置 dt_w80 - dt_w200 | string | | | | data | 表单数据，用于编辑场景回显值设置 | { [key]: value } 可选 | | | | tips | 表单底部红色提示信息 | ReactNode | string | string[] | (fields) => ReactNode | | | | beforeTips | 表单顶部红色提示信息 | ReactNode | string | string[] | (fields) => ReactNode | | | | fields | 定义表单结构 Form Schema | { name: string; type: string | ReactNode;label: string;defaultValue: any;...}[] | | | | groupLayout | 批量编辑嵌套 | 'multiGroup' | 'multiNestedGroup' | ReactNode | | | | | | | | | | okText | 确认按钮文字 | string | 确认 | | | onOk | 点击确认前回调，reject情况会禁止提交 | () => Promise | | | | onOkProps | 确认按钮props | {} | | | | onCancel | 点击取消前回调，reject情况会禁止关闭 | () => Promise | | | | cancelText | 取消按钮文字 | string | 取消 | | | onCancelProps | 取消按钮props | {} | | | | footerButtons | 除取消和确认按钮自己可以生成其它按钮 | { buttonText: string; onClick: () => {}; className: string; }[] | [] | | | footer | 对话框底部自定义 | ReactNode | | |

Form Schema (field)

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------- | ---- | | name | 表单的name字段，提交数据的key | string 唯一 | - | | | type | 字段对应的组件，可以内置组件/自定义组件 | string | ReactNode | - | | | layout | 自定义布局组件 | vertical | inline | editable | extend | ReactNode | - | | | label | 字段名称 | ButtonProps | - | | | defaultValue | 字段默认值 | string | string[] | number ... | - | | | validate | 字段校验 | @zddi/helper | | | | required | 必填校验 | boolean | True | | | parse | 解析字段值 | (value) => value | (value) => value | | | format | 格式化值 | (value) => value | (value) => value | | | processData | 修改其它字段数据 | (data) => ({ ...data }) | | | | hidden | 隐藏/显示字段 | boolean | True | | | props | 替换字段 | (data) => ({}) | | | | group | 批量可选编辑 | string | | 0.4.4 | | cardName | 卡片表单 | String | | 0.4.4 |

内置 field type

• 'text' 文本类型
• 'file' 上传文件类型 需要配合readType字段进行使用 并且需要自定义文件的校验方式
• 'radio' 勾选类型 需要传入options输入可勾选项
• 'select' 选择框类型 需要传入options输入可选项 当mode字段为'multipe'时支持多选
• 'select2' 高级选择框类型 封装了全选等操作进去
• 'password' 密码输入类型
• 'checkbok' 单项是否勾选类型 需要配合hideLabel字段进行输入
• 'textarea' 多行文本输入类型 一般会配合 parse 和 format 字段
• 'ellipsis' 只读类型 编辑对象 目标字段只读时会用到这个
• 'treeSelectNode' 支持节点的树形选择
• 'slider' 滑动
• 'checkGroup' 复选按钮组

DDI 自定义

• 'condition' 嵌套表单类型 目前只支持嵌套一层 目标字段中还需要传入一层fields字段
• 'enum_ellipsis' 传入options的只读字段，可以将value通过options翻译为中文进行展示

Modal.confirm(options)

| 参数 | 说明 | 类型 | 默认值 | | | ------------- | ---------------- | ------ | ------ | ---- | | message | 提示信息 | string | | | | beforeMessage | 提示信息上面展示 | string | - | | | afterMessage | 提示信息下面展示 | string | - | | | note | 底部红色提示信息 | string | - | |

Modal.deleteConfirm(options)

| 参数 | 说明 | 类型 | 默认值 | | | ---------------- | ---------------- | -------- | ------------ | ---- | | descriptionTitle | 提示信息 | string | 确认要删除： | | | description | 删除具体信息 | string[] | [] | | | info | 底部红色提示信息 | string | - | |

Modal.cardForm(options)

和 Modal Form 参数相同不同的是需要在filed中增加 cardForm 字段

Modal.setColumn(options)

| 参数 | 说明 | 类型 | 默认值 | | | -------------- | ---------------- | ------------------------------------------------------------ | ------ | ---- | | reset | 内置重置按钮回调 | () => {} | | | | columns | 列拖动参数 | {display: boolean;id: UniqueIdentifier;key: string;title: string;}[] | [] | | | overwriteField | 重写field | {} | | |

其它示例

高级示例

const genAllFields = () => [
        {
            name: 'input',
            label: '输入框 input',
            type: 'input',
            required: true,
            defaultValue: 'xz',
        },
        {
            name: 'password',
            label: '密码框 password',
            type: 'password',
            required: true,
            defaultValue: '123456',
        },
        {
            name: 'radio',
            label: '单选按钮 radio',
            type: 'radio',
            options: genOptions(10), // 专有属性
            defaultValue: genOptions(10)?.[0]?.value,
        },
        {
            name: 'select',
            label: '单/多下拉选择 select',
            type: 'select',
            options: genOptions(10),
            defaultValue: genOptions(10)[0]?.value,
        },
        {
            name: 'file',
            label: '上传文件 file',
            type: 'file',
        },
        {
            name: 'checkbox',
            label: '复选框 checkbox',
            hideLabel: true, // 专有属性
            type: 'checkbox',
            options: genOptions(10),  // 专有属性
            defaultValue: [genOptions(10)[0]?.value],
        },
        {
            name: 'ellipsis',
            label: '省略号展示 ellipsis',
            type: 'ellipsis',
            defaultValue: '这是一个超长的值啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦'
        },
        {
            name: 'select2',
            label: '多选 select2',
            type: 'select2',
            options: genOptions(10), // 专有属性
            defaultValue: [genOptions(10)[0]?.value],
            style: { width: '300px'}
        },
        {
            name: 'treeSelectNode',
            label: '多选 treeSelectNode',
            type: 'treeSelectNode',
            treeData: [{ value: 'local2', label: 'local', children: genOptions(10) }, { value: 'local3', label: 'local2', children: genOptions(10) }  ], // 专有属性
            defaultValue: ['local2'],
        },
        {
            name: 'checkGroup',
            label: '复选框组 checkGroup',
            type: 'checkGroup',
            options: genOptions(10),
            defaultValue: [],
        },
        {
            name: 'slider',
            label: '滑动 slider',
            type: 'slider',
            marks: { 0: '0', 50: '50', 100: '100' }, // 专有属性
            value: 50,
            style: { width: '300px'}
        },
        {
            name: 'textarea',
            label: '多行文本框 textarea',
            type: 'textarea',
            placeholder: '请输入...',
            style: { width: '300px'}
        },
    ]
    Modal.form({
        title: '高级示例',
        fields: genAllFields(),
        tips: '*注意： 这是一个提示信息这是一个提示信息这是一个提示信息这是一个提示信息这是一个提示信息',
        beforeTips: '*注意： 这是一个前置提示信息这是一个前置提示信息这是一个前置提示信息这是一个前置提示信息这是一个前置提示信息',
        className: 'dt_w200',
        submit: async (data) => {
            console.log(data)
            throw new Error(\`submit data \${JSON.stringify(data)}\`)
        }
    })
}

高级示例-批量编辑

const genAllFields = () => [
    {
        name: 'input',
        label: '输入框 input',
        type: 'input',
        required: true,
        defaultValue: 'xz',
    },
    {
        name: 'password',
        label: '密码框 password',
        type: 'password',
        required: true,
        defaultValue: '123456',
    },
    {
        name: 'radio',
        label: '单选按钮 radio',
        type: 'radio',
        options: genOptions(10), // 专有属性
        defaultValue: genOptions(10)?.[0]?.value,

    },
    {
        name: 'select',
        label: '单/多下拉选择 select',
        type: 'select',
        options: genOptions(10),
        defaultValue: genOptions(10)[0]?.value,
    },
    {
        name: 'file',
        label: '上传文件 file',
        type: 'file',
    },
    {
        name: 'checkbox',
        label: '复选框 checkbox',
        hideLabel: true, // 专有属性
        type: 'checkbox',
        options: genOptions(10), // 专有属性
        defaultValue: [genOptions(10)[0]?.value],
    },
    {
        name: 'ellipsis',
        label: '省略号展示 ellipsis',
        type: 'ellipsis',
        defaultValue: '这是一个超长的值啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦'
    },
    {
        name: 'select2',
        label: '多选 select2',
        type: 'select2',
        options: genOptions(10), // 专有属性
        defaultValue: [genOptions(10)[0]?.value],
        style: { width: '300px'}
    },
    {
        name: 'treeSelectNode',
        label: '多选 treeSelectNode',
        type: 'treeSelectNode',
        treeData: [{ value: 'local2', label: 'local', children: genOptions(10) }, { value: 'local3', label: 'local2', children: genOptions(10) }], // 专有属性
        defaultValue: ['local2'],
    },
    {
        name: 'checkGroup',
        label: '复选框组 checkGroup',
        type: 'checkGroup',
        options: genOptions(10),
        defaultValue: [],
    },
    {
        name: 'slider',
        label: '滑动 slider',
        type: 'slider',
        marks: { 0: '0', 50: '50', 100: '100' }, // 专有属性
        value: 50,
        style: { width: '300px'}
    },
    {
        name: 'textarea',
        label: '多行文本框 textarea',
        type: 'textarea',
        placeholder: '请输入...',
        style: { width: '300px'}
    },
]
Modal.form({
    title: '高级示例-批量编辑',
    fields: genAllFields().map((field) => ({ ...field, group: field.name })), // 带 group 字段会自动进入批量编辑模式
    tips: '*注意： 这是一个提示信息这是一个提示信息这是一个提示信息这是一个提示信息这是一个提示信息',
    beforeTips: '*注意： 这是一个前置提示信息这是一个前置提示信息这是一个前置提示信息这是一个前置提示信息这是一个前置提示信息',
    className: 'dt_w200',
    submit: async (data) => {
        console.log(data)
        throw new Error(\`submit data \${JSON.stringify(data)}\`)
    }
})

带参数的导出

const genCreateFields = () => [
    {
         name: 'name',
         label: '名字',
         type: 'input',
         required: true,
         defaultValue: 'X Z',
     }
 ]
Modal.confirm({
    title: '简单Confirm例子',
    fields: genCreateFields(),
    message: '是否要导出 ？',
    submit: async (data) => {
        console.log(data)
    }
})

删除确认框

Modal.deleteConfirm({
    title: '信息',
    descriptionTitle: '删除的域名有：',
    description: ['abc.om', 'bac.cn'],
    info: '这些域名删除无法恢复，请谨慎操作',
    submit: async (data) => {
        console.log(data)
        throw new Error('submit data' + JSON.stringify(data))
    }
})

卡片表单

const fields = [
    {
        name: 'param1',
        label: '参数1',
        cardName: '卡片A',
        options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }],
        defaultValue: '1',
        type: 'radio',
    },
    {
        name: 'param2',
        label: '参数2',
        cardName:'卡片A',
        type: 'text',
        required: true,
        props: (data: any) => ({ hidden: data.param1 === '1' }),
    },
    {
        name: 'param4',
        label: '参数3',
        cardName: '卡片B',
        type: 'text',
        defaultValue: '4096',
        required: true,
    },
    {
        name: 'param3',
        label: '参数4',
        cardName: '卡片B',
        type: 'text',
        required: true,
    },
    {
        name: 'param5',
        label: '参数4',
        cardName: '卡片B',
        type: 'text',
        required: true,
    },
]
Modal.cardForm({
    title: '卡片表单',
    fields: fields,
    submit: async (data) => {
        console.log(data)
        throw new Error('submit data' + JSON.stringify(data))
    }
})

优化&特性

优化

• [ ] 样式隔离 错误信息、按钮、表单基础样式
• [x] 去除单独引用 ant less 样式
• [ ] 组件方式调用
• [ ] 函数调用采用 @ebay/nice-modal-react 方式
• [ ] 引入storybook完善文档和测试
• [ ] TS 类型完善
• [ ] 确认按钮和数据是否变化联动，数据没有情况禁止提交
• [ ] 表单首次打开focus字段，操作dom属于临时方案
• [ ] 提交出错默认滚动到最顶部，操作dom属于临时方案
• [ ] 批量编辑重构，支持可灵活扩展

特性支持

• [x] 支持卡片模式

• [x] 支持嵌套批量编辑

• [ ] 支持嵌套表单

• [ ] 支持自增表单

• [ ] 支持表格

• [ ] 内置 Switch 、Transfer、Upload、Cascader、AutoComplete 等常用基础组件

• [ ] 渲染形式支持页面和抽屉方式

版本更新记录

0.3.3

• 支持Modal.cardForm 区分不同类型的配置

0.3.4

• Modal.form 参数 tips 支持函数形式渲染，例如： { tips: ({ fields }) => '' }

0.4.4

• 修复错误信息为空时，页面布局抖动问题
• Modal.form 支持通过返回参数 { hideOnSuccess: false， afterClose: () => {} } 禁用关闭对话框并提供回掉函数 afterClose 关闭之后执行的回掉函数

0.4.5

• 批量编辑支持联动元素嵌套场景

更多