vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix #2192 (#2308)

Browse source 
* Fix #2192

* Fix mock style property definitions

* Re-instate camelCased style property key declaration support

* Fix removeProperty, eslint fix

* Stringify style keys: fix perf tests

* Fix weird uncaught mixed whitespace

* Fix weird uncaught mixed whitespace
This commit is contained in:
Barney Carroll 2018-11-26 10:49:16 +00:00 • committed by Isiah Meadows
parent d1c090efb7
commit 4c5968a526
4 changed files with 46 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

19
render/render.js
View file

@ -776,16 +776,27 @@ module.exports = function($window) {
}
//style
function updateStyle(element, old, style) {
function updateStyle(element, old, input) {
if(typeof input === "object") {
var style = {}
for(var key in input) {
style[key] = String(input[key]).replace(/[A-Z]/g, function(capital){
return "-" + capital.toLowerCase()
})
}
}
else {
var style = input
}
if (old != null && style != null && typeof old === "object" && typeof style === "object" && style !== old) {
// Both old & new are (different) objects.
// Update style properties that have changed
for (var key in style) {
if (style[key] !== old[key]) element.style[key] = style[key]
if (style[key] !== old[key]) element.style.setProperty(key, style[key])
}
// Remove style properties that no longer exist
for (var key in old) {
if (!(key in style)) element.style[key] = ""
if (!(key in style)) element.style.removeProperty(key)
}
return
}
@ -795,7 +806,7 @@ module.exports = function($window) {
else {
if (typeof old === "string") element.style.cssText = ""
for (var key in style) {
element.style[key] = style[key]
element.style.setProperty(key, style[key])
}
}
}

13
render/tests/test-updateElement.js
View file

@ -179,19 +179,6 @@ o.spec("updateElement", function() {
o(updated.dom.style.backgroundColor).equals("red")
o(updated.dom.style.border).equals("")
})
o("updates style when it's same object but mutated", function() {
var style = {backgroundColor: "red", color: "gold"}
var vnode = {tag: "a", attrs: {style: style}}
render(root, [vnode])
delete style.backgroundColor
var updated = {tag: "a", attrs: {style: style}}
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("")
o(updated.dom.style.color).equals("gold")
})
o("does not re-render element styles for equivalent style objects", function() {
var style = {color: "gold"}
var vnode = {tag: "a", attrs: {style: style}}