再微小的主体（个体）也应当有自己的组件库，就像史上最炎热的夏天不能没有 “钟薛高”首先说下哈，不是造轮子，从来也不提倡造

首先说下哈，不是造轮子，从来也不提倡造轮子......

作为一名前端程序员，个人感觉轮子已经够多了，留下来的时间不如摸鱼，比如发发沸点、逛逛掘金，或者下班了陪陪女朋友

最近发现了一个好的工具 dumi

突然心血来潮，想起过往使用 antd 的诸多不便，索性基于 antd 自己搞一个易用版 antd

基于 antd 的也有许多，比如 procomponent ,我也认真去看过，感觉还不错，但是写法上感觉很奇怪，明明是 antd 的升级版，为何 API 设计的如此不同，凭空增加了学习成本，所以，秉承能不造轮子就不造轮子的原则，还是自己封装一下吧。

按照国际惯例，先上链接

组件库主页 remons-components
github remons-components

还请各位客官如果觉得不足的话提 issue, 同时也别忘了帮忙点个 star

正文开始

ActionList

行动点组

你可以看做是按钮组，当然，他们也可以在表格的操作列中使用，为了方便书写，这里还对事件进行了封装，actions 是数据源，继承了 Button 的 API

 const onActionClick = (key, data) => {
    console.log(key, data);
  };
  return <ActionList onActionClick={onActionClick} actions={actions} />;

ButtonBar

按钮栏

通常用来做编辑页的提交重置，affixProps 还可以传递 Affix API

Descriptions

描述列表

完全继承 Descriptions API，只不过使用了配置化的方式

import React from 'react';
import { Descriptions } from 'remons-components';

const dataSource = {
  username: 'Zhou Maomao',
  tel: 1810000000,
  live: 'Hangzhou, Zhejiang',
  remark: 'empty',
  address: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
  month: 1658217401814,
};

const columns = [
  { label: '用户名', name: 'username' },
  { label: '联系方式', name: 'tel' },
  { label: '居住地', name: 'live' },
  { label: '备注', name: 'remark' },
  { label: '地址', name: 'address', span: 2 },
  {
    label: '当前月份',
    name: 'month',
    render: (name, value, record) => new Date(value).getMonth() + 1,
  },
];

export default () => {
  return <Descriptions bordered title="测试" dataSource={dataSource} columns={columns} />;
};

Form

表单

不必多讲，完全继承 Form API，搭配我的 FormItem 组件实现预览态，同时也可以使用 cols 进行布局

FormItem

表单项（同 Form.Item）不过 antd 的写法太复杂了，此处做了很多的简化处理，使用 component 属性来指定渲染的表单元素

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const items = [
  {
    label: 'upload',
    component: 'upload',
    valuePropName: 'fileList',
    name: 'fileList',
    componentProps: {
      listType: 'picture-card',
      children: (
        <div>
          <PlusOutlined />
        </div>
      ),
    },
  },
  { label: 'input', component: 'input' },
  { label: 'inputPassword', component: 'inputPassword' },
  { label: 'inputNumber', component: 'inputNumber', componentProps: { min: 0 } },
  { label: 'textarea', component: 'textarea' },
  {
    label: 'select',
    component: 'select',
    componentProps: {
      options: [{ label: '测试', value: 'test' }],
    },
  },
  { label: 'datePicker', component: 'datePicker' },
  { label: 'rangePicker', component: 'rangePicker' },
  { label: 'timePicker', component: 'timePicker' },
  { label: 'rangeTimePicker', component: 'rangeTimePicker' },
  { label: 'radio', component: 'radio', componentProps: { children: '测试' } },
  { label: 'radioGroup', component: 'radioGroup', componentProps: { options: radioOptions } },
  { label: 'checkbox', component: 'checkbox', componentProps: { children: '测试' } },
  {
    label: 'checkboxGroup',
    component: 'checkboxGroup',
    componentProps: {
      options: ['Apple', 'Pear', 'Orange'],
    },
  },
  { label: 'rate', component: 'rate' },
  { label: 'slider', component: 'slider' },
  { label: 'switch', component: 'switch' },
  { label: 'size', component: 'size' },
  { label: 'rangeInput', component: 'rangeInput' }
];

export default () => (
  <Form {...layout}>
    {items.map((item) => (
      <FormItem key={item.label} {...item} />
    ))}
  </Form>
);