Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions .eslintrc.js

This file was deleted.

17 changes: 2 additions & 15 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -1,15 +1,2 @@
# These are supported funding model platforms

github: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: ant-design # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
thanks_dev: # Replace with a single thanks.dev username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
github: ant-design
open_collective: ant-design
43 changes: 20 additions & 23 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,25 @@ updates:
- package-ecosystem: npm
directory: '/'
schedule:
interval: daily
interval: weekly
day: monday
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
ignore:
- dependency-name: np
versions:
- 7.2.0
- 7.3.0
- 7.4.0
- dependency-name: '@types/react-dom'
versions:
- 17.0.0
- 17.0.1
- 17.0.2
- dependency-name: '@types/react'
versions:
- 17.0.0
- 17.0.1
- 17.0.2
- 17.0.3
- dependency-name: typescript
versions:
- 4.1.3
- 4.1.4
- 4.1.5
groups:
npm-dependencies:
patterns:
- '*'

- package-ecosystem: github-actions
directory: '/'
schedule:
interval: weekly
day: monday
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
github-actions:
patterns:
- '*'
14 changes: 8 additions & 6 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ on:
pull_request:
branches: ['master']
schedule:
- cron: '40 12 * * 0'
- cron: '36 13 * * 3'

jobs:
analyze:
Expand All @@ -20,22 +20,24 @@ jobs:
strategy:
fail-fast: false
matrix:
language: [javascript]
language: [javascript-typescript]

steps:
- name: Checkout
uses: actions/checkout@v3
uses: actions/checkout@v7
with:
persist-credentials: false

- name: Initialize CodeQL
uses: github/codeql-action/init@v2
uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e
with:
languages: ${{ matrix.language }}
queries: +security-and-quality

- name: Autobuild
uses: github/codeql-action/autobuild@v2
uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e
with:
category: '/language:${{ matrix.language }}'
6 changes: 0 additions & 6 deletions .github/workflows/main.yml

This file was deleted.

22 changes: 22 additions & 0 deletions .github/workflows/react-doctor.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
name: React Doctor

on:
pull_request:
push:
branches: [master]

permissions:
contents: read
pull-requests: write
issues: write
statuses: write

jobs:
react-doctor:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
with:
fetch-depth: 0
persist-credentials: false
- uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3
52 changes: 52 additions & 0 deletions .github/workflows/surge-preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
name: Surge Preview

on:
pull_request:

permissions:
contents: read
pull-requests: write
checks: write

jobs:
preview:
runs-on: ubuntu-latest
concurrency:
group: surge-preview-${{ github.event.pull_request.number }}
cancel-in-progress: true
steps:
- uses: actions/checkout@v7
with:
persist-credentials: false
- name: Check Surge token
id: surge-token
env:
SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
run: |
if [ -n "$SURGE_TOKEN" ]; then
echo "enabled=true" >> "$GITHUB_OUTPUT"
else
echo "enabled=false" >> "$GITHUB_OUTPUT"
fi
- name: Setup utoo
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
uses: utooland/setup-utoo@v1

- name: Build preview
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
run: |
ut install
npm run build
- uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
env:
SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
with:
surge_token: ${{ env.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: docs-dist
failOnError: false
setCommitStatus: false
- name: Skip Surge preview
if: ${{ steps.surge-token.outputs.enabled != 'true' }}
run: echo "SURGE_TOKEN is not configured; skip Surge preview."
16 changes: 16 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
name: ✅ test

on:
push:
branches: [master]
pull_request:
branches: [master]

permissions:
contents: read

jobs:
test:
uses: react-component/rc-test/.github/workflows/test-utoo.yml@main
secrets:
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
132 changes: 58 additions & 74 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,43 @@
# @rc-component/Listy

React Listy Component

[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Test coverage][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/@rc-component/listy.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/listy
[github-actions-image]: https://github.com/react-component/listy/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/listy/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/listy/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/listy/branch/master
[david-url]: https://david-dm.org/react-component/listy
[david-image]: https://david-dm.org/react-component/listy/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/listy?type=dev
[david-dev-image]: https://david-dm.org/react-component/listy/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/listy.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/listy
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/listy
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/listy
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
[dumi-url]: https://github.com/umijs/dumi
<div align="center">
<h1>@rc-component/listy</h1>
<p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
<p>📜 Virtualized React list component with grouping and sticky header support.</p>

<p>
<a href="https://npmjs.org/package/@rc-component/listy"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/listy.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/listy"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/listy.svg?style=flat-square"></a>
<a href="https://github.com/react-component/listy/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/listy/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/listy"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/listy/master.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/listy"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/listy?style=flat-square"></a>
<a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
</p>
</div>

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

## Highlights

| Area | Support |
| --- | --- |
| Purpose | Virtualized React list component with grouping and sticky header support. |
| Package | `@rc-component/listy` |
| Release | `@rc-component/np` / `rc-np` |

## Install

[![@rc-component/listy](https://nodei.co/npm/@rc-component/listy.png)](https://npmjs.org/package/@rc-component/listy)
```bash
npm install @rc-component/listy
```

## Usage

Include the default [styling](https://github.com/react-component/listy/blob/master/assets/index.less#L4:L11) and then:

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
```tsx | pure
import Listy from '@rc-component/listy';
import '@rc-component/listy/assets/index.css';

const items = Array.from({ length: 100 }, (_, index) => ({
id: index,
name: `Item ${index}`,
}));
const items = Array.from({ length: 100 }, (_, index) => ({ id: index, name: `Item ${index}` }));

const App = () => (
export default () => (
<Listy
items={items}
height={240}
Expand All @@ -53,58 +46,49 @@ const App = () => (
itemRender={(item) => <div>{item.name}</div>}
/>
);

ReactDOM.createRoot(container).render(<App />);
```

## Compatibility
## API

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| Prop | Description | Type | Default |
| --- | --- | --- | --- |
| `items` | List data source. | `T[]` | `[]` |
| `rowKey` | Resolve item identity. | `keyof T \| (item: T) => React.Key` | required |
| `itemRender` | Render each item. | `(item: T, index: number) => React.ReactNode` | required |
| `height` | Viewport height. | `number` | - |
| `itemHeight` | Estimated item height. | `number` | - |
| `group` | Group configuration. | `{ key: (item: T) => K; title: (groupKey: K, items: T[]) => React.ReactNode }` | - |
| `sticky` | Enable sticky group headers. | `boolean` | `false` |
| `virtual` | Enable virtual scrolling. | `boolean` | `true` |
| `onScroll` | Triggered when the inner scroll container scrolls. | `React.UIEventHandler<HTMLElement>` | - |
| `prefixCls` | Component class name prefix. | `string` | `rc-listy` |

## Example
### ListyRef

http://localhost:9001
| Method | Description |
| --- | --- |
| `scrollTo(config)` | Scroll to a position, item key, or group key. |

## Development

```
```bash
npm install
npm start
npm test
npm run lint
npm run compile
```

## API
The dumi site runs at `http://localhost:8000`.

### props
## Release

| name | type | default | description |
| --- | --- | --- | --- |
| items | `T[]` | `[]` | 列表数据源,虚拟滚动会基于此计算高度。 |
| rowKey | `keyof T \| (item: T) => React.Key` | required | 返回每一项的唯一标识,用于缓存高度与滚动定位。 |
| itemRender | `(item: T, index: number) => React.ReactNode` | required | 渲染单行内容的函数。 |
| height | `number` | - | 列表可视区域高度。 |
| itemHeight | `number` | - | 每行的基础高度,虚拟滚动会以此做初始估算。 |
| group | `{ key: ((item: T) => K) \| K; title: (groupKey: K, items: T[]) => React.ReactNode }` | - | 提供分组 key 与标题渲染,开启后会生成组头。 |
| sticky | `boolean` | `false` | 为分组头启用粘性悬停效果。 |
| virtual | `boolean` | `true` | 是否启用虚拟列表模式,可根据需要关闭。 |
| onScroll | `React.UIEventHandler<HTMLElement>` | - | 滚动时触发,透传内部滚动容器的滚动事件。 |
| prefixCls | `string` | `rc-listy` | 组件样式前缀,方便自定义样式隔离。 |

### ListyRef

- `scrollTo(config?: number | null | { left?: number; top?: number } | { key: React.Key; align?: 'top' | 'bottom' | 'auto'; offset?: number } | { groupKey: React.Key; align?: 'top' | 'bottom' | 'auto'; offset?: number })`
- 传入 `groupKey` 时会直接滚动到对应组头(需启用 `group`)

## Test Case

```
npm test
npm run coverage
```bash
npm run prepublishOnly
```

open coverage/ dir
The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow.

## License

@rc-component/listy is released under the MIT license.
@rc-component/listy is released under the [MIT](./LICENSE) license.
Loading
Loading