Skip to content

Commit 81f2bb6

Browse files
QiuShuiBaiQiuShuiBai
committed
Revert "fix: 删除switch 更新"
This reverts commit 32c4fff.
1 parent 45006c3 commit 81f2bb6

6 files changed

Lines changed: 150 additions & 29 deletions

File tree

‎packages/mpx-cube-ui/__tests__/components/switch/__snapshots__/switch.spec.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`component switch unit test correct render check matchSnapshot 1`] = `"<wx-view class=\\"main--cube-switch\\"><wx-view class=\\"main--cube-switch-handle\\"></wx-view></wx-view>"`;
3+
exports[`component switch unit test correct render check matchSnapshot 1`] = `"<wx-view style=\\"\\" class=\\"main--cube-switch\\"><wx-view class=\\"main--cube-switch-handle\\"></wx-view></wx-view>"`;
44
5-
exports[`component switch unit test disabled check matchSnapshot 1`] = `"<wx-view class=\\"main--cube-switch\\"><wx-view class=\\"main--cube-switch-handle\\"></wx-view></wx-view>"`;
5+
exports[`component switch unit test disabled check matchSnapshot 1`] = `"<wx-view style=\\"\\" class=\\"main--cube-switch\\"><wx-view class=\\"main--cube-switch-handle\\"></wx-view></wx-view>"`;
66
7-
exports[`component switch unit test wx:model check matchSnapshot 1`] = `"<wx-view class=\\"main--switch-default-checked-demo\\"><wx-text>默认值：false</wx-text><cube-switch class=\\"main--cube-switch\\" data-eventconfigs=\\"[object Object]\\"><wx-view class=\\"cube-switch--cube-switch\\"><wx-view class=\\"cube-switch--cube-switch-handle\\"></wx-view></wx-view></cube-switch></wx-view>"`;
7+
exports[`component switch unit test wx:model check matchSnapshot 1`] = `"<wx-view class=\\"main--switch-default-checked-demo\\"><wx-text>默认值：false</wx-text><cube-switch class=\\"main--cube-switch\\" data-eventconfigs=\\"[object Object]\\"><wx-view style=\\"\\" class=\\"cube-switch--cube-switch\\"><wx-view class=\\"cube-switch--cube-switch-handle\\"></wx-view></wx-view></cube-switch></wx-view>"`;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@require "../../common/stylus/variable.rn.styl"
2+
@require "../../common/stylus/theme/components/switch.styl"
3+
4+
.cube-switch
5+
position: relative
6+
width: $var(switch-width)
7+
height: $var(switch-height)
8+
background-color: $var(switch-bgc)
9+
border-radius: $var(switch-border-radius)
10+
11+
.cube-switch-handle
12+
position: absolute
13+
top: $var(switch-handle-top)
14+
left: $var(switch-handle-left)
15+
width: $var(switch-handle-width)
16+
height: $var(switch-handle-height)
17+
background-color: $var(switch-handle-bgc)
18+
border-radius: $var(switch-handle-border-radius)

‎packages/mpx-cube-ui/src/components/switch/css.styl‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@require "../../common/stylus/variable.styl"
2+
@require "../../common/stylus/theme/components/switch.styl"
3+
4+
.cube-switch
5+
position: relative
6+
width: $var(switch-width)
7+
height: $var(switch-height)
8+
background-color: $var(switch-bgc)
9+
border-radius: $var(switch-border-radius)
10+
transition: $var(switch-transition)
11+
12+
.cube-switch-handle
13+
position: absolute
14+
top: $var(switch-handle-top)
15+
left: $var(switch-handle-left)
16+
width: $var(switch-handle-width)
17+
height: $var(switch-handle-height)
18+
background-color: $var(switch-handle-bgc)
19+
border-radius: $var(switch-handle-border-radius)
20+
transition: $var(switch-handle-transition)
21+
22+
.cube-switch-on
23+
background-color: $var(switch-bgc-on)
24+
.cube-switch-handle-on
25+
left: $var(switch-handle-left-on)

‎packages/mpx-cube-ui/src/components/switch/index.mpx‎

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,25 @@
22
<view
33
wx:class="{{ switchClass }}"
44
bindtap="toggleSwitch"
5+
animation="{{ switchAnimationData }}"
6+
wx:style="{{ swithBGClass }}"
57
>
6-
<view class="cube-switch-handle" />
8+
<view
9+
class="cube-switch-handle"
10+
wx:class="{{ {'cube-switch-handle-on': isOn }}}"
11+
animation="{{ switchHandleAnimationData }}"
12+
/>
713
</view>
814
</template>
915

1016
<script lang="ts" src="./switch.ts"></script>
1117

1218
<style lang="stylus">
13-
@require "../../common/stylus/helper.styl"
14-
@require "../../common/stylus/theme/components/switch.styl"
15-
16-
.cube-switch
17-
position: relative
18-
width: $var(switch-width)
19-
height: $var(switch-height)
20-
background-color: $var(switch-bgc)
21-
border-radius: $var(switch-border-radius)
22-
transition: $var(switch-transition)
23-
24-
.cube-switch-handle
25-
position: absolute
26-
top: $var(switch-handle-top)
27-
left: $var(switch-handle-left)
28-
width: $var(switch-handle-width)
29-
height: $var(switch-handle-height)
30-
background-color: $var(switch-handle-bgc)
31-
border-radius: $var(switch-handle-border-radius)
32-
transition: $var(switch-handle-transition)
33-
34-
.cube-switch-on
35-
background-color: $var(switch-bgc-on)
36-
.cube-switch-handle
37-
left: $var(switch-handle-left-on)
19+
/* @mpx-if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') */
20+
@require './css.rn.styl'
21+
/* @mpx-else */
22+
@require './css.styl'
23+
/* @mpx-endif */
3824
</style>
3925

4026
<script type="application/json">

‎packages/mpx-cube-ui/src/components/switch/rn-mixin.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import mpx, { getMixin } from '@mpxjs/core'
2+
3+
let mixin = {} as Parameters<typeof getMixin>[0]
4+
// eslint-disable-next-line
5+
// @ts-ignore
6+
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
7+
type ANIMATION_PRESET = Record<
8+
string,
9+
(
10+
animationOptions: WechatMiniprogram.AnimationOption,
11+
) => void
12+
>
13+
mixin = {
14+
data: {
15+
ANIMATION_PRESET: {} as ANIMATION_PRESET,
16+
switchAnimationData: {} as WechatMiniprogram.AnimationExportResult,
17+
switchHandleAnimationData: {} as WechatMiniprogram.AnimationExportResult
18+
},
19+
lifetimes: {
20+
created() {
21+
this.ANIMATION_PRESET = {
22+
'cube-switch-BGC': (animationOptions) => {
23+
const animation = this.maskAnimation || (this.maskAnimation = mpx.createAnimation({ ...animationOptions }))
24+
if (this.isOn) {
25+
const onBGC = this.switchOnGBC || '#FF6435'
26+
animation.backgroundColor(onBGC).step()
27+
} else {
28+
const defaultBGC = this.switchDefaultGBC || '#EAEAEA'
29+
animation.backgroundColor(defaultBGC).step()
30+
}
31+
this.switchAnimationData = animation.export()
32+
},
33+
'cube-switch-left': (animationOptions) => {
34+
const animation = this.maskAnimation || (this.maskAnimation = mpx.createAnimation({ ...animationOptions }))
35+
if (this.isOn) {
36+
animation.left(18).step()
37+
} else {
38+
animation.left(2).step()
39+
}
40+
this.switchHandleAnimationData = animation.export()
41+
}
42+
}
43+
this.$watch(
44+
'isOn',
45+
(n, o) => {
46+
if (!!n === !!o) return
47+
this.rnAnimation({
48+
duration: 300,
49+
timingFunction: 'ease'
50+
})
51+
},
52+
{ immediate: true }
53+
)
54+
}
55+
},
56+
methods: {
57+
async rnAnimation(
58+
animationOptions: WechatMiniprogram.StepOption = {}
59+
) {
60+
this.ANIMATION_PRESET['cube-switch-BGC'](animationOptions)
61+
this.ANIMATION_PRESET['cube-switch-left'](animationOptions)
62+
}
63+
}
64+
}
65+
}
66+
export default getMixin(mixin)

‎packages/mpx-cube-ui/src/components/switch/switch.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { createComponent } from '../../common/helper/create-component'
2+
import rnMixin from './rn-mixin'
23

34
createComponent({
5+
mixins: [rnMixin],
46
properties: {
57
/**
68
* @description 开关状态，可直接赋值
@@ -10,6 +12,14 @@ createComponent({
1012
type: Boolean,
1113
value: false
1214
},
15+
switchDefaultGBC: {
16+
type: String,
17+
value: ''
18+
},
19+
switchOnGBC: {
20+
type: String,
21+
value: ''
22+
},
1323
/**
1424
* @description 是否禁用
1525
* @optional true/false
@@ -29,6 +39,22 @@ createComponent({
2939
'cube-switch-on': this.isOn,
3040
[`cube-switch-${this.themeType}`]: this.themeType
3141
}
42+
},
43+
swithBGClass() {
44+
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
45+
return {}
46+
}
47+
if (this.isOn && this.switchOnGBC) {
48+
return {
49+
backgroundColor: this.switchOnGBC
50+
}
51+
} else if (!this.isOn && this.switchDefaultGBC) {
52+
return {
53+
backgroundColor: this.switchDefaultGBC
54+
}
55+
} else {
56+
return {}
57+
}
3258
}
3359
},
3460
watch: {

0 commit comments

Comments
 (0)