From 8a784d8d2333f0a05569f6c11c5a0fb0ab3a164e Mon Sep 17 00:00:00 2001 From: Hanks Date: Mon, 30 Oct 2017 19:28:54 -0500 Subject: [PATCH] fix(weex): stop trim css units in richtext component (#6927) + Remove the `trimCSSUnit` method. + Modify the test cases to support css units. + Add flow type annotations. --- .../weex/runtime/components/richtext.js | 37 ++++++------------- test/weex/runtime/components/richtext.spec.js | 10 ++--- 2 files changed, 17 insertions(+), 30 deletions(-) diff --git a/src/platforms/weex/runtime/components/richtext.js b/src/platforms/weex/runtime/components/richtext.js index dc2b0d57d58..a9164c7a698 100644 --- a/src/platforms/weex/runtime/components/richtext.js +++ b/src/platforms/weex/runtime/components/richtext.js @@ -1,32 +1,25 @@ -function getVNodeType (vnode) { +/* @flow */ + +function getVNodeType (vnode: VNode): string { if (!vnode.tag) { return '' } return vnode.tag.replace(/vue\-component\-(\d+\-)?/, '') } -function isSimpleSpan (vnode) { - return vnode.children && vnode.children.length === 1 && !vnode.children[0].tag +function isSimpleSpan (vnode: VNode): boolean { + return vnode.children && + vnode.children.length === 1 && + !vnode.children[0].tag } -const cssLengthRE = /^([+-]?[0-9]+(\.[0-9]+)?)(px|em|ex|%|in|cm|mm|pt|pc)$/i -function trimCSSUnit (prop) { - const res = String(prop).match(cssLengthRE) - if (res) { - return Number(res[1]) - } - return prop -} - -function parseStyle (vnode) { +function parseStyle (vnode: VNode): Object | void { if (!vnode || !vnode.data) { return } - const { staticStyle, staticClass } = vnode.data if (vnode.data.style || vnode.data.class || staticStyle || staticClass) { const styles = Object.assign({}, staticStyle, vnode.data.style) - const cssMap = vnode.context.$options.style || {} const classList = [].concat(staticClass, vnode.data.class) classList.forEach(name => { @@ -34,22 +27,18 @@ function parseStyle (vnode) { Object.assign(styles, cssMap[name]) } }) - - for (const key in styles) { - styles[key] = trimCSSUnit(styles[key]) - } return styles } } -function convertVNodeChildren (children) { +function convertVNodeChildren (children: Array): Array | void { if (!children.length) { return } return children.map(vnode => { - const type = getVNodeType(vnode) - const props = { type } + const type: string = getVNodeType(vnode) + const props: Object = { type } // convert raw text node if (!type) { @@ -65,7 +54,6 @@ function convertVNodeChildren (children) { props.events = vnode.data.on } } - if (type === 'span' && isSimpleSpan(vnode)) { props.attr = props.attr || {} props.attr.value = vnode.children[0].text.trim() @@ -83,8 +71,7 @@ function convertVNodeChildren (children) { export default { name: 'richtext', - // abstract: true, - render (h) { + render (h: Function) { return h('weex:richtext', { on: this._events, attrs: { diff --git a/test/weex/runtime/components/richtext.spec.js b/test/weex/runtime/components/richtext.spec.js index e6190b7f655..f1c21caf9d1 100644 --- a/test/weex/runtime/components/richtext.spec.js +++ b/test/weex/runtime/components/richtext.spec.js @@ -199,7 +199,7 @@ describe('richtext component', () => { attr: { value: [{ type: 'image', - style: { width: 150, height: 150 }, + style: { width: '150px', height: '150px' }, attr: { src: 'path/to/profile.png' } }] } @@ -293,11 +293,11 @@ describe('richtext component', () => { attr: { value: [{ type: 'span', - style: { fontSize: 16, color: '#FF6600' }, + style: { fontSize: '16px', color: '#FF6600' }, attr: { value: 'ABCD' } }, { type: 'image', - style: { width: 33.33, height: 66.67 }, + style: { width: '33.33px', height: '66.67px' }, attr: { src: 'path/to/A.png' } }] } @@ -471,7 +471,7 @@ describe('richtext component', () => { attr: { value: [{ type: 'span', - style: { fontSize: 32, color: '#F6F660' }, + style: { fontSize: '32px', color: '#F6F660' }, attr: { value: 'ABCD' } }, { type: 'span', @@ -543,7 +543,7 @@ describe('richtext component', () => { attr: { value: [{ type: 'span', - style: { fontSize: 24, color: '#ABCDEF' }, + style: { fontSize: '24px', color: '#ABCDEF' }, attr: { value: 'ABCD' } }, { type: 'span',