Skip to content

Commit e8c7dd7

Browse files
zombieJzombieJ
committed
chore: init
0 parents  commit e8c7dd7

20 files changed

+527
-0
lines changed

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# top-most EditorConfig file
2+
root = true
3+
4+
# Unix-style newlines with a newline ending every file
5+
[*.{js,css}]
6+
end_of_line = lf
7+
insert_final_newline = true
8+
indent_style = space
9+
indent_size = 2

‎.eslintrc.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const config = {
2+
extends: [require.resolve('@umijs/fabric/dist/eslint')],
3+
rules: {
4+
'react/no-did-update-set-state': 0,
5+
'react/no-find-dom-node': 0,
6+
'import/no-extraneous-dependencies': 0,
7+
'react/sort-comp': 0,
8+
},
9+
};
10+
11+
module.exports = config;

‎.fatherrc.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
cjs: 'babel',
3+
esm: { type: 'babel', importLibToEs: true },
4+
preCommit: {
5+
eslint: true,
6+
prettier: true,
7+
},
8+
runtimeHelpers: true,
9+
};

‎.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.storybook
2+
*.iml
3+
*.log
4+
.idea
5+
.ipr
6+
.iws
7+
*~
8+
~*
9+
*.diff
10+
*.patch
11+
*.bak
12+
.DS_Store
13+
Thumbs.db
14+
.project
15+
.*proj
16+
.svn
17+
*.swp
18+
*.swo
19+
*.pyc
20+
*.pyo
21+
node_modules
22+
.cache
23+
*.css
24+
build
25+
lib
26+
coverage
27+
yarn.lock
28+
/es/
29+
package-lock.json
30+
.doc
31+
32+
# umi
33+
.umi
34+
.umi-production
35+
.umi-test
36+
.env.local

‎.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"endOfLine": "lf",
3+
"semi": true,
4+
"singleQuote": true,
5+
"tabWidth": 2,
6+
"trailingComma": "all",
7+
"arrowParens": "avoid"
8+
}

‎.umirc.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// more config: https://d.umijs.org/config
2+
import { defineConfig } from 'dumi';
3+
4+
export default defineConfig({
5+
title: 'rc-util',
6+
favicon: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
7+
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
8+
outputPath: '.doc',
9+
exportStatic: {},
10+
styles: [
11+
`
12+
.markdown table {
13+
width: auto !important;
14+
}
15+
`,
16+
],
17+
});

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019-present react-component
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# rc-portal
2+
3+
React 18 supported Portal Component.
4+
5+
[![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]
6+
7+
[npm-image]: http://img.shields.io/npm/v/rc-portal.svg?style=flat-square
8+
[npm-url]: http://npmjs.org/package/rc-portal
9+
[github-actions-image]: https://github.com/react-component/portal/workflows/CI/badge.svg
10+
[github-actions-url]: https://github.com/react-component/portal/actions
11+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/portal/master.svg?style=flat-square
12+
[codecov-url]: https://codecov.io/gh/react-component/portal/branch/master
13+
[download-image]: https://img.shields.io/npm/dm/rc-portal.svg?style=flat-square
14+
[download-url]: https://npmjs.org/package/rc-portal
15+
16+
## Development
17+
18+
```bash
19+
npm install
20+
npm start
21+
open http://localhost:8000
22+
```
23+
24+
## Feature
25+
26+
- React life cycle support portal component
27+
28+
## Install
29+
30+
[![rc-portal](https://nodei.co/npm/rc-portal.png)](https://npmjs.org/package/rc-portal)
31+
32+
## Usage
33+
34+
```js | pure
35+
import Portal from 'rc-portal';
36+
37+
const Demo = () => {
38+
return (
39+
<Portal open>
40+
Hello World
41+
</Portal>
42+
);
43+
};
44+
45+
export default Demo;
46+
```
47+
48+
## 🔥 API
49+
50+
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).
51+
52+
### Portal
53+
54+
| Prop | Description | Type | Default |
55+
| ---------------- | -------------------------------------------------- | -------------------------------------------- | ---------------- |
56+
| component | Customize Form render component | string \| Component \| false | form |

‎docs/demo/basic.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## basic
2+
3+
4+
<code src="../examples/basic.tsx" />

‎docs/examples/basic.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { version } from 'react';
2+
import Portal from '../../src';
3+
4+
export default () => {
5+
const [show, setShow] = React.useState(true);
6+
const [customizeContainer, setCustomizeContainer] = React.useState(false);
7+
const [lock, setLock] = React.useState(true);
8+
9+
const divRef = React.useRef<HTMLDivElement>(null);
10+
11+
React.useEffect(
12+
() => () => {
13+
console.log('Demo unmount!!');
14+
},
15+
[],
16+
);
17+
18+
const getContainer = customizeContainer ? () => divRef.current : undefined;
19+
20+
return (
21+
<React.StrictMode>
22+
<div style={{ border: '2px solid red' }}>
23+
Real Version: {version}
24+
<button onClick={() => setShow(!show)}>show: {show.toString()}</button>
25+
<button onClick={() => setCustomizeContainer(!customizeContainer)}>
26+
customize container: {customizeContainer.toString()}
27+
</button>
28+
<button onClick={() => setLock(!lock)}>
29+
lock scroll: {lock.toString()}
30+
</button>
31+
<div
32+
id="customize"
33+
ref={divRef}
34+
style={{ border: '1px solid green', minHeight: 10 }}
35+
/>
36+
</div>
37+
38+
<Portal open={show} getContainer={getContainer} autoLock={lock}>
39+
<p>Hello Root</p>
40+
<Portal open={show} getContainer={getContainer} autoLock={lock}>
41+
<p>Hello Parent</p>
42+
<Portal open={show} getContainer={getContainer} autoLock={lock}>
43+
<p>Hello Children</p>
44+
</Portal>
45+
</Portal>
46+
</Portal>
47+
48+
<div
49+
style={{
50+
position: 'absolute',
51+
top: 0,
52+
right: 0,
53+
height: '200vh',
54+
width: 1,
55+
background: 'yellow',
56+
zIndex: -1,
57+
}}
58+
/>
59+
</React.StrictMode>
60+
);
61+
};

0 commit comments

Comments
 (0)