@uform/core

English | 简体中文

The list state core management package does not rely on any third-party UI frameworks. This package will provide the following features:

• Manage Filter status
• Manage Table status
• Manage Pagination status
• Manage List LifeCycle
• Manage dependencies between Filter, Table, Pagination

Install

npm install --save @alist/core

Table Of Contents

• Backdrop
• Design Concept
• Architecture diagram
• API
  • createList
• Classes
  • new ListLifeCycle()
• Enums
  • ListLifeCycleTypes
• Interfaces
  • IListQueryMethod
  • IListQueryOptions
  • IListQuery
  • IListQuerySort
  • IListFilterData
  • IListQueryData
  • IListProps
  • IListDataSource
  • IListmode
  • IListPageData
  • IListFunctionOptions
  • IList

Backdrop

In the middle and back-end field, lists are indispensable scenarios which integrate the search area (form) and data display area (Table or chart). Lists act as background system portals, with the vast majority of pages.

AList is a unified and efficient solution for this scenario.

Design Concept

AList is a framework that integrates mature solutions from all parties. The search area uses UForm, Pagination, and the Table area uses Fusion-Next or Ant-Design or other third-party component libraries.

Architecture diagram

API

createList

create a List instance

Signature

createList(options?: IListProps): IList

Usage

import createList from '@alist/core'

const list = createList({
  url: '/data.json'
})

Classes

new ListLifeCycle

Signature

type LifeCycleHandler<T> = (payload: T, context: any) => void

new ListLifeCycle(handler: LifeCycleHandler<Payload>)
new ListLifeCycle(...type: ListLifeCycleTypes, handler: LifeCycleHandler<Payload>...)
new ListLifeCycle(handlerMap: { [key: ListLifeCycleTypes]: LifeCycleHandler<Payload> })

Usage

 import { createList, ListLifeCycle, ListLifeCycleTypes } from '@alist/core'

 const list = createList({
   lifecycles:[
     new ListLifeCycle(({ type, payload })=>{
        // God mode, full monitoring
     }),
     new ListLifeCycle(
       ListLifeCycleTypes.ON_LIST_INIT,
      (payload)=>{
        // Accurate monitoring
    }),
    new ListLifeCycle({
      [ListLifeCycleTypes.ON_LIST_INIT]: (payload)=>{
        // Object form accurate listener
      }
    }),
  ]
})

Enums

ListLifeCycleTypes

enum ListLifeCycleTypes {
    ON_LIST_ERROR = 'onListError',
    ON_LIST_EMPTY = 'onListEmpty',
    ON_LIST_WILL_INIT = 'onListWillInit',
    ON_LIST_INIT = 'onListInit',
    WILL_LIST_UPDATE = 'willListUpdate',
    DID_LIST_UPDATE = 'didListUpdate',
}

Interfaces

IListQueryMethod

type IListQueryMethod = 'GET' | 'POST'

IListQueryOptions

interface IListQueryOptions {
    url: string,
    data: IListQueryData,
    method?: IListQueryMethod, 
}

IListQuery

type IListQuery = (queryOptions: IListQueryOptions) => Promise<any>

IListQuerySort

type IListQuerySort = 'desc' | 'asc'

IListFilterData

type IListFilterData = IListKVMap<any>

IListQueryData

type IListQueryData = {
    sort?: IListKVMap<IListQuerySort>,
    currentPage: number,
    pageSize: number,
    filterData?: IListFilterData,
    _t: number,
}

IListProps

interface IListProps {
    dataSource?: any,
    validateConfig?: IListKVMap<any>,
    url?: string,
    method?: IListQueryMethod,
    params?: any,
    paramsFields?: string | string[],
    pageSize?: number,
    currentPage?: number,
    total?: number,
    totalPages?: number,
    autoLoad?: boolean, // automatically load if there is a url
    defaultFilterValues?: any,
    multiple?: boolean, // multiple instance of table
    filterConfig?: any, // config of search area
    query?: IListQuery, // customize query
    formatBefore?: (queryData: IListQueryData) => any | void, // format query data before request
    formatAfter?: (response: any) => any | void, // format response data after request
    formatFilter?: (filterData: IListFilterData) => any | void, // format search area data which will affect query data
    lifecycles?: ListLifeCycle, // lifecycles management
}

IListDataSource

type IListDataSource = any[]

IListmode

enum ModeType {
    DATASOURCE = 'dataSource',
    URL = 'url',
    QUERY = 'query',
}

type IListMode = ModeType.DATASOURCE | ModeType.URL | ModeType.QUERY

IListPageData

interface IListPageData {
    pageSize: number,
    currentPage: number,
    total: number,
    totalPages: number,
}

IListFunctionOptions

interface IListFunctionOptions {
    withFetch?: boolean,
    withRender?: boolean,
    reset?: boolean,
    filterData?: IListFilterData,
    enableInvalid?: boolean
}

IList

interface IList {
    getDataSource: () => IListDataSource,
    setDataSource: (data: IListDataSource) => void,
    setPaginationDataSource: (data: IListDataSource) => void,
    getPaginationDataSource: () => IListDataSource,
    getMode: () => IListMode,
    getFilterData: () => IListFilterData,
    setFilterData: (data: IListFilterData) => void,
    getFilterInstance: () => any,
    getFilterProps: () => IFilterInitProps,
    setFilterInstance: (form?: any) => void,
    getPageData: () => IListPageData,
    setPageData: (data: IListPageData) => void,
    getMultipleData: () => IListMultipleData,
    setMultipleData: (data: IListMultipleDataParams) => void,
    setMultiplePageSize: (data: IListMultiplePageSize) => void,
    getValidateConfig: () => IListKVMap<any>,
    setValidateConfig: (validateConfig?: IListKVMap<any>) => void,
    clear: () => void,
    search: () => void,
    reset: () => void,
    refresh: () => void,
    notify: (type: ListLifeCycleTypes, paylaod?: any) => void
    setLoading: (loading: boolean, fnOpts?: IListFunctionOptions) => void,
    getLoading: () => boolean,
    setUrl: (url: string, fnOpts?: IListFunctionOptions) => void,
    setQuery: (query: IListQuery, fnOpts?: IListFunctionOptions) => void,
    setParams: (params: IListParams, fnOpts?: IListFunctionOptions) => void,
    getParams: () => IListParams,
    setCurrentPage: (currentPage: number, fnOpts?: IListFunctionOptions) => void,
    setPageSize: (pageSize: number) => void,
    on: (key: EventType, cb?: IListEvent) => void
    removeListener: (key: EventType, cb?: IListEvent) => void,
}