sunflower-UI

React Hooks with components of antd.

🎩 Features

🏄 Easy to use. You don't need to know too much about state and change methods to use components with interaction logic.
💅 Easy to customize. You can easily customize the combination of components you need.
👯 Layered design. You can use react-hooks without ui or react-hooks with antd.

🤔 Why?

Usually, we use multiple antd components, and we organize their relationship through state and props methods like value, onChange.

Is there a way to reduce the process code and describe the relationship between multiple ui components? How can we use a way to use existing processes?

Yes,we can use react-hooks, so the relationship between multiple antd components will be in react-hooks.

⚠️ Warning

This project is still under development.

📟 Usage

$ npm install sunflower-antd --save

Examples

useFormTable

import { Form, Table } from 'antd';
import { useFormTable } from 'sunflower-antd';
import request from './request';


function Component({ form }) {
  // return: formProps, tableProps, current, pageSize, formValues ...
  const { formProps, tableProps } = useFormTable({
    // form instance from props
    form,    

    // default page size, default: 10
    defaultPageSize: 5,

    // search method, params: current, pageSize, fitlers, sorter and form values(eg: username)
    async search({ current, pageSize, username, email }) {
      const result = await request({ current, pageSize, username, email });

      // just return { dataSource, total }
      return {
        dataSource: result.list,
        total: result.total,
      };
    }
  });
  return <div>
    <Form layout="inline" {...formProps}>
      <Form.Item label="Username">
        {
          form.getFieldDecorator('username')(
            <Input placeholder="Username" />
          )
        } 
      </Form.Item>

      <Form.Item label="Email">
        {
          form.getFieldDecorator('email')(
            <Input placeholder="Email" />
          )
        } 
      </Form.Item>

      <Form.Item>
        <Button onClick={() => form.resetFields()}>
          Reset
        </Button>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Search
        </Button>
      </Form.Item>
    </Form>

    <Table
      columns={[
        {
          title: 'Username',
          dataIndex: 'username',
          key: 'username',
        },
        {
          title: 'Email',
          dataIndex: 'email',
          key: 'email',
        }
      ]}
      rowKey="id"
      {...tableProps}
    />
  </div>;
}

export default Form.create()(Component);

⚒ Development

$ yarn
$ yarn bootstrap
$ yarn dev       // dev
$ yarn build     // build
$ yarn test      // test

Mr-zyy/fengdie-UiTest