fix: 修复popup层级\崩溃等问题

Author: xiaoyatong

packages/nutui-taro-demo/package.json

@@ -60,7 +60,7 @@
     "@dongdesign/inject-jd-platform-styles": "1.0.4",
     "@jdtaro/plugin-platform-jdhybrid": "0.2.1",
     "@jdtaro/taro-platform-jdharmony": "2.0.70",
-    "@jdtaro/plugin-platform-jdharmony-cpp": "0.1.27",
+    "@jdtaro/plugin-platform-jdharmony-cpp": "0.1.29-beta.0",
     "@nutui/replace-icons": "^1.0.0",
     "@nutui/touch-emulator": "^1.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",

scripts/harmony/clone-jdharmony.js

@@ -15,7 +15,7 @@ const platform = args && args[0] === 'cpp' ? 'jdharmonycpp' : 'jdharmony'
 async function cloneJdHarmony() {
   // 填写coding地址
   const remote = 'git@coding.jd.com:DongDesign/JDHarmony.git'
-  const branch = args && args[0] === 'cpp' ? 'feat_jdharmonycpp' : 'master'
+  const branch = args && args[0] === 'cpp' ? 'chore_0.1.22' : 'master'
   const git = simpleGit({
     baseDir: temp,
   })

src/config.json

@@ -170,7 +170,6 @@
       "name": "布局组件",
       "enName": "layout",
       "packages": [
-        
         {
           "version": "3.0.0",
           "name": "Divider",

src/packages/dialog/dialog.scss

@@ -28,7 +28,6 @@
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border-radius: $dialog-border-radius;
-    z-index: $dialog-z-index;
     animation-duration: 0.3s;
   }
 

src/packages/dialog/dialog.taro.tsx

@@ -17,6 +17,7 @@ import {
 import { useLockScrollTaro } from '@/hooks/use-lock-scoll-taro'
 import { mergeProps } from '@/utils/merge-props'
 import { defaultOverlayProps } from '@/packages/overlay/overlay.taro'
+import { harmony } from '@/utils/platform-taro'
 
 const defaultProps: DialogBasicProps = {
   ...defaultOverlayProps,
@@ -219,6 +220,7 @@ export const BaseDialog: FunctionComponent<Partial<DialogBasicProps>> & {
   }
 
   const renderContent = () => {
+    const contentZIndex = harmony() ? zIndex + 1 : zIndex // 解决harmony层级问题
     return (
       <CSSTransition
         in={visible}
@@ -229,7 +231,7 @@ export const BaseDialog: FunctionComponent<Partial<DialogBasicProps>> & {
       >
         <Content
           className={className}
-          style={{ ...style, zIndex: zIndex + 1 }} // zIndex: zIndex + 1;解决harmony层级问题
+          style={{ zIndex: contentZIndex, ...style }}
           title={title}
           header={header}
           close={renderCloseIcon()}

src/packages/overlay/demos/taro/demo3.tsx

@@ -15,7 +15,6 @@ const Demo3 = () => {
       <Cell>
         <View onClick={handleToggleShow}>设置动画时间</View>
       </Cell>
-
       <Overlay
         visible={visible}
         onClick={onClose}

src/packages/overlay/overlay.scss

@@ -19,11 +19,9 @@
     0% {
       opacity: 0;
     }
-
     1% {
       opacity: 0;
     }
-
     100% {
       opacity: 1;
     }
@@ -33,11 +31,9 @@
     0% {
       opacity: 1;
     }
-
     1% {
       opacity: 1;
     }
-
     100% {
       opacity: 0;
     }

src/packages/overlay/overlay.taro.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames'
 import { View, ITouchEvent } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { useLockScrollTaro } from '@/hooks/use-lock-scoll-taro'
-import { harmony } from '@/utils/platform-taro'
 import { OverlayProps } from './types.taro'
 
 export const defaultOverlayProps: OverlayProps = {
@@ -46,8 +45,8 @@ export const Overlay: FunctionComponent<
 
   const classes = classNames(classPrefix, className)
   const styles = {
-    ...style,
     zIndex,
+    ...style,
   }
 
   const handleClick = (e: ITouchEvent) => {
@@ -70,23 +69,17 @@ export const Overlay: FunctionComponent<
   )
 
   return (
-    <>
-      {!harmony() ? (
-        <CSSTransition
-          nodeRef={nodeRef}
-          classNames={`${classPrefix}-slide`}
-          unmountOnExit
-          timeout={duration}
-          in={innerVisible}
-          onEntered={afterShow}
-          onExited={afterClose}
-        >
-          {renderOverlay()}
-        </CSSTransition>
-      ) : (
-        innerVisible && renderOverlay()
-      )}
-    </>
+    <CSSTransition
+      nodeRef={nodeRef}
+      classNames={`${classPrefix}-slide`}
+      unmountOnExit
+      timeout={duration}
+      in={innerVisible}
+      onEntered={afterShow}
+      onExited={afterClose}
+    >
+      {renderOverlay()}
+    </CSSTransition>
   )
 }
 

src/packages/popup/demos/taro/demo8.tsx

@@ -18,6 +18,9 @@ const Demo8 = () => {
         title="禁止滚动穿透"
         position="bottom"
         lockScroll
+        onClose={() => {
+          setScrollPenetration(false)
+        }}
       >
         <ScrollView scrollY style={{ height: '300px' }}>
           {Array.from({ length: 200 })

src/packages/popup/popup.scss

@@ -143,7 +143,6 @@
         opacity: 0;
         transform: scale(0.8);
       }
-
       to {
         opacity: 1;
         transform: scale(1);
@@ -155,7 +154,6 @@
         opacity: 1;
         transform: scale(1);
       }
-
       to {
         opacity: 0;
         transform: scale(0.8);
@@ -178,7 +176,6 @@
       from {
         opacity: 0;
       }
-
       to {
         opacity: 1;
       }
@@ -188,7 +185,6 @@
       from {
         opacity: 1;
       }
-
       to {
         opacity: 0;
       }
@@ -211,6 +207,9 @@
       from {
         transform: translate3d(0, -100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes popup-slide-top-exit {
@@ -238,6 +237,9 @@
       from {
         transform: translate3d(100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-right-exit {
@@ -265,6 +267,9 @@
       from {
         transform: translate3d(0, 100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes slide-bottom-exit {
@@ -292,6 +297,9 @@
       from {
         transform: translate3d(-100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-left-exit {