# @txdfe/at-list

> AT业务组件 - 列表

Latest version **1.1.0** (published 2020-06-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install @txdfe/at-list
pnpm add @txdfe/at-list
yarn add @txdfe/at-list
bun add @txdfe/at-list
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-06-18 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | 2ehao, bowei.jbw, cyris, purple-force, teamaxy, tod.zx, zuoqi |

## Links

- npm: https://www.npmjs.com/package/@txdfe/at-list
- Repository: git@gitlab.alibaba-inc.com:aisc/at-components
- npm.io page: https://npm.io/package/@txdfe/at-list

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-infinite-scroller](https://npm.io/package/react-infinite-scroller.md) ^1.2.4

## Recent versions

- 1.1.0 (latest) — 2020-06-18
- 1.0.0 — 2020-01-02
- 0.2.0 — 2019-11-28

## README

# at-list

---

## 简介

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

## 使用示例

[https://at-design.aliyun.test/biz/at-list](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组件](http://web.npm.alibaba-inc.com/package/@alife/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 属性支持滚动加载，使用的是[这个三方包](https://web.npm.alibaba-inc.com/package/react-infinite-scroller)。

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

---
_Source: https://npm.io/package/@txdfe/at-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._