@uiw/react-overlay - npm Package Compare versions

Comparing version 4.21.23 to 5.0.0-bate.2.0

cjs/index.d.ts

@@ -16,3 +16,4 @@ /**
 import { IProps } from '@uiw/utils';
-import './style/index.less';
+import { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap } from './style';
+export * from './style';
 export interface OverlayProps extends IProps, Omit<TransitionProps, 'timeout'> {
@@ -36,2 +37,5 @@ timeout?: TransitionProps['timeout'];
 }
+export declare type transProps = 'enterActive' | 'exitActive' | 'done' | undefined;
 export default function Overlay(props: OverlayProps): JSX.Element;
+export { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap };
+//# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -8,2 +8,32 @@ "use strict";
 });
+var _exportNames = {
+  ContainerWrap: true,
+  ContentWrap: true,
+  OverlayWrap: true,
+  BackdropWrap: true
+};
+Object.defineProperty(exports, "BackdropWrap", {
+  enumerable: true,
+  get: function get() {
+    return _style.BackdropWrap;
+  }
+});
+Object.defineProperty(exports, "ContainerWrap", {
+  enumerable: true,
+  get: function get() {
+    return _style.ContainerWrap;
+  }
+});
+Object.defineProperty(exports, "ContentWrap", {
+  enumerable: true,
+  get: function get() {
+    return _style.ContentWrap;
+  }
+});
+Object.defineProperty(exports, "OverlayWrap", {
+  enumerable: true,
+  get: function get() {
+    return _style.OverlayWrap;
+  }
+});
 exports["default"] = Overlay;
@@ -18,2 +48,14 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _utils = require("@uiw/utils");
+var _style = require("./style");
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
 var _jsxRuntime = require("react/jsx-runtime");
@@ -94,7 +136,10 @@ var _excluded = ["className", "style", "isOpen", "prefixCls", "usePortal", "maskClosable", "backdropProps", "portalProps", "hasBackdrop", "unmountOnExit", "timeout", "transitionName", "onOpening", "onOpened", "onClosing", "onClosed", "onClose", "onEnter", "onExiting", "onEntering", "onEntered", "onExit", "children", "dialogProps"];
   }, [visible]);
-  var decoratedChild = (0, _typeof2["default"])(children) === 'object' ? /*#__PURE__*/(0, _react.cloneElement)(children, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dialogProps), {}, {
+  var decoratedChild = (0, _typeof2["default"])(children) === 'object' ? /*#__PURE__*/(0, _react.cloneElement)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ContentWrap, {
+    as: _utils.GetStyledCloneComponent,
+    children: children
+  }), (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dialogProps), {}, {
     style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, children.props.style), dialogProps.style),
     className: [children.props.className, "".concat(prefixCls, "-content")].filter(Boolean).join(' ').trim(),
     tabIndex: 0
-  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dialogProps), {}, {
+  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ContentWrap, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dialogProps), {}, {
     className: "".concat(prefixCls, "-content"),
@@ -132,3 +177,9 @@ children: children
 
-  var TransitionGroupComp = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  var _useState5 = (0, _react.useState)(undefined),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    trans = _useState6[0],
+    transSet = _useState6[1];
+  var TransitionGroupComp = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition
+  // as={CSSTransition}
+  , (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     classNames: transitionName,
@@ -142,2 +193,3 @@ unmountOnExit: unmountOnExit,
     onEntering: function onEntering(isAppearing) {
+      transSet('enterActive');
       onOpening(overlay.current, isAppearing);
@@ -151,2 +203,3 @@ _onEntering(overlay.current);
     onExiting: function onExiting() {
+      transSet('exitActive');
       onClosing(overlay.current);
@@ -156,2 +209,3 @@ _onExiting(overlay.current);
     onExited: function onExited() {
+      transSet('done');
       handleClosed(overlay.current);
@@ -163,11 +217,17 @@ onExit(overlay.current);
     children: function children(status) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.OverlayWrap, {
         style: style,
         ref: overlay,
+        usePortal: usePortal,
+        status: status,
+        isOpen: isOpen,
+        trans: trans,
+        openClass: visible && hasBackdrop && usePortal,
         className: [prefixCls, className, !usePortal ? "".concat(prefixCls, "-inline") : null, isOpen ? "".concat(prefixCls, "-enter-done") : null].filter(Boolean).join(' ').trim(),
-        children: [hasBackdrop && /*#__PURE__*/(0, _react.cloneElement)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}), (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, backdropProps), {}, {
+        children: [hasBackdrop && /*#__PURE__*/(0, _react.cloneElement)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.BackdropWrap, {}), (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, backdropProps), {}, {
+          trans: trans,
           onMouseDown: handleBackdropMouseDown,
           className: ["".concat(prefixCls, "-backdrop"), backdropProps.className].filter(Boolean).join(' ').trim(),
           tabIndex: maskClosable ? 0 : null
-        })), usePortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        })), usePortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ContainerWrap, {
           ref: container,
@@ -193,3 +253,2 @@ onMouseDown: handleBackdropMouseDown,
 }
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

esm/index.d.ts

@@ -16,3 +16,4 @@ /**
 import { IProps } from '@uiw/utils';
-import './style/index.less';
+import { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap } from './style';
+export * from './style';
 export interface OverlayProps extends IProps, Omit<TransitionProps, 'timeout'> {
@@ -36,2 +37,5 @@ timeout?: TransitionProps['timeout'];
 }
+export declare type transProps = 'enterActive' | 'exitActive' | 'done' | undefined;
 export default function Overlay(props: OverlayProps): JSX.Element;
+export { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap };
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -18,6 +18,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import Portal from '@uiw/react-portal';
-import { noop } from '@uiw/utils';
-import "./style/index.css";
+import { GetStyledCloneComponent, noop } from '@uiw/utils';
+import { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap } from './style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export * from './style';
 export default function Overlay(props) {
@@ -73,7 +74,10 @@ var {
   }, [visible]);
-  var decoratedChild = typeof children === 'object' ? /*#__PURE__*/cloneElement(children, _extends({}, dialogProps, {
+  var decoratedChild = typeof children === 'object' ? /*#__PURE__*/cloneElement( /*#__PURE__*/_jsx(ContentWrap, {
+    as: GetStyledCloneComponent,
+    children: children
+  }), _extends({}, dialogProps, {
     style: _extends({}, children.props.style, dialogProps.style),
     className: [children.props.className, prefixCls + "-content"].filter(Boolean).join(' ').trim(),
     tabIndex: 0
-  })) : /*#__PURE__*/_jsx("span", _extends({}, dialogProps, {
+  })) : /*#__PURE__*/_jsx(ContentWrap, _extends({}, dialogProps, {
     className: prefixCls + "-content",
@@ -111,3 +115,6 @@ children: children
 
-  var TransitionGroupComp = /*#__PURE__*/_jsx(CSSTransition, _extends({
+  var [trans, transSet] = useState(undefined);
+  var TransitionGroupComp = /*#__PURE__*/_jsx(CSSTransition
+  // as={CSSTransition}
+  , _extends({
     classNames: transitionName,
@@ -121,2 +128,3 @@ unmountOnExit: unmountOnExit,
     onEntering: isAppearing => {
+      transSet('enterActive');
       onOpening(overlay.current, isAppearing);
@@ -130,2 +138,3 @@ _onEntering(overlay.current);
     onExiting: () => {
+      transSet('exitActive');
       onClosing(overlay.current);
@@ -135,2 +144,3 @@ _onExiting(overlay.current);
     onExited: () => {
+      transSet('done');
       handleClosed(overlay.current);
@@ -142,11 +152,17 @@ onExit(overlay.current);
     children: status => {
-      return /*#__PURE__*/_jsxs("div", {
+      return /*#__PURE__*/_jsxs(OverlayWrap, {
         style: style,
         ref: overlay,
+        usePortal: usePortal,
+        status: status,
+        isOpen: isOpen,
+        trans: trans,
+        openClass: visible && hasBackdrop && usePortal,
         className: [prefixCls, className, !usePortal ? prefixCls + "-inline" : null, isOpen ? prefixCls + "-enter-done" : null].filter(Boolean).join(' ').trim(),
-        children: [hasBackdrop && /*#__PURE__*/cloneElement( /*#__PURE__*/_jsx("div", {}), _extends({}, backdropProps, {
+        children: [hasBackdrop && /*#__PURE__*/cloneElement( /*#__PURE__*/_jsx(BackdropWrap, {}), _extends({}, backdropProps, {
+          trans,
           onMouseDown: handleBackdropMouseDown,
           className: [prefixCls + "-backdrop", backdropProps.className].filter(Boolean).join(' ').trim(),
           tabIndex: maskClosable ? 0 : null
-        })), usePortal ? /*#__PURE__*/_jsx("div", {
+        })), usePortal ? /*#__PURE__*/_jsx(ContainerWrap, {
           ref: container,
@@ -172,2 +188,3 @@ onMouseDown: handleBackdropMouseDown,
 }
+export { ContainerWrap, ContentWrap, OverlayWrap, BackdropWrap };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/react-overlay",
-  "version": "4.21.23",
+  "version": "5.0.0-bate.2.0",
   "description": "Overlay component",
@@ -44,9 +44,10 @@ "author": "Kenny Wong <[e-mail]>",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "styled-components": ">=5.3.5"
   },
   "dependencies": {
-    "@uiw/react-portal": "^4.21.23",
-    "@uiw/utils": "^4.21.23",
-    "react-transition-group": "~4.4.2"
+    "@uiw/react-portal": "^5.0.0-bate.2.0",
+    "@uiw/utils": "^5.0.0-bate.2.0",
+    "react-transition-group": "~4.4.5"
   }
 }

README.md

@@ -18,7 +18,7 @@ Overlay 基础弹出层
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Overlay, Button, Card } from 'uiw';
 
-export default function Demo() {
+function Demo() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -63,2 +63,4 @@ const [hasBackdrop, setHasBackdrop] = React.useState(true);
 }
+
+export default Demo
 ```
@@ -68,7 +70,7 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Overlay, Button, Icon } from 'uiw';
 
-export default function Demo() {
+function Demo() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -134,2 +136,4 @@ return (
 }
+
+export default Demo
 ```
@@ -141,7 +145,7 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&noScroll=true&codeSandbox=true&codePen=true
 import React from 'react';
 import { Overlay, Button, Card } from 'uiw';
 
-export default function Demo() {
+function Demo() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -152,7 +156,7 @@ function toggleOverlay(e) {
   return (
-    <div style={{ position: 'relative', minHeight: 200 }}>
+    <div>
       <Button type="primary" onClick={toggleOverlay}>点击弹出内容</Button>
       <Overlay usePortal={false} isOpen={isOpen} onClose={toggleOverlay}>
         <Card active style={{ width: 500 }} active>
-          <h3 style={{marginTop: 0}}>基础弹出层1</h3>
+          <h3 style={{marginTop: 0}}>基础弹出层</h3>
           <p>Portals 是 react 16 提供的官方解决方案，使得组件可以脱离父组件层级挂载在DOM树的任何位置，我们利用这个方法，可将模态对话框生成到根节点的外面，默认情况生成到跟节点的外面，通过将 usePortal 设置为 false 将对话框生成在父组件层级挂载的DOM树中。</p>
@@ -165,2 +169,4 @@ <Button type="danger" onClick={toggleOverlay}>关闭</Button>
 }
+
+export default Demo
 ```
@@ -174,7 +180,7 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Overlay, Button, Card } from 'uiw';
 
-export default function Demo() {
+function Demo() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -202,2 +208,4 @@ function toggleOverlay(e) {
 }
+
+export default Demo
 ```
@@ -204,0 +212,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95921

increased by34.7%

Number of package files

16

increased by14.29%

Lines of code

951

increased by13.35%

Number of lines in readme file

299

increased by2.75%

Worsened metrics

Dependency count

6

increased by20%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Added@uiw/react-portal@5.0.0-bate-9(transitive)

• + Added@uiw/utils@5.0.0-bate-9(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@uiw/react-portal@4.22.3(transitive)

• - Removed@uiw/utils@4.22.3(transitive)

• Updated@uiw/react-portal@^5.0.0-bate.2.0

• Updated@uiw/utils@^5.0.0-bate.2.0

• Updatedreact-transition-group@~4.4.5