ctrl alt left/right for entry within demo selections

Author: MykolaGolubyev

src/components/registry/DemoEntry.ts

@@ -31,6 +31,14 @@ export class DemoEntry {
         return this.demoInstances.findByTitle(title);
     }
 
+    findNextInstanceByCurrentTitle(title: string): DemoInstance {
+        return this.demoInstances.findNextInstanceByCurrentTitle(title);
+    }
+
+    findPrevInstanceByCurrentTitle(title: string): DemoInstance {
+        return this.demoInstances.findPrevInstanceByCurrentTitle(title);
+    }
+
     isMiniApp(): boolean {
         return this.urlPrefix.length > 0;
     }

src/components/registry/DemoInstances.test.tsx

@@ -47,4 +47,32 @@ describe('DemoInstances', () => {
         expect(demoInstances.groups[0].description).toEqual('');
         expect(demoInstances.groups[1].description).toEqual(desc);
     });
+
+    it('should find next entry by given current entry title', () => {
+        demoInstances.add('a', 'description', () => <div/>);
+        demoInstances.add('b', 'description', () => <div/>);
+
+        expect(demoInstances.findNextInstanceByCurrentTitle('a').title).toEqual('b');
+    });
+
+    it('should find prev entry by given current entry title', () => {
+        demoInstances.add('a', 'description', () => <div/>);
+        demoInstances.add('b', 'description', () => <div/>);
+
+        expect(demoInstances.findPrevInstanceByCurrentTitle('b').title).toEqual('a');
+    });
+
+    it('should find first entry when looking for a prev entry and no entry with given title exist', () => {
+        demoInstances.add('a', 'description', () => <div/>);
+        demoInstances.add('b', 'description', () => <div/>);
+
+        expect(demoInstances.findPrevInstanceByCurrentTitle('wrong-title').title).toEqual('a');
+    });
+
+    it('should find last entry when looking for a next entry and current title is last already', () => {
+        demoInstances.add('a', 'description', () => <div/>);
+        demoInstances.add('b', 'description', () => <div/>);
+
+        expect(demoInstances.findNextInstanceByCurrentTitle('b').title).toEqual('b');
+    });
 });

src/components/registry/DemoInstances.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { DemoInstance } from './DemoInstance';
 import { DemoInstancesGroup } from './DemoInstancesGroup';
+import { findAndReturn } from './listUtils';
 
 export class DemoInstances {
     groups: DemoInstancesGroup[] = [];
@@ -31,16 +32,32 @@ export class DemoInstances {
     }
 
     findByTitle(title: string): DemoInstance {
-        const found = this.all.filter(instance => instance.title === title);
-        if (! found.length) {
+        const found = findInstanceAndReturn(this.all, title, idx => this.all[idx]);
+        if (!found) {
             throw new Error('cannot find demo instance with "' + title + '" title');
         }
 
-        return found[0];
+        return found;
+    }
+
+    findNextInstanceByCurrentTitle(title: string): DemoInstance {
+        const found = findInstanceAndReturn(this.all, title, idx => this.all[idx + 1]);
+        return found ? found : this.all[this.all.length - 1];
+    }
+
+    findPrevInstanceByCurrentTitle(title: string): DemoInstance {
+        const found = findInstanceAndReturn(this.all, title, idx => this.all[idx - 1]);
+        return found ? found : this.all[0];
     }
 
     private createNewGroup(description: string) {
         this.currentGroup = new DemoInstancesGroup(description);
         this.groups.push(this.currentGroup);
     }
+}
+
+function findInstanceAndReturn(instances: DemoInstance[],
+                               title: string,
+                               returnFunc: (idx: number) => DemoInstance | undefined) {
+    return findAndReturn(instances, instance => instance.title === title, returnFunc);
 }

src/components/registry/Registry.ts

@@ -7,6 +7,7 @@ import { LayoutProps } from '../layouts/LayoutProps';
 import { LabelInstanceTableLayout } from '../layouts/LabelInstanceTableLayout';
 import { SingleItemLayout } from '../layouts/SingleItemLayout';
 import { wrapComponent, WrapperProps } from './componentWrapper';
+import { findAndReturn } from './listUtils';
 
 export interface RegistryConfig {
     componentWrapper?: React.ComponentType<WrapperProps>;
@@ -124,16 +125,8 @@ class Registry {
 
 function findDemoAndReturn(demos: DemoEntry[],
                            currentDemoName: string,
-                           returnFunc: (idx: number) => DemoEntry | null) {
-    let idx = 0;
-    for (const demo of demos) {
-        if (demo.name === currentDemoName) {
-            return returnFunc(idx);
-        }
-        idx++;
-    }
-
-    return undefined;
+                           returnFunc: (idx: number) => DemoEntry | undefined) {
+    return findAndReturn(demos, demo => demo.name === currentDemoName, returnFunc);
 }
 
 export { Registry };

src/components/registry/listUtils.ts

@@ -0,0 +1,13 @@
+export function findAndReturn<V>(values: V[],
+                                 predicate: (v: V) => boolean,
+                                 returnFunc: (idx: number) => V | undefined) {
+    let idx = 0;
+    for (const v of values) {
+        if (predicate(v)) {
+            return returnFunc(idx);
+        }
+        idx++;
+    }
+
+    return undefined;
+}

src/components/viewer/ComponentViewer.tsx

@@ -45,8 +45,10 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         this.state = this.stateFromUrl();
         this.hotKeyBoundActions = {
             'Alt F': this.onFullScreenToggle,
-            'Alt Down': this.onNextDemo,
-            'Alt Up': this.onPrevDemo,
+            'Ctrl Alt Down': this.onNextDemo,
+            'Ctrl Alt Up': this.onPrevDemo,
+            'Ctrl Alt Right': this.onNextDemoEntry,
+            'Ctrl Alt Left': this.onPrevDemoEntry,
             ...this.dropDownKeyBoundActions()
         };
     }
@@ -220,6 +222,18 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         }));
     }
 
+    private onNextDemoEntry = () => {
+        this.withRegistryAndDemoAndTitleWhenPresent(((registry, demo, title) => {
+            this.selectInstanceByTitle(demo.findNextInstanceByCurrentTitle(title).title);
+        }));
+    }
+
+    private onPrevDemoEntry = () => {
+        this.withRegistryAndDemoAndTitleWhenPresent(((registry, demo, title) => {
+            this.selectInstanceByTitle(demo.findPrevInstanceByCurrentTitle(title).title);
+        }));
+    }
+
     private withRegistryAndDemoNameWhenPresent = (code: (registry: Registry, demoName: string) => void) => {
         const registry = this.findSelectedRegistry();
         const {demoName} = this.state;
@@ -231,6 +245,20 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         code(registry, demoName);
     }
 
+    private withRegistryAndDemoAndTitleWhenPresent = (
+        code: (registry: Registry, demo: DemoEntry, title: string) => void
+    ) => {
+        this.withRegistryAndDemoNameWhenPresent(((registry, demoName) => {
+            const demo = registry.findDemoByName(demoName);
+            if (!demo) {
+                return;
+            }
+
+            const {entryTitle} = this.state;
+            code(registry, demo, entryTitle);
+        }));
+    }
+
     private selectRegistry = (registryName: string) => {
         this.pushUrl(
             registryName,