Ant Design's secondary package Amiya is released~🎉🎉🎉

what is amiya

amiya is a component library, which is a secondary encapsulation of Ant Design , providing page-level components.

Document address

What are the characteristics?

form read-only mode

The default antd only supports readonly mode for a few components, and disabled mode will display placeholder , and the display may be incomplete.

Therefore, amiya provides readonly mode for each form type, removes the default icon symbol, changes the background color to the text color, and makes the form content clearly visible.

For date type, if there is too much text, it will be displayed on a new line.

form description mode

Unlike the Descriptions component, the description mode of the amiya form does not automatically assign a width, the width of each element is determined by the span of the Col, and the text is right-aligned.

Support for the convenience brought by form components, such as formatted copy display.

this case

Because the ontology is a form, the content can be replaced with a form.

form extension type

The default form types currently have 19 types. If you are not satisfied, want to customize more types? You can use the global registration method. After registration, you can use the custom type form item type in any place where the form appears.

For example, to register a special option, once registered globally, it can be used anywhere.

View the current default form item type

Register custom form item type

form popup mode

The default popup form provides 3 modes, Add, Edit, and Details.

Forms automatically request pagination

The table is directly passed into an interface. As long as the interface supports it, a series of table data request operations such as paging, filtering, querying, and sorting are automatically processed.

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

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

View the table example corresponding to the code

Table paging check operation

Most of the traditional paging batch operations can only be performed on the current page. If you want to select several entries from other pages, you can only increase the number of entries per page, or perform multiple operations.

amiya can check a few items on the current page, then turn to the second page to check a few items, filter and check a few items, and then batch operations at one time.

In fact, it is a built-in shopping cart 🛒.

View table processing additions, deletions and corrections examples

editable form

amiya presets two editing modes, the first is direct editing and the second is line editing.

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

editable table example

Form custom rendering type

There are 6 preset types, allowing the table to directly render rich elements.

View default table column type

If it is not satisfied, you can register the custom type globally. Once registered, it will be used globally.

All forms and forms support JSX writing

Both forms and tables support JSX syntactic sugar, and the results are the same.

View Login Form Example

JSON writing:

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 writing:

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>
  )
}

some doubts

how to use?

1. React version is greater than 16.8, because it is encapsulated with React hooks.
2. Install ant design v4 version.

It can be installed according to the documentation.

https://viewweiwu.gitee.io/amiya/guild/quick-start

The difference with Pro Components?

Also as a professional component package, Pro Componnets has 2.1K Star so far. It has rich components and is undoubtedly very good. There are also many maintainers, which also taught me a lot.

Amiya was completed by me alone. Currently, there are only a small number of Stars, and the current users are mainly colleagues and friends. Please give me PR, Star, and give me more support.

At present, amiya has also achieved what Pro Components has not yet achieved, such as one instruction completes the action , can be paged batch operations , form elements are read-only and so on.

Can it be used with Pro Components?

amiya only depends on antd v4 and can be mixed together.

Does it support Vue?

Not supported, the Vue version is not considered for the time being.

You developed it by yourself, is it stable?

It has been used stably online, welcome to use.

Why the name amiya?

The character is derived from the character amiya of the "Ark of Tomorrow" game. When it was first developed, it was playing this game, so it was called this name.

In addition, the logo is drawn by my girlfriend and uses AI.

refer to

1. Pro Components： https://procomponents.ant.design/
2. Status of the low-code industry: https://juejin.cn/post/7043977419207737375
3. Look at the low code from the implementation principle: https://zhuanlan.zhihu.com/p/451340998
4. Ant Design：https://ant-design.gitee.io/index-cn
5. Based on react-hooks+Typescript secondary encapsulation Antd-Table: https://juejin.cn/post/6844904017492082702
6. Drip-Form：https://github.com/JDFED/drip-form
7. Ant Design Pro：https://pro.ant.design/zh-CN/