at-list

简介

AT 列表组件，提供使用 dataSource 和子组件（嵌套 List.Item 子组件）两种使用方式。

使用示例

https://at-design.aliyun.test/biz/at-list

API

提供使用 dataSource 和子组件（嵌套 List.Item 子组件）两种使用方式：

dataSource方式

| 属性 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | dataSource | Array | noop | [] | 数据源，参数同Media组件，详见下方 | | pagination | Object | noop | null | 是否支持滚动翻页，参数详见下方 | | loading | Object | noop | null | 此属性不为null时，列表将展示Loading占位（渲染 ListLoading 组件） | | empty | Object | noop | null | 此属性为null时，列表将展示空数据占位（渲染 ListEmpty 组件） | | hasHoverItems | Boolean | true,false | false | 列表项是否有hover后才展示的信息，配合 right.hoverItems 使用。hover列表项时会隐藏 right.items，显示 right.hoverItems |

dataSource内元素的参数

与 aisc-media组件 dataSource方式的参数相同：

| dataSource内的参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | left | React.component | noop | null | media左边的容器 | | body | React.component | noop | null | media正文（中间部分）的容器 | | body.title | React.component | noop | null | media正文的标题（即第1行） | | body.description | React.component | noop | null | media正文的描述信息（即第2行及第2+n行） | | right | React.component | noop | null | media右边（即功能区）的容器 | | right.items | ArrayOf(React.component) | noop | null | media右边功能区的小元素们，会给左右20px的间距 | | right.timeItems | ArrayOf(React.component) | noop | null | media右边功能区的时间容器，会将其与body.title高度对齐，并给一个较浅(#999）的颜色 | | right.hoverItems | ArrayOf(React.component) | noop | null | media右边功能区的 hover 时才会展示的小元素们，需配合 hasHoverItems 使用，hover列表项时会隐藏 right.items，显示 right.hoverItems | | hasMultiLineDesc | Boolean | true, false | false | 当描述有多行时，需特别指定这个参数 |

pagination内的参数

通过 pagination 属性支持滚动加载，使用的是这个三方包。

pagination 属性传入一个对象，对象参数如下：

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | onLoadMore | function | noop | noop | 页面滚到底部时，触发的回调函数，下一页的页码作为入参传入 (page) => {} | | hasMore | bool | true, false | false | Whether there are more items to be loaded. Event listeners are removed if false. | | pageStart | number | noop | 1 | 第一页的页码，默认为1 |

loading内的参数

| 参数 | 说明 | 类型 | 可选/必选 | 默认值 | | :------------- | :------------- |:------------- |:------------- | | text | Loading组件下方的文案，若不传则只展示Loading | element 或 string | 可选 | null

empty内的参数

| 参数 | 说明 | 类型 | 可选/必选 | 默认值 | | :------------- | :------------- |:------------- |:------------- | | text | 图片下方的文案 | string | 可选 | 没有数据 | description | text下方更次一级的说明文案，颜色更浅 | string | 可选 | ' | opts | 最下方的一行，常用于放操作按钮 | element | 可选 | null

代码示例：

import List from '@txdfe/at-list';

// 示例数据
const originDataSource = [
  {
    avatar_url: null,
    description: '哈哈哈哈好',
    id: 51,
    last_activity_at: '2017-11-23T14:36:11+08:00',
    name: 'saboo7',
    name_with_namespace: 'sabo-group / saboo7',
    path: 'saboo7',
    path_with_namespace: 'sabo-group/saboo7',
    star_count: 6,
    visibility_level: '10',
    web_url: 'http://project.force.alibaba.net/sabo-group/saboo7',
  },
  {
    avatar_url: null,
    description: '66666666',
    id: 52,
    last_activity_at: '2017-11-23T14:36:11+08:00',
    name: 'saboo8',
    name_with_namespace: 'sabo-group / saboo8',
    path: 'saboo8',
    path_with_namespace: 'sabo-group/saboo8',
    star_count: 6,
    visibility_level: '10',
    web_url: 'http://project.force.alibaba.net/sabo-group/saboo8',
  },
];
// 遍历出符合media组件入参的dataSource
const dataSource = originDataSource.map(data => ({
  left: <TextAvatar text={data.path} image={data.avatar_url} href={data.web_url} />,
  body: {
    title: <a href={data.web_url}>{data.name_with_namespace}</a>,
    description: data.description,
  },
  right: {
    items: [<Button type="primary">主要按钮</Button>, <Button>普通按钮</Button>, <a href="#">文字按钮</a>],
  },
  id: data.id,
}));

<List
  dataSource={dataSource}
  pagination={{
    total: 100,
    onChange: console.log,
  }}
  primaryKey="id"
  rowSelection={{
    onChange: (selectedRowKeys, records) => {
      console.log('选择列的主键: ', selectedRowKeys, '选择列的数据', records);
    },
    onSelect: (selected, record, records) => {
      console.log(`选择或者取消选择${selected}`, '选择列的数据', record, '传入表格的所有数据', records);
    },
    onSelectAll: (selected, records) => {
      console.log(`选择或者取消选择${selected}`, '传入表格的所有数据', records);
    },
    getProps: record => ({
      disabled: record.id == 51,
    }),
  }}
/>

子组件方式

List.Item 为列表项组件。

代码示例：

import List from '@txdfe/at-list';

const ListItem = List.Item;

const originDataSource = [{...}, {...}, ...];

<List>
  {originDataSource.map(item => (
    <ListItem>
      <ListItem.Left>
        <TextAvatar text={item.path} image={item.avatar_url} href={item.web_url} />
      </ListItem.Left>
      <ListItem.Body>
        <ListItem.Body.Title>
          <a href={item.web_url}>{item.name_with_namespace}</a>
        </ListItem.Body.Title>
        <ListItem.Body.Description>{item.description}</ListItem.Body.Description>
      </ListItem.Body>
      <ListItem.Right>
        <ListItem.Right.Item>
          <Button type="primary">主要按钮</Button>
        </ListItem.Right.Item>
        <ListItem.Right.Item>
          <Button>普通按钮</Button>
        </ListItem.Right.Item>
        <ListItem.Right.Item>
          <a href="#">文字按钮</a>
        </ListItem.Right.Item>
      </ListItem.Right>
    </ListItem>
  ))}
</List>