How to use metal-jsx - 10 common examples
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 / frontend / components / App.js View on Github 
);
}
}
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;);
})}
{!dataExists &&
<div>
<i>{'No Component Data'}</i>
</div>}
);
}
}
StatePane.PROPS = {
component: Config.any(),
onInspectDOM: Config.func(),
setStateFn: Config.func(),
typeColors: Config.object()
};
export default StatePane;);
}
}
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;);
})}
{!dataExists &&
<div>
<i>{'No Component Data'}</i>
</div>}
);
}
}
StatePane.PROPS = {
component: Config.any(),
onInspectDOM: Config.func(),
setStateFn: Config.func(),
typeColors: Config.object()
};
export default StatePane;);
}
}
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;onMouseLeave={this.removeHighlight}
style={style}
>
}
);
}
}
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;onClick={this.focusNode}
onMouseEnter={this.addHighlight}
onMouseLeave={this.removeHighlight}
style={style}
>
}
);
}
}
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;const {typeColors, value} = this.props;
return (
);
}
}
MetalJSONEditor.PROPS = {
config: Config.object(),
onChange: Config.func(),
type: Config.string(),
typeColors: Config.object(),
value: Config.object()
};
export default MetalJSONEditor;document.body.addEventListener('mousemove', this.doDrag, false);
document.body.addEventListener('mouseup', this.stopDrag, false);
}
stopDrag() {
document.body.removeEventListener('mousemove', this.doDrag, false);
document.body.removeEventListener('mouseup', this.stopDrag, false);
}
render() {
return <div class="resize-container">;
}
}
ResizeDivider.PROPS = {
onResize: Config.func().required()
};
export default ResizeDivider;
</div>);
}
}
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;metal-jsx
A JSX templates renderer to be used with Metal.js's Component class
