@nutui/nutui-react-taro 3.0.18-cpp.beta.1 → 3.0.19-beta.1

package/dist/cjs/packages/popover/popover.js

@@ -86,93 +86,91 @@ var Popover = function Popover(props) {
     ]);
     var uid = (0, _useuuid.useUuid)();
     var popoverId = "popover-".concat(uid);
-    var getWrapperPosition = /*#__PURE__*/ function() {
-        var _ref = (0, _async_to_generator._)(function() {
+    var getWrapperPosition = function getWrapperPosition() {
+        return (0, _async_to_generator._)(function() {
             return (0, _ts_generator._)(this, function(_state) {
-                (0, _taro.nextTick)(/*#__PURE__*/ (0, _async_to_generator._)(function() {
-                    var rect, _tmp, width, height, right, left, top;
-                    return (0, _ts_generator._)(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                if (!targetId) return [
-                                    3,
-                                    2
-                                ];
-                                return [
-                                    4,
-                                    (0, _getrect.getRectInMultiPlatform)(document.querySelector("#".concat(targetId)), targetId)
-                                ];
-                            case 1:
-                                _tmp = _state.sent();
-                                return [
-                                    3,
-                                    4
-                                ];
-                            case 2:
-                                return [
-                                    4,
-                                    (0, _getrect.getRectInMultiPlatform)(popoverRef.current, popoverId)
-                                ];
-                            case 3:
-                                _tmp = _state.sent();
-                                _state.label = 4;
-                            case 4:
-                                rect = _tmp;
-                                width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
-                                setWrapperPosition({
-                                    width: width,
-                                    height: height,
-                                    left: rtl ? right : left,
-                                    top: top,
-                                    right: rtl ? left : right
-                                });
-                                getPopoverContentW();
-                                return [
-                                    2
-                                ];
-                        }
-                    });
-                }));
+                (0, _taro.nextTick)(function() {
+                    return (0, _async_to_generator._)(function() {
+                        var rect, _tmp, width, height, right, left, top;
+                        return (0, _ts_generator._)(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    if (!targetId) return [
+                                        3,
+                                        2
+                                    ];
+                                    return [
+                                        4,
+                                        (0, _getrect.getRectInMultiPlatform)(document.querySelector("#".concat(targetId)), targetId)
+                                    ];
+                                case 1:
+                                    _tmp = _state.sent();
+                                    return [
+                                        3,
+                                        4
+                                    ];
+                                case 2:
+                                    return [
+                                        4,
+                                        (0, _getrect.getRectInMultiPlatform)(popoverRef.current, popoverId)
+                                    ];
+                                case 3:
+                                    _tmp = _state.sent();
+                                    _state.label = 4;
+                                case 4:
+                                    rect = _tmp;
+                                    width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
+                                    setWrapperPosition({
+                                        width: width,
+                                        height: height,
+                                        left: rtl ? right : left,
+                                        top: top,
+                                        right: rtl ? left : right
+                                    });
+                                    getPopoverContentW();
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    })();
+                });
                 return [
                     2
                 ];
             });
-        });
-        return function getWrapperPosition() {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    var getPopoverContentW = /*#__PURE__*/ function() {
-        var _ref = (0, _async_to_generator._)(function() {
+        })();
+    };
+    var getPopoverContentW = function getPopoverContentW() {
+        return (0, _async_to_generator._)(function() {
             return (0, _ts_generator._)(this, function(_state) {
-                (0, _taro.nextTick)(/*#__PURE__*/ (0, _async_to_generator._)(function() {
-                    var rectContent;
-                    return (0, _ts_generator._)(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                return [
-                                    4,
-                                    (0, _getrect.getRectInMultiPlatform)(popoverContentRef.current)
-                                ];
-                            case 1:
-                                rectContent = _state.sent();
-                                setPopWidth(rectContent.width);
-                                setPopHeight(rectContent.height);
-                                return [
-                                    2
-                                ];
-                        }
-                    });
-                }));
+                (0, _taro.nextTick)(function() {
+                    return (0, _async_to_generator._)(function() {
+                        var rectContent;
+                        return (0, _ts_generator._)(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    return [
+                                        4,
+                                        (0, _getrect.getRectInMultiPlatform)(popoverContentRef.current)
+                                    ];
+                                case 1:
+                                    rectContent = _state.sent();
+                                    setPopWidth(rectContent.width);
+                                    setPopHeight(rectContent.height);
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    })();
+                });
                 return [
                     2
                 ];
             });
-        });
-        return function getPopoverContentW() {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     var clickAway = function clickAway() {
         if (closeOnOutsideClick) {
             onClick === null || onClick === void 0 ? void 0 : onClick();

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

@@ -73,8 +73,10 @@
     font-size: $popover-font-size;
     color: $popover-text-color;
     line-height: 28px;
+    /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
+    /* #endif */
 
     &-group {
       padding: 0 $popover-padding;

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

@@ -66,8 +66,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, 8px);

package/dist/cjs/packages/popover/style/style.harmony.css

@@ -83,8 +83,8 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -145,6 +142,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;
@@ -446,8 +446,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, 8px);

package/dist/cjs/packages/popover/style-jmapp/popover.scss

@@ -73,8 +73,10 @@
     font-size: $popover-font-size;
     color: $popover-text-color;
     line-height: 28px;
+    /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
+    /* #endif */
 
     &-group {
       padding: 0 $popover-padding;

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

@@ -66,8 +66,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-text));
   color: var(--nutui-popover-text-color, var(--nutui-color-text));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, var(--nutui-spacing-xl));

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

@@ -73,8 +73,10 @@
     font-size: $popover-font-size;
     color: $popover-text-color;
     line-height: 28px;
+    /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
+    /* #endif */
 
     &-group {
       padding: 0 $popover-padding;

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

@@ -66,8 +66,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-text));
   color: var(--nutui-popover-text-color, var(--nutui-color-text));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, var(--nutui-spacing-xl));

package/dist/cjs/packages/popup/popup.d.ts

@@ -1,3 +1,3 @@
 import React, { FunctionComponent } from 'react';
 import { TaroPopupProps } from "../../types";
-export declare const Popup: FunctionComponent<Partial<TaroPopupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title'>>;
+export declare const Popup: FunctionComponent<Partial<TaroPopupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title' | 'onTouchStart' | 'onTouchMove' | 'onTouchEnd'>>;

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

@@ -10,19 +10,25 @@ Object.defineProperty(exports, "Popup", {
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+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 _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
+var _getrect = require("../../utils/taro/get-rect");
 var _overlay = require("../overlay/overlay");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
 var _uselockscoll = require("../../hooks/taro/use-lock-scoll");
 var _platform = require("../../utils/taro/platform");
+var _pxtransform = require("../../utils/taro/px-transform");
+var _configprovider = require("../configprovider/configprovider");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps), {
     position: 'center',
     transition: '',
@@ -35,6 +41,8 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     portal: null,
     overlay: true,
     round: false,
+    resizable: false,
+    minHeight: '',
     onOpen: function onOpen() {},
     onClose: function onClose() {},
     onOverlayClick: function onOverlayClick() {
@@ -42,29 +50,54 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     },
     onCloseIconClick: function onCloseIconClick() {
         return true;
-    }
+    },
+    onTouchStart: function onTouchStart() {},
+    onTouchMove: function onTouchMove() {},
+    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, 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, 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;
+    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 refObject = (0, _uselockscoll.useLockScrollTaro)(innerVisible && lockScroll);
+    var nodeRef = (0, _uselockscoll.useLockScrollTaro)(innerVisible && lockScroll);
+    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 overlayStyles = (0, _object_spread._)({}, overlayStyle);
     var contentZIndex = (0, _platform.harmony)() ? index + 1 : index // 解决harmony层级问题
     ;
     var popStyles = (0, _object_spread._)({
-        zIndex: contentZIndex
+        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);
         }
@@ -73,6 +106,38 @@ var Popup = function Popup(props) {
         }
         onOpen && onOpen();
     };
+    var getPopupHeight = function getPopupHeight() {
+        return (0, _async_to_generator._)(function() {
+            var _nodeRef_current, rect, height;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            (0, _getrect.getRectInMultiPlatformWithoutCache)(nodeRef.current)
+                        ];
+                    case 1:
+                        rect = _state.sent();
+                        height = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || (rect === null || rect === void 0 ? void 0 : rect.height);
+                        setTopBottom((0, _pxtransform.pxTransform)(height));
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    (0, _react.useEffect)(function() {
+        if (innerVisible && topNodeRef.current && nodeRef.current) {
+            (0, _taro.nextTick)(function() {
+                (0, _taro.nextTick)(function() {
+                    getPopupHeight();
+                });
+            });
+        }
+    }, [
+        innerVisible
+    ]);
     var close = function close() {
         if (innerVisible) {
             setInnerVisible(false);
@@ -97,9 +162,21 @@ var Popup = function Popup(props) {
         var closeClasses = (0, _classnames.default)("".concat(classPrefix, "-title-right"), "".concat(classPrefix, "-title-right-").concat(closeIconPosition));
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, closeable && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: closeClasses,
-            onClick: handleCloseIconClick
+            onClick: handleCloseIconClick,
+            ariaRole: "button",
+            ariaLabel: closeAriaLabel || locale.close
         }, /*#__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"),
+            ref: topNodeRef,
+            style: {
+                bottom: topBottom
+            }
+        }, top);
+    };
     var renderTitle = function renderTitle() {
         if (left || title || description) {
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
@@ -118,19 +195,84 @@ var Popup = function Popup(props) {
             return renderCloseIcon();
         }
     };
+    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) {
+                switch(_state.label){
+                    case 0:
+                        if (position !== 'bottom' || !resizable || !nodeRef.current) return [
+                            2
+                        ];
+                        e = event;
+                        // 开始touch，记录下touch的pageY，用以判断是向上滑动还是向下滑动
+                        touchStartRef.current = e.touches[0].pageY;
+                        // 标记开始滑动
+                        isTouching.current = true;
+                        return [
+                            4,
+                            (0, _getrect.getRectInMultiPlatformWithoutCache)(nodeRef.current)
+                        ];
+                    case 1:
+                        rect = _state.sent();
+                        rootRect.current = rect;
+                        heightRef.current = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || ((_rootRect_current = rootRect.current) === null || _rootRect_current === void 0 ? void 0 : _rootRect_current.height) || 0;
+                        if (!defaultHeightRef.current) defaultHeightRef.current = heightRef.current;
+                        onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(heightRef.current, e);
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    var handleTouchMove = function handleTouchMove(event) {
+        if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
+        var e = event;
+        e.stopPropagation();
+        // 计算位移：move过程中，当前的pageY 与 start值比较
+        touchMoveDistanceRef.current = e.touches[0].pageY - touchStartRef.current;
+        var handleMove = function handleMove() {
+            var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+            var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+            setPopupHeight((0, _pxtransform.pxTransform)(currentHeight));
+            if (touchMoveDistanceRef.current > 0 && isTouching.current) {
+                // 向下滑动
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, e, 'down');
+            } else {
+                // 向上滑动
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, e, 'up');
+            }
+        };
+        requestAnimationFrame(handleMove);
+    };
+    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);
+    };
     var renderPop = function renderPop() {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            ref: refObject,
-            style: (0, _object_spread_props._)((0, _object_spread._)({}, popStyles), {
+            ref: nodeRef,
+            style: (0, _object_spread._)((0, _object_spread_props._)((0, _object_spread._)({}, popStyles), {
                 display: innerVisible ? 'block' : 'none'
-            }),
+            }), resizeStyles()),
             className: popClassName,
             onClick: onClick,
-            catchMove: lockScroll
-        }, renderTitle(), showChildren ? children : null);
+            catchMove: lockScroll,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchEnd
+        }, renderTop(), renderTitle(), showChildren ? children : null);
+    };
+    // const renderPop = () => {
     // return (
     //   <CSSTransition
-    //     nodeRef={refObject}
+    //     nodeRef={nodeRef}
     //     classNames={transitionName}
     //     mountOnEnter
     //     unmountOnExit={destroyOnClose}
@@ -139,19 +281,10 @@ var Popup = function Popup(props) {
     //     onEntered={afterShow}
     //     onExited={afterClose}
     //   >
-    //     <View
-    //       ref={refObject}
-    //       style={popStyles}
-    //       className={popClassName}
-    //       onClick={onClick}
-    //       catchMove={lockScroll}
-    //     >
-    //       {renderTitle()}
-    //       {showChildren ? children : null}
-    //     </View>
+    //     {renderContent()}
     //   </CSSTransition>
     // )
-    };
+    // }
     var renderNode = function renderNode() {
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, overlay ? /*#__PURE__*/ _react.default.createElement(_index.default, {
             zIndex: index,

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

@@ -88,11 +88,6 @@
     }
   }
 
-  &-bottom,
-  &-top {
-    max-height: 87%;
-  }
-
   &-bottom {
     bottom: 0;
     left: 0;
@@ -101,6 +96,10 @@
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;
     }
+
+    &-top {
+      position: absolute;
+    }
   }
 
   &-right {

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

@@ -29,8 +29,8 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -80,9 +80,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -91,6 +88,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;

package/dist/cjs/packages/popup/style/style.harmony.css

@@ -83,8 +83,8 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -145,6 +142,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;