@lovelope/table-factory

@lovelope/table-factory

TableFactory is a combinable higher order components for list management page, in order to fetch list data and manage filter queries.

English 中文

Install

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

Usage

import TableFactory from '@lovelope/table-factory';
import React from 'react';
import { getGoodsList } from './services';

@TableFactory({
  getAction: getGoodsList,
  params: { pid },
  mute: ['searchWords'],
})
class GoodsList extends React.Component {
  render() {
    const {
      data: { list },
      query,
      loadData,
      onFilter,
      onReset,
    } = this.props;
    return (
      <div>
        <div className="header">
          <YourFilter onFilter={onFilter} query={query} onReset={onReset} />
        </div>
        <div className="body">
          <Table dataSource={list} />
        </div>
      </div>
    );
  }
}

Options

TableFactory

Property	Description	type	required	default
immediate	Used to control whether requests for data are sent immediately when filter conditions change	boolean	false	true
enums	Modify the request parameter name of the page number section of the page with a set of objects (page, page Size by default)	object	false	{ page: 'page', pageSize: 'pageSize' }
mute	Control request parameters that do not immediately send requests (such as keyword search, which may not be immediately searched if you want to enter)	string[]	false	['keyword']
getAction	Request for table data	() => Promise<object>	true	--
params	Additional Possible Parameters of getAction in addition to Screening Conditions	object	false	{}
format	Data Processing Function of getAction before Initiating Request	function	false	p => p

Tips

• TableFactory injects data, query, onFilter, onReset and loadData five props into the component.
• data is the data returned by getAction.
• onFilter is a method of passing parameters to tableFactory. It receives two parameters. The first one is the parameter object, and the second one is the callback after reference.
• onReset, if the page needs to reset all requests plus parameters, you can use this method;
• loadData, an interface that actively calls table data;
• query is the request parameter of getAction; you may need query to keep components under control.
• If params sets additional request parameters, onReset will not empty these parameters, which is also helpful when the timeselector returns to some initial value.