How to use the metal-jsx.Config.value function in metal-jsx
To help you get started, we’ve selected a few metal-jsx examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
metal / metal-devtools / src / jsx / AppJSX.js View on Github 
{'Parent:'}<button>{'Add a child!'}</button>
{
children.map(
(child, i) => (
)
)
}
);
}
}
Parent.STATE = {
numOfChildren: Config.value(1)
};
class Child extends Component {
handleClick() {
this.state.subTree = true;
}
render() {
return (
<div style="padding-left:32px">
{`Child #${this.props.index}:`}
<button>{'+'}</button>
{this.state.subTree &&
<div></div></div><div style="{style}" class="{`node-wrapper">
</div>}
);
}
}
TreeNode.PROPS = {
componentNode: Config.value({}),
depth: Config.number().value(0),
highlightDOM: Config.func(),
onInspectDOM: Config.func(),
onNodeExpand: Config.func(),
onNodeSelect: Config.func(),
selectedId: Config.string()
};
TreeNode.STATE = {
highlight: Config.value(false),
showMenu: Config.value(false)
};
export default TreeNode;);
}
}
TreeNode.PROPS = {
componentNode: Config.value({}),
depth: Config.number().value(0),
highlightDOM: Config.func(),
onInspectDOM: Config.func(),
onNodeExpand: Config.func(),
onNodeSelect: Config.func(),
selectedId: Config.string()
};
TreeNode.STATE = {
highlight: Config.value(false),
showMenu: Config.value(false)
};
export default TreeNode;}
}
App.PROPS = {
highlightDOM: Config.func(),
inspectDOM: Config.func(),
onComponentExpand: Config.func(),
onSelectedChange: Config.func(),
port: Config.any(),
setStateFn: Config.func(),
theme: Config.oneOf(['dark', 'light']).value('light')
};
App.STATE = {
firstColumnWidth: Config.number(),
freezeUpdates: Config.value(false),
rootComponents: Config.value({}),
selectedComponent: Config.value({})
};
export default App;}
App.PROPS = {
highlightDOM: Config.func(),
inspectDOM: Config.func(),
onComponentExpand: Config.func(),
onSelectedChange: Config.func(),
port: Config.any(),
setStateFn: Config.func(),
theme: Config.oneOf(['dark', 'light']).value('light')
};
App.STATE = {
firstColumnWidth: Config.number(),
freezeUpdates: Config.value(false),
rootComponents: Config.value({}),
selectedComponent: Config.value({})
};
export default App;App.PROPS = {
highlightDOM: Config.func(),
inspectDOM: Config.func(),
onComponentExpand: Config.func(),
onSelectedChange: Config.func(),
port: Config.any(),
setStateFn: Config.func(),
theme: Config.oneOf(['dark', 'light']).value('light')
};
App.STATE = {
firstColumnWidth: Config.number(),
freezeUpdates: Config.value(false),
rootComponents: Config.value({}),
selectedComponent: Config.value({})
};
export default App;}
}
TreeNode.PROPS = {
componentNode: Config.value({}),
depth: Config.number().value(0),
highlightDOM: Config.func(),
onInspectDOM: Config.func(),
onNodeExpand: Config.func(),
onNodeSelect: Config.func(),
selectedId: Config.string()
};
TreeNode.STATE = {
highlight: Config.value(false),
showMenu: Config.value(false)
};
export default TreeNode;metal-jsx
A JSX templates renderer to be used with Metal.js's Component class
