On the backend it seems to change the Map into an object. Very weird.
Initially when I add a new value it seems fine:
Add:
Map { id → "Description" }
(copied from Firefox console)
Though once it enters the render function, the props.value
has changed and is now and object, with at it’s root an array of tuples, with the first element of the first tuple being my map:
Render:
{…}
__altered: false
__hash: undefined
__ownerID: undefined
_root: {…}
entries: (1) […]
0: Array [ Map(1), undefined ]
length: 1
<prototype>: Array []
ownerID: undefined
<prototype>: Object { get: get(), update: update(), iterate: iterate(), … }
size: 1
<prototype>: Object { constructor: Fe(), toString: toString(), get: get(), … }
Adding a second element makes it go all wonky, which makes sense I guess since I’m assuming it’s a map but it isn’t any more. Hard to explain, but here’s a screenshot:
Again, here is the new code, so you can see exactly where I log “Add” and “Render”:
var IngredientsControl = createClass({
getDefaultProps: function () {
return {
value: new Map()
};
},
addElement: function (e) {
var value = this.props.value;
value.set("id", "Description");
console.log("Add: ");
console.log(value);
this.props.onChangeObject(value);
//this.props.onChange(new Map(value));
},
handleIdChange: function (oldId, newId) {
console.log(oldId, newId);
var value = this.props.value;
var description = value.get(oldId);
value.delete(oldId);
value.set(newId, description);
this.props.onChangeObject(value);
//this.props.onChange(new Map(value));
},
handleDescriptionChange: function (id, description) {
console.log(id, description);
var value = this.props.value;
value.set(id.toLowerCase(), description);
this.props.onChangeObject(value);
//this.props.onChange(new Map(value));
},
render: function () {
var value = this.props.value;
console.log("Render: ");
console.log(value);
//console.log(this.props);
var handleIdChange = this.handleIdChange;
var handleDescriptionChange = this.handleDescriptionChange;
var items = [];
for (var [id, description] of value) {
var li = h('li', {},
h('input', { type: 'text', value: id, onChange: function (e) { handleIdChange(id, e.target.value); } }),
h('input', { type: 'text', value: description, onChange: function (e) { handleDescriptionChange(id, e.target.value); } })
);
items.push(li);
}
return h('div', { className: this.props.classNameWrapper },
h('input', {
type: 'button',
value: "Add element",
onClick: this.addElement
}),
h('ul', {}, items)
)
}
});
var IngredientsPreview = createClass({
render: function () {
var value = this.props.value;
console.log("Preview: ");
console.log(value);
var items = [];
for (var [id, description] of value) {
var li = h('li', {},
h('span', {}, id),
h('span', {}, ": "),
h('span', {}, description)
);
items.push(li);
}
return h('ul', {}, items);
}
});
CMS.registerWidget('ingredients', IngredientsControl/*, IngredientsPreview*/);