什麼是 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/
