alt up/down for demo selections (including full screen)

Author: MykolaGolubyev

src/components/hotkeys/hotKeyBuilder.test.ts

@@ -16,4 +16,9 @@ describe('hotKeyBuilder', () => {
         const altF5 = hotKeyFromString('Alt F5');
         expect(altF5).toEqual({code: 'F5', shift: false, meta: false, ctrl: false, alt: true});
     });
+
+    it('maps arrow keys', () => {
+        const shiftArrow = hotKeyFromString('Shift Down');
+        expect(shiftArrow).toEqual({code: 'ArrowDown', shift: true, meta: false, ctrl: false, alt: false});
+    });
 });

src/components/hotkeys/hotKeyBuilder.ts

@@ -65,7 +65,11 @@ function createKeyMapping() {
         '/': 'Slash',
         '-': 'Minus',
         '=': 'Equal',
-        '`': 'Backquote'
+        '`': 'Backquote',
+        'DOWN': 'ArrowDown',
+        'UP': 'ArrowUp',
+        'LEFT': 'ArrowLeft',
+        'RIGHT': 'ArrowRight',
     };
 }
 

src/components/registry/Registry.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { Registry } from './Registry';
+
+describe('Registry', () => {
+    const registry = new Registry('widgets');
+    registry.registerAsRows('demo one', registerDemo);
+    registry.registerAsRows('demo two', registerDemo);
+    registry.registerAsRows('demo three', registerDemo);
+
+    it('should find demo by name', () => {
+        const byName = registry.findDemoByName('demo two');
+        expect(byName!.name).toEqual('demo two');
+
+        const notFound = registry.findDemoByName('demo 2');
+        expect(notFound).toEqual(null);
+    });
+
+    it('should find next demo by current name', () => {
+        const byName = registry.findNextDemoByCurrentName('demo two');
+        expect(byName!.name).toEqual('demo three');
+    });
+
+    it('should return last demo when no next demo is available', () => {
+        const byName = registry.findNextDemoByCurrentName('demo three');
+        expect(byName!.name).toEqual('demo three');
+    });
+
+    it('should find prev demo by current name', () => {
+        const byName = registry.findPrevDemoByCurrentName('demo two');
+        expect(byName!.name).toEqual('demo one');
+    });
+
+    it('should return first demo when no prev demo is available', () => {
+        const byName = registry.findPrevDemoByCurrentName('demo one');
+        expect(byName!.name).toEqual('demo one');
+    });
+});
+
+function registerDemo(registry: Registry) {
+    registry.add('demo entry', () => <div/>);
+}

src/components/registry/Registry.ts

@@ -106,16 +106,34 @@ class Registry {
         return byUrl.length > 0 ? byUrl[0] : null;
     }
 
-    findByName(name: string): DemoEntry | null {
-        const byName = this.demoEntries
-            .filter(entry => entry.name === name);
+    findDemoByName(name: string): DemoEntry | null {
+        const found = findDemoAndReturn(this.demoEntries, name, idx => this.demoEntries[idx]);
+        return found ? found : null;
+    }
 
-        if (byName.length === 0) {
-            return null;
-        }
+    findNextDemoByCurrentName(name: string): DemoEntry {
+        const found = findDemoAndReturn(this.demoEntries, name, idx => this.demoEntries[idx + 1]);
+        return found ? found : this.demoEntries[this.demoEntries.length - 1];
+    }
+
+    findPrevDemoByCurrentName(name: string): DemoEntry {
+        const found = findDemoAndReturn(this.demoEntries, name, idx => this.demoEntries[idx - 1]);
+        return found ? found : this.demoEntries[0];
+    }
+}
 
-        return byName[0];
+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;
 }
 
 export { Registry };

src/components/viewer/ComponentViewer.tsx

@@ -45,6 +45,8 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         this.state = this.stateFromUrl();
         this.hotKeyBoundActions = {
             'Alt F': this.onFullScreenToggle,
+            'Alt Down': this.onNextDemo,
+            'Alt Up': this.onPrevDemo,
             ...this.dropDownKeyBoundActions()
         };
     }
@@ -56,7 +58,7 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         } = this.state;
 
         const registry = this.findSelectedRegistry();
-        const demoEntry = registry ? registry.findByName(demoName) : null;
+        const demoEntry = registry ? registry.findDemoByName(demoName) : null;
 
         const rendered = demoEntry && (demoEntry.isMiniApp() || isFullScreen) ?
             this.renderDemo(demoEntry, true) :
@@ -204,6 +206,31 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
             this.state.selectedToolbarItem);
     }
 
+    private onNextDemo = () => {
+        this.withRegistryAndDemoNameWhenPresent(((registry, demoName) => {
+            const nextDemo = registry.findNextDemoByCurrentName(demoName);
+            this.selectDemo(nextDemo.name);
+        }));
+    }
+
+    private onPrevDemo = () => {
+        this.withRegistryAndDemoNameWhenPresent(((registry, demoName) => {
+            const prevDemo = registry.findPrevDemoByCurrentName(demoName);
+            this.selectDemo(prevDemo.name);
+        }));
+    }
+
+    private withRegistryAndDemoNameWhenPresent = (code: (registry: Registry, demoName: string) => void) => {
+        const registry = this.findSelectedRegistry();
+        const {demoName} = this.state;
+
+        if (!registry) {
+            return;
+        }
+
+        code(registry, demoName);
+    }
+
     private selectRegistry = (registryName: string) => {
         this.pushUrl(
             registryName,

src/components/viewer/ComponentViewerStateCreator.ts

@@ -20,7 +20,7 @@ export class ComponentViewerStateCreator {
     }
 
     private static firstTitleByDemoName(registry: Registry | null, name: string) {
-        const demoEntry = registry ? registry.findByName(name) : null;
+        const demoEntry = registry ? registry.findDemoByName(name) : null;
         return demoEntry ? demoEntry.firstEntryTitle : '';
     }