add url persistent selection

Author: MykolaGolubyev

src/registry/Registry.js

@@ -6,9 +6,9 @@ import GridLayout from '../layouts/GridLayout';
 class Registry {
     _componentsDemo = {};
 
-    registerAsGrid(name, instancesWithDescription) {
-        this._componentsDemo[name] = (
-            <ComponentDemo name={name}
+    registerAsGrid(demoName, instancesWithDescription) {
+        this._componentsDemo[demoName] = (
+            <ComponentDemo name={demoName}
                            layoutComponent={GridLayout}
                            instancesWithDescription={instancesWithDescription}/>
         );
@@ -18,7 +18,7 @@ class Registry {
         return this._componentsDemo[name];
     }
 
-    get names() {
+    get demoNames() {
         return Object.keys(this._componentsDemo);
     }
 }

src/viewer/ComponentsViewer.css

@@ -13,20 +13,23 @@ body {
 
 .components-viewer .toc {
     flex: 0 0 350px;
-    border-right: 1px solid #eee;
+    border-right: 1px solid #4F628E;
+    background-color: #2E4272;
 }
 
 .components-viewer .toc .name {
     padding: 15px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #7887AB;
+    color: #7887AB;
     cursor: pointer;
 }
 
 .components-viewer .toc .name.selected {
-    background-color: #eee;
+    border-left: 2px solid #fff;
+    color: #fff;
 }
 
 .components-viewer .preview {
     flex: 1;
-    margin: 10px;
+    margin: 10px 10px 10px 20px;
 }

src/viewer/ComponentsViewer.js

@@ -2,31 +2,38 @@ import React, {Component} from 'react';
 
 import './ComponentsViewer.css';
 
+const queryParamNames = {
+    demoName: "demo"
+};
+
 class ComponentsViewer extends Component {
     constructor(props) {
         super(props);
         const {registry} = this.props;
 
-        this.state = {selectedName: registry.names[0]};
+        this.state = {selectedDemoName: registry.demoNames[0]};
     }
 
-    selectComponent = (name) => this.setState({selectedName: name});
+    selectDemo = (demoName) => {
+        this.setState({selectedDemoName: demoName});
+        window.history.pushState({}, null, `?${queryParamNames.demoName}=` + demoName);
+    };
 
     render() {
         const {registry} = this.props;
-        const {selectedName} = this.state;
+        const {selectedDemoName} = this.state;
 
-        const componentsDemo = registry.findComponentsDemoByName(selectedName);
+        const componentsDemo = registry.findComponentsDemoByName(selectedDemoName);
 
         return (
             <div className="components-viewer">
                 <div className="toc">
-                    {registry.names.map(name => {
-                        const isSelected = selectedName === name;
+                    {registry.demoNames.map(name => {
+                        const isSelected = selectedDemoName === name;
                         const className = "name" + (isSelected ? " selected" : "");
 
                         return (
-                            <div key={name} className={className} onClick={() => this.selectComponent(name)}>
+                            <div key={name} className={className} onClick={() => this.selectDemo(name)}>
                                 {name}
                             </div>
                         )
@@ -40,6 +47,13 @@ class ComponentsViewer extends Component {
         )
     }
 
+    componentDidMount() {
+        const searchParams = new URLSearchParams(document.location.search);
+        const selected = searchParams.get(queryParamNames.demoName);
+        if (selected) {
+            this.setState({selectedDemoName: selected});
+        }
+    }
 }
 
 export default ComponentsViewer;