Skip to content
☀️A react-hooks + antd library from Alipay Industry Technology department.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 9c59b2f Sep 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci test: fix ci Jul 8, 2019
docs docs: useForm Sep 20, 2019
examples fix: change use case Sep 19, 2019
packages Publish Sep 20, 2019
scripts chore: fix build Sep 12, 2019
tests fix: pass ci Sep 20, 2019
.eslintignore docs: fix sunflower-antd-cascade-select Jul 2, 2019
.eslintrc.js test: add useCascadeSearch Jul 8, 2019
.fatherrc.js 📝 Jul 8, 2019
.gitignore chore: docs Jul 3, 2019
LICENSE LICENSE Jun 28, 2019
README.md more detailed introduction Sep 2, 2019
jest.config.js test: fix jest collectCoverageFrom Jul 5, 2019
lerna.json sunflower Jun 21, 2019
package.json fix: pass ci Sep 20, 2019
tsconfig.json chore: add build and test Jun 23, 2019
yarn.lock feat: filters and sorter Aug 22, 2019

README.md

sunflower

React Hooks with components of antd.

build status Test coverage node version

🎩  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

image

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
You can’t perform that action at this time.