From 566bcf93961d6c2e0bc0396f8a84799b2579295c Mon Sep 17 00:00:00 2001
From: Zhenfei You <hello@imyzf.com>
Date: Fri, 30 Mar 2018 17:02:55 +0800
Subject: [PATCH 1/2] feat(weex): support object syntax of class

---
 src/platforms/weex/runtime/modules/class.js | 39 ++++++++--------
 test/weex/cases/cases.spec.js               |  1 +
 test/weex/cases/render/class.vdom.js        | 16 +++++++
 test/weex/cases/render/class.vue            | 50 +++++++++++++++++++++
 4 files changed, 86 insertions(+), 20 deletions(-)
 create mode 100644 test/weex/cases/render/class.vdom.js
 create mode 100644 test/weex/cases/render/class.vue

diff --git a/src/platforms/weex/runtime/modules/class.js b/src/platforms/weex/runtime/modules/class.js
index 029b9e9ed2f..47620552346 100755
--- a/src/platforms/weex/runtime/modules/class.js
+++ b/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
diff --git a/test/weex/cases/cases.spec.js b/test/weex/cases/cases.spec.js
index ad7ff7393df..f02ea217b70 100644
--- a/test/weex/cases/cases.spec.js
+++ b/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', () => {
diff --git a/test/weex/cases/render/class.vdom.js b/test/weex/cases/render/class.vdom.js
new file mode 100644
index 00000000000..f162f00e03c
--- /dev/null
+++ b/test/weex/cases/render/class.vdom.js
@@ -0,0 +1,16 @@
+({
+  type: 'div',
+  children: [{
+    type: 'div',
+    classList: ['box', 'box1']
+  }, {
+    type: 'div',
+    classList: ['box', 'box2']
+  }, {
+    type: 'div',
+    classList: ['box', 'box3']
+  }, {
+    type: 'div',
+    classList: ['box', 'box4']
+  }]
+})
diff --git a/test/weex/cases/render/class.vue b/test/weex/cases/render/class.vue
new file mode 100644
index 00000000000..6bc1c84401a
--- /dev/null
+++ b/test/weex/cases/render/class.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div :class="class1"></div>
+    <div :class="class2"></div>
+    <div class="box" :class="class3"></div>
+    <div class="box" :class="class4"></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;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data () {
+      return {
+        class1: ['box', 'box1'],
+        class2: {
+          'box': true,
+          'box1': false,
+          'box2': true
+        },
+        class3: ['box3'],
+        class4: {
+          'box4': true
+        }
+      }
+    }
+  }
+</script>
\ No newline at end of file

From 55758729d79d4f3e93862f2c5085789e46242d81 Mon Sep 17 00:00:00 2001
From: Zhenfei You <hello@imyzf.com>
Date: Mon, 2 Apr 2018 17:51:44 +0800
Subject: [PATCH 2/2] feat(weex): add more inline statement examples in the
 test case

---
 test/weex/cases/render/class.vdom.js | 3 +++
 test/weex/cases/render/class.vue     | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/test/weex/cases/render/class.vdom.js b/test/weex/cases/render/class.vdom.js
index f162f00e03c..7dec4ab57a9 100644
--- a/test/weex/cases/render/class.vdom.js
+++ b/test/weex/cases/render/class.vdom.js
@@ -12,5 +12,8 @@
   }, {
     type: 'div',
     classList: ['box', 'box4']
+  }, {
+    type: 'div',
+    classList: ['box', 'box5']
   }]
 })
diff --git a/test/weex/cases/render/class.vue b/test/weex/cases/render/class.vue
index 6bc1c84401a..f4443c50dd2 100644
--- a/test/weex/cases/render/class.vue
+++ b/test/weex/cases/render/class.vue
@@ -4,6 +4,7 @@
     <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>
 
@@ -28,6 +29,10 @@
   .box4 {
     background-color: #AAA;
   }
+
+  .box5 {
+    background-color: #999;
+  }
 </style>
 
 <script>
@@ -43,7 +48,8 @@
         class3: ['box3'],
         class4: {
           'box4': true
-        }
+        },
+        class5: true
       }
     }
   }