Ant Design 二次封装 Amiya 发布啦～🎉🎉🎉

什么是 amiya

amiya 是一个组件库，是对Ant Design 的二次封装，提供页面级别的组件。

文档地址

它有什么特点？

表单只读模式

默认的 antd 只对少数组件支持 readonly 模式，而 disabled 模式会把 placeholder 显示出来，且有可能展示不完整。

所以 amiya 为每一种表单类型，提供 readonly 模式，去除默认的图标符号，变更背景颜色于文字颜色，让表单内容清晰可见。

针对日期类型，如果文字过多，将会换行展示。

表单描述模式

跟 Descriptions 组件不同，amiya 表单的描述模式不会自动分配宽度，每个元素的宽度由 Col 的 span 决定，且文字会右对齐。

支持表单组件带来的便利，如格式化文案显示。

查看本案例

因为本体是一个表单，所以可以把内容更换成一个表单。

表单扩展类型

默认的表单类型目前已有 19 种类型，如果还不满足，想要自定义更多的类型？可以通过全局注册的方式，注册完后，就可以在任意出现表单的地方使用自定义类型表单项类型了。

例如注册一个特殊的选择，全局注册一次后，再任意地方都可以使用。

查看目前默认的表单项类型

注册自定义表单项类型

表单弹窗模式

默认弹窗表单提供 3 种模式，新增、编辑、详情。

表格自动请求分页

表格直接传入一个接口，只要接口支持，就自动处理好分页、筛选、查询、排序 等一系列表格数据请求的操作。

const fields: Array<AySearchTableField> = [
  { title: '姓名', key: 'cn' },
  { title: '编号', key: 'index' },
  { title: '描述', key: 'des' }
]

export default function Demo() {
  return <AySearchTable api={listApi} fields={fields} />
}

查看代码对应的表格示例

表格分页勾选操作

传统的分页批量操作，大多数都只能够在当前页，如果要选择其它页面的几条，就只能增加每页条数，或者多次操作。

amiya 可以做到当前页面勾选几条，然后翻到第二页再勾选几条，再筛选一下勾选个几条，然后一次性批量操作。

其实就是内置一个购物车🛒。

查看表格处理增删改差示例

可编辑表格

amiya 预设了两种编辑模式，第一种直接编辑，第二种行编辑。

const fields: Array<AySearchTableField> = [
  {
    title: '英文名',
    key: 'en',
    width: 100,
    // 指定可以编辑
    editable: true,
    // 指定输入类型
    renderType: 'editable-cell-input'
  }
]
 
<AySearchTable editMode="col" />

查看可编辑表格示例

表格自定义渲染类型

预置了 6 种类型，可以让表格直接渲染出丰富的元素。

查看预设表格列类型

如果还不满足，可以全局注册自定义类型，一次注册，全局通用。

表格表单都支持 JSX 写法

表单和表格都支持 JSX 语法糖的方式，出来的效果都一致。

查看登录表单示例

JSON 写法：

import React from 'react'
import { AyForm, AyButton, AyFormField } from 'amiya'

const fields: Array<AyFormField> = [
  {
    title: '用户名',
    key: 'name',
    required: true
  },
  {
    title: '密码',
    type: 'password',
    key: 'password',
    required: true
  },
  {
    type: 'checkbox',
    key: 'remember',
    props: {
      style: {
        marginLeft: 120
      },
      children: '记住密码'
    }
  }
]

export default function Demo() {
  const handleConfirm = (form: any) => {
    console.log(form)
    alert(JSON.stringify(form))
  }

  return (
    <AyForm fields={fields} onConfirm={handleConfirm} style={{ width: 400, margin: '0 auto' }}>
      <AyButton style={{ marginLeft: 120 }} block type="primary" htmlType="submit">
        登录
      </AyButton>
    </AyForm>
  )
}

JSX 写法：

import React from 'react'
import { AyForm, AyButton, AyFields, AyField } from 'amiya'

export default function Demo() {
  const handleConfirm = (form: any) => {
    console.log(form)
    alert(JSON.stringify(form))
  }

  return (
    <AyForm onConfirm={handleConfirm} style={{ width: 400, margin: '0 auto' }}>
      <AyFields>
        <AyField key="name" required title="用户名" />
        <AyField key="password" type="password" required title="密码" />
        <AyField key="checkbox" type="checkbox" props={{ style: { marginLeft: 120 }, children: '记住密码' }} />
      </AyFields>
      <AyButton style={{ marginLeft: 120 }} type="primary" block htmlType="submit">
        登录
      </AyButton>
    </AyForm>
  )
}

一些疑问

如何使用？

1. React 版本大于 16.8，因为时使用 React hooks 封装的。
2. 安装 ant design v4 版本。

可以按照文档来安装。

https://viewweiwu.gitee.io/am...

跟 Pro Componnets 的区别？

同样作为专业组件封装，Pro Componnets，目前为止已有 2.1K 的 Star，组件丰富，毋庸置疑是非常优秀的，且维护人也非常多，也让我学习到了很多。

amiya 只是我一个人完成的，目前只有少量的 Star，目前的使用人群也主要是同事和朋友，欢迎给我 PR、Star，给予我更多的支持。

amiya 目前也做到了 Pro Components 尚未做到的点，如一个指令完成动作、可分页批量操作、表单元素只读等等。

可以跟 Pro Components 一起使用吗？

amiya 只依赖了 antd v4，可以一起混用的。

支持 Vue 吗？

不支持，暂时没有考虑 Vue 版本。

你一个人开发的，稳吗？

目前已经稳定在线上使用了，欢迎使用。

为什么起 amiya 这个名字？

角色来源于《明日方舟》游戏的角色 amiya，刚开始开发的时候正在玩这款游戏，就叫这个名字了。

另外 logo 是女朋友画的，用的 AI。

参考

1. Pro Components： https://procomponents.ant.des...
2. 低代码行业现状：https://juejin.cn/post/704397...
3. 从实现原理看低代码：https://zhuanlan.zhihu.com/p/...
4. Ant Design：https://ant-design.gitee.io/i...
5. 基于react-hooks+Typescript二次封装Antd-Table：https://juejin.cn/post/684490...
6. Drip-Form：https://github.com/JDFED/drip...
7. Ant Design Pro：https://pro.ant.design/zh-CN/