fix: picker closing the mask flicker (#1263)

* fix: picker closing the mask flicker

* fix: picker closing the mask flicker

* chore: 本地文档站点研发

* feat: 实验性组件深色模式适配

compiled/alipay/demo/pages/PageContainer/index.json

@@ -1,5 +1,5 @@
 {
-  "defaultTitle": "PageContainer",
+  "defaultTitle": "",
   "titleBarColor": "#ffffff",
   "transparentTitle": "auto",
   "usingComponents": {

compiled/alipay/src/PageContainer/index.less

@@ -5,6 +5,7 @@
 
 .@{prefix} {
   overflow: auto;
+  color: @COLOR_TEXT_PRIMARY;
 
   &-safe-top {
     padding-top: constant(safe-area-inset-top);
@@ -22,7 +23,8 @@
     top: 0;
     width: 100%;
     height: 100vh;
-    background: rgba(255, 255, 255, 0.4);
+    background: @COLOR_BACKGROUND;
+    opacity: 0.4;
     z-index: 3;
   }
 

compiled/alipay/src/Popup/index.ts

@@ -40,6 +40,23 @@ Component(
   },
   undefined,
   {
+    async deriveDataFromProps(nextProps) {
+      const [visible, duration, animation] = getValueFromProps(this, [
+        'visible',
+        'duration',
+        'animation',
+      ]);
+      const enableAnimation = animation && duration > 0;
+
+      if (
+        nextProps.visible !== visible &&
+        enableAnimation &&
+        !nextProps.visible &&
+        !this.data.closing
+      ) {
+        this.setData({ closing: true });
+      }
+    },
     didUpdate(prevProps) {
       const [visible, duration, animation] = getValueFromProps(this, [
         'visible',
@@ -47,16 +64,8 @@ Component(
         'animation',
       ]);
       const enableAnimation = animation && duration > 0;
-      if (prevProps.visible !== visible) {
-        if (enableAnimation && !visible) {
-          setTimeout(() => {
-            // 这里需要用setTimeout包一下，解决支付宝小程序Picker中导致 targetId not match
-            this.setData({ closing: true });
-          });
-        }
-        if (!enableAnimation) {
-          triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
-        }
+      if (prevProps.visible !== visible && !enableAnimation) {
+        triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
       }
     },
   }

compiled/alipay/src/Typography/index.less

@@ -8,6 +8,7 @@
     display: flex;
     align-items: center;
     width: fit-content;
+    color: @COLOR_TEXT_PRIMARY;
     .@{tabsPrefix} {
       &-text {
         line-height: @default-line-height;

compiled/wechat/src/Popup/index.js

@@ -33,7 +33,7 @@ Component(PopupDefaultProps, {
         'visible': function (nextProps) {
             var visible = nextProps.visible, duration = nextProps.duration, animation = nextProps.animation;
             var enableAnimation = animation && duration > 0;
-            if (enableAnimation && !visible) {
+            if (enableAnimation && !visible && !this.data.closing) {
                 this.setData({ closing: true });
             }
             if (!enableAnimation) {

demo/pages/PageContainer/index.json5

@@ -1,10 +1,10 @@
 {
   /// #if WECHAT
-  "navigationBarTitleText": "PageContainer",
+  "navigationBarTitleText": "",
   /// #endif
 
   /// #if ALIPAY
-  "defaultTitle": "PageContainer",
+  "defaultTitle": "",
   /// #endif
 
   "titleBarColor": "#ffffff",

scripts/dev-doc.js

@@ -1,7 +1,9 @@
-const { fork } = require('child_process');
+const { fork,execFile } = require('child_process');
 const { minidev } = require('minidev');
 
 (async () => {
+  execFile('tsx', [`${process.cwd()}/scripts/dev.ts`]);
+
   const path = require('path');
 
   const { devServer } = await minidev.dev({
@@ -22,6 +24,7 @@ const { minidev } = require('minidev');
         SERVER: devServer.server,
       },
     });
+
   });
 
   devServer.on('error', (err) => {

src/PageContainer/index.less

@@ -5,6 +5,7 @@
 
 .@{prefix} {
   overflow: auto;
+  color: @COLOR_TEXT_PRIMARY;
 
   &-safe-top {
     padding-top: constant(safe-area-inset-top);
@@ -22,7 +23,8 @@
     top: 0;
     width: 100%;
     height: 100vh;
-    background: rgba(255, 255, 255, 0.4);
+    background: @COLOR_BACKGROUND;
+    opacity: 0.4;
     z-index: 3;
   }
 

src/Popup/index.ts

@@ -41,6 +41,23 @@ Component(
   undefined,
   {
     /// #if ALIPAY
+    async deriveDataFromProps(nextProps) {
+      const [visible, duration, animation] = getValueFromProps(this, [
+        'visible',
+        'duration',
+        'animation',
+      ]);
+      const enableAnimation = animation && duration > 0;
+
+      if (
+        nextProps.visible !== visible &&
+        enableAnimation &&
+        !nextProps.visible &&
+        !this.data.closing
+      ) {
+        this.setData({ closing: true });
+      }
+    },
     didUpdate(prevProps) {
       const [visible, duration, animation] = getValueFromProps(this, [
         'visible',
@@ -48,16 +65,8 @@ Component(
         'animation',
       ]);
       const enableAnimation = animation && duration > 0;
-      if (prevProps.visible !== visible) {
-        if (enableAnimation && !visible) {
-          setTimeout(() => {
-            // 这里需要用setTimeout包一下，解决支付宝小程序Picker中导致 targetId not match
-            this.setData({ closing: true });
-          });
-        }
-        if (!enableAnimation) {
-          triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
-        }
+      if (prevProps.visible !== visible && !enableAnimation) {
+        triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
       }
     },
     /// #endif
@@ -66,7 +75,7 @@ Component(
       'visible': function (nextProps) {
         const { visible, duration, animation } = nextProps;
         const enableAnimation = animation && duration > 0;
-        if (enableAnimation && !visible) {
+        if (enableAnimation && !visible && !this.data.closing) {
           this.setData({ closing: true });
         }
         if (!enableAnimation) {

src/Typography/index.less

@@ -8,6 +8,7 @@
     display: flex;
     align-items: center;
     width: fit-content;
+    color: @COLOR_TEXT_PRIMARY;
     .@{tabsPrefix} {
       &-text {
         line-height: @default-line-height;

tests/utils.ts

@@ -1,5 +1,6 @@
 import esbuild from 'esbuild';
 import fs from 'fs';
+// @ts-ignore
 import { createInstrumenter } from 'istanbul-lib-instrument';
 import os from 'os';
 import path from 'path';