@24i/bigscreen-sdk 1.0.30-alpha.2518 → 1.0.30

package/packages/router/src/Router.tsx

@@ -1,220 +1,220 @@
-import { Component, Reference, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { device } from '@24i/bigscreen-sdk/device';
-import { filter, forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { stopEventImmediately } from '@24i/bigscreen-sdk/utils/stopEvent';
-import { Route } from './Route';
-import { pathToRegExp, getCurrentHash, isPathVisible } from './utils';
-import { go, back, history } from './history';
-
-type Props = {
-    children: JSX.Element[],
-    defaultPath?: string,
-    detachInactiveRoutes?: boolean,
-};
-
-type RoutePath = {
-    ref: Reference<Route>,
-    isVisible: boolean,
-    regexpPath: RegExp,
-    paramNames: string[],
-};
-
-export const routerRef = createRef<Router>();
-
-const filterNulls = (allChildren: (JSX.Element | null)[]) => (
-    <>{filter(allChildren, (child) => child !== null)}</>
-);
-
-export class Router extends Component<Props> {
-    paths: { [key: string]: RoutePath } = {};
-
-    routerDomRef = createRef<HTMLDivElement>();
-
-    static defaultProps = {
-        defaultPath: '/',
-        detachInactiveRoutes: true,
-    };
-
-    declare props: DeclareProps<Props, typeof Router.defaultProps>;
-
-    constructor(props: Props) {
-        super(props);
-        routerRef.current = this;
-        const { children } = this.props;
-        this.createRefs(children);
-    }
-
-    componentDidMount() {
-        window.document.addEventListener('keydown', this.onKeyDown, false);
-        window.addEventListener('hashchange', this.onHashChange, false);
-        this.hideAllRoutes();
-        this.goToDefaultPath();
-    }
-
-    componentWillUnmount() {
-        window.document.removeEventListener('keydown', this.onKeyDown, false);
-        window.removeEventListener('hashchange', this.onHashChange, false);
-    }
-
-    onHashChange = () => {
-        this.setPathsVisibility();
-    };
-
-    onKeyDown = (event: KeyboardEvent) => {
-        if (history.length > 1 && device.isBackOrEscape(event)) {
-            back();
-            stopEventImmediately(event);
-        }
-    };
-
-    setPathsVisibility() {
-        const hash = getCurrentHash();
-        let routePathToShow: RoutePath | null = null;
-        let routePathToHide: RoutePath | null = null;
-
-        forEach(Object.keys(this.paths), (path) => {
-            const route = this.paths[path];
-            if (!routePathToShow && isPathVisible(hash, route.regexpPath)) {
-                routePathToShow = route;
-            }
-            if (route.isVisible) {
-                routePathToHide = route;
-            }
-        });
-
-        const routeToHide = routePathToHide ? (routePathToHide as RoutePath).ref.current : null;
-        const routeToShow = routePathToShow ? (routePathToShow as RoutePath).ref.current : null;
-
-        this.switchRoutes(routePathToHide, routePathToShow, routeToHide, routeToShow);
-    }
-
-    getActiveRoute() {
-        const activeRoutePath = Object.values(this.paths).find((routePath: RoutePath) => (
-            routePath.isVisible
-        ));
-        return activeRoutePath?.ref.current || null;
-    }
-
-    // TODO: refactor to reduce complexity
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    switchRoutes(
-        routePathToHide: RoutePath | null,
-        routePathToShow: RoutePath | null,
-        routeToHide: Route | null,
-        routeToShow: Route | null,
-    ) {
-        const { detachInactiveRoutes } = this.props;
-        if (routePathToHide) {
-            if (routePathToShow && routeToHide === routeToShow) {
-                routeToHide!.deactivate();
-            } else if (routePathToShow) {
-                routeToHide!.hide();
-                routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) {
-                    routeToHide!.replace(routeToShow!);
-                } else {
-                    routeToHide!.hideRoute();
-                    routeToShow!.showRoute();
-                }
-                routeToShow!.show();
-                routePathToShow.isVisible = true;
-                return;
-            } else {
-                routeToHide!.hide();
-                routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) {
-                    routeToHide!.detach();
-                } else {
-                    routeToHide!.hideRoute();
-                }
-            }
-        }
-        if (routePathToShow) {
-            if (detachInactiveRoutes) {
-                routeToShow!.attach();
-            } else {
-                routeToShow!.showRoute();
-            }
-            routeToShow!.show();
-            routePathToShow.isVisible = true;
-        }
-    }
-
-    focus() {
-        this.getActiveRoute()?.focus();
-    }
-
-    createRefs(routes: JSX.Element[]) {
-        forEach(routes, (route: JSX.Element) => {
-            if (route.type === Route) {
-                const { path } = route.props;
-                const { regexpPath, paramNames } = pathToRegExp(path);
-                this.paths[path] = {
-                    ref: createRef<Route>(),
-                    isVisible: false,
-                    regexpPath,
-                    paramNames,
-                };
-            }
-        });
-    }
-
-    goToDefaultPath() {
-        const { defaultPath } = this.props;
-        const isAlreadyThere = defaultPath === getCurrentHash();
-        go(defaultPath);
-        if (isAlreadyThere) {
-            // Hash remains same so we need to trigger it manually
-            this.onHashChange();
-        }
-    }
-
-    hideAllRoutes() {
-        const { detachInactiveRoutes } = this.props;
-        forEach(Object.keys(this.paths), (key: string) => {
-            const route = this.paths[key];
-            if (!route.isVisible) {
-                if (detachInactiveRoutes) {
-                    route.ref.current!.detach();
-                } else {
-                    route.ref.current!.hideRoute();
-                }
-            }
-        });
-    }
-
-    appendRoutes(routes: JSX.Element[]) {
-        this.createRefs(routes);
-        this.appendMount(this.renderRoutes(routes), this.routerDomRef);
-        this.hideAllRoutes();
-    }
-
-    renderRoutes(routes: JSX.Element[]) {
-        return filterNulls(map(routes, (child: JSX.Element) => {
-            if (child.type === Route) {
-                const { path, Component: RouteComponent } = child.props;
-                const route = this.paths[path];
-                return (
-                    <Route
-                        ref={route.ref}
-                        path={path}
-                        domParent={this.routerDomRef}
-                        regexpPath={route.regexpPath}
-                        Component={RouteComponent}
-                        paramNames={route.paramNames}
-                    />
-                );
-            }
-            return null;
-        }));
-    }
-
-    render() {
-        const { children } = this.props;
-        return (
-            <div ref={this.routerDomRef} className="router">
-                {this.renderRoutes(children)}
-            </div>
-        );
-    }
-}
+import { Component, Reference, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { device } from '@24i/bigscreen-sdk/device';
+import { filter, forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { stopEventImmediately } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { Route } from './Route';
+import { pathToRegExp, getCurrentHash, isPathVisible } from './utils';
+import { go, back, history } from './history';
+
+type Props = {
+    children: JSX.Element[],
+    defaultPath?: string,
+    detachInactiveRoutes?: boolean,
+};
+
+type RoutePath = {
+    ref: Reference<Route>,
+    isVisible: boolean,
+    regexpPath: RegExp,
+    paramNames: string[],
+};
+
+export const routerRef = createRef<Router>();
+
+const filterNulls = (allChildren: (JSX.Element | null)[]) => (
+    <>{filter(allChildren, (child) => child !== null)}</>
+);
+
+export class Router extends Component<Props> {
+    paths: { [key: string]: RoutePath } = {};
+
+    routerDomRef = createRef<HTMLDivElement>();
+
+    static defaultProps = {
+        defaultPath: '/',
+        detachInactiveRoutes: true,
+    };
+
+    declare props: DeclareProps<Props, typeof Router.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        routerRef.current = this;
+        const { children } = this.props;
+        this.createRefs(children);
+    }
+
+    componentDidMount() {
+        window.document.addEventListener('keydown', this.onKeyDown, false);
+        window.addEventListener('hashchange', this.onHashChange, false);
+        this.hideAllRoutes();
+        this.goToDefaultPath();
+    }
+
+    componentWillUnmount() {
+        window.document.removeEventListener('keydown', this.onKeyDown, false);
+        window.removeEventListener('hashchange', this.onHashChange, false);
+    }
+
+    onHashChange = () => {
+        this.setPathsVisibility();
+    };
+
+    onKeyDown = (event: KeyboardEvent) => {
+        if (history.length > 1 && device.isBackOrEscape(event)) {
+            back();
+            stopEventImmediately(event);
+        }
+    };
+
+    setPathsVisibility() {
+        const hash = getCurrentHash();
+        let routePathToShow: RoutePath | null = null;
+        let routePathToHide: RoutePath | null = null;
+
+        forEach(Object.keys(this.paths), (path) => {
+            const route = this.paths[path];
+            if (!routePathToShow && isPathVisible(hash, route.regexpPath)) {
+                routePathToShow = route;
+            }
+            if (route.isVisible) {
+                routePathToHide = route;
+            }
+        });
+
+        const routeToHide = routePathToHide ? (routePathToHide as RoutePath).ref.current : null;
+        const routeToShow = routePathToShow ? (routePathToShow as RoutePath).ref.current : null;
+
+        this.switchRoutes(routePathToHide, routePathToShow, routeToHide, routeToShow);
+    }
+
+    getActiveRoute() {
+        const activeRoutePath = Object.values(this.paths).find((routePath: RoutePath) => (
+            routePath.isVisible
+        ));
+        return activeRoutePath?.ref.current || null;
+    }
+
+    // TODO: refactor to reduce complexity
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    switchRoutes(
+        routePathToHide: RoutePath | null,
+        routePathToShow: RoutePath | null,
+        routeToHide: Route | null,
+        routeToShow: Route | null,
+    ) {
+        const { detachInactiveRoutes } = this.props;
+        if (routePathToHide) {
+            if (routePathToShow && routeToHide === routeToShow) {
+                routeToHide!.deactivate();
+            } else if (routePathToShow) {
+                routeToHide!.hide();
+                routePathToHide.isVisible = false;
+                if (detachInactiveRoutes) {
+                    routeToHide!.replace(routeToShow!);
+                } else {
+                    routeToHide!.hideRoute();
+                    routeToShow!.showRoute();
+                }
+                routeToShow!.show();
+                routePathToShow.isVisible = true;
+                return;
+            } else {
+                routeToHide!.hide();
+                routePathToHide.isVisible = false;
+                if (detachInactiveRoutes) {
+                    routeToHide!.detach();
+                } else {
+                    routeToHide!.hideRoute();
+                }
+            }
+        }
+        if (routePathToShow) {
+            if (detachInactiveRoutes) {
+                routeToShow!.attach();
+            } else {
+                routeToShow!.showRoute();
+            }
+            routeToShow!.show();
+            routePathToShow.isVisible = true;
+        }
+    }
+
+    focus() {
+        this.getActiveRoute()?.focus();
+    }
+
+    createRefs(routes: JSX.Element[]) {
+        forEach(routes, (route: JSX.Element) => {
+            if (route.type === Route) {
+                const { path } = route.props;
+                const { regexpPath, paramNames } = pathToRegExp(path);
+                this.paths[path] = {
+                    ref: createRef<Route>(),
+                    isVisible: false,
+                    regexpPath,
+                    paramNames,
+                };
+            }
+        });
+    }
+
+    goToDefaultPath() {
+        const { defaultPath } = this.props;
+        const isAlreadyThere = defaultPath === getCurrentHash();
+        go(defaultPath);
+        if (isAlreadyThere) {
+            // Hash remains same so we need to trigger it manually
+            this.onHashChange();
+        }
+    }
+
+    hideAllRoutes() {
+        const { detachInactiveRoutes } = this.props;
+        forEach(Object.keys(this.paths), (key: string) => {
+            const route = this.paths[key];
+            if (!route.isVisible) {
+                if (detachInactiveRoutes) {
+                    route.ref.current!.detach();
+                } else {
+                    route.ref.current!.hideRoute();
+                }
+            }
+        });
+    }
+
+    appendRoutes(routes: JSX.Element[]) {
+        this.createRefs(routes);
+        this.appendMount(this.renderRoutes(routes), this.routerDomRef);
+        this.hideAllRoutes();
+    }
+
+    renderRoutes(routes: JSX.Element[]) {
+        return filterNulls(map(routes, (child: JSX.Element) => {
+            if (child.type === Route) {
+                const { path, Component: RouteComponent } = child.props;
+                const route = this.paths[path];
+                return (
+                    <Route
+                        ref={route.ref}
+                        path={path}
+                        domParent={this.routerDomRef}
+                        regexpPath={route.regexpPath}
+                        Component={RouteComponent}
+                        paramNames={route.paramNames}
+                    />
+                );
+            }
+            return null;
+        }));
+    }
+
+    render() {
+        const { children } = this.props;
+        return (
+            <div ref={this.routerDomRef} className="router">
+                {this.renderRoutes(children)}
+            </div>
+        );
+    }
+}

package/packages/router/src/focusActiveRoute.ts

@@ -1,5 +1,5 @@
-import { routerRef } from './Router';
-
-export const focusActiveRoute = () => {
-    routerRef.current?.focus();
-};
+import { routerRef } from './Router';
+
+export const focusActiveRoute = () => {
+    routerRef.current?.focus();
+};

package/packages/router/src/history.ts

@@ -1,31 +1,31 @@
-import { NavigationConfig } from './types';
-
-export const history: string[] = [];
-
-const pathWithHash = (path:string) => `#${path}`;
-
-const navigate = (path: string) => {
-    window.location.href = pathWithHash(path);
-};
-
-export const go = (path: string, { skipHistory, replaceHistory }: NavigationConfig = {}) => {
-    if (!skipHistory && !replaceHistory) history.push(path);
-    if (replaceHistory) history[history.length - 1] = path;
-    navigate(path);
-};
-
-export const back = () => {
-    if (history.length > 1) {
-        history.pop(); // remove current path
-        navigate(history[history.length - 1]);
-    }
-};
-
-export const clearHistory = () => {
-    history.length = 0;
-};
-
-export const replaceState = (path: string) => {
-    history[history.length - 1] = path;
-    window.history.replaceState(null, '', pathWithHash(path));
-};
+import { NavigationConfig } from './types';
+
+export const history: string[] = [];
+
+const pathWithHash = (path:string) => `#${path}`;
+
+const navigate = (path: string) => {
+    window.location.href = pathWithHash(path);
+};
+
+export const go = (path: string, { skipHistory, replaceHistory }: NavigationConfig = {}) => {
+    if (!skipHistory && !replaceHistory) history.push(path);
+    if (replaceHistory) history[history.length - 1] = path;
+    navigate(path);
+};
+
+export const back = () => {
+    if (history.length > 1) {
+        history.pop(); // remove current path
+        navigate(history[history.length - 1]);
+    }
+};
+
+export const clearHistory = () => {
+    history.length = 0;
+};
+
+export const replaceState = (path: string) => {
+    history[history.length - 1] = path;
+    window.history.replaceState(null, '', pathWithHash(path));
+};

package/packages/router/src/index.ts

@@ -1,6 +1,6 @@
-export { Router } from './Router';
-export { Route } from './Route';
-export type { IRoute } from './types';
-export { history, go, back, clearHistory, replaceState } from './history';
-export { focusActiveRoute } from './focusActiveRoute';
-export { fromSafeUrl, toSafeUrl } from './utils';
+export { Router } from './Router';
+export { Route } from './Route';
+export type { IRoute } from './types';
+export { history, go, back, clearHistory, replaceState } from './history';
+export { focusActiveRoute } from './focusActiveRoute';
+export { fromSafeUrl, toSafeUrl } from './utils';

package/packages/router/src/types.ts

@@ -1,13 +1,13 @@
-export type RouteParams = Record<string, string>;
-
-export interface IRoute<T extends RouteParams = {}> {
-    activate: (params: T) => void,
-    reactivate: (params: T) => void,
-    deactivate: () => void,
-    focus: () => void,
-}
-
-export type NavigationConfig = {
-    skipHistory?: boolean,
-    replaceHistory?: boolean,
-};
+export type RouteParams = Record<string, string>;
+
+export interface IRoute<T extends RouteParams = {}> {
+    activate: (params: T) => void,
+    reactivate: (params: T) => void,
+    deactivate: () => void,
+    focus: () => void,
+}
+
+export type NavigationConfig = {
+    skipHistory?: boolean,
+    replaceHistory?: boolean,
+};

package/packages/router/src/utils.ts

@@ -1,32 +1,32 @@
-import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
-
-export const isPathVisible = (hash: string, regexpPath?: RegExp) => (
-    !!regexpPath && !!hash.match(regexpPath)
-);
-
-export const getCurrentHash = () => window.location.href.split('#')[1] || '';
-
-const PARAM = '([a-zA-Z0-9-=.:%_()\\[\\]{}]+)';
-
-export const pathToRegExp = (path: string) => {
-    const regexpParts: string[] = [];
-    const paramNames: string[] = [];
-    forEach(path.split('/'), (pathPart) => {
-        if (pathPart.indexOf(':') === 0) {
-            regexpParts.push(PARAM);
-            paramNames.push(pathPart.replace(':', ''));
-        } else regexpParts.push(pathPart);
-    });
-    return {
-        regexpPath: new RegExp(`^${regexpParts.join('\\/')}$`),
-        paramNames,
-    };
-};
-
-export const toSafeUrl = (param: string) => (
-    btoa(unescape(encodeURIComponent(param)))
-);
-
-export const fromSafeUrl = (base64: string) => (
-    decodeURIComponent(escape(atob(base64)))
-);
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+
+export const isPathVisible = (hash: string, regexpPath?: RegExp) => (
+    !!regexpPath && !!hash.match(regexpPath)
+);
+
+export const getCurrentHash = () => window.location.href.split('#')[1] || '';
+
+const PARAM = '([a-zA-Z0-9-=.:%_()\\[\\]{}]+)';
+
+export const pathToRegExp = (path: string) => {
+    const regexpParts: string[] = [];
+    const paramNames: string[] = [];
+    forEach(path.split('/'), (pathPart) => {
+        if (pathPart.indexOf(':') === 0) {
+            regexpParts.push(PARAM);
+            paramNames.push(pathPart.replace(':', ''));
+        } else regexpParts.push(pathPart);
+    });
+    return {
+        regexpPath: new RegExp(`^${regexpParts.join('\\/')}$`),
+        paramNames,
+    };
+};
+
+export const toSafeUrl = (param: string) => (
+    btoa(unescape(encodeURIComponent(param)))
+);
+
+export const fromSafeUrl = (base64: string) => (
+    decodeURIComponent(escape(atob(base64)))
+);