@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/es/packages/popover/popover.d.ts

@@ -2,69 +2,21 @@ import React, { FunctionComponent } from 'react';
 import { PopupProps } from "../popup/popup";
 import { PopoverTheme, PopoverLocation, PopoverList } from './types';
 export interface PopoverProps extends PopupProps {
-    /**
-    * 选项列表
-    * @default []
-    */
-    list: PopoverList[]
+    list: PopoverList[];
     theme: PopoverTheme | string;
-    /**
-    * 弹出位置，里面具体的参数值可以参考上面的位置自定义例子
-    * @default bottom
-    */
-    location: PopoverLocation | string
-    /**
-    * 是否展示气泡弹出层
-    * @default false
-    */
-    visible: boolean
-    /**
-    * 出现位置的偏移量
-    * @default [0, 12]
-    */
-    offset: string[] | number[]
+    location: PopoverLocation | string;
+    visible: boolean;
+    offset: string[] | number[];
     arrowOffset: number;
-    /**
-    * 自定义目标元素 id
-    * @default -
-    */
-    targetId: string
-    /**
-    * 是否显示小箭头
-    * @default true
-    */
-    showArrow: boolean
-    /**
-    * 是否在点击外部元素后关闭菜单
-    * @default true
-    */
-    closeOnOutsideClick: boolean
-    /**
-    * 是否在点击选项后关闭
-    * @default true
-    */
-    closeOnActionClick: boolean
+    targetId: string;
+    showArrow: boolean;
+    closeOnOutsideClick: boolean;
+    closeOnActionClick: boolean;
     children?: React.ReactNode;
-    /**
-    * 点击切换 popover 展示状态
-    * @default () => {}
-    */
-    onClick: () => void
-    /**
-    * 点击菜单时触发
-    * @default () => {}
-    */
-    onOpen: () => void
-    /**
-    * 关闭菜单时触发
-    * @default () => {}
-    */
-    onClose: () => void
-    /**
-    * 点击选项时触发
-    * @default (item, index) => {}
-    */
-    onSelect: (item: PopoverList, index: number) => void
+    onClick: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+    onSelect: (item: PopoverList, index: number) => void;
 }
 export interface RootPosition {
     width: number;

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

@@ -8,6 +8,8 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import Taro, { createSelectorQuery } from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import { ArrowRadius } from "@nutui/icons-react-taro";
 import Popup from "../popup/index";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
 import { ComponentDefaults } from "../../utils/typings";
@@ -20,7 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     visible: false,
     offset: [
         0,
-        12
+        8
     ],
     arrowOffset: 0,
     targetId: '',
@@ -72,11 +74,11 @@ export var Popover = function(props) {
     }, [
         visible
     ]);
-    var getContentWidth = function() {
+    var getContentWidth = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function() {
             var rect;
             return _ts_generator(this, function(_state) {
-                createSelectorQuery().selectViewport().scrollOffset(function() {
+                createSelectorQuery().selectViewport().scrollOffset(/*#__PURE__*/ function() {
                     var _ref = _async_to_generator(function(res) {
                         var distance;
                         return _ts_generator(this, function(_state) {
@@ -147,15 +149,13 @@ export var Popover = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    var getRectTaro = function() {
+    var getRectTaro = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(targetId) {
             return _ts_generator(this, function(_state) {
                 return [
                     2,
                     new Promise(function(resolve) {
-                        var query = createSelectorQuery();
-                        query.select("#".concat(targetId)) && query.select("#".concat(targetId)).boundingClientRect();
-                        query.exec(function(res) {
+                        createSelectorQuery().select("#".concat(targetId)).boundingClientRect().exec(function(res) {
                             resolve(res[0]);
                         });
                     })
@@ -166,7 +166,7 @@ export var Popover = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    var getPopoverContentW = function() {
+    var getPopoverContentW = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function() {
             var rectContent;
             return _ts_generator(this, function(_state) {
@@ -200,9 +200,7 @@ export var Popover = function(props) {
     var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), _obj), className);
     var popoverArrow = function() {
         var prefixCls = 'nut-popover-arrow';
-        var loca = location;
-        var direction = loca.split('-')[0];
-        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(loca);
+        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(location.split('-')[0], " ").concat(prefixCls, "-").concat(location);
     };
     var getRootPosition = function() {
         var styles = {};
@@ -210,8 +208,6 @@ export var Popover = function(props) {
             styles.visibility = 'hidden';
             return styles;
         }
-        var contentWidth = elWidth;
-        var contentHeight = elHeight;
         var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
@@ -228,10 +224,10 @@ export var Popover = function(props) {
                 'bottom',
                 'top'
             ].includes(direction)) {
-                var h = direction === 'bottom' ? height + cross : -(contentHeight + cross);
+                var h = direction === 'bottom' ? height + cross : -(elHeight + cross);
                 styles.top = "".concat(top + h, "px");
                 if (!skew) {
-                    styles[dir] = "".concat(-(contentWidth - width) / 2 + rootPosition[dir] + parallel, "px");
+                    styles[dir] = "".concat(-(elWidth - width) / 2 + rootPosition[dir] + parallel, "px");
                 }
                 if (skew === 'start') {
                     styles.left = "".concat(left + parallel, "px");
@@ -244,10 +240,10 @@ export var Popover = function(props) {
                 'left',
                 'right'
             ].includes(direction)) {
-                var contentW = direction === 'left' ? -(contentWidth + cross) : width + cross;
+                var contentW = direction === 'left' ? -(elWidth + 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 - elHeight / 2 + height / 2 - 4 + parallel, "px");
                 }
                 if (skew === 'start') {
                     styles.top = "".concat(top + parallel, "px");
@@ -257,11 +253,7 @@ export var Popover = function(props) {
                 }
             }
         }
-        if (elWidth === 0) {
-            styles.visibility = 'hidden';
-        } else {
-            styles.visibility = 'initial';
-        }
+        styles.visibility = elWidth === 0 ? 'hidden' : 'initial';
         return styles;
     };
     var popoverArrowStyle = function() {
@@ -312,7 +304,7 @@ export var Popover = function(props) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, !targetId && /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, !targetId && /*#__PURE__*/ React.createElement(View, {
         className: "nut-popover-wrapper",
         ref: popoverRef,
         onClick: function() {
@@ -325,7 +317,7 @@ export var Popover = function(props) {
             }
         },
         style: style
-    }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ React.createElement("div", {
+    }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ React.createElement(View, {
         className: classes,
         style: getRootPosition()
     }, /*#__PURE__*/ React.createElement(Popup, _object_spread({
@@ -333,14 +325,17 @@ export var Popover = function(props) {
         position: "default",
         overlay: overlay,
         visible: showPopup
-    }, rest), /*#__PURE__*/ React.createElement("div", {
+    }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "nut-popover-content-group",
         ref: popoverContentRef
-    }, showArrow && /*#__PURE__*/ React.createElement("div", {
+    }, showArrow && /*#__PURE__*/ React.createElement(View, {
         className: popoverArrow(),
         style: popoverArrowStyle()
-    }), Array.isArray(children) ? children[1] : '', list.map(function(item, index) {
-        return /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(ArrowRadius, {
+        width: 8,
+        height: 4
+    })), Array.isArray(children) ? children[1] : '', list.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement(View, {
             className: classNames({
                 'nut-popover-menu-item': true,
                 'nut-popover-menu-disabled': item.disabled
@@ -349,18 +344,18 @@ export var Popover = function(props) {
             onClick: function() {
                 return handleSelect(item, index);
             }
-        }, item.icon ? /*#__PURE__*/ React.createElement("div", {
+        }, item.icon && /*#__PURE__*/ React.createElement(View, {
             className: "nut-popover-menu-item-icon"
-        }, item.icon) : null, /*#__PURE__*/ React.createElement("div", {
+        }, item.icon), /*#__PURE__*/ React.createElement(View, {
             className: "nut-popover-menu-item-name"
-        }, item.name), item.action && item.action.icon ? /*#__PURE__*/ React.createElement("div", {
+        }, item.name), item.action && item.action.icon && /*#__PURE__*/ React.createElement(View, {
             className: "nut-popover-menu-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);
             }
-        }, item.action.icon) : null);
-    }))), showPopup && closeOnOutsideClick && /*#__PURE__*/ React.createElement("div", {
+        }, item.action.icon));
+    }))), showPopup && closeOnOutsideClick && /*#__PURE__*/ React.createElement(View, {
         className: "nut-popover-content-bg",
         onClick: clickAway,
         onTouchMove: clickAway

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

@@ -5,114 +5,90 @@
 
   &-arrow {
     position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
+    width: 8px;
+    height: 4px;
+
+    .nut-icon-ArrowRadius {
+      position: absolute;
+      color: $popover-content-background-color;
+    }
 
     &-top {
-      bottom: 0;
-      border-top-color: $popover-border-color;
-      border-bottom-width: 0;
-      margin-bottom: -8px;
+      bottom: -4px;
     }
 
     &-bottom {
-      top: 0px;
-      border-bottom-color: $popover-border-color;
-      border-top-width: 0;
-      margin-top: -8px;
+      top: -4px;
     }
 
     &-left {
-      right: 0px;
-      border-left-color: $popover-border-color;
-      border-right-width: 0;
-      margin-right: -8px;
+      right: -6px;
+      transform-origin: center top;
 
       &.nut-popover-arrow-left {
         top: 50%;
-        transform: translateY(-50%);
+        transform: rotate(90deg) translateY(-50%);
       }
 
       &.nut-popover-arrow-left-start {
         top: 16px;
-        transform: translateY(0%);
+        right: -8px;
+        transform: rotate(90deg) translateY(0%);
       }
 
       &.nut-popover-arrow-left-end {
         bottom: 16px;
-        transform: translateY(0%);
+        right: -8px;
+        transform: rotate(90deg) translateY(0%);
       }
     }
 
     &-right {
-      left: 0px;
-      border-right-color: $popover-border-color;
-      border-left-width: 0;
-      margin-left: -8px;
-
+      transform-origin: center top;
       &.nut-popover-arrow-right {
         top: 50%;
-        transform: translateY(-50%);
+        left: -6px;
+        transform: rotate(-90deg) translateY(-50%);
       }
 
       &.nut-popover-arrow-right-start {
         top: 16px;
-        transform: translateY(0%);
+        left: -8px;
+        transform: rotate(-90deg) translateY(0%);
       }
 
       &.nut-popover-arrow-right-end {
         bottom: 16px;
-        transform: translateY(0%);
+        left: -8px;
+        transform: rotate(-90deg) translateY(0%);
       }
     }
   }
 
   .nut-popover-content {
     position: absolute;
-    background-color: $popover-content-background-color;
+    background: $popover-content-background-color;
     border-radius: $popover-border-radius;
     font-size: $popover-font-size;
-    font-family: PingFangSC;
-    font-weight: normal;
     color: $popover-text-color;
-    box-shadow: 0 2px 12px #3232331f;
+    line-height: 28px;
     max-height: initial;
     overflow-y: initial;
 
-    &-group {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-
     .nut-popover-menu-item {
-      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: $popover-menu-item-padding;
+      padding: 0 $popover-menu-item-padding;
       border-bottom: 1px solid $popover-divider-color;
+      max-width: $popover-menu-item-width;
+      word-wrap: break-word;
 
       &:last-child {
         margin-bottom: 0px;
         border-bottom: none;
       }
 
-      // &:hover:not(:only-child) {
-      //   cursor: pointer;
-      //   color: $popover-hover-text-color;
-      //   background-color: $popover-hover-background-color;
-      // }
-
-      &:hover:nth-of-type(2) {
-        border-radius: 8px 8px 0px 0px;
-      }
-
-      &:hover:last-of-type {
-        border-radius: 0px 0px 8px 8px;
-      }
-
       &-icon {
         display: flex;
         justify-content: center;
@@ -128,9 +104,10 @@
       }
 
       &-name {
-        width: 100%;
+        width: calc(100% - 34px);
         word-break: keep-all;
-        margin: 0 6px 0 4px;
+        margin: 0 8px 0 4px;
+        flex: 1;
       }
 
       &-action-icon {
@@ -141,6 +118,11 @@
         height: 12px;
         font-size: 12px;
         color: $color-text;
+        .nut-icon {
+          width: 12px;
+          height: 12px;
+          font-size: 12px;
+        }
       }
 
       &.nut-popover-menu-disabled {
@@ -156,24 +138,26 @@
     &-top {
       .nut-popover-arrow-top {
         left: 50%;
-        transform: translateX(-50%);
+        transform-origin: center left;
+        transform: rotate(180deg) translateX(-50%);
       }
     }
 
     &-top-end {
+      right: 0;
       .nut-popover-arrow-top-end {
         right: 16px;
-        transform: translateX(0%);
+        bottom: -3.5px;
+        transform: rotate(180deg) translateX(0%);
       }
-      right: 0;
     }
 
     &-top-start {
       left: 0;
-
       .nut-popover-arrow-top-start {
         left: 16px;
-        transform: translateX(0%);
+        bottom: -3.5px;
+        transform: rotate(180deg) translateX(0%);
       }
     }
 
@@ -185,17 +169,15 @@
     }
 
     &-bottom-end {
+      right: 0;
       .nut-popover-arrow-bottom-end {
         right: 16px;
         transform: translateX(0%);
       }
-
-      right: 0;
     }
 
     &-bottom-start {
       left: 0;
-
       .nut-popover-arrow-bottom-start {
         left: 16px;
         transform: translateX(0%);
@@ -225,17 +207,17 @@
   color: $popover-content-background-color;
 
   .nut-popover-arrow {
-    border-bottom-color: $popover-text-color;
+    .nut-icon-ArrowRadius {
+      color: $popover-text-color;
+    }
   }
 
   .nut-popover-content {
     background: $popover-text-color !important;
     color: $popover-content-background-color !important;
     .nut-popover-menu-item {
-      border-bottom-color: $popover-content-background-color;
-      &:hover {
-        color: $popover-content-background-color;
-        background-color: $popover-text-color;
+      &-action-icon {
+        color: rgba(255, 255, 255, 0.8);
       }
     }
   }