Ant Design Amiya 釋出啦～???

viewweiwu發表於2022-02-10

什麼是 amiya

amiya 是一個元件庫，是對Ant Design 的二次封裝，提供頁面級別的元件。

文件地址

它有什麼特點？

表單只讀模式

預設的 antd 只對少陣列件支援 readonly 模式，而 disabled 模式會把 placeholder 顯示出來，且有可能展示不完整。

所以 amiya 為每一種表單型別，提供 readonly 模式，去除預設的圖示符號，變更背景顏色於文字顏色，讓表單內容清晰可見。

針對日期型別，如果文字過多，將會換行展示。

image.png

表單描述模式

跟 Descriptions 元件不同，amiya 表單的描述模式不會自動分配寬度，每個元素的寬度由 Col 的 span 決定，且文字會右對齊。

支援表單元件帶來的便利，如格式化文案顯示。

檢視本案例

image.png

因為本體是一個表單，所以可以把內容更換成一個表單。

image.png

表單擴充套件型別

預設的表單型別目前已有 19 種型別，如果還不滿足，想要自定義更多的型別？可以通過全域性註冊的方式，註冊完後，就可以在任意出現表單的地方使用自定義型別表單項型別了。

例如註冊一個特殊的選擇，全域性註冊一次後，再任意地方都可以使用。

1.gif

檢視目前預設的表單項型別

註冊自定義表單項型別

表單彈窗模式

預設彈窗表單提供 3 種模式，新增、編輯、詳情。

2.gif

表格自動請求分頁

表格直接傳入一個介面，只要介面支援，就自動處理好分頁、篩選、查詢、排序 等一系列表格資料請求的操作。

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

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

image.png

檢視程式碼對應的表格示例

表格分頁勾選操作

傳統的分頁批量操作，大多數都只能夠在當前頁，如果要選擇其它頁面的幾條，就只能增加每頁條數，或者多次操作。

amiya 可以做到當前頁面勾選幾條，然後翻到第二頁再勾選幾條，再篩選一下勾選個幾條，然後一次性批量操作。

3.gif

其實就是內建一個購物車?。

檢視錶格處理增刪改差示例

可編輯表格

amiya 預設了兩種編輯模式，第一種直接編輯，第二種行編輯。

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

4.gif

5.gif

檢視可編輯表格示例

表格自定義渲染型別

預置了 6 種型別，可以讓表格直接渲染出豐富的元素。

6.gif

檢視預設表格列型別

如果還不滿足，可以全域性註冊自定義型別，一次註冊，全域性通用。

表格表單都支援 JSX 寫法

表單和表格都支援 JSX 語法糖的方式，出來的效果都一致。

image.png

檢視登入表單示例

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/

相關文章