Skip to content
Open
Show file tree
Hide file tree
Changes from 5 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
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ coverage
yarn.lock
/es/
package-lock.json
pnpm-lock.yaml
.doc

# dumi
Expand Down
2 changes: 1 addition & 1 deletion 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 Down
22 changes: 11 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@rc-component/portal",
"version": "1.1.2",
"version": "2.0.0",
"description": "React Portal Component",
"keywords": [
"react",
Expand Down Expand Up @@ -45,29 +45,29 @@
},
"dependencies": {
"@babel/runtime": "^7.18.0",
"classnames": "^2.3.2",
"rc-util": "^5.24.4"
"@rc-component/util": "^1.2.0",
"classnames": "^2.3.2"
},
"devDependencies": {
"@rc-component/father-plugin": "^1.0.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.0",
"@types/jest": "^26.0.20",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@types/jest": "^29.5.14",
"@types/node": "^20.9.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@umijs/fabric": "^3.0.0",
"cheerio": "1.0.0-rc.12",
"dumi": "^2.0.0",
"eslint": "^7.18.0",
"father": "^4.0.0",
"gh-pages": "^3.1.0",
"glob": "^10.0.0",
"np": "^5.0.3",
"prettier": "^2.1.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"typescript": "^5.0.0",
"cheerio": "1.0.0-rc.12",
"umi-test": "^1.9.7"
},
"peerDependencies": {
Expand Down
12 changes: 5 additions & 7 deletions src/Portal.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { createPortal } from 'react-dom';
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import warning from 'rc-util/lib/warning';
import { supportRef, useComposeRef } from 'rc-util/lib/ref';
import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
import warning from '@rc-component/util/lib/warning';
import { supportRef, useComposeRef } from '@rc-component/util/lib/ref';
import OrderContext from './Context';
import useDom from './useDom';
import useScrollLocker from './useScrollLocker';
Expand All @@ -26,7 +26,6 @@ export interface PortalProps {
autoDestroy?: boolean;
/** Lock screen scroll when open */
autoLock?: boolean;

/** @private debug name. Do not use in prod */
debug?: string;
}
Expand Down Expand Up @@ -125,10 +124,9 @@ const Portal = React.forwardRef<any, PortalProps>((props, ref) => {
const renderInline = mergedContainer === false || inlineMock();

let reffedChildren = children;

if (ref) {
reffedChildren = React.cloneElement(children as any, {
ref: mergedRef,
});
reffedChildren = React.cloneElement(children as any, { ref: mergedRef });
}

return (
Expand Down
14 changes: 8 additions & 6 deletions src/useDom.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import * as React from 'react';
import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
import OrderContext from './Context';
import type { QueueCreate } from './Context';

const EMPTY_LIST = [];
const EMPTY_LIST: VoidFunction[] = [];

/**
* Will add `div` to document. Nest call will keep order
* @param render Render DOM in document
*/
export default function useDom(
const useDom = (
render: boolean,
debug?: string,
): [HTMLDivElement, QueueCreate] {
): [HTMLDivElement, QueueCreate] => {
const [ele] = React.useState(() => {
if (!canUseDom()) {
return null;
Expand Down Expand Up @@ -82,4 +82,6 @@ export default function useDom(
}, [queue]);

return [ele, mergedQueueCreate];
}
};

export default useDom;
14 changes: 8 additions & 6 deletions src/useScrollLocker.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS';
import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
import { updateCSS, removeCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
import { isBodyOverflowing } from './util';

const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
const UNIQUE_ID = `@rc-component/util-locker-${Date.now()}`;

let uuid = 0;

export default function useScrollLocker(lock?: boolean) {
const useScrollLocker = (lock?: boolean) => {
const mergedLock = !!lock;
const [id] = React.useState(() => {
uuid += 1;
Expand Down Expand Up @@ -36,4 +36,6 @@ html body {
removeCSS(id);
};
}, [mergedLock, id]);
}
};

export default useScrollLocker;
6 changes: 3 additions & 3 deletions tests/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ jest.mock('../src/util', () => {
});

// Revert `useLayoutEffect` back to real one since we should keep order for test
jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => {
const origin = jest.requireActual('react');
return origin.useLayoutEffect;
});
Expand Down Expand Up @@ -72,7 +72,7 @@ describe('Portal', () => {
};

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

return (
<div ref={divRef} className="holder">
Expand Down Expand Up @@ -231,7 +231,7 @@ describe('Portal', () => {
let checked = false;

const Demo = ({ open }: { open?: boolean }) => {
const pRef = React.useRef();
const pRef = React.useRef<HTMLParagraphElement>(null);

React.useEffect(() => {
if (open) {
Expand Down
7 changes: 3 additions & 4 deletions tests/webkit.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { render } from '@testing-library/react';
import Portal from '../src';
import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';

jest.mock('../src/util', () => {
const origin = jest.requireActual('../src/util');
Expand All @@ -12,14 +11,14 @@ jest.mock('../src/util', () => {
});

// Revert `useLayoutEffect` back to real one since we should keep order for test
jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => {
const origin = jest.requireActual('react');
return origin.useLayoutEffect;
});

// Revert `useLayoutEffect` back to real one since we should keep order for test
jest.mock('rc-util/lib/getScrollBarSize', () => {
const origin = jest.requireActual('rc-util/lib/getScrollBarSize');
jest.mock('@rc-component/util/lib/getScrollBarSize', () => {
const origin = jest.requireActual('@rc-component/util/lib/getScrollBarSize');
return {
...origin,

Expand Down
Loading