@nutui/nutui-react 3.0.5 → 3.0.7

package/dist/es/packages/popover/popover.js

@@ -59,12 +59,12 @@ export var Popover = function(props) {
     var popoverRef = useRef(null);
     var popoverContentRef = useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
-    var _useState1 = _sliced_to_array(useState(), 2), rootPosition = _useState1[0], setRootPosition = _useState1[1];
+    var _useState1 = _sliced_to_array(useState(), 2), wrapperPosition = _useState1[0], setWrapperPosition = _useState1[1];
     useEffect(function() {
         setShowPopup(visible);
         if (visible) {
             setTimeout(function() {
-                getContentWidth();
+                getWrapperPosition();
             }, 0);
         }
     }, [
@@ -72,25 +72,10 @@ export var Popover = function(props) {
         location
     ]);
     var update = useRef(function(e) {
-        getContentWidth();
+        getWrapperPosition();
     });
-    useEffect(function() {
-        if (visible) {
-            scrollableParents.forEach(function(parent) {
-                parent.addEventListener('scroll', update.current, {
-                    passive: true
-                });
-            });
-        } else {
-            scrollableParents.forEach(function(parent) {
-                return parent.removeEventListener('scroll', update.current);
-            });
-        }
-    }, [
-        visible
-    ]);
-    var element = null;
     var targetSet = [];
+    var element = null;
     if (canUseDom && targetId) {
         element = document.querySelector("#".concat(targetId));
         targetSet = [
@@ -103,39 +88,59 @@ export var Popover = function(props) {
             popoverContentRef.current
         ];
     }
-    useClickAway(function() {
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, targetSet, 'touchstart', true, visible, closeOnOutsideClick);
     var scrollableParents = useMemo(function() {
         return getAllScrollableParents(element || popoverRef.current);
     }, [
         element,
         popoverRef.current
     ]);
-    var getContentWidth = function() {
+    useEffect(function() {
+        if (visible) {
+            scrollableParents.forEach(function(parent) {
+                parent.addEventListener('scroll', update.current, {
+                    passive: true
+                });
+            });
+        } else {
+            scrollableParents.forEach(function(parent) {
+                return parent.removeEventListener('scroll', update.current);
+            });
+        }
+    }, [
+        visible
+    ]);
+    useClickAway(function() {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, targetSet, 'touchstart', true, visible, closeOnOutsideClick);
+    var getWrapperPosition = function() {
         var rect = getRect(targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current);
-        setRootPosition({
-            width: rect.width,
-            height: rect.height,
-            left: rtl ? rect.right : rect.left,
-            top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
-            right: rtl ? rect.left : rect.right
+        var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
+        var 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 + distance,
+            right: rtl ? left : right
         });
     };
-    var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), _obj), className);
+    var classes = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
     var popoverArrow = function() {
         var prefixCls = 'nut-popover-arrow';
-        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(location.split('-')[0], " ").concat(prefixCls, "-").concat(location);
+        var direction = location.split('-')[0];
+        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(location);
     };
-    var getRootPosition = function() {
+    var getPopoverPosition = function() {
         var _popoverContentRef_current, _popoverContentRef_current1;
         var styles = {};
-        if (!rootPosition) return {};
-        var contentWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
-        var contentHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
-        var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+        if (!wrapperPosition) {
+            styles.visibility = 'hidden';
+            return styles;
+        }
+        var popWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
+        var popHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
+        var width = wrapperPosition.width, height = wrapperPosition.height, left = wrapperPosition.left, top = wrapperPosition.top, right = wrapperPosition.right;
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
         var cross = 0;
@@ -151,15 +156,15 @@ export var Popover = function(props) {
                 'bottom',
                 'top'
             ].includes(direction)) {
-                var h = direction === 'bottom' ? height + cross : -(contentHeight + cross);
+                var h = direction === 'bottom' ? height + cross : -(popHeight + cross);
                 styles.top = "".concat(top + h, "px");
                 if (!skew) {
-                    styles[dir] = "".concat(-(contentWidth - width) / 2 + rootPosition[dir] + parallel, "px");
+                    styles[dir] = "".concat(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel, "px");
                 }
-                if (skew === 'start') {
+                if (skew === 'left') {
                     styles.left = "".concat(left + parallel, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'right') {
                     styles.left = "".concat(right + parallel, "px");
                 }
             }
@@ -167,22 +172,23 @@ export var Popover = function(props) {
                 'left',
                 'right'
             ].includes(direction)) {
-                var contentW = direction === 'left' ? -(contentWidth + cross) : width + cross;
+                var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
                 styles.left = "".concat(left + contentW, "px");
                 if (!skew) {
-                    styles.top = "".concat(top - contentHeight / 2 + height / 2 - 4 + parallel, "px");
+                    styles.top = "".concat(top - popHeight / 2 + height / 2 - 4 + parallel, "px");
                 }
-                if (skew === 'start') {
+                if (skew === 'top') {
                     styles.top = "".concat(top + parallel, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'bottom') {
                     styles.top = "".concat(top + height + parallel, "px");
                 }
             }
         }
+        styles.visibility = popWidth === 0 ? 'hidden' : 'initial';
         return styles;
     };
-    var arrowStyle = function() {
+    var popoverArrowStyle = function() {
         var styles = {};
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
@@ -197,10 +203,10 @@ export var Popover = function(props) {
                 if (!skew) {
                     styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
                 }
-                if (skew === 'start') {
+                if (skew === 'left') {
                     styles[dir] = "".concat(base + arrowOffset, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'right') {
                     styles[dir2] = "".concat(base - arrowOffset, "px");
                 }
             }
@@ -211,10 +217,10 @@ export var Popover = function(props) {
                 if (!skew) {
                     styles.top = "calc(50% - ".concat(arrowOffset, "px)");
                 }
-                if (skew === 'start') {
+                if (skew === 'top') {
                     styles.top = "".concat(base - arrowOffset, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'bottom') {
                     styles.bottom = "".concat(base + arrowOffset, "px");
                 }
             }
@@ -223,28 +229,28 @@ export var Popover = function(props) {
     };
     var handleSelect = function(item, index) {
         if (!item.disabled) {
-            onSelect && onSelect(item, index);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(item, index);
         }
         if (closeOnActionClick) {
-            onClick && onClick();
-            onClose && onClose();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, !targetId && /*#__PURE__*/ React.createElement("div", {
         className: "nut-popover-wrapper",
         ref: popoverRef,
         onClick: function() {
-            onClick && onClick();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
             if (!visible) {
-                onOpen && onOpen();
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
             } else {
-                onClose && onClose();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         },
         style: style
     }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement("div", {
         className: classes,
-        style: getRootPosition()
+        style: _object_spread({}, getPopoverPosition(), style)
     }, /*#__PURE__*/ React.createElement(Popup, _object_spread({
         className: "nut-popover-content nut-popover-content-".concat(location),
         visible: showPopup,
@@ -256,26 +262,27 @@ export var Popover = function(props) {
         ref: popoverContentRef
     }, showArrow && /*#__PURE__*/ React.createElement("div", {
         className: popoverArrow(),
-        style: arrowStyle()
+        style: popoverArrowStyle()
     }, /*#__PURE__*/ React.createElement(ArrowRadius, {
         width: 8,
         height: 4
     })), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
+        var _item_action;
         return /*#__PURE__*/ React.createElement("div", {
             className: classNames({
-                'nut-popover-menu-item': true,
-                'nut-popover-menu-disabled': item.disabled
+                'nut-popover-item': true,
+                'nut-popover-item-disabled': item.disabled
             }, item.className),
             key: item.key || index,
             onClick: function() {
                 return handleSelect(item, index);
             }
         }, item.icon && /*#__PURE__*/ React.createElement("div", {
-            className: "nut-popover-menu-item-icon"
+            className: "nut-popover-item-icon"
         }, item.icon), /*#__PURE__*/ React.createElement("div", {
-            className: "nut-popover-menu-item-name"
-        }, item.name), item.action && item.action.icon && /*#__PURE__*/ React.createElement("div", {
-            className: "nut-popover-menu-item-action-icon",
+            className: "nut-popover-item-name"
+        }, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-popover-item-action-icon",
             onClick: function(e) {
                 var _item_action_onClick, _item_action;
                 return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e);

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

@@ -30,13 +30,14 @@
         transform: rotate(90deg) translateY(-50%);
       }
 
-      &.nut-popover-arrow-left-start {
+      &.nut-popover-arrow-left-top {
         top: 16px;
         right: -8px;
         transform: rotate(90deg) translateY(0%);
       }
 
-      &.nut-popover-arrow-left-end {
+      &.nut-popover-arrow-left-bottom {
+        top: auto;
         bottom: 16px;
         right: -8px;
         transform: rotate(90deg) translateY(0%);
@@ -51,13 +52,13 @@
         transform: rotate(-90deg) translateY(-50%);
       }
 
-      &.nut-popover-arrow-right-start {
+      &.nut-popover-arrow-right-top {
         top: 16px;
         left: -8px;
         transform: rotate(-90deg) translateY(0%);
       }
 
-      &.nut-popover-arrow-right-end {
+      &.nut-popover-arrow-right-bottom {
         bottom: 16px;
         left: -8px;
         transform: rotate(-90deg) translateY(0%);
@@ -75,13 +76,16 @@
     max-height: initial;
     overflow-y: initial;
 
-    .nut-popover-menu-item {
+    &-group {
+      padding: 0 $popover-padding;
+    }
+
+    .nut-popover-item {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 $popover-menu-item-padding;
       border-bottom: 1px solid $popover-divider-color;
-      max-width: $popover-menu-item-width;
+      max-width: $popover-item-width;
       word-wrap: break-word;
 
       &:last-child {
@@ -89,48 +93,42 @@
         border-bottom: none;
       }
 
-      &-icon {
+      &-icon,
+      &-action-icon {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
+        width: $font-size-s;
+        height: $font-size-s;
+        font-size: $font-size-s;
         .nut-icon {
-          width: 12px;
-          height: 12px;
-          font-size: 12px;
+          width: $font-size-s;
+          height: $font-size-s;
+          font-size: $font-size-s;
         }
       }
 
+      &-icon {
+        margin-right: $spacing-xxs;
+      }
+
       &-name {
         width: calc(100% - 34px);
         word-break: keep-all;
-        margin: 0 8px 0 4px;
         flex: 1;
       }
 
       &-action-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
         color: $color-text;
-        .nut-icon {
-          width: 12px;
-          height: 12px;
-          font-size: 12px;
-        }
+        margin-left: $spacing-base;
       }
 
-      &.nut-popover-menu-disabled {
+      &.nut-popover-item-disabled {
         color: $popover-disable-color;
         cursor: not-allowed;
       }
 
-      &.nut-popover-menu-taroitem {
+      &.nut-popover-taroitem {
         display: flex;
       }
     }
@@ -143,18 +141,18 @@
       }
     }
 
-    &-top-end {
+    &-top-right {
       right: 0;
-      .nut-popover-arrow-top-end {
+      .nut-popover-arrow-top-right {
         right: 16px;
         bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
       }
     }
 
-    &-top-start {
+    &-top-left {
       left: 0;
-      .nut-popover-arrow-top-start {
+      .nut-popover-arrow-top-left {
         left: 16px;
         bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
@@ -168,35 +166,35 @@
       }
     }
 
-    &-bottom-end {
+    &-bottom-right {
       right: 0;
-      .nut-popover-arrow-bottom-end {
+      .nut-popover-arrow-bottom-right {
         right: 16px;
         transform: translateX(0%);
       }
     }
 
-    &-bottom-start {
+    &-bottom-left {
       left: 0;
-      .nut-popover-arrow-bottom-start {
+      .nut-popover-arrow-bottom-left {
         left: 16px;
         transform: translateX(0%);
       }
     }
 
-    &-left-end {
+    &-left-bottom {
       bottom: 0;
     }
 
-    &-left-start {
+    &-left-top {
       top: 0;
     }
 
-    &-right-end {
+    &-right-bottom {
       bottom: 0;
     }
 
-    &-right-start {
+    &-right-top {
       top: 0;
     }
   }
@@ -215,7 +213,7 @@
   .nut-popover-content {
     background: $popover-text-color !important;
     color: $popover-content-background-color !important;
-    .nut-popover-menu-item {
+    .nut-popover-item {
       &-action-icon {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -226,7 +224,7 @@
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
   .nut-popover-content {
-    .nut-popover-menu-item {
+    .nut-popover-item {
       &-name {
         margin-left: 0;
         margin-right: 4px;
@@ -234,7 +232,6 @@
 
       &-action-icon {
         right: auto;
-        left: $popover-menu-item-padding;
       }
     }
     &-top {
@@ -244,21 +241,21 @@
         transform: translateX(50%);
       }
     }
-    &-top-end {
+    &-top-right {
       right: auto;
       left: 0;
 
-      .nut-popover-arrow-top-end {
+      .nut-popover-arrow-top-right {
         right: auto;
         left: 16px;
       }
     }
 
-    &-top-start {
+    &-top-left {
       left: auto;
       right: 0;
 
-      .nut-popover-arrow-top-start {
+      .nut-popover-arrow-top-left {
         left: auto;
         right: 16px;
       }
@@ -271,22 +268,22 @@
         transform: translateX(50%);
       }
     }
-    &-bottom-end {
+    &-bottom-right {
       right: auto;
 
       left: 0;
 
-      .nut-popover-arrow-bottom-end {
+      .nut-popover-arrow-bottom-right {
         right: auto;
         left: 16px;
       }
     }
 
-    &-bottom-start {
+    &-bottom-left {
       left: auto;
       right: 0;
 
-      .nut-popover-arrow-bottom-start {
+      .nut-popover-arrow-bottom-left {
         left: auto;
         right: 16px;
       }