@lovelope/create-factory

CreateFactory is a high-level component used to manage editing pages and details pages; it is mainly responsible for data pulling and updating.

English 中文

安装

npm i -S @lovelope/create-factory
# OR
yarn add -S @lovelope/create-factory

使用

import CreateFactory from '@lovelope/create-factory';
import React from 'react';
import { Form } from 'antd';
import { getUserInfo, putUserInfo } from './services';

const FormItem = Form.Item;

// this page's path is /user/edit/:userId

@CreateFactory({
  key: 'userId',
  getAction: getUserInfo,
  putAction: putUserInfo,
})
class Email extends React.Component {
  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form>
        <FormItem label="username">
          {getFieldDecorator('name')(<Input />)}
        </FormItem>
        <FormItem label="Eamil">
          {getFieldDecorator('email')(<Input />)}
        </FormItem>
      </Form>
    );
  }
}

Options

| Property | Description | type | required | default | | ---------------- | -------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | | key | ID value defined in routing URL | string, number | false | 'id' | | getAction | The function that pulls the form data when it is initialized | () => promise | false | -- | | putAction | Submit the function to be called after editing the form | () => promise | false | -- | | postAction | The function to be called when adding a new form | promise | false | -- | | mapPropsToFields | The formatting function of the data that getAction is filled in before the form item is filled in. | function | false | () => {} | | initialValues | Form default values | object | false | {} |