Skip to content

Commit 997b1ab

Browse files
QiuShuiBaiQiuShuiBai
committed
chore: 1.4.10-beta.2
1 parent 4b99a83 commit 997b1ab

File tree

9 files changed

+108
-9
lines changed

9 files changed

+108
-9
lines changed

‎packages/mpx-cube-ui/lib/components/button/button.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,13 @@ createComponent({
221221
return res;
222222
}
223223
return {};
224+
},
225+
hiddenStyle() {
226+
// RN 端使用 opacity 控制显示隐藏
227+
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
228+
return this.loading ? { opacity: 0 } : null;
229+
}
230+
return null;
224231
}
225232
},
226233
methods: {

‎packages/mpx-cube-ui/lib/components/button/index.mpx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,12 @@
3535
size="{{ iconSize }}"
3636
wx:if="{{ icon }}"
3737
type="{{ icon }}"
38+
wx:style="{{ hiddenStyle }}"
3839
/>
39-
<view class="cube-btn-content" numberOfLines="{{ 1 }}" wx:class="{{ contentClass }}" wx:style="{{ styleConfig.content }}">
40+
<view class="cube-btn-content" numberOfLines="{{ 1 }}" wx:class="{{ contentClass }}" wx:style="{{ styleConfig.content, hiddenStyle }}">
4041
<slot />
4142
</view>
42-
<view class="cube-btn-tip" wx:class="{{ tipClass }}" wx:if="{{ tip }}">
43+
<view class="cube-btn-tip" wx:class="{{ tipClass }}" wx:if="{{ tip }}" wx:style="{{ hiddenStyle }}">
4344
<text class="cube-btn-tip-text" numberOfLines="{{ 1 }}">{{tip}}</text>
4445
</view>
4546
<slot name="tip" />

‎packages/mpx-cube-ui/lib/components/button/loading/css.rn.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
left (- $btn-loading-dot-spacing-size - $btn-loading-dot-size)
3535
.cube-loading-origin-after
3636
right (- $btn-loading-dot-spacing-size - $btn-loading-dot-size)
37-
animation-delay ($btn-loading-duration / 2)
37+
// animation-delay ($btn-loading-duration / 2)
3838

3939
.cube-loading-middle-dot
4040
width 100%

‎packages/mpx-cube-ui/lib/components/button/loading/index.mpx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<view class="cube-loading">
33
<view class="cube-loading-content">
4-
<view @_ios|_android|_harmony class="cube-loading-origin-before"></view>
4+
<view @_ios|_android|_harmony class="cube-loading-origin-before" animation="{{ beforeAnim }}"></view>
55
<view class="cube-loading-origin">
6-
<view class="cube-loading-middle-dot"></view>
6+
<view class="cube-loading-middle-dot" animation="{{ middleAnim }}"></view>
77
</view>
8-
<view @_ios|_android|_harmony class="cube-loading-origin-after"></view>
8+
<view @_ios|_android|_harmony class="cube-loading-origin-after" animation="{{ afterAnim }}"></view>
99
</view>
1010
</view>
1111
</template>

‎packages/mpx-cube-ui/lib/components/button/loading/loading.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
import { createComponent } from '../../../common/helper/create-component';
2-
createComponent({});
1+
import { createComponent } from '@mpxjs/core';
2+
import rnMixin from './rn-mixin';
3+
createComponent({
4+
mixins: [rnMixin]
5+
});

‎packages/mpx-cube-ui/lib/components/button/loading/rn-mixin.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import mpx, { getMixin } from '@mpxjs/core';
2+
let mixin = {};
3+
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
4+
const DURATION = 2000;
5+
const NORMAL_COLOR = '#ccc';
6+
const SECONDARY_COLOR = 'rgba(204, 204, 204, 0.4)';
7+
const ACTIVE_COLOR = '#fff';
8+
mixin = {
9+
data: {
10+
beforeAnim: {},
11+
middleAnim: {},
12+
afterAnim: {}
13+
},
14+
lifetimes: {
15+
ready() {
16+
this.timer = null;
17+
this.count = 0;
18+
this.time = 0;
19+
this.startAnim();
20+
},
21+
detached() {
22+
if (this.timer) {
23+
clearInterval(this.timer);
24+
this.timer = null;
25+
}
26+
}
27+
},
28+
methods: {
29+
startAnim() {
30+
if ((this.count - 1) % 3 === 0 || (this.count - 2) % 3 === 0) {
31+
this.time = 500;
32+
}
33+
else if (this.count !== 0 && this.count % 3 === 0) {
34+
this.time = 1000;
35+
}
36+
this.timer = setTimeout(() => {
37+
if (this.count % 3 === 0) {
38+
this.executeAnim('beforeAnim');
39+
}
40+
else if ((this.count - 1) % 3 === 0) {
41+
this.executeAnim('middleAnim');
42+
}
43+
else if ((this.count - 2) % 3 === 0) {
44+
this.executeAnim('afterAnim');
45+
}
46+
this.startAnim();
47+
}, this.time);
48+
},
49+
executeAnim(animName) {
50+
this.count++;
51+
this[animName] = {};
52+
this.$nextTick(() => {
53+
this[animName] = this.createDotAnimation();
54+
});
55+
},
56+
createDotAnimation() {
57+
const duration = DURATION / 4;
58+
const animation = mpx.createAnimation({
59+
duration: DURATION,
60+
timingFunction: 'linear'
61+
});
62+
animation.scale(1).backgroundColor(NORMAL_COLOR).step({ duration });
63+
animation.scale(1.3).backgroundColor(SECONDARY_COLOR).step({ duration });
64+
animation.scale(1).backgroundColor(ACTIVE_COLOR).step({ duration });
65+
animation.scale(1).backgroundColor(NORMAL_COLOR).step({ duration });
66+
return animation.export();
67+
}
68+
}
69+
};
70+
}
71+
export default getMixin(mixin);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,16 @@
7373
.cube-modal-footer
7474
padding-all($var(modal-footer-padding-top), $var(modal-footer-padding-right), $var(modal-footer-padding-bottom), $var(modal-footer-padding-left))
7575
safe-area-mixin-extra(padding-bottom, bottom, $var(modal-footer-safe-padding), true)
76+
77+
.cube-modal-line
78+
position: absolute
79+
top: 50%
80+
left: 50%
81+
transform: translate(-50%, -50%), rotate(45deg), scale(0.8)
82+
background-color: $var(color-dark-grey)
83+
.cube-modal-line-horizontal
84+
width $var(font-size-lg)
85+
height: 2px
86+
.cube-modal-line-vertical
87+
width: 2px
88+
height $var(font-size-lg)

‎packages/mpx-cube-ui/lib/components/modal/index.mpx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@
3434
bind:tap="onClose"
3535
>
3636
<view class="cube-modal-close-icon">
37+
<!-- 横线 -->
38+
<view @_ios|_android|_harmony class="cube-modal-line cube-modal-line-horizontal"></view>
39+
<!-- 竖线 -->
40+
<view @_ios|_android|_harmony class="cube-modal-line cube-modal-line-vertical"></view>
3741
<cube-icon type="close" theme-type="{{ themeType }}"></cube-icon>
3842
</view>
3943
</view>

‎packages/mpx-cube-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mpxjs/mpx-cube-ui",
3-
"version": "1.4.10-beta.1",
3+
"version": "1.4.10-beta.2",
44
"description": "mpx components library",
55
"author": "xiaolei <xiaolei@didichuxing.com>",
66
"publishConfig": {

0 commit comments

Comments
 (0)