Skip to content

Commit

Permalink
feat(weex): support object syntax of class (vuejs#7930)
Browse files Browse the repository at this point in the history
  • Loading branch information
imyzf authored and aJean committed Aug 19, 2020
1 parent 5dced21 commit 1ffee15
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 20 deletions.
39 changes: 19 additions & 20 deletions src/platforms/weex/runtime/modules/class.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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)
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions test/weex/cases/cases.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ function createEventTestCase (name) {
describe('Usage', () => {
describe('render', () => {
it('sample', createRenderTestCase('render/sample'))
it('class', createRenderTestCase('render/class'))
})

describe('event', () => {
Expand Down
19 changes: 19 additions & 0 deletions test/weex/cases/render/class.vdom.js
Original file line number Diff line number Diff line change
@@ -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']
}]
})
56 changes: 56 additions & 0 deletions test/weex/cases/render/class.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 1ffee15

Please sign in to comment.