@nutui/nutui-react-taro 3.0.21-cpp → 4.0.0-beta.1

package/dist/cjs/packages/popover/style-jrkf/style.css

@@ -9,21 +9,23 @@
 }
 .nut-popover-arrow {
   position: absolute;
-  width: 8px;
-  height: 4px;
+  width: scale-px(8px);
+  height: scale-px(4px);
 }
 .nut-popover-arrow .nut-icon-ArrowRadius {
   position: absolute;
   color: var(--nutui-popover-content-background-color, #ffffff);
+  width: scale-px(8px);
+  height: scale-px(4px);
 }
 .nut-popover-arrow-top {
-  bottom: -4px;
+  bottom: scale-px(-4px);
 }
 .nut-popover-arrow-bottom {
-  top: -4px;
+  top: scale-px(-4px);
 }
 .nut-popover-arrow-left {
-  right: -6px;
+  right: scale-px(-6px);
   transform-origin: center top;
 }
 .nut-popover-arrow-left.nut-popover-arrow-left {
@@ -31,14 +33,14 @@
   transform: rotate(90deg) translateY(-50%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-top {
-  top: 16px;
-  right: -8px;
+  top: scale-px(16px);
+  right: scale-px(-8px);
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-bottom {
   top: auto;
-  bottom: 16px;
-  right: -8px;
+  bottom: scale-px(16px);
+  right: scale-px(-8px);
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-right {
@@ -46,17 +48,17 @@
 }
 .nut-popover-arrow-right.nut-popover-arrow-right {
   top: 50%;
-  left: -6px;
+  left: scale-px(-6px);
   transform: rotate(-90deg) translateY(-50%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-top {
-  top: 16px;
-  left: -8px;
+  top: scale-px(16px);
+  left: scale-px(-8px);
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-bottom {
-  bottom: 16px;
-  left: -8px;
+  bottom: scale-px(16px);
+  left: scale-px(-8px);
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover .nut-popover-content {
@@ -65,7 +67,7 @@
   border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-s));
   font-size: var(--nutui-popover-font-size, var(--nutui-font-text));
   color: var(--nutui-popover-text-color, var(--nutui-color-text));
-  line-height: 28px;
+  line-height: scale-px(28px);
   /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
@@ -78,12 +80,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid var(--nutui-popover-divider-color, none);
+  border-bottom: scale-px(1px) solid var(--nutui-popover-divider-color, none);
   max-width: var(--nutui-popover-item-width, 160px);
   word-wrap: break-word;
 }
 .nut-popover .nut-popover-content .nut-popover-item:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   border-bottom: none;
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon {
@@ -103,7 +105,7 @@
   margin-right: var(--nutui-spacing-xxs);
 }
 .nut-popover .nut-popover-content .nut-popover-item-name {
-  width: calc(100% - 34px);
+  width: calc(100% - scale-px(34px));
   word-break: keep-all;
   flex: 1;
 }
@@ -127,16 +129,16 @@
   right: 0;
 }
 .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
-  right: 16px;
-  bottom: -3.5px;
+  right: scale-px(16px);
+  bottom: scale-px(-3.5px);
   transform: rotate(180deg) translateX(0%);
 }
 .nut-popover .nut-popover-content-top-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
-  left: 16px;
-  bottom: -3.5px;
+  left: scale-px(16px);
+  bottom: scale-px(-3.5px);
   transform: rotate(180deg) translateX(0%);
 }
 .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
@@ -147,14 +149,14 @@
   right: 0;
 }
 .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
-  right: 16px;
+  right: scale-px(16px);
   transform: translateX(0%);
 }
 .nut-popover .nut-popover-content-bottom-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
-  left: 16px;
+  left: scale-px(16px);
   transform: translateX(0%);
 }
 .nut-popover .nut-popover-content-left-bottom {
@@ -188,7 +190,7 @@
 [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
 .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
   margin-left: 0;
-  margin-right: 4px;
+  margin-right: scale-px(4px);
 }
 [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
 .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
@@ -208,7 +210,7 @@
 [dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
 .nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
   right: auto;
-  left: 16px;
+  left: scale-px(16px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left {
@@ -218,7 +220,7 @@
 [dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
   left: auto;
-  right: 16px;
+  right: scale-px(16px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom,
 .nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
@@ -234,7 +236,7 @@
 [dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
 .nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
   right: auto;
-  left: 16px;
+  left: scale-px(16px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left {
@@ -244,7 +246,7 @@
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
   left: auto;
-  right: 16px;
+  right: scale-px(16px);
 }
 
 .nut-popover-enter-from,
@@ -283,5 +285,5 @@
 
 .nut-popover-content-copy {
   position: absolute;
-  top: -99999px;
+  top: scale-px(-99999px);
 }

package/dist/cjs/packages/popup/popup.js

@@ -19,10 +19,10 @@ var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _taro = require("@tarojs/taro");
 var _reactdom = require("react-dom");
+var _reacttransitiongroup = require("react-transition-group");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
-var _ConfigurableCSSTransition = /*#__PURE__*/ _interop_require_default._(require("../../utils/taro/ConfigurableCSSTransition"));
 var _getrect = require("../../utils/taro/get-rect");
 var _overlay = require("../overlay/overlay");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
@@ -54,71 +54,60 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     },
     onTouchStart: function onTouchStart() {},
     onTouchMove: function onTouchMove() {},
-    onTouchEnd: function onTouchEnd() {},
-    overlayProps: {},
-    animated: true
+    onTouchEnd: function onTouchEnd() {}
 });
 // 默认1000，参看variables
 var _zIndex = 1100;
 var Popup = function Popup(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd, closeAriaLabel = _$_object_spread.closeAriaLabel, overlayProps = _$_object_spread.overlayProps, animated = _$_object_spread.animated;
-    var locale = (0, _configprovider.useConfig)().locale;
-    var transitionDuration = (0, _react.useMemo)(function() {
-        return animated ? Number(duration) : 0;
-    }, [
-        animated,
-        duration
-    ]);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(zIndex || _zIndex), 2), index = _useState[0], setIndex = _useState[1];
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd, closeAriaLabel = _$_object_spread.closeAriaLabel;
+    var innerIndex = zIndex || _zIndex;
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
     var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
     var nodeRef = (0, _uselockscoll.useLockScrollTaro)(innerVisible && lockScroll);
-    var topNodeRef = (0, _react.useRef)(null);
+    var topNodeRef = _react.default.useRef(null);
     var rootRect = (0, _react.useRef)(null);
     var touchStartRef = (0, _react.useRef)(0);
     var touchMoveDistanceRef = (0, _react.useRef)(0);
     var heightRef = (0, _react.useRef)(0);
     var defaultHeightRef = (0, _react.useRef)(0);
     var isTouching = (0, _react.useRef)(false);
+    var locale = (0, _configprovider.useConfig)().locale;
     var classPrefix = 'nut-popup';
-    var transitionName = (0, _react.useMemo)(function() {
-        return transition || "".concat(classPrefix, "-slide-").concat(position);
-    }, [
-        transition,
-        position
-    ]);
-    var overlayStyles = (0, _react.useMemo)(function() {
-        return (0, _object_spread._)({}, overlayStyle);
-    }, [
-        overlayStyle
-    ]);
-    var contentZIndex = (0, _react.useMemo)(function() {
-        return (0, _platform.harmony)() ? index + 1 : index // 解决harmony层级问题
-        ;
-    }, [
-        index
-    ]);
-    var popStyles = (0, _react.useMemo)(function() {
-        return (0, _object_spread._)({
-            zIndex: contentZIndex,
-            minHeight: minHeight
-        }, style);
-    }, [
-        contentZIndex,
-        minHeight,
-        style
-    ]);
-    var popClassName = (0, _react.useMemo)(function() {
-        var _obj;
-        return (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
-    }, [
-        round,
-        position,
-        className
-    ]);
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), popupHeight = _useState3[0], setPopupHeight = _useState3[1];
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), topBottom = _useState4[0], setTopBottom = _useState4[1];
-    var getPopupHeight = (0, _react.useCallback)(function() {
+    var overlayStyles = (0, _object_spread._)({}, overlayStyle);
+    var contentZIndex = (0, _platform.harmony)() ? index + 1 : index // 解决harmony层级问题
+    ;
+    var popStyles = (0, _object_spread._)({
+        zIndex: contentZIndex,
+        minHeight: minHeight
+    }, style);
+    var _obj;
+    var popClassName = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
+    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
+    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), topBottom = _useState5[0], setTopBottom = _useState5[1];
+    var resizeStyles = function resizeStyles() {
+        if (popupHeight !== '') {
+            return {
+                height: popupHeight
+            };
+        }
+    };
+    var open = function open() {
+        if (!innerVisible) {
+            // 当高度改变后，再次打开时，将高度置为初始高度
+            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
+                setPopupHeight((0, _pxtransform.pxTransform)(defaultHeightRef.current));
+            }
+            setInnerVisible(true);
+            setIndex(++innerIndex);
+        }
+        if (destroyOnClose) {
+            setShowChildren(true);
+        }
+        onOpen && onOpen();
+    };
+    var getPopupHeight = function getPopupHeight() {
         return (0, _async_to_generator._)(function() {
             var _nodeRef_current, rect, height;
             return (0, _ts_generator._)(this, function(_state) {
@@ -138,109 +127,48 @@ var Popup = function Popup(props) {
                 }
             });
         })();
-    }, [
-        nodeRef
-    ]);
-    var open = (0, _react.useCallback)(function() {
-        if (!innerVisible) {
-            // 当高度改变后，再次打开时，将高度置为初始高度
-            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
-                setPopupHeight((0, _pxtransform.pxTransform)(defaultHeightRef.current));
-            }
-            setInnerVisible(true);
-            setIndex(function(prev) {
-                return prev + 1;
+    };
+    (0, _react.useEffect)(function() {
+        if (innerVisible && topNodeRef.current && nodeRef.current) {
+            (0, _taro.nextTick)(function() {
+                (0, _taro.nextTick)(function() {
+                    getPopupHeight();
+                });
             });
         }
-        if (destroyOnClose) {
-            setShowChildren(true);
-        }
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     }, [
-        innerVisible,
-        position,
-        resizable,
-        destroyOnClose,
-        onOpen,
-        nodeRef,
-        setInnerVisible,
-        setIndex,
-        setShowChildren
+        innerVisible
     ]);
-    var close = (0, _react.useCallback)(function() {
+    var close = function close() {
         if (innerVisible) {
             setInnerVisible(false);
             if (destroyOnClose) {
                 setTimeout(function() {
                     setShowChildren(false);
-                }, transitionDuration);
+                }, Number(duration));
             }
-            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onClose && onClose();
         }
-    }, [
-        innerVisible,
-        destroyOnClose,
-        transitionDuration,
-        onClose,
-        setInnerVisible,
-        setShowChildren
-    ]);
-    (0, _react.useEffect)(function() {
-        visible ? open() : close();
-    }, [
-        visible,
-        open,
-        close
-    ]);
-    (0, _react.useEffect)(function() {
-        if (innerVisible && topNodeRef.current && nodeRef.current) {
-            (0, _taro.nextTick)(function() {
-                (0, _taro.nextTick)(function() {
-                    getPopupHeight();
-                });
-            });
-        }
-    }, [
-        innerVisible,
-        getPopupHeight,
-        nodeRef
-    ]);
-    var handleOverlayClick = (0, _react.useCallback)(function(e) {
+    };
+    var handleOverlayClick = function handleOverlayClick(e) {
         e.stopPropagation();
         if (closeOnOverlayClick && onOverlayClick(e)) {
             close();
         }
-    }, [
-        closeOnOverlayClick,
-        onOverlayClick,
-        close
-    ]);
-    var handleCloseIconClick = (0, _react.useCallback)(function(e) {
+    };
+    var handleCloseIconClick = function handleCloseIconClick(e) {
         onCloseIconClick(e) && close();
-    }, [
-        onCloseIconClick,
-        close
-    ]);
-    var renderCloseIcon = (0, _react.useCallback)(function() {
-        if (!closeable) return null;
+    };
+    var renderCloseIcon = function renderCloseIcon() {
         var closeClasses = (0, _classnames.default)("".concat(classPrefix, "-title-right"), "".concat(classPrefix, "-title-right-").concat(closeIconPosition));
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, closeable && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: closeClasses,
             onClick: handleCloseIconClick,
             ariaRole: "button",
             ariaLabel: closeAriaLabel || locale.close
-        }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
-            ariaHidden: true
-        }));
-    }, [
-        closeable,
-        closeIconPosition,
-        handleCloseIconClick,
-        closeAriaLabel,
-        locale.close,
-        closeIcon
-    ]);
-    var renderTop = (0, _react.useCallback)(function() {
+        }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null)));
+    };
+    var renderTop = function renderTop() {
         if (!top) return null;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-bottom-top"),
@@ -249,11 +177,8 @@ var Popup = function Popup(props) {
                 bottom: topBottom
             }
         }, top);
-    }, [
-        top,
-        topBottom
-    ]);
-    var renderTitle = (0, _react.useCallback)(function() {
+    };
+    var renderTitle = function renderTitle() {
         if (left || title || description) {
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 className: "".concat(classPrefix, "-title")
@@ -270,15 +195,8 @@ var Popup = function Popup(props) {
         if (closeable) {
             return renderCloseIcon();
         }
-    }, [
-        left,
-        title,
-        description,
-        position,
-        closeable,
-        renderCloseIcon
-    ]);
-    var handleTouchStart = (0, _react.useCallback)(function(event) {
+    };
+    var handleTouchStart = function handleTouchStart(event) {
         return (0, _async_to_generator._)(function() {
             var _nodeRef_current, _rootRect_current, e, rect;
             return (0, _ts_generator._)(this, function(_state) {
@@ -308,13 +226,8 @@ var Popup = function Popup(props) {
                 }
             });
         })();
-    }, [
-        position,
-        resizable,
-        onTouchStart,
-        nodeRef
-    ]);
-    var handleTouchMove = (0, _react.useCallback)(function(event) {
+    };
+    var handleTouchMove = function handleTouchMove(event) {
         if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
         var e = event;
         e.stopPropagation();
@@ -333,42 +246,21 @@ var Popup = function Popup(props) {
             }
         };
         requestAnimationFrame(handleMove);
-    }, [
-        position,
-        resizable,
-        minHeight,
-        onTouchMove,
-        nodeRef
-    ]);
-    var handleTouchEnd = (0, _react.useCallback)(function(event) {
+    };
+    var handleTouchEnd = function handleTouchEnd(event) {
         if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
         var e = event;
         isTouching.current = false;
         var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
         var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
         onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(currentHeight, e);
-    }, [
-        position,
-        resizable,
-        minHeight,
-        onTouchEnd,
-        nodeRef
-    ]);
-    var renderPop = function renderPop() {
-        return /*#__PURE__*/ _react.default.createElement(_ConfigurableCSSTransition.default, {
-            nodeRef: nodeRef,
-            classNames: transitionName,
-            mountOnEnter: true,
-            unmountOnExit: destroyOnClose,
-            timeout: Number(transitionDuration),
-            in: innerVisible,
-            onEntered: afterShow,
-            onExited: afterClose
-        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+    };
+    var renderContent = function renderContent() {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             ref: nodeRef,
-            style: (0, _object_spread._)({}, popStyles, popupHeight ? {
-                height: popupHeight
-            } : {}),
+            style: (0, _object_spread._)((0, _object_spread_props._)((0, _object_spread._)({}, popStyles), {
+                display: innerVisible ? (popStyles === null || popStyles === void 0 ? void 0 : popStyles.display) || 'block' : 'none'
+            }), resizeStyles()),
             className: popClassName,
             onClick: onClick,
             catchMove: lockScroll,
@@ -376,20 +268,43 @@ var Popup = function Popup(props) {
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             onTouchCancel: handleTouchEnd
-        }, renderTop(), renderTitle(), showChildren ? children : null));
+        }, renderTop(), renderTitle(), showChildren ? children : null);
+    };
+    var renderPop = function renderPop() {
+        return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+            nodeRef: nodeRef,
+            classNames: transitionName,
+            mountOnEnter: true,
+            unmountOnExit: destroyOnClose,
+            timeout: duration,
+            in: innerVisible,
+            onEntered: afterShow,
+            onExited: afterClose
+        }, renderContent());
     };
     var renderNode = function renderNode() {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, overlay ? /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, overlay ? /*#__PURE__*/ _react.default.createElement(_index.default, {
             zIndex: index,
             style: overlayStyles,
             className: overlayClassName,
             visible: innerVisible,
             closeOnOverlayClick: closeOnOverlayClick,
             lockScroll: lockScroll,
-            duration: transitionDuration,
+            duration: duration,
             onClick: handleOverlayClick
-        }, overlayProps)) : null, renderPop());
+        }) : null, renderPop());
     };
+    (0, _react.useEffect)(function() {
+        visible ? open() : close();
+    }, [
+        visible
+    ]);
+    (0, _react.useEffect)(function() {
+        setTransitionName(transition || "".concat(classPrefix, "-slide-").concat(position));
+    }, [
+        position,
+        transition
+    ]);
     var resolveContainer = function resolveContainer(getContainer) {
         return (typeof getContainer === 'function' ? getContainer() : getContainer) || document.body;
     };

package/dist/cjs/packages/popup/style/popup.scss

@@ -47,7 +47,9 @@
       position: absolute;
       top: $popup-title-padding;
       right: $popup-title-padding;
-
+      display: flex;
+      align-items: center;
+      justify-content: center;
       z-index: 1;
       width: $popup-icon-size;
       height: $popup-icon-size;
@@ -81,7 +83,7 @@
     right: auto;
     bottom: auto;
     min-height: 10%;
-    max-width: 295px;
+    max-width: scale-px(295px);
     transform: translate(-50%, -50%);
 
     &.nut-popup-round {
@@ -110,7 +112,7 @@
     right: 0;
     left: auto;
     bottom: auto;
-    width: 100px;
+    width: scale-px(100px);
     height: 100%;
 
     &.nut-popup-round {
@@ -123,7 +125,7 @@
     left: 0;
     right: auto;
     bottom: auto;
-    width: 100px;
+    width: scale-px(100px);
     height: 100%;
 
     &.nut-popup-round {