Skip to content

Commit 6027a60

Browse files
rayhomierayhomie
authored
fix: picker closing the mask flicker (#1263)
* fix: picker closing the mask flicker * fix: picker closing the mask flicker * chore: 本地文档站点研发 * feat: 实验性组件深色模式适配
1 parent e9ac3ea commit 6027a60

File tree

11 files changed

+56
-28
lines changed

11 files changed

+56
-28
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"defaultTitle": "PageContainer",
2+
"defaultTitle": "",
33
"titleBarColor": "#ffffff",
44
"transparentTitle": "auto",
55
"usingComponents": {

‎compiled/alipay/src/PageContainer/index.less

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
.@{prefix} {
77
overflow: auto;
8+
color: @COLOR_TEXT_PRIMARY;
89

910
&-safe-top {
1011
padding-top: constant(safe-area-inset-top);
@@ -22,7 +23,8 @@
2223
top: 0;
2324
width: 100%;
2425
height: 100vh;
25-
background: rgba(255, 255, 255, 0.4);
26+
background: @COLOR_BACKGROUND;
27+
opacity: 0.4;
2628
z-index: 3;
2729
}
2830

‎compiled/alipay/src/Popup/index.ts

+19-10
Original file line numberDiff line numberDiff line change
@@ -40,23 +40,32 @@ Component(
4040
},
4141
undefined,
4242
{
43+
async deriveDataFromProps(nextProps) {
44+
const [visible, duration, animation] = getValueFromProps(this, [
45+
'visible',
46+
'duration',
47+
'animation',
48+
]);
49+
const enableAnimation = animation && duration > 0;
50+
51+
if (
52+
nextProps.visible !== visible &&
53+
enableAnimation &&
54+
!nextProps.visible &&
55+
!this.data.closing
56+
) {
57+
this.setData({ closing: true });
58+
}
59+
},
4360
didUpdate(prevProps) {
4461
const [visible, duration, animation] = getValueFromProps(this, [
4562
'visible',
4663
'duration',
4764
'animation',
4865
]);
4966
const enableAnimation = animation && duration > 0;
50-
if (prevProps.visible !== visible) {
51-
if (enableAnimation && !visible) {
52-
setTimeout(() => {
53-
// 这里需要用setTimeout包一下，解决支付宝小程序Picker中导致 targetId not match
54-
this.setData({ closing: true });
55-
});
56-
}
57-
if (!enableAnimation) {
58-
triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
59-
}
67+
if (prevProps.visible !== visible && !enableAnimation) {
68+
triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
6069
}
6170
},
6271
}

‎compiled/alipay/src/Typography/index.less

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
display: flex;
99
align-items: center;
1010
width: fit-content;
11+
color: @COLOR_TEXT_PRIMARY;
1112
.@{tabsPrefix} {
1213
&-text {
1314
line-height: @default-line-height;

‎compiled/wechat/src/Popup/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Component(PopupDefaultProps, {
3333
'visible': function (nextProps) {
3434
var visible = nextProps.visible, duration = nextProps.duration, animation = nextProps.animation;
3535
var enableAnimation = animation && duration > 0;
36-
if (enableAnimation && !visible) {
36+
if (enableAnimation && !visible && !this.data.closing) {
3737
this.setData({ closing: true });
3838
}
3939
if (!enableAnimation) {

‎demo/pages/PageContainer/index.json5

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
/// #if WECHAT
3-
"navigationBarTitleText": "PageContainer",
3+
"navigationBarTitleText": "",
44
/// #endif
55

66
/// #if ALIPAY
7-
"defaultTitle": "PageContainer",
7+
"defaultTitle": "",
88
/// #endif
99

1010
"titleBarColor": "#ffffff",

‎scripts/dev-doc.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
const { fork } = require('child_process');
1+
const { fork,execFile } = require('child_process');
22
const { minidev } = require('minidev');
33

44
(async () => {
5+
execFile('tsx', [`${process.cwd()}/scripts/dev.ts`]);
6+
57
const path = require('path');
68

79
const { devServer } = await minidev.dev({
@@ -22,6 +24,7 @@ const { minidev } = require('minidev');
2224
SERVER: devServer.server,
2325
},
2426
});
27+
2528
});
2629

2730
devServer.on('error', (err) => {

‎src/PageContainer/index.less

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
.@{prefix} {
77
overflow: auto;
8+
color: @COLOR_TEXT_PRIMARY;
89

910
&-safe-top {
1011
padding-top: constant(safe-area-inset-top);
@@ -22,7 +23,8 @@
2223
top: 0;
2324
width: 100%;
2425
height: 100vh;
25-
background: rgba(255, 255, 255, 0.4);
26+
background: @COLOR_BACKGROUND;
27+
opacity: 0.4;
2628
z-index: 3;
2729
}
2830

‎src/Popup/index.ts

+20-11
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,32 @@ Component(
4141
undefined,
4242
{
4343
/// #if ALIPAY
44+
async deriveDataFromProps(nextProps) {
45+
const [visible, duration, animation] = getValueFromProps(this, [
46+
'visible',
47+
'duration',
48+
'animation',
49+
]);
50+
const enableAnimation = animation && duration > 0;
51+
52+
if (
53+
nextProps.visible !== visible &&
54+
enableAnimation &&
55+
!nextProps.visible &&
56+
!this.data.closing
57+
) {
58+
this.setData({ closing: true });
59+
}
60+
},
4461
didUpdate(prevProps) {
4562
const [visible, duration, animation] = getValueFromProps(this, [
4663
'visible',
4764
'duration',
4865
'animation',
4966
]);
5067
const enableAnimation = animation && duration > 0;
51-
if (prevProps.visible !== visible) {
52-
if (enableAnimation && !visible) {
53-
setTimeout(() => {
54-
// 这里需要用setTimeout包一下，解决支付宝小程序Picker中导致 targetId not match
55-
this.setData({ closing: true });
56-
});
57-
}
58-
if (!enableAnimation) {
59-
triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
60-
}
68+
if (prevProps.visible !== visible && !enableAnimation) {
69+
triggerEventOnly(this, visible ? 'afterShow' : 'afterClose');
6170
}
6271
},
6372
/// #endif
@@ -66,7 +75,7 @@ Component(
6675
'visible': function (nextProps) {
6776
const { visible, duration, animation } = nextProps;
6877
const enableAnimation = animation && duration > 0;
69-
if (enableAnimation && !visible) {
78+
if (enableAnimation && !visible && !this.data.closing) {
7079
this.setData({ closing: true });
7180
}
7281
if (!enableAnimation) {

‎src/Typography/index.less

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
display: flex;
99
align-items: center;
1010
width: fit-content;
11+
color: @COLOR_TEXT_PRIMARY;
1112
.@{tabsPrefix} {
1213
&-text {
1314
line-height: @default-line-height;

‎tests/utils.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import esbuild from 'esbuild';
22
import fs from 'fs';
3+
// @ts-ignore
34
import { createInstrumenter } from 'istanbul-lib-instrument';
45
import os from 'os';
56
import path from 'path';

0 commit comments

Comments
 (0)