1.0.9 • Published 4 years ago

@aligov/gov-alist v1.0.9

Weekly downloads
12
License
MIT
Repository
-
Last release
4 years ago

GovAlist

@aligov/gov-alist

基于Alist,符合政务系统设计标准的定制版,API与Alist完全一致

组件列表

List

GovAlist 容器组件

引入

import { List } from '@aligov/gov-alist'

属性

属性名描述类型默认值
effects副作用配置IListEffect
schema通过schema渲染列表IListSchema
actions列表操作APIIList
url请求接口URL,优先级高于 dataSourcestring
dataSource设置此值则默认为 手动控制数据模式string
defaultFilterValues初始化搜索区域值,设置此值后,执行reset方法将恢复{key:string:any}
filterValues设置搜索区域值{key:string:any}
params初始化绑定搜索字段的URL参数{key:string: string}
paramsFields需要绑定URL参数的搜索字段列表string[]
method请求类型GET or POST
autoLoad是否初始化发起请求booleantrue
formatFilter格式化搜索区域值() => {key:string:any}
formatBefore格式化请求前参数(IListQueryData) => any
formatAfter格式化请求返回结果(any) => IListResponse
query代理整个请求过程() => IListQuery
expandStatus初始化搜索条件展开状态'collapse' or 'expand'collapse

Filter/Filter.Item

GovAlist 搜索区域,Filter / Filter.Item 完全等价于 FormilySchemaFormSchemaMarkupField

引入

import { Filter } from '@aligov/gov-alist'
const FilterItem = Filter.Item

Table

GovAlist 核心内容展示区域,无须关心 dataSource,GovAlist会负责管理, 属性通过 setTableProps 管理。

引入

import { Table } from '@aligov/gov-alist'

Pagination

GovAlist 分页区域,无须管理页面配置,GovAlist会负责管理,在这里仅做占位符,可以自由选定出现的位置。

Clear

清空按钮

属性

属性名描述类型默认值
render自定义渲染清空按钮内容,默认为Buttonclear方法

用法

import { Clear, List, Filter } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Clear>清空</Clear>
    </Filter>
</List>)

Reset

重置按钮, 与 defaultFilterValues 配合使用, 如果有此属性则恢复,若无则与 clear 一致。

属性

属性名描述类型默认值
render自定义渲染清空按钮内容,默认为Button(reset) => React.ReactElement

用法

import { Reset, List, Filter } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Reset>重置</Reset>
    </Filter>
</List>)

Search

搜索按钮

属性

属性名描述类型默认值
render自定义渲染搜索按钮内容,默认为Button(search) => React.ReactElement

用法

import { Search, List, Filter } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Search>搜索</Search>
    </Filter>
</List>)

ConnectProvider

无须手动维护组件与GovAlist的关系,简单包裹即可,方便在页面任何脱离搜索区域的地方使用改变搜索条件的组件。

属性名描述类型默认值
name表单组件名string
searchOnChange值改变时是否立即发起请求booleanfalse
children设置返回内容({ value, setValue })
defaultEmptyValue设置默认空值anynull
import React, { useState } from 'react'
import {
  List, Table, Pagination, Filter,
  Layout, Search, Clear,
  createListActions, ConnectProvider
} from '@aligov/gov-alist'
import { Select } from '@alifd/next';

const actions = createListActions()
const App = () => {  
  const url = 'https://mocks.alibaba-inc.com/mock/alist/data'

  return <div>
    <List actions={actions} url={url}>
      <Filter inline>
        <Filter.Item type="input" name="username" title="username"/>
        <Filter.Item type="input" name="age" title="age"/>
        <Layout.ButtonGroup>
          <Search>搜索</Search>
          <Clear>重置</Clear>
        </Layout.ButtonGroup>
      </Filter>
      <div>
        <h5>自定义组件搜索</h5>
        <ConnectProvider name="custom" searchOnChange>
            {({ value, setValue }) => {
                console.log('===', value)
                return <Select style={{ width: '200px' }} onChange={setValue} value={value}>
                    <Select.Option value="a">a</Select.Option>
                    <Select.Option value="b">b</Select.Option>
                </Select>
            }}
        </ConnectProvider>
      </div>
    </List>
  </div>
}

ReactDOM.render(<App />, document.getElementById('root'))

Consumer

自定义消费列表状态组件

属性

属性名描述类型默认值
selector监听变更的生命周期ListLifeCycleTypes*
children监听变更的生命周期(list) => React.ReactElement

用法

import { Consumer, List, Filter, ListLifeCycleTypes } from '@aligov/gov-alist'
const App = () => (<List>
    <Filter>
        <Filter.Item type="input" name="username" />
        <Reset>重置</Reset>
    </Filter>
    <Consumer selector={[ListLifeCycleTypes.ON_LIST_FILTER_ITEM_CHANGE]}>
        {(list) => {
            const username = list.getFieldState('username', state => state.value)
            return <div>username: {username}</div>
        }}
    </Consumer>
</List>)

ExpandContainer

搜索区域折叠字段容器, 被包裹的搜索字段会被默认收起。初始化状态根据 <List> 传入的 expandStatus 决定。

用法

import { List, Filter, ExpandContainer } from '@aligov/gov-alist'
const App = () => (<List expandStatus="expand">
    <Filter>
        <ExpandContainer>
            <Filter.Item type="input" name="username" />
        </ExpandContainer>
    </Filter>
</List>)

ExpandTrigger

搜索区域折叠字段触发器,与 <ExpandContainer> 配合

属性名描述类型默认值
render自定义渲染内容,默认为Button({ toggleExpandStatus, expandStatus }) => React.ReactElement
unExpandText监听变更的生命周期(list) => React.ReactElement
expandText监听变更的生命周期(list) => React.ReactElement

用法

import { List, Filter, ExpandContainer, ExpandTrigger } from '@aligov/gov-alist'
const App = () => (<List expandStatus="expand">
    <Filter>
        <ExpandContainer>
            <Filter.Item type="input" name="username" />
        </ExpandContainer>
        <ExpandTrigger expandText="展开" unExpandText="收起" />
    </Filter>
</List>)

ToggleTrigger

内容区域展开收起的触发器, 与 expandedRowRender 配合, 此模式对于 Fusion-Next 更合适。

用法

import { Table, List, Filter, ToggleTrigger } from '@alist/next'
const App = () => (<List
    dataSource={[
        { id: '1', username: 'username-a' },
        { id: '2', username: 'username-b' }
    ]}
>
    <Table
        expandedRowRender={(record) => (record.id + '-' + record.username)}
        hasExpandedRowCtrl={false}
    >
    <Table.Column title="username" dataIndex="username" />
    <Table.Column title="operation" dataIndex="id" cell={(val, idx, record) => {
        return <ToggleTrigger id={record.id} expandText="展开" unExpandText="收起" />
    }} />
    </Table>
</List>)