feat(rn): 支持rn modal 嵌套 popup

Author: QiuShuiBai

packages/mpx-cube-ui/lib/components/popup/css.rn.styl

@@ -9,6 +9,8 @@
   right 0
   top 0
   bottom 0
+.cube-popup_without_portal
+  position relative
 
 .cube-popup-show
   transform: translateX(0)

packages/mpx-cube-ui/lib/components/popup/index.mpx

@@ -48,7 +48,7 @@
       </view>
     </view>
   </block>
-  <root-portal @_ios|_android|_harmony>
+  <root-portal @_ios|_android|_harmony enable="{{ !rootPortalDisable }}">
     <view
       wx:ref="popup"
       external-var-context="{{varContext}}"

packages/mpx-cube-ui/lib/components/popup/popup.js

@@ -39,7 +39,7 @@ createComponent({
             type: String,
             value: ''
         },
-        // 透传样式，可用于样式覆盖。其中 mask.visibleOpacity 用于设置遮罩层显示时透明度
+        // 透传样式，可用于样式覆盖。其中 mask.visibleOpacity 用于设置遮罩层显示时透明度。rootPortal.enable = false 用于rn下套用rn modal 情况
         styleConfig: {
             type: Object,
             value: {}
@@ -77,11 +77,15 @@ createComponent({
             }
             return style;
         },
+        rootPortalDisable() {
+            return this.styleConfig.rootPortal?.enable === false;
+        },
         rootClass() {
             const cls = {
                 'cube-popup_mask': this.mask,
                 'cube-popup_mask_fade_transition': this.maskFadeTransition,
-                'cube-popup_transition': !!this.transitionClass
+                'cube-popup_transition': !!this.transitionClass,
+                'cube-popup_without_portal': this.rootPortalDisable
             };
             if (this.type) {
                 cls[`cube-${this.type}`] = true;

packages/mpx-cube-ui/src/components/popup/css.rn.styl

@@ -9,6 +9,8 @@
   right 0
   top 0
   bottom 0
+.cube-popup_without_portal
+  position relative
 
 .cube-popup-show
   transform: translateX(0)

packages/mpx-cube-ui/src/components/popup/index.mpx

@@ -48,7 +48,7 @@
       </view>
     </view>
   </block>
-  <root-portal @_ios|_android|_harmony>
+  <root-portal @_ios|_android|_harmony enable="{{ !rootPortalDisable }}">
     <view
       wx:ref="popup"
       external-var-context="{{varContext}}"

packages/mpx-cube-ui/src/components/popup/popup.ts

@@ -45,7 +45,7 @@ createComponent({
       type: String,
       value: ''
     },
-    // 透传样式，可用于样式覆盖。其中 mask.visibleOpacity 用于设置遮罩层显示时透明度
+    // 透传样式，可用于样式覆盖。其中 mask.visibleOpacity 用于设置遮罩层显示时透明度。rootPortal.enable = false 用于rn下套用rn modal 情况
     styleConfig: {
       type: Object,
       value: {}
@@ -82,11 +82,15 @@ createComponent({
       }
       return style
     },
+    rootPortalDisable() {
+      return this.styleConfig.rootPortal?.enable === false
+    },
     rootClass() {
       const cls: { [index: string]: boolean } = {
         'cube-popup_mask': this.mask,
         'cube-popup_mask_fade_transition': this.maskFadeTransition,
-        'cube-popup_transition': !!this.transitionClass
+        'cube-popup_transition': !!this.transitionClass,
+        'cube-popup_without_portal': this.rootPortalDisable
       }
       if (this.type) {
         cls[`cube-${this.type}`] = true