什么是 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>
)
}一些疑难
如何应用？
- React 版本大于 16.8，因为时应用 React hooks 封装的。
- 装置 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。
参考
- Pro Components： https://procomponents.ant.des…
- 低代码行业现状：https://juejin.cn/post/704397…
- 从实现原理看低代码：https://zhuanlan.zhihu.com/p/…
- Ant Design：https://ant-design.gitee.io/i…
- 基于react-hooks+Typescript二次封装Antd-Table：https://juejin.cn/post/684490…
- Drip-Form：https://github.com/JDFED/drip…
- Ant Design Pro：https://pro.ant.design/zh-CN/
发表回复