@rc-component/portal 1.0.0-0

package/LICENSE

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

package/README.md

@@ -0,0 +1,54 @@
+# rc-portal
+
+React 18 supported Portal Component.
+
+[![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]
+
+[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://codecov.io/gh/react-component/portal/branch/master
+[download-image]: https://img.shields.io/npm/dm/rc-portal.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-portal
+
+## Development
+
+```bash
+npm install
+npm start
+open http://localhost:8000
+```
+
+## Feature
+
+- React life cycle support portal component
+
+## Install
+
+[![rc-portal](https://nodei.co/npm/rc-portal.png)](https://npmjs.org/package/rc-portal)
+
+## Usage
+
+```js | pure
+import Portal from 'rc-portal';
+
+const Demo = () => {
+  return <Portal open>Hello World</Portal>;
+};
+
+export default Demo;
+```
+
+## 🔥 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).
+
+### Portal
+
+| 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         |

package/es/Context.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare type QueueCreate = (appendFunc: VoidFunction) => void;
+declare const OrderContext: React.Context<QueueCreate>;
+export default OrderContext;

package/es/Context.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+var OrderContext = /*#__PURE__*/React.createContext(null);
+export default OrderContext;

package/es/Portal.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface PortalProps {
+    /** Customize container element. Default will create a div in document.body when `open` */
+    getContainer?: () => Element | DocumentFragment;
+    children?: React.ReactNode;
+    /** Show the portal children */
+    open?: boolean;
+    /** Lock screen scroll when open */
+    autoLock?: boolean;
+}
+export default function Portal(props: PortalProps): JSX.Element;

package/es/Portal.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import OrderContext from "./Context";
+import useDom from "./useDom";
+import useScrollLocker from "./useScrollLocker"; // ZombieJ: Since React 18 strict mode logic change.
+//          We should rewrite for compatible.
+
+export default function Portal(props) {
+  var open = props.open,
+      autoLock = props.autoLock,
+      getContainer = props.getContainer,
+      children = props.children;
+
+  var _React$useState = React.useState(open),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mergedRender = _React$useState2[0],
+      setMergedRender = _React$useState2[1];
+
+  useScrollLocker(autoLock && open); // ====================== Should Render ======================
+
+  React.useEffect(function () {
+    setMergedRender(open);
+  }, [open]); // ======================== Container ========================
+
+  var customizeContainer = getContainer === null || getContainer === void 0 ? void 0 : getContainer();
+
+  var _useDom = useDom(mergedRender && !customizeContainer),
+      _useDom2 = _slicedToArray(_useDom, 2),
+      defaultContainer = _useDom2[0],
+      queueCreate = _useDom2[1];
+
+  var mergedContainer = customizeContainer || defaultContainer; // ========================= Render ==========================
+  // Do not render when nothing need render
+
+  if (!mergedRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(OrderContext.Provider, {
+    value: queueCreate
+  }, /*#__PURE__*/createPortal(children, mergedContainer));
+}

package/es/index.d.ts

@@ -0,0 +1,4 @@
+import Portal from './Portal';
+import type { PortalProps } from './Portal';
+export type { PortalProps };
+export default Portal;

package/es/index.js

@@ -0,0 +1,2 @@
+import Portal from "./Portal";
+export default Portal;

package/es/useDom.d.ts

@@ -0,0 +1,6 @@
+import type { QueueCreate } from './Context';
+/**
+ * Will add `div` to document. Nest call will keep order
+ * @param render Render DOM in document
+ */
+export default function useDom(render: boolean): [HTMLDivElement, QueueCreate];

package/es/useDom.js

@@ -0,0 +1,69 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import OrderContext from "./Context";
+var EMPTY_LIST = [];
+/**
+ * Will add `div` to document. Nest call will keep order
+ * @param render Render DOM in document
+ */
+
+export default function useDom(render) {
+  var _React$useState = React.useState(function () {
+    var defaultEle = document.createElement('div');
+    return defaultEle;
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      ele = _React$useState2[0]; // ========================== Order ==========================
+
+
+  var queueCreate = React.useContext(OrderContext);
+
+  var _React$useState3 = React.useState(EMPTY_LIST),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      queue = _React$useState4[0],
+      setQueue = _React$useState4[1];
+
+  var mergedQueueCreate = queueCreate || function (appendFn) {
+    setQueue(function (origin) {
+      return [appendFn].concat(_toConsumableArray(origin));
+    });
+  }; // =========================== DOM ===========================
+
+
+  function append() {
+    if (!ele.parentElement) {
+      document.body.appendChild(ele);
+    }
+  }
+
+  function cleanup() {
+    var _ele$parentElement;
+
+    (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
+  }
+
+  useLayoutEffect(function () {
+    if (render) {
+      if (queueCreate) {
+        queueCreate(append);
+      } else {
+        append();
+      }
+    } else {
+      cleanup();
+    }
+
+    return cleanup;
+  }, [render]);
+  useLayoutEffect(function () {
+    if (queue.length) {
+      queue.forEach(function (appendFn) {
+        return appendFn();
+      });
+      setQueue(EMPTY_LIST);
+    }
+  }, [queue]);
+  return [ele, mergedQueueCreate];
+}

package/es/useScrollLocker.d.ts

@@ -0,0 +1 @@
+export default function useScrollLocker(lock?: boolean): void;

package/es/useScrollLocker.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { updateCSS, removeCSS } from "rc-util/es/Dom/dynamicCSS";
+import getScrollBarSize from "rc-util/es/getScrollBarSize";
+var lockCount = 0;
+var locked = false;
+var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
+
+function syncLocker() {
+  var nextLocked = lockCount > 0;
+
+  if (locked !== nextLocked) {
+    locked = nextLocked;
+
+    if (locked) {
+      var scrollbarSize = getScrollBarSize();
+      updateCSS("\nhtml body {\n  overflow-y: hidden;\n  width: calc(100% - ".concat(scrollbarSize, "px);\n}"), UNIQUE_ID);
+    } else {
+      removeCSS(UNIQUE_ID);
+    }
+  }
+}
+
+export default function useScrollLocker(lock) {
+  React.useLayoutEffect(function () {
+    if (lock) {
+      lockCount += 1;
+      syncLocker();
+    } else {
+      lockCount -= 1;
+      syncLocker();
+    }
+  }, [lock]);
+  var lockRef = React.useRef(lock);
+  lockRef.current = lock;
+  React.useLayoutEffect(function () {
+    return function () {
+      if (lockRef.current) {
+        lockCount -= 1;
+        syncLocker();
+      }
+    };
+  }, []);
+}

package/lib/Context.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare type QueueCreate = (appendFunc: VoidFunction) => void;
+declare const OrderContext: React.Context<QueueCreate>;
+export default OrderContext;

package/lib/Context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var OrderContext = /*#__PURE__*/React.createContext(null);
+var _default = OrderContext;
+exports.default = _default;

package/lib/Portal.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface PortalProps {
+    /** Customize container element. Default will create a div in document.body when `open` */
+    getContainer?: () => Element | DocumentFragment;
+    children?: React.ReactNode;
+    /** Show the portal children */
+    open?: boolean;
+    /** Lock screen scroll when open */
+    autoLock?: boolean;
+}
+export default function Portal(props: PortalProps): JSX.Element;

package/lib/Portal.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Portal;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var _useDom3 = _interopRequireDefault(require("./useDom"));
+
+var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
+
+function Portal(props) {
+  var open = props.open,
+      autoLock = props.autoLock,
+      getContainer = props.getContainer,
+      children = props.children;
+
+  var _React$useState = React.useState(open),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      mergedRender = _React$useState2[0],
+      setMergedRender = _React$useState2[1];
+
+  (0, _useScrollLocker.default)(autoLock && open); // ====================== Should Render ======================
+
+  React.useEffect(function () {
+    setMergedRender(open);
+  }, [open]); // ======================== Container ========================
+
+  var customizeContainer = getContainer === null || getContainer === void 0 ? void 0 : getContainer();
+
+  var _useDom = (0, _useDom3.default)(mergedRender && !customizeContainer),
+      _useDom2 = (0, _slicedToArray2.default)(_useDom, 2),
+      defaultContainer = _useDom2[0],
+      queueCreate = _useDom2[1];
+
+  var mergedContainer = customizeContainer || defaultContainer; // ========================= Render ==========================
+  // Do not render when nothing need render
+
+  if (!mergedRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(_Context.default.Provider, {
+    value: queueCreate
+  }, /*#__PURE__*/(0, _reactDom.createPortal)(children, mergedContainer));
+}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import Portal from './Portal';
+import type { PortalProps } from './Portal';
+export type { PortalProps };
+export default Portal;

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Portal = _interopRequireDefault(require("./Portal"));
+
+var _default = _Portal.default;
+exports.default = _default;

package/lib/useDom.d.ts

@@ -0,0 +1,6 @@
+import type { QueueCreate } from './Context';
+/**
+ * Will add `div` to document. Nest call will keep order
+ * @param render Render DOM in document
+ */
+export default function useDom(render: boolean): [HTMLDivElement, QueueCreate];

package/lib/useDom.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDom;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var EMPTY_LIST = [];
+/**
+ * Will add `div` to document. Nest call will keep order
+ * @param render Render DOM in document
+ */
+
+function useDom(render) {
+  var _React$useState = React.useState(function () {
+    var defaultEle = document.createElement('div');
+    return defaultEle;
+  }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+      ele = _React$useState2[0]; // ========================== Order ==========================
+
+
+  var queueCreate = React.useContext(_Context.default);
+
+  var _React$useState3 = React.useState(EMPTY_LIST),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      queue = _React$useState4[0],
+      setQueue = _React$useState4[1];
+
+  var mergedQueueCreate = queueCreate || function (appendFn) {
+    setQueue(function (origin) {
+      return [appendFn].concat((0, _toConsumableArray2.default)(origin));
+    });
+  }; // =========================== DOM ===========================
+
+
+  function append() {
+    if (!ele.parentElement) {
+      document.body.appendChild(ele);
+    }
+  }
+
+  function cleanup() {
+    var _ele$parentElement;
+
+    (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
+  }
+
+  (0, _useLayoutEffect.default)(function () {
+    if (render) {
+      if (queueCreate) {
+        queueCreate(append);
+      } else {
+        append();
+      }
+    } else {
+      cleanup();
+    }
+
+    return cleanup;
+  }, [render]);
+  (0, _useLayoutEffect.default)(function () {
+    if (queue.length) {
+      queue.forEach(function (appendFn) {
+        return appendFn();
+      });
+      setQueue(EMPTY_LIST);
+    }
+  }, [queue]);
+  return [ele, mergedQueueCreate];
+}

package/lib/useScrollLocker.d.ts

@@ -0,0 +1 @@
+export default function useScrollLocker(lock?: boolean): void;

package/lib/useScrollLocker.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScrollLocker;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
+
+var _getScrollBarSize = _interopRequireDefault(require("rc-util/lib/getScrollBarSize"));
+
+var lockCount = 0;
+var locked = false;
+var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
+
+function syncLocker() {
+  var nextLocked = lockCount > 0;
+
+  if (locked !== nextLocked) {
+    locked = nextLocked;
+
+    if (locked) {
+      var scrollbarSize = (0, _getScrollBarSize.default)();
+      (0, _dynamicCSS.updateCSS)("\nhtml body {\n  overflow-y: hidden;\n  width: calc(100% - ".concat(scrollbarSize, "px);\n}"), UNIQUE_ID);
+    } else {
+      (0, _dynamicCSS.removeCSS)(UNIQUE_ID);
+    }
+  }
+}
+
+function useScrollLocker(lock) {
+  React.useLayoutEffect(function () {
+    if (lock) {
+      lockCount += 1;
+      syncLocker();
+    } else {
+      lockCount -= 1;
+      syncLocker();
+    }
+  }, [lock]);
+  var lockRef = React.useRef(lock);
+  lockRef.current = lock;
+  React.useLayoutEffect(function () {
+    return function () {
+      if (lockRef.current) {
+        lockCount -= 1;
+        syncLocker();
+      }
+    };
+  }, []);
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@rc-component/portal",
+  "version": "1.0.0-0",
+  "description": "React Portal Component",
+  "keywords": [
+    "react",
+    "react-component",
+    "react-portal"
+  ],
+  "homepage": "https://github.com/react-component/portal",
+  "bugs": {
+    "url": "https://github.com/react-component/portal/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-component/portal.git"
+  },
+  "license": "MIT",
+  "author": "smith3816@gmail.com",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "typings": "es/index.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "dist"
+  ],
+  "scripts": {
+    "compile": "father build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "lint": "eslint src/ --ext .tsx,.ts",
+    "lint:tsc": "tsc -p tsconfig.json --noEmit",
+    "now-build": "npm run docs:build",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "start": "dumi dev",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "watch": "father dev"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.18.0",
+    "rc-util": "^5.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.0",
+    "@types/jest": "^26.0.20",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/fabric": "^2.5.2",
+    "dumi": "^1.1.0",
+    "eslint": "^7.18.0",
+    "father": "^4.0.0-rc.8",
+    "gh-pages": "^3.1.0",
+    "np": "^5.0.3",
+    "prettier": "^2.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^4.6.3",
+    "umi-test": "^1.9.7"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "engines": {
+    "node": ">=8.x"
+  }
+}