npm - @zohodesk/react-cli - Versions diffs - 1.1.11-exp.5 → 1.1.11-exp.7 - Mend

@zohodesk/react-cli 1.1.11-exp.5 → 1.1.11-exp.7

Files changed (422) hide show

package/templates/docs/component.html CHANGED Viewed

@@ -1,179 +1,179 @@
-<!DOCTYPE html>
-<html class="isRem" dir="ltr">
-  <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" />
-    <link rel="stylesheet" href="/docs/css/main.css" />
-    <link rel="stylesheet" href="./css/markdown.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,
-            isError:false,
-            selectedComponent:location.hash != '' ? location.hash.substring(1) : null,
-            componentList:window.componentList?window.componentList:Component
-          };
-          this.hashChange = this.hashChange.bind(this);
-        }
-        hashChange() {
-          let parentFrameNode = parent.document.getElementById('loadingText');
-          this.setState({
-            selectedComponent:
-              location.hash != '' ? location.hash.substring(1) : null
-          },()=>{
-            if(this.error) {
-              location.reload();
-              parentFrameNode? parentFrameNode.style.display = 'block':parentFrameNode.style.display='none';
-              this.error = false;
-            }
-          });
-        }
-        componentDidMount() {
-          window.addEventListener('hashchange', this.hashChange);
-          let parentFrameNode = parent.document.getElementById('loadingText');
-          if (parentFrameNode) parentFrameNode.style.display = 'none';
-        }
-        componentWillUnmount() {
-          window.removeEventListener('hashchange', this.hashChange);
-        }
-        componentDidCatch(){
-          this.error = true;
-          this.setState({isError:this.error})
-        }
-        render() {
-          const { Components, selectedComponent,componentList} = this.state;
-          // var CLG=[]
-          // var complistGroup=Object.keys(componentList).map((item,i)=>{
-          //   if(Array.isArray(componentList[item].docs.testProps)){
-          //     CLG.push(item)
-          //   }
-          // })
-          let msg=componentList[selectedComponent]?'Sorry! for the inconvenience.':'Sorry! Request URL not found.'
-          var ComponentClass =
-            selectedComponent && componentList[selectedComponent];
-          var keysSingleAr =
-            (ComponentClass &&
-              ComponentClass.docs &&
-              ComponentClass.docs.testProps &&
-              Object.keys(ComponentClass.docs.testProps)) || [];
-          var ErrorMessage=(
-            <div className={'emptyState'}>
-              <svg
-                x='0px'
-                y='0px'
-                viewBox='0 0 512 512'
-                style={{ enableBackground: 'new 0 0 512 512' }}
-                xmlSpace='preserve'
-                className={'smileIcon'}
-              >
-                <path
-                  style={{ fill: '#f00' }}
-                  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>{msg}</div>
-            </div>
-          )
-          let renderElement = (
-            <React.Fragment>
-            {
-              this.state.isError || componentList[selectedComponent] ? (
-                <ComponentClass {...ComponentClass.docs.testProps} />
-              ) : ( ErrorMessage )
-            }
-              </React.Fragment>
-          );
-          return   <div className='root'>{componentList._provider ? (
-            <componentList._provider>
-                {this.state.isError?ErrorMessage:renderElement}
-            </componentList._provider>
-          ) : (
-            this.state.isError?ErrorMessage:renderElement
-          )}</div>;
-        }
-      }
-      var compList;
-      var componentList= {};
-      var compGroupObj=function(comp,key,compGroup){
-        if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
-          return;
-        }
-        if(comp=='default'){
-          componentList[key]=compGroup[comp]
-          return componentList
-        }
-        else{
-          componentList[comp]=compGroup[comp]
-          return componentList
-        }
-      }
-      Promise.all(Object.keys(Component).map((key) => {
-        let componentKey=Component[key];
-        if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
-          return;
-        }
-        if(key == '_provider'){
-          return compGroupObj(key,null,Component)
-        }
-        try{
-          return(
-            componentKey && componentKey.then((res)=>{
-              Object.keys(res).forEach((comp)=>{
-                let compGroup=res[comp];
-                Object.keys(compGroup).forEach((comps)=>{
-                  compList=compGroupObj(comps,key,compGroup)
-                  return compList
-                })
-              })
-            })
-          )
-        }
-        catch(error){
-          return Component
-        }
-      })).then(()=>{
-        Object.keys(componentList).length>1?window.componentList=componentList:window.componentList=Component
-        ReactDOM.render(<RenderComponent  />, react);
-      })
-    </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>
+<!DOCTYPE html>
+<html class="isRem" dir="ltr">
+  <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" />
+    <link rel="stylesheet" href="/docs/css/main.css" />
+    <link rel="stylesheet" href="./css/markdown.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,
+            isError:false,
+            selectedComponent:location.hash != '' ? location.hash.substring(1) : null,
+            componentList:window.componentList?window.componentList:Component
+          };
+          this.hashChange = this.hashChange.bind(this);
+        }
+        hashChange() {
+          let parentFrameNode = parent.document.getElementById('loadingText');
+          this.setState({
+            selectedComponent:
+              location.hash != '' ? location.hash.substring(1) : null
+          },()=>{
+            if(this.error) {
+              location.reload();
+              parentFrameNode? parentFrameNode.style.display = 'block':parentFrameNode.style.display='none';
+              this.error = false;
+            }
+          });
+        }
+        componentDidMount() {
+          window.addEventListener('hashchange', this.hashChange);
+          let parentFrameNode = parent.document.getElementById('loadingText');
+          if (parentFrameNode) parentFrameNode.style.display = 'none';
+        }
+        componentWillUnmount() {
+          window.removeEventListener('hashchange', this.hashChange);
+        }
+        componentDidCatch(){
+          this.error = true;
+          this.setState({isError:this.error})
+        }
+        render() {
+          const { Components, selectedComponent,componentList} = this.state;
+          // var CLG=[]
+          // var complistGroup=Object.keys(componentList).map((item,i)=>{
+          //   if(Array.isArray(componentList[item].docs.testProps)){
+          //     CLG.push(item)
+          //   }
+          // })
+          let msg=componentList[selectedComponent]?'Sorry! for the inconvenience.':'Sorry! Request URL not found.'
+          var ComponentClass =
+            selectedComponent && componentList[selectedComponent];
+          var keysSingleAr =
+            (ComponentClass &&
+              ComponentClass.docs &&
+              ComponentClass.docs.testProps &&
+              Object.keys(ComponentClass.docs.testProps)) || [];
+          var ErrorMessage=(
+            <div className={'emptyState'}>
+              <svg
+                x='0px'
+                y='0px'
+                viewBox='0 0 512 512'
+                style={{ enableBackground: 'new 0 0 512 512' }}
+                xmlSpace='preserve'
+                className={'smileIcon'}
+              >
+                <path
+                  style={{ fill: '#f00' }}
+                  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>{msg}</div>
+            </div>
+          )
+          let renderElement = (
+            <React.Fragment>
+            {
+              this.state.isError || componentList[selectedComponent] ? (
+                <ComponentClass {...ComponentClass.docs.testProps} />
+              ) : ( ErrorMessage )
+            }
+              </React.Fragment>
+          );
+          return   <div className='root'>{componentList._provider ? (
+            <componentList._provider>
+                {this.state.isError?ErrorMessage:renderElement}
+            </componentList._provider>
+          ) : (
+            this.state.isError?ErrorMessage:renderElement
+          )}</div>;
+        }
+      }
+      var compList;
+      var componentList= {};
+      var compGroupObj=function(comp,key,compGroup){
+        if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
+          return;
+        }
+        if(comp=='default'){
+          componentList[key]=compGroup[comp]
+          return componentList
+        }
+        else{
+          componentList[comp]=compGroup[comp]
+          return componentList
+        }
+      }
+      Promise.all(Object.keys(Component).map((key) => {
+        let componentKey=Component[key];
+        if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
+          return;
+        }
+        if(key == '_provider'){
+          return compGroupObj(key,null,Component)
+        }
+        try{
+          return(
+            componentKey && componentKey.then((res)=>{
+              Object.keys(res).forEach((comp)=>{
+                let compGroup=res[comp];
+                Object.keys(compGroup).forEach((comps)=>{
+                  compList=compGroupObj(comps,key,compGroup)
+                  return compList
+                })
+              })
+            })
+          )
+        }
+        catch(error){
+          return Component
+        }
+      })).then(()=>{
+        Object.keys(componentList).length>1?window.componentList=componentList:window.componentList=Component
+        ReactDOM.render(<RenderComponent  />, react);
+      })
+    </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>