fz-react-cli
Version:
A CLI tool for build modern web application and libraries
134 lines (128 loc) • 5.21 kB
HTML
<html class="isRem">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/component.css" />
</head>
<body>
<div id="react" class="appContainer"></div>
<div id="reactUserEdit"></div>
<script src="/docs/js/vendor.js" defer="true"></script>
<script src="/docs/js/main.js" defer="true"></script>
<script src="/docs/js/babel.min.js"></script>
<script type="text/babel">
var test = 'test';
var ReactDOM = Component.ReactDOM;
var React = Component.React;
var ReactDOMServer = Component.ReactDOMServer;
class RenderComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
Components: Component,
selectedComponent:
location.hash != '' ? location.hash.substring(1) : null
};
this.hashChange = this.hashChange.bind(this);
}
hashChange() {
this.setState({
selectedComponent:
location.hash != '' ? location.hash.substring(1) : null
});
}
componentDidMount() {
window.addEventListener('hashchange', this.hashChange);
let parentFrameNode = parent.document.getElementById('loadingText');
if (parentFrameNode) parentFrameNode.style.display = 'none';
}
componentWillUnmount() {
window.removeEventListener('hashchange', this.hashChange);
}
render() {
const { Components, selectedComponent } = this.state;
var ComponentClass =
selectedComponent && Components[selectedComponent];
var keysSingleAr =
(ComponentClass &&
ComponentClass.docs &&
ComponentClass.docs.testProps &&
Object.keys(ComponentClass.docs.testProps)) ||
[];
return (
<div className="root" id="root">
{Components[selectedComponent] ? (
Array.isArray(ComponentClass.docs.testProps) ? (
ComponentClass.docs.testProps.map((prop, i) => {
return (
<div className="comps">
<ComponentClass {...prop} />
</div>
);
})
) : (
<ComponentClass {...ComponentClass.docs.testProps} />
)
) : (
<div className={'emptyState'}>
<svg
x="0px"
y="0px"
viewBox="0 0 512 512"
style={{ enableBackground: 'new 0 0 512 512' }}
xmlSpace="preserve"
className={'smileIcon'}
>
<linearGradient
id="SVGID_1_"
gradientUnits="userSpaceOnUse"
x1="256"
y1="514"
x2="256"
y2="2"
gradientTransform="matrix(1 0 0 -1 0 514)"
>
<stop offset="0" style={{ stopColor: '#2AF598' }} />
<stop offset="1" style={{ stopColor: '#009EFD' }} />
</linearGradient>
<path
style={{ fill: 'url(#SVGID_1_)' }}
d="M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
S326.327,212.122,344,212.122z"
/>
</svg>
<div>Please click the components on left side menu bar</div>
</div>
)}
</div>
);
}
}
ReactDOM.render(<RenderComponent />, react, () => {
let attr = document.createAttribute('id');
attr.value = 'check';
let node = document.createElement('DIV');
node.setAttributeNode(attr);
document.getElementById('root').appendChild(node);
});
</script>
<script type="text/javascript">
var err = null;
var comName = '';
var findErr = (window.onerror = function(e, line) {
err = e;
comName = window.location.hash.substr(1);
});
var funct = function() {
return { error: err, name: comName };
};
</script>
</body>
</html>