Feat fix rn switch

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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>"`;
+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>"`;
 
-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>"`;
+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>"`;
 
-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>"`;
+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

@@ -0,0 +1,18 @@
+@require "../../common/stylus/variable.rn.styl"
+@require "../../common/stylus/theme/components/switch.styl"
+
+.cube-switch
+  position: relative
+  width: $var(switch-width)
+  height: $var(switch-height)
+  background-color: $var(switch-bgc)
+  border-radius: $var(switch-border-radius)
+
+.cube-switch-handle
+  position: absolute
+  top: $var(switch-handle-top)
+  left: $var(switch-handle-left)
+  width: $var(switch-handle-width)
+  height: $var(switch-handle-height)
+  background-color: $var(switch-handle-bgc)
+  border-radius: $var(switch-handle-border-radius)

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

@@ -0,0 +1,25 @@
+@require "../../common/stylus/variable.styl"
+@require "../../common/stylus/theme/components/switch.styl"
+
+.cube-switch
+  position: relative
+  width: $var(switch-width)
+  height: $var(switch-height)
+  background-color: $var(switch-bgc)
+  border-radius: $var(switch-border-radius)
+  transition: $var(switch-transition)
+
+.cube-switch-handle
+  position: absolute
+  top: $var(switch-handle-top)
+  left: $var(switch-handle-left)
+  width: $var(switch-handle-width)
+  height: $var(switch-handle-height)
+  background-color: $var(switch-handle-bgc)
+  border-radius: $var(switch-handle-border-radius)
+  transition: $var(switch-handle-transition)
+
+.cube-switch-on
+  background-color: $var(switch-bgc-on)
+.cube-switch-handle-on
+  left: $var(switch-handle-left-on)

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

@@ -2,39 +2,25 @@
   <view
     wx:class="{{ switchClass }}"
     bindtap="toggleSwitch"
+    animation="{{ switchAnimationData }}"
+    wx:style="{{ swithBGClass }}"
   >
-    <view class="cube-switch-handle" />
+    <view
+      class="cube-switch-handle"
+      wx:class="{{ {'cube-switch-handle-on': isOn }}}"
+      animation="{{ switchHandleAnimationData }}"
+    />
   </view>
 </template>
 
 <script lang="ts" src="./switch.ts"></script>
 
 <style lang="stylus">
-@require "../../common/stylus/helper.styl"
-@require "../../common/stylus/theme/components/switch.styl"
-
-.cube-switch
-  position: relative
-  width: $var(switch-width)
-  height: $var(switch-height)
-  background-color: $var(switch-bgc)
-  border-radius: $var(switch-border-radius)
-  transition: $var(switch-transition)
-
-.cube-switch-handle
-  position: absolute
-  top: $var(switch-handle-top)
-  left: $var(switch-handle-left)
-  width: $var(switch-handle-width)
-  height: $var(switch-handle-height)
-  background-color: $var(switch-handle-bgc)
-  border-radius: $var(switch-handle-border-radius)
-  transition: $var(switch-handle-transition)
-
-.cube-switch-on
-  background-color: $var(switch-bgc-on)
-  .cube-switch-handle
-    left: $var(switch-handle-left-on)
+/* @mpx-if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') */
+@require './css.rn.styl'
+/* @mpx-else */
+@require './css.styl'
+/* @mpx-endif */
 </style>
 
 <script type="application/json">

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

@@ -0,0 +1,66 @@
+import mpx, { getMixin } from '@mpxjs/core'
+
+let mixin = {} as Parameters<typeof getMixin>[0]
+// eslint-disable-next-line
+// @ts-ignore
+if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+  type ANIMATION_PRESET = Record<
+    string,
+    (
+      animationOptions: WechatMiniprogram.AnimationOption,
+    ) => void
+  >
+  mixin = {
+    data: {
+      ANIMATION_PRESET: {} as ANIMATION_PRESET,
+      switchAnimationData: {} as WechatMiniprogram.AnimationExportResult,
+      switchHandleAnimationData: {} as WechatMiniprogram.AnimationExportResult
+    },
+    lifetimes: {
+      created() {
+        this.ANIMATION_PRESET = {
+          'cube-switch-BGC': (animationOptions) => {
+            const animation = this.maskAnimation || (this.maskAnimation = mpx.createAnimation({ ...animationOptions }))
+            if (this.isOn) {
+              const onBGC = this.switchOnGBC || '#FF6435'
+              animation.backgroundColor(onBGC).step()
+            } else {
+              const defaultBGC = this.switchDefaultGBC || '#EAEAEA'
+              animation.backgroundColor(defaultBGC).step()
+            }
+            this.switchAnimationData = animation.export()
+          },
+          'cube-switch-left': (animationOptions) => {
+            const animation = this.maskAnimation || (this.maskAnimation = mpx.createAnimation({ ...animationOptions }))
+            if (this.isOn) {
+              animation.left(18).step()
+            } else {
+              animation.left(2).step()
+            }
+            this.switchHandleAnimationData = animation.export()
+          }
+        }
+        this.$watch(
+          'isOn',
+          (n, o) => {
+            if (!!n === !!o) return
+            this.rnAnimation({
+              duration: 300,
+              timingFunction: 'ease'
+            })
+          },
+          { immediate: true }
+        )
+      }
+    },
+    methods: {
+      async rnAnimation(
+        animationOptions: WechatMiniprogram.StepOption = {}
+      ) {
+        this.ANIMATION_PRESET['cube-switch-on'](animationOptions)
+        this.ANIMATION_PRESET['cube-switch-handle-on'](animationOptions)
+      }
+    }
+  }
+}
+export default getMixin(mixin)

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

@@ -1,6 +1,8 @@
 import { createComponent } from '../../common/helper/create-component'
+import rnMixin from './rn-mixin'
 
 createComponent({
+  mixins: [rnMixin],
   properties: {
     /**
      * @description 开关状态，可直接赋值
@@ -10,6 +12,14 @@ createComponent({
       type: Boolean,
       value: false
     },
+    switchDefaultGBC: {
+      type: String,
+      value: ''
+    },
+    switchOnGBC: {
+      type: String,
+      value: ''
+    },
     /**
      * @description 是否禁用
      * @optional true/false
@@ -29,6 +39,22 @@ createComponent({
         'cube-switch-on': this.isOn,
         [`cube-switch-${this.themeType}`]: this.themeType
       }
+    },
+    swithBGClass() {
+      if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+        return {}
+      }
+      if (this.isOn && this.switchOnGBC) {
+        return {
+          backgroundColor: this.switchOnGBC
+        }
+      } else if (!this.isOn && this.switchDefaultGBC) {
+        return {
+          backgroundColor: this.switchDefaultGBC
+        }
+      } else {
+        return {}
+      }
     }
   },
   watch: {