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
11 changes: 0 additions & 11 deletions .eslintrc.js

This file was deleted.

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:
- '*'
6 changes: 0 additions & 6 deletions .github/workflows/main.yml

This file was deleted.

20 changes: 0 additions & 20 deletions .github/workflows/preview.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: .doc
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 }}
91 changes: 54 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,71 @@
# rc-portal
<div align="center">
<h1>@rc-component/portal</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>🌀 React portal primitive with lifecycle-friendly container handling.</p>

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

React 18 supported Portal Component.
## Install

[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
```bash
npm install @rc-component/portal
```

[npm-image]: http://img.shields.io/npm/v/rc-portal.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-portal
[github-actions-image]: https://github.com/react-component/portal/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/portal/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/portal/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/portal
[download-image]: https://img.shields.io/npm/dm/rc-portal.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-portal
## Usage

## Development
```tsx | pure
import Portal from '@rc-component/portal';

```bash
npm install
npm start
open http://localhost:8000
export default () => <Portal open>Hello World</Portal>;
```

## Feature

- React life cycle support portal component
## API

## Install
| Prop | Description | Type | Default |
| --- | --- | --- | --- |
| `getContainer` | Customize portal container. | `Element \| () => Element \| string \| false` | `document.body` |
| `open` | Whether to render portal content. | `boolean` | `false` |
| `autoLock` | Lock page scroll when the portal is open. | `boolean` | `false` |

[![rc-portal](https://nodei.co/npm/rc-portal.png)](https://npmjs.org/package/rc-portal)
## Development

## Usage
```bash
npm install
npm start
npm test
npm run lint
npm run tsc
npm run compile
```

```js | pure
import Portal from '@rc-component/portal';
The dumi site runs at `http://localhost:8000`.

const Demo = () => {
return <Portal open>Hello World</Portal>;
};
## Release

export default Demo;
```bash
npm run prepublishOnly
```

## 🔥 API

We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition [here](https://github.com/react-component/portal/blob/master/src/interface.ts).
The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow.

### Portal
## License

| Prop | Description | Type | Default |
| ------------ | ---------------------------------- | ------------------------ | ------------- |
| getContainer | Customize portal container element | Element \| () => Element | document.body |
| open | Show the portal | boolean | false |
| autoLock | Lock screen scroll when open | boolean | false |
@rc-component/portal is released under the [MIT](./LICENSE) license.
71 changes: 71 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<div align="center">
<h1>@rc-component/portal</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 Portal 基础组件。</p>

<p>
<a href="https://npmjs.org/package/@rc-component/portal"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/portal.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/portal"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/portal.svg?style=flat-square"></a>
<a href="https://github.com/react-component/portal/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/portal/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/portal"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/portal/master.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/portal"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/portal?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 Portal 基础组件。 |
| 包名 | `@rc-component/portal` |
| 发布 | `@rc-component/np` / `rc-np` |

## 安装

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

## 用法

```tsx | pure
import Portal from '@rc-component/portal';

export default () => <Portal open>Hello World</Portal>;
```

## API

| 名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `getContainer` | 自定义 Portal 容器。 | `Element \| () => Element \| string \| false` | `document.body` |
| `open` | 是否渲染 Portal 内容。 | `boolean` | `false` |
| `autoLock` | Portal 打开时锁定页面滚动。 | `boolean` | `false` |

## 本地开发

```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/portal 基于 [MIT](./LICENSE) 协议发布。
4 changes: 2 additions & 2 deletions docs/examples/getContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Content = (): React.ReactElement => {
};

export default () => {
const divRef = React.useRef();
const divRef = React.useRef<HTMLDivElement>(null);

return (
<div
Expand All @@ -21,7 +21,7 @@ export default () => {
<Portal
open
getContainer={() => {
return divRef.current;
return divRef.current!;
}}
>
<Content />
Expand Down
Loading
Loading