Skip to content
Merged
Show file tree
Hide file tree
Changes from 11 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
2 changes: 2 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
github: ant-design
open_collective: ant-design
32 changes: 24 additions & 8 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file

version: 2
updates:
- package-ecosystem: "" # See documentation for possible values
directory: "/" # Location of package manifests
- package-ecosystem: npm
directory: '/'
schedule:
interval: weekly
day: monday
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
npm-dependencies:
patterns:
- '*'

- package-ecosystem: github-actions
directory: '/'
schedule:
interval: "weekly"
interval: weekly
day: monday
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
github-actions:
patterns:
- '*'
22 changes: 12 additions & 10 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
name: "CodeQL"
name: 'CodeQL'

on:
push:
branches: [ "master" ]
branches: ['master']
pull_request:
branches: [ "master" ]
branches: ['master']
schedule:
- cron: "53 19 * * 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 }}"
category: '/language:${{ matrix.language }}'
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 }}
98 changes: 59 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,57 +1,77 @@
# @rc-component/overflow 🐾

[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][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/overflow.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/overflow
[github-actions-image]: https://github.com/react-component/overflow/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/overflow/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/overflow/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/overflow/branch/master
[david-url]: https://david-dm.org/react-component/overflow
[david-image]: https://david-dm.org/react-component/overflow/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/overflow?type=dev
[david-dev-image]: https://david-dm.org/react-component/overflow/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/overflow.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/overflow
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/overflow
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/overflow
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

Auto collapse box when overflow

## Live Demo

https://overflow-react-component.vercel.app/
<div align="center">
<h1>@rc-component/overflow</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>📦 Auto-collapse React layout primitive for rendering visible items and overflow indicators.</p>

<p>
<a href="https://npmjs.org/package/@rc-component/overflow"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/overflow.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/overflow"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/overflow.svg?style=flat-square"></a>
<a href="https://github.com/react-component/overflow/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/overflow/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/overflow"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/overflow/master.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/overflow"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/overflow?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 | Auto-collapse React layout primitive for rendering visible items and overflow indicators. |
| Package | `@rc-component/overflow` |
| Release | `@rc-component/np` / `rc-np` |

## Install

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

## Usage

```ts
// TODO
```tsx | pure
import Overflow from '@rc-component/overflow';

export default () => (
<Overflow
data={[1, 2, 3]}
renderItem={item => <span>{item}</span>}
renderRest={items => <span>+{items.length}</span>}
/>
);
```

## API

| Property | Type | Default | Description |
| -------- | ---- | ------- | ----------- |
| Prop | Description |
| ------------ | -------------------------------- |
| `data` | Items rendered by Overflow. |
| `renderItem` | Render a visible item. |
| `renderRest` | Render collapsed overflow items. |

## Development

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

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

## Release

```bash
npm run prepublishOnly
```

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

Comment thread
coderabbitai[bot] marked this conversation as resolved.
## License

@rc-component/overflow is released under the MIT license.
@rc-component/overflow is released under the [MIT](./LICENSE.md) license.
77 changes: 77 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<div align="center">
<h1>@rc-component/overflow</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> Ant Design 生态的一部分。</sub></p>
<p>📦 用于自动折叠可见项与溢出项的 React 布局基础组件。</p>

<p>
<a href="https://npmjs.org/package/@rc-component/overflow"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/overflow.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/overflow"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/overflow.svg?style=flat-square"></a>
<a href="https://github.com/react-component/overflow/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/overflow/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/overflow"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/overflow/master.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/overflow"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/overflow?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"><a href="./README.md">English</a> | 简体中文</p>

## 亮点

| 方向 | 支持 |
| ---- | ------------------------------------------------- |
| 定位 | 用于自动折叠可见项与溢出项的 React 布局基础组件。 |
| 包名 | `@rc-component/overflow` |
| 发布 | `@rc-component/np` / `rc-np` |

## 安装

```bash
npm install @rc-component/overflow
```

## 用法

```tsx | pure
import Overflow from '@rc-component/overflow';

export default () => (
<Overflow
data={[1, 2, 3]}
renderItem={item => <span>{item}</span>}
renderRest={items => <span>+{items.length}</span>}
/>
);
```

## API

| 名称 | 说明 |
| ------------ | ----------------------- |
| `data` | Overflow 渲染的数据项。 |
| `renderItem` | 渲染可见项。 |
| `renderRest` | 渲染折叠后的溢出项。 |

## 本地开发

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

本地 dumi 站点默认运行在 `http://localhost:8000`.

## 发布

```bash
npm run prepublishOnly
```

发布流程通过 `@rc-component/np` 提供的 `rc-np` 命令处理。

## 许可证

@rc-component/overflow 基于 [MIT](./LICENSE.md) 协议发布。
Loading
Loading