@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/developer-tools/src/DeveloperToolsService/DeveloperToolsList.tsx

@@ -1,125 +1,125 @@
-import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
-import {
-    Vertical,
-    focusCandidate,
-    setActiveElementAsFocusCandidate,
-} from '@24i/bigscreen-sdk/focus';
-import { BACK } from '@24i/bigscreen-sdk/device/keymap';
-import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { Storage } from '@24i/bigscreen-sdk/storage';
-import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
-import { DeveloperToolItem } from './DeveloperToolItem';
-import { reloadApp } from '../utils/reload';
-
-type Props = {
-    setActiveDeveloperToolRef: (ref: Reference<IDeveloperTool<DeveloperToolProps>>) => void;
-    onBack: () => void,
-};
-
-export class DeveloperToolsList extends Component<Props> {
-    rootRef = createRef<HTMLDivElement>();
-
-    verticalNavigation = createRef<InstanceType<typeof Vertical>>();
-
-    navigationChildren: Reference<HTMLDivElement>[] = [];
-
-    developerToolsRefs: Reference<IDeveloperTool<DeveloperToolProps>>[] = [];
-
-    displayToggler = getDisplayToggler(this.rootRef, true);
-
-    onToolPress = (index: number) => {
-        const { setActiveDeveloperToolRef } = this.props;
-        const activeDeveloperToolRef = this.developerToolsRefs[index];
-        this.closeDeveloperToolsList();
-        activeDeveloperToolRef.current!.show();
-        setActiveDeveloperToolRef(activeDeveloperToolRef);
-    };
-
-    onReloadToolPress = () => {
-        reloadApp();
-    };
-
-    async onClearDataToolPress() {
-        await Storage.clear();
-        reloadApp();
-    }
-
-    onKeyDown = (event: KeyboardEvent) => {
-        if (BACK.is(event)) {
-            const { onBack } = this.props;
-            this.closeDeveloperToolsList();
-            onBack();
-            stopEvent(event);
-        }
-    };
-
-    getNavigationRef() {
-        const ref = createRef<HTMLDivElement>();
-        this.navigationChildren.push(ref);
-        return ref;
-    }
-
-    focus() {
-        setActiveElementAsFocusCandidate();
-        this.verticalNavigation.current!.focus();
-    }
-
-    isDeveloperToolsListVisible() {
-        return this.displayToggler.isVisible();
-    }
-
-    closeDeveloperToolsList() {
-        this.clearMount('', this.rootRef);
-        this.displayToggler.hide();
-        this.navigationChildren = [];
-        focusCandidate();
-    }
-
-    renderDeveloperToolsList() {
-        this.clearMount(
-            <>
-                <div className="title">Developer tools</div>
-                <Vertical
-                    ref={this.verticalNavigation}
-                    domRef={this.rootRef}
-                    focusableChildren={this.navigationChildren}
-                >
-                    <div className="tools-list">
-                        {map(this.developerToolsRefs, (developerTool, index) => {
-                            const { name } = developerTool.current!;
-                            return (
-                                <DeveloperToolItem
-                                    ref={this.getNavigationRef()}
-                                    label={name}
-                                    onPress={() => this.onToolPress(index)}
-                                />
-                            );
-                        })}
-                        <DeveloperToolItem
-                            ref={this.getNavigationRef()}
-                            label="Clear data"
-                            onPress={this.onClearDataToolPress}
-                        />
-                        <DeveloperToolItem
-                            ref={this.getNavigationRef()}
-                            label="Restart app"
-                            onPress={this.onReloadToolPress}
-                        />
-                    </div>
-                </Vertical>
-            </>, this.rootRef,
-        );
-        this.displayToggler.show();
-    }
-
-    render() {
-        return (
-            <div
-                ref={this.rootRef}
-                className={`developer-tools-list ${DISPLAY_NONE}`}
-                onKeyDown={this.onKeyDown}
-            />
-        );
-    }
-}
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import {
+    Vertical,
+    focusCandidate,
+    setActiveElementAsFocusCandidate,
+} from '@24i/bigscreen-sdk/focus';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Storage } from '@24i/bigscreen-sdk/storage';
+import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
+import { DeveloperToolItem } from './DeveloperToolItem';
+import { reloadApp } from '../utils/reload';
+
+type Props = {
+    setActiveDeveloperToolRef: (ref: Reference<IDeveloperTool<DeveloperToolProps>>) => void;
+    onBack: () => void,
+};
+
+export class DeveloperToolsList extends Component<Props> {
+    rootRef = createRef<HTMLDivElement>();
+
+    verticalNavigation = createRef<InstanceType<typeof Vertical>>();
+
+    navigationChildren: Reference<HTMLDivElement>[] = [];
+
+    developerToolsRefs: Reference<IDeveloperTool<DeveloperToolProps>>[] = [];
+
+    displayToggler = getDisplayToggler(this.rootRef, true);
+
+    onToolPress = (index: number) => {
+        const { setActiveDeveloperToolRef } = this.props;
+        const activeDeveloperToolRef = this.developerToolsRefs[index];
+        this.closeDeveloperToolsList();
+        activeDeveloperToolRef.current!.show();
+        setActiveDeveloperToolRef(activeDeveloperToolRef);
+    };
+
+    onReloadToolPress = () => {
+        reloadApp();
+    };
+
+    async onClearDataToolPress() {
+        await Storage.clear();
+        reloadApp();
+    }
+
+    onKeyDown = (event: KeyboardEvent) => {
+        if (BACK.is(event)) {
+            const { onBack } = this.props;
+            this.closeDeveloperToolsList();
+            onBack();
+            stopEvent(event);
+        }
+    };
+
+    getNavigationRef() {
+        const ref = createRef<HTMLDivElement>();
+        this.navigationChildren.push(ref);
+        return ref;
+    }
+
+    focus() {
+        setActiveElementAsFocusCandidate();
+        this.verticalNavigation.current!.focus();
+    }
+
+    isDeveloperToolsListVisible() {
+        return this.displayToggler.isVisible();
+    }
+
+    closeDeveloperToolsList() {
+        this.clearMount('', this.rootRef);
+        this.displayToggler.hide();
+        this.navigationChildren = [];
+        focusCandidate();
+    }
+
+    renderDeveloperToolsList() {
+        this.clearMount(
+            <>
+                <div className="title">Developer tools</div>
+                <Vertical
+                    ref={this.verticalNavigation}
+                    domRef={this.rootRef}
+                    focusableChildren={this.navigationChildren}
+                >
+                    <div className="tools-list">
+                        {map(this.developerToolsRefs, (developerTool, index) => {
+                            const { name } = developerTool.current!;
+                            return (
+                                <DeveloperToolItem
+                                    ref={this.getNavigationRef()}
+                                    label={name}
+                                    onPress={() => this.onToolPress(index)}
+                                />
+                            );
+                        })}
+                        <DeveloperToolItem
+                            ref={this.getNavigationRef()}
+                            label="Clear data"
+                            onPress={this.onClearDataToolPress}
+                        />
+                        <DeveloperToolItem
+                            ref={this.getNavigationRef()}
+                            label="Restart app"
+                            onPress={this.onReloadToolPress}
+                        />
+                    </div>
+                </Vertical>
+            </>, this.rootRef,
+        );
+        this.displayToggler.show();
+    }
+
+    render() {
+        return (
+            <div
+                ref={this.rootRef}
+                className={`developer-tools-list ${DISPLAY_NONE}`}
+                onKeyDown={this.onKeyDown}
+            />
+        );
+    }
+}

package/packages/developer-tools/src/DeveloperToolsService/DeveloperToolsService.tsx

@@ -1,122 +1,122 @@
-import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { GREEN, YELLOW, BLUE } from '@24i/bigscreen-sdk/device/keymap';
-import { KeySequence } from '@24i/bigscreen-sdk/key-sequence';
-import { refocusAfterHashChange } from '@24i/bigscreen-sdk/focus';
-import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
-import { DeveloperToolsList } from './DeveloperToolsList';
-
-export type Props = {
-    children?: JSX.Element | JSX.Element[];
-    keySequence?: Array<{ code: string, keyCode: number }>;
-};
-
-export class DeveloperToolsService extends Component<Props> {
-    rootRef = createRef<HTMLDivElement>();
-
-    developerToolListRef = createRef<DeveloperToolsList>();
-
-    developerToolsRef = createRef<HTMLDivElement>();
-
-    keySequence: KeySequence;
-
-    activeDeveloperToolRef: Reference<IDeveloperTool<DeveloperToolProps>> | null = null;
-
-    openState: boolean = false;
-
-    constructor(props: Props) {
-        super(props);
-        const { keySequence } = this.props;
-        const renderKeySequence = keySequence || [BLUE, YELLOW, GREEN, BLUE, YELLOW];
-
-        this.keySequence = new KeySequence(renderKeySequence, {}, this.onKeySequencePressed);
-    }
-
-    componentDidMount() {
-        this.renderDeveloperToolsServices();
-        window.document.addEventListener('keydown', this.onGlobalKeyDown, true);
-        window.addEventListener('hashchange', this.onHashChange);
-    }
-
-    componentWillUnmount() {
-        window.document.removeEventListener('keydown', this.onGlobalKeyDown, true);
-        window.removeEventListener('hashchange', this.onHashChange);
-    }
-
-    onGlobalKeyDown = (event: KeyboardEvent) => {
-        if (!this.developerToolListRef.current!.isDeveloperToolsListVisible()) {
-            this.keySequence.onKeyDown(event);
-        }
-    };
-
-    onHashChange = () => {
-        if (this.openState) {
-            refocusAfterHashChange(this.rootRef);
-        }
-    };
-
-    onKeySequencePressed = () => {
-        this.openService();
-    };
-
-    closeService = () => {
-        this.openState = false;
-        this.setActiveDeveloperToolRef(null);
-    };
-
-    setActiveDeveloperToolRef = (ref: Reference<IDeveloperTool<DeveloperToolProps>> | null) => {
-        this.activeDeveloperToolRef = ref;
-    };
-
-    openService() {
-        this.openState = true;
-        this.hideActiveDeveloperTool();
-        this.openDeveloperToolsList();
-    }
-
-    openDeveloperToolsList() {
-        this.developerToolListRef.current!.renderDeveloperToolsList();
-        this.developerToolListRef.current!.focus();
-    }
-
-    hideActiveDeveloperTool() {
-        if (!this.activeDeveloperToolRef) return;
-        this.activeDeveloperToolRef.current!.hide();
-        this.setActiveDeveloperToolRef(null);
-    }
-
-    isOpen() {
-        return this.openState;
-    }
-
-    renderDeveloperToolsServices() {
-        const { children = [] } = this.props;
-        const childrenArray = Array.isArray(children) ? children : [children];
-
-        this.clearMount(
-            map(childrenArray, (child: JSX.Element) => {
-                const { ref = createRef() } = child.props;
-                this.developerToolListRef.current!.developerToolsRefs.push(ref);
-                child.props.onClose = this.closeService;
-                child.props.ref = ref;
-                return child;
-            }), this.developerToolsRef,
-        );
-    }
-
-    render() {
-        return (
-            <div ref={this.rootRef} className="developer-tools-service">
-                <DeveloperToolsList
-                    ref={this.developerToolListRef}
-                    setActiveDeveloperToolRef={this.setActiveDeveloperToolRef}
-                    onBack={this.closeService}
-                />
-                <div
-                    ref={this.developerToolsRef}
-                    className="developer-tools"
-                />
-            </div>
-        );
-    }
-}
+import { Component, Reference, createRef } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { GREEN, YELLOW, BLUE } from '@24i/bigscreen-sdk/device/keymap';
+import { KeySequence } from '@24i/bigscreen-sdk/key-sequence';
+import { refocusAfterHashChange } from '@24i/bigscreen-sdk/focus';
+import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
+import { DeveloperToolsList } from './DeveloperToolsList';
+
+export type Props = {
+    children?: JSX.Element | JSX.Element[];
+    keySequence?: Array<{ code: string, keyCode: number }>;
+};
+
+export class DeveloperToolsService extends Component<Props> {
+    rootRef = createRef<HTMLDivElement>();
+
+    developerToolListRef = createRef<DeveloperToolsList>();
+
+    developerToolsRef = createRef<HTMLDivElement>();
+
+    keySequence: KeySequence;
+
+    activeDeveloperToolRef: Reference<IDeveloperTool<DeveloperToolProps>> | null = null;
+
+    openState: boolean = false;
+
+    constructor(props: Props) {
+        super(props);
+        const { keySequence } = this.props;
+        const renderKeySequence = keySequence || [BLUE, YELLOW, GREEN, BLUE, YELLOW];
+
+        this.keySequence = new KeySequence(renderKeySequence, {}, this.onKeySequencePressed);
+    }
+
+    componentDidMount() {
+        this.renderDeveloperToolsServices();
+        window.document.addEventListener('keydown', this.onGlobalKeyDown, true);
+        window.addEventListener('hashchange', this.onHashChange);
+    }
+
+    componentWillUnmount() {
+        window.document.removeEventListener('keydown', this.onGlobalKeyDown, true);
+        window.removeEventListener('hashchange', this.onHashChange);
+    }
+
+    onGlobalKeyDown = (event: KeyboardEvent) => {
+        if (!this.developerToolListRef.current!.isDeveloperToolsListVisible()) {
+            this.keySequence.onKeyDown(event);
+        }
+    };
+
+    onHashChange = () => {
+        if (this.openState) {
+            refocusAfterHashChange(this.rootRef);
+        }
+    };
+
+    onKeySequencePressed = () => {
+        this.openService();
+    };
+
+    closeService = () => {
+        this.openState = false;
+        this.setActiveDeveloperToolRef(null);
+    };
+
+    setActiveDeveloperToolRef = (ref: Reference<IDeveloperTool<DeveloperToolProps>> | null) => {
+        this.activeDeveloperToolRef = ref;
+    };
+
+    openService() {
+        this.openState = true;
+        this.hideActiveDeveloperTool();
+        this.openDeveloperToolsList();
+    }
+
+    openDeveloperToolsList() {
+        this.developerToolListRef.current!.renderDeveloperToolsList();
+        this.developerToolListRef.current!.focus();
+    }
+
+    hideActiveDeveloperTool() {
+        if (!this.activeDeveloperToolRef) return;
+        this.activeDeveloperToolRef.current!.hide();
+        this.setActiveDeveloperToolRef(null);
+    }
+
+    isOpen() {
+        return this.openState;
+    }
+
+    renderDeveloperToolsServices() {
+        const { children = [] } = this.props;
+        const childrenArray = Array.isArray(children) ? children : [children];
+
+        this.clearMount(
+            map(childrenArray, (child: JSX.Element) => {
+                const { ref = createRef() } = child.props;
+                this.developerToolListRef.current!.developerToolsRefs.push(ref);
+                child.props.onClose = this.closeService;
+                child.props.ref = ref;
+                return child;
+            }), this.developerToolsRef,
+        );
+    }
+
+    render() {
+        return (
+            <div ref={this.rootRef} className="developer-tools-service">
+                <DeveloperToolsList
+                    ref={this.developerToolListRef}
+                    setActiveDeveloperToolRef={this.setActiveDeveloperToolRef}
+                    onBack={this.closeService}
+                />
+                <div
+                    ref={this.developerToolsRef}
+                    className="developer-tools"
+                />
+            </div>
+        );
+    }
+}

package/packages/developer-tools/src/DeveloperToolsService/index.ts

@@ -1 +1 @@
-export { DeveloperToolsService } from './DeveloperToolsService';
+export { DeveloperToolsService } from './DeveloperToolsService';

package/packages/developer-tools/src/DeveloperToolsService/styles/DeveloperToolsService.scss

@@ -1,64 +1,64 @@
-.developer-tools-service {
-    .developer-tools-list {
-        background-color: rgb(42, 42, 42);
-        position: absolute;
-        top: 0;
-        left: 0;
-        text-align: center;
-        font-family: sans-serif;
-        height: 100%;
-        width: 100%;
-        z-index: 9000;
-
-        .title {
-            font-size: $title-font-size;
-            font-weight: 700;
-            margin-top: $title-margin-top;
-            margin-bottom: $title-margin-bottom;
-        }
-
-        .tools-list {
-            display: inline-block;
-
-            .tool-item {
-                position: relative;
-                outline: none;
-                text-align: left;
-                margin-bottom: $tool-item-margin-bottom;
-                height: $tool-item-height;
-                width: $tool-item-width;
-
-                .tool-item-background {
-                    position: absolute;
-                    background-color: rgba(62, 61, 64, 0.6);
-                    border-radius: $tool-item-border-radius;
-                    top: 0;
-                    left: 0;
-                    height: 100%;
-                    width: 100%;
-                }
-            
-                .tool-item-label {
-                    position: relative;
-                    font-size: $tool-item-label-font-size;
-                    font-weight: 700;
-                    padding: $tool-item-label-padding;
-                }
-
-                &:focus .tool-item-background {
-                    background-color: rgb(72, 72, 74);
-                    border-color: rgb(255, 255, 255);
-                    border-style: solid;
-                    border-width: $tool-item-border-width;
-
-                    padding: $tool-item-focus-padding;
-                    top: -$tool-item-focus-padding -$tool-item-border-width;
-                    left: -$tool-item-focus-padding -$tool-item-border-width;
-
-                    box-shadow: $tool-item-focus-box-shadow-1 rgba(0, 0, 0, 0.3),
-                        $tool-item-focus-box-shadow-2 rgba(0, 0, 0, 0.2);
-                }
-            }
-        }
-    }
-}
+.developer-tools-service {
+    .developer-tools-list {
+        background-color: rgb(42, 42, 42);
+        position: absolute;
+        top: 0;
+        left: 0;
+        text-align: center;
+        font-family: sans-serif;
+        height: 100%;
+        width: 100%;
+        z-index: 9000;
+
+        .title {
+            font-size: $title-font-size;
+            font-weight: 700;
+            margin-top: $title-margin-top;
+            margin-bottom: $title-margin-bottom;
+        }
+
+        .tools-list {
+            display: inline-block;
+
+            .tool-item {
+                position: relative;
+                outline: none;
+                text-align: left;
+                margin-bottom: $tool-item-margin-bottom;
+                height: $tool-item-height;
+                width: $tool-item-width;
+
+                .tool-item-background {
+                    position: absolute;
+                    background-color: rgba(62, 61, 64, 0.6);
+                    border-radius: $tool-item-border-radius;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    width: 100%;
+                }
+            
+                .tool-item-label {
+                    position: relative;
+                    font-size: $tool-item-label-font-size;
+                    font-weight: 700;
+                    padding: $tool-item-label-padding;
+                }
+
+                &:focus .tool-item-background {
+                    background-color: rgb(72, 72, 74);
+                    border-color: rgb(255, 255, 255);
+                    border-style: solid;
+                    border-width: $tool-item-border-width;
+
+                    padding: $tool-item-focus-padding;
+                    top: -$tool-item-focus-padding -$tool-item-border-width;
+                    left: -$tool-item-focus-padding -$tool-item-border-width;
+
+                    box-shadow: $tool-item-focus-box-shadow-1 rgba(0, 0, 0, 0.3),
+                        $tool-item-focus-box-shadow-2 rgba(0, 0, 0, 0.2);
+                }
+            }
+        }
+    }
+}

package/packages/developer-tools/src/DeveloperToolsService/styles/DeveloperToolsService.styles.1080.scss

@@ -1,2 +1,2 @@
-@import './sizes.1080';
-@import './DeveloperToolsService';
+@import './sizes.1080';
+@import './DeveloperToolsService';

package/packages/developer-tools/src/DeveloperToolsService/styles/DeveloperToolsService.styles.animated.1080.scss

@@ -1,3 +1,3 @@
-@import './sizes.1080';
-@import './DeveloperToolsService';
-@import './animated';
+@import './sizes.1080';
+@import './DeveloperToolsService';
+@import './animated';

package/packages/developer-tools/src/DeveloperToolsService/styles/DeveloperToolsService.styles.animated.scss

@@ -1,4 +1,4 @@
-@import './sizes';
-@import './DeveloperToolsService';
-@import './animated';
-
+@import './sizes';
+@import './DeveloperToolsService';
+@import './animated';
+

package/packages/developer-tools/src/DeveloperToolsService/styles/DeveloperToolsService.styles.scss

@@ -1,2 +1,2 @@
-@import './sizes';
-@import './DeveloperToolsService';
+@import './sizes';
+@import './DeveloperToolsService';