Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
48 changes: 48 additions & 0 deletions .github/workflows/surge-preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
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: Build preview
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
run: |
npm 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 }}
96 changes: 58 additions & 38 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 | [简体中文](./README.zh-CN.md)</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

```
```bash
npm 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">简体中文 | [English](./README.md)</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
npm 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) 协议发布。
11 changes: 0 additions & 11 deletions now.json

This file was deleted.

Loading
Loading