| 1 | <!DOCTYPE html>
|
| 2 | <html class="isRem">
|
| 3 | <head>
|
| 4 | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 | <link rel="stylesheet" href="./css/component.css" />
|
| 7 | </head>
|
| 8 | <body>
|
| 9 | <div id="react" class="appContainer"></div>
|
| 10 |
|
| 11 | <div id="reactUserEdit"></div>
|
| 12 | <script src="/docs/js/vendor.js" defer="true"></script>
|
| 13 | <script src="/docs/js/main.js" defer="true"></script>
|
| 14 | <script src="/docs/js/babel.min.js"></script>
|
| 15 | <script type="text/babel">
|
| 16 | var test = 'test';
|
| 17 | var ReactDOM = Component.ReactDOM;
|
| 18 | var React = Component.React;
|
| 19 | var ReactDOMServer = Component.ReactDOMServer;
|
| 20 | class RenderComponent extends React.Component {
|
| 21 | constructor(props) {
|
| 22 | super(props);
|
| 23 | this.state = {
|
| 24 | Components: Component,
|
| 25 | selectedComponent:
|
| 26 | location.hash != '' ? location.hash.substring(1) : null
|
| 27 | };
|
| 28 | this.hashChange = this.hashChange.bind(this);
|
| 29 | }
|
| 30 | hashChange() {
|
| 31 | this.setState({
|
| 32 | selectedComponent:
|
| 33 | location.hash != '' ? location.hash.substring(1) : null
|
| 34 | });
|
| 35 | }
|
| 36 |
|
| 37 | componentDidMount() {
|
| 38 | window.addEventListener('hashchange', this.hashChange);
|
| 39 | let parentFrameNode = parent.document.getElementById('loadingText');
|
| 40 | if (parentFrameNode) parentFrameNode.style.display = 'none';
|
| 41 | }
|
| 42 |
|
| 43 | componentWillUnmount() {
|
| 44 | window.removeEventListener('hashchange', this.hashChange);
|
| 45 | }
|
| 46 | render() {
|
| 47 | const { Components, selectedComponent } = this.state;
|
| 48 |
|
| 49 | var ComponentClass =
|
| 50 | selectedComponent && Components[selectedComponent];
|
| 51 | var keysSingleAr =
|
| 52 | (ComponentClass &&
|
| 53 | ComponentClass.docs &&
|
| 54 | ComponentClass.docs.testProps &&
|
| 55 | Object.keys(ComponentClass.docs.testProps)) ||
|
| 56 | [];
|
| 57 | return (
|
| 58 | <div className="root" id="root">
|
| 59 | {Components[selectedComponent] ? (
|
| 60 | Array.isArray(ComponentClass.docs.testProps) ? (
|
| 61 | ComponentClass.docs.testProps.map((prop, i) => {
|
| 62 | return (
|
| 63 | <div className="comps">
|
| 64 | <ComponentClass {...prop} />
|
| 65 | </div>
|
| 66 | );
|
| 67 | })
|
| 68 | ) : (
|
| 69 | <ComponentClass {...ComponentClass.docs.testProps} />
|
| 70 | )
|
| 71 | ) : (
|
| 72 | <div className={'emptyState'}>
|
| 73 | <svg
|
| 74 | x="0px"
|
| 75 | y="0px"
|
| 76 | viewBox="0 0 512 512"
|
| 77 | style={{ enableBackground: 'new 0 0 512 512' }}
|
| 78 | xmlSpace="preserve"
|
| 79 | className={'smileIcon'}
|
| 80 | >
|
| 81 | <linearGradient
|
| 82 | id="SVGID_1_"
|
| 83 | gradientUnits="userSpaceOnUse"
|
| 84 | x1="256"
|
| 85 | y1="514"
|
| 86 | x2="256"
|
| 87 | y2="2"
|
| 88 | gradientTransform="matrix(1 0 0 -1 0 514)"
|
| 89 | >
|
| 90 | <stop offset="0" style={{ stopColor: '#2AF598' }} />
|
| 91 | <stop offset="1" style={{ stopColor: '#009EFD' }} />
|
| 92 | </linearGradient>
|
| 93 | <path
|
| 94 | style={{ fill: 'url(#SVGID_1_)' }}
|
| 95 | d="M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
|
| 96 | 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
|
| 97 | 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
|
| 98 | 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
|
| 99 | 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
|
| 100 | 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
|
| 101 | 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
|
| 102 | S326.327,212.122,344,212.122z"
|
| 103 | />
|
| 104 | </svg>
|
| 105 | <div>Please click the components on left side menu bar</div>
|
| 106 | </div>
|
| 107 | )}
|
| 108 | </div>
|
| 109 | );
|
| 110 | }
|
| 111 | }
|
| 112 | try {
|
| 113 | ReactDOM.render(<RenderComponent />, react, () => {
|
| 114 | let attr = document.createAttribute('id');
|
| 115 | attr.value = 'check';
|
| 116 | let node = document.createElement('DIV');
|
| 117 | node.setAttributeNode(attr);
|
| 118 | document.getElementById('root').appendChild(node);
|
| 119 | });
|
| 120 | } catch (e) {
|
| 121 | console.log(e);
|
| 122 | }
|
| 123 | </script>
|
| 124 |
|
| 125 | <script type="text/javascript">
|
| 126 | var err = null;
|
| 127 | var comName = '';
|
| 128 | var findErr = (window.onerror = function(e, line) {
|
| 129 | err = e;
|
| 130 | comName = window.location.hash.substr(1);
|
| 131 | });
|
| 132 | var funct = function() {
|
| 133 | return { error: err, name: comName };
|
| 134 | };
|
| 135 | </script>
|
| 136 | </body>
|
| 137 | </html>
|