@txdfe/at-list NPM

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>

classnames react-infinite-scroller

@everything-registry/sub-chunk-943 @infinitebrahmanuniverse/nolb-_tx @zalastax/nolb-_tx

1.1.0

4 years ago

1.0.0

4 years ago

0.2.0

4 years ago