@aligov/gov-alist v1.0.9

GovAlist

@aligov/gov-alist

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

组件列表

List

GovAlist 容器组件

引入

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

属性

Filter/Filter.Item

GovAlist 搜索区域，Filter / Filter.Item 完全等价于 Formily 的 SchemaForm 和 SchemaMarkupField。

引入

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

清空按钮

属性

用法

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 一致。

属性

用法

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

Search

搜索按钮

属性

用法

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

ConnectProvider

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

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

自定义消费列表状态组件

属性

用法

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> 配合

用法

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>)