feat(weex): support object syntax of class (#7930)

Author: imyzf

src/platforms/weex/runtime/modules/class.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { extend } from 'shared/util'
+import { extend, isObject } from 'shared/util'
 
 function updateClass (oldVnode: VNodeWithData, vnode: VNodeWithData) {
   const el = vnode.elm
@@ -15,25 +15,8 @@ function updateClass (oldVnode: VNodeWithData, vnode: VNodeWithData) {
     return
   }
 
-  const oldClassList = []
-  // unlike web, weex vnode staticClass is an Array
-  const oldStaticClass: any = oldData.staticClass
-  if (oldStaticClass) {
-    oldClassList.push.apply(oldClassList, oldStaticClass)
-  }
-  if (oldData.class) {
-    oldClassList.push.apply(oldClassList, oldData.class)
-  }
-
-  const classList = []
-  // unlike web, weex vnode staticClass is an Array
-  const staticClass: any = data.staticClass
-  if (staticClass) {
-    classList.push.apply(classList, staticClass)
-  }
-  if (data.class) {
-    classList.push.apply(classList, data.class)
-  }
+  const oldClassList = makeClassList(oldData)
+  const classList = makeClassList(data)
 
   if (typeof el.setClassList === 'function') {
     el.setClassList(classList)
@@ -49,6 +32,22 @@ function updateClass (oldVnode: VNodeWithData, vnode: VNodeWithData) {
   }
 }
 
+function makeClassList (data: VNodeData): Array<string> {
+  const classList = []
+  // unlike web, weex vnode staticClass is an Array
+  const staticClass: any = data.staticClass
+  const dataClass = data.class
+  if (staticClass) {
+    classList.push.apply(classList, staticClass)
+  }
+  if (Array.isArray(dataClass)) {
+    classList.push.apply(classList, dataClass)
+  } else if (isObject(dataClass)) {
+    classList.push.apply(classList, Object.keys(dataClass).filter(className => dataClass[className]))
+  }
+  return classList
+}
+
 function getStyle (oldClassList: Array<string>, classList: Array<string>, ctx: Component): Object {
   // style is a weex-only injected object
   // compiled from <style> tags in weex files

test/weex/cases/cases.spec.js

@@ -54,6 +54,7 @@ function createEventTestCase (name) {
 describe('Usage', () => {
   describe('render', () => {
     it('sample', createRenderTestCase('render/sample'))
+    it('class', createRenderTestCase('render/class'))
   })
 
   describe('event', () => {

test/weex/cases/render/class.vdom.js

@@ -0,0 +1,19 @@
+({
+  type: 'div',
+  children: [{
+    type: 'div',
+    classList: ['box', 'box1']
+  }, {
+    type: 'div',
+    classList: ['box', 'box2']
+  }, {
+    type: 'div',
+    classList: ['box', 'box3']
+  }, {
+    type: 'div',
+    classList: ['box', 'box4']
+  }, {
+    type: 'div',
+    classList: ['box', 'box5']
+  }]
+})

test/weex/cases/render/class.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div :class="class1"></div>
+    <div :class="class2"></div>
+    <div class="box" :class="class3"></div>
+    <div class="box" :class="class4"></div>
+    <div class="box" :class="{ box5: class5 }"></div>
+  </div>
+</template>
+
+<style scoped>
+  .box {
+    width: 100px;
+    height: 100px;
+  }
+
+  .box1 {
+    background-color: #DDD;
+  }
+
+  .box2 {
+    background-color: #CCC;
+  }
+
+  .box3 {
+    background-color: #BBB;
+  }
+
+  .box4 {
+    background-color: #AAA;
+  }
+
+  .box5 {
+    background-color: #999;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data () {
+      return {
+        class1: ['box', 'box1'],
+        class2: {
+          'box': true,
+          'box1': false,
+          'box2': true
+        },
+        class3: ['box3'],
+        class4: {
+          'box4': true
+        },
+        class5: true
+      }
+    }
+  }
+</script>