@24i/bigscreen-sdk 1.1.0 → 2.1.1-alpha.2133

package/packages/router/src/Router.tsx

@@ -28,8 +28,6 @@ const filterNulls = (allChildren: (JSX.Element | null)[]) => (
 export class Router extends Component<Props> {
     paths: { [key: string]: RoutePath } = {};
 
-    routerDomRef = createRef<HTMLDivElement>();
-
     static defaultProps = {
         defaultPath: '/',
         detachInactiveRoutes: true,
@@ -40,14 +38,12 @@ export class Router extends Component<Props> {
     constructor(props: Props) {
         super(props);
         routerRef.current = this;
-        const { children } = this.props;
-        this.createRefs(children);
+        this.createRefs();
     }
 
     componentDidMount() {
         window.document.addEventListener('keydown', this.onKeyDown, false);
         window.addEventListener('hashchange', this.onHashChange, false);
-        this.hideAllRoutes();
         this.goToDefaultPath();
     }
 
@@ -95,8 +91,6 @@ export class Router extends Component<Props> {
         return activeRoutePath?.ref.current || null;
     }
 
-    // TODO: refactor to reduce complexity
-    // eslint-disable-next-line sonarjs/cognitive-complexity
     switchRoutes(
         routePathToHide: RoutePath | null,
         routePathToShow: RoutePath | null,
@@ -110,31 +104,18 @@ export class Router extends Component<Props> {
             } else if (routePathToShow) {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) {
-                    routeToHide!.replace(routeToShow!);
-                } else {
-                    routeToHide!.hideRoute();
-                    routeToShow!.showRoute();
-                }
+                if (detachInactiveRoutes) routeToHide!.replace(routeToShow!);
                 routeToShow!.show();
                 routePathToShow.isVisible = true;
                 return;
             } else {
                 routeToHide!.hide();
                 routePathToHide.isVisible = false;
-                if (detachInactiveRoutes) {
-                    routeToHide!.detach();
-                } else {
-                    routeToHide!.hideRoute();
-                }
+                if (detachInactiveRoutes) routeToHide!.detach();
             }
         }
         if (routePathToShow) {
-            if (detachInactiveRoutes) {
-                routeToShow!.attach();
-            } else {
-                routeToShow!.showRoute();
-            }
+            if (detachInactiveRoutes) routeToShow!.attach();
             routeToShow!.show();
             routePathToShow.isVisible = true;
         }
@@ -144,10 +125,11 @@ export class Router extends Component<Props> {
         this.getActiveRoute()?.focus();
     }
 
-    createRefs(routes: JSX.Element[]) {
-        forEach(routes, (route: JSX.Element) => {
-            if (route.type === Route) {
-                const { path } = route.props;
+    createRefs() {
+        const { children } = this.props;
+        forEach(children, (child: JSX.Element) => {
+            if (child.type === Route) {
+                const { path } = child.props;
                 const { regexpPath, paramNames } = pathToRegExp(path);
                 this.paths[path] = {
                     ref: createRef<Route>(),
@@ -169,28 +151,9 @@ export class Router extends Component<Props> {
         }
     }
 
-    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) => {
+    render() {
+        const { children, detachInactiveRoutes } = this.props;
+        return filterNulls(map(children, (child: JSX.Element) => {
             if (child.type === Route) {
                 const { path, Component: RouteComponent } = child.props;
                 const route = this.paths[path];
@@ -198,23 +161,14 @@ export class Router extends Component<Props> {
                     <Route
                         ref={route.ref}
                         path={path}
-                        domParent={this.routerDomRef}
                         regexpPath={route.regexpPath}
                         Component={RouteComponent}
                         paramNames={route.paramNames}
+                        isDetachable={detachInactiveRoutes}
                     />
                 );
             }
             return null;
         }));
     }
-
-    render() {
-        const { children } = this.props;
-        return (
-            <div ref={this.routerDomRef} className="router">
-                {this.renderRoutes(children)}
-            </div>
-        );
-    }
 }

package/packages/router/src/history.ts

@@ -2,10 +2,8 @@ import { NavigationConfig } from './types';
 
 export const history: string[] = [];
 
-const pathWithHash = (path:string) => `#${path}`;
-
 const navigate = (path: string) => {
-    window.location.href = pathWithHash(path);
+    window.location.href = `#${path}`;
 };
 
 export const go = (path: string, { skipHistory, replaceHistory }: NavigationConfig = {}) => {
@@ -24,8 +22,3 @@ export const back = () => {
 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 { history, go, back, clearHistory } from './history';
 export { focusActiveRoute } from './focusActiveRoute';
 export { fromSafeUrl, toSafeUrl } from './utils';

package/packages/router/src/utils.ts

@@ -6,16 +6,14 @@ export const isPathVisible = (hash: string, regexpPath?: RegExp) => (
 
 export const getCurrentHash = () => window.location.href.split('#')[1] || '';
 
-// eslint-disable-next-line no-useless-escape
-const PARAM_REGEX = /([a-zA-Z0-9+\-=.:%_()\[\]{}]+)/;
-export const PARAM_REGEX_STR = PARAM_REGEX.source;
+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_REGEX_STR);
+            regexpParts.push(PARAM);
             paramNames.push(pathPart.replace(':', ''));
         } else regexpParts.push(pathPart);
     });
@@ -25,13 +23,10 @@ export const pathToRegExp = (path: string) => {
     };
 };
 
-const toUrlSafeBase64 = (param: string) => btoa(param).replace('/', '_');
-const fromUrlSafeBase64 = (base64: string) => atob(base64.replace('_', '/'));
-
 export const toSafeUrl = (param: string) => (
-    toUrlSafeBase64(unescape(encodeURIComponent(param)))
+    btoa(unescape(encodeURIComponent(param)))
 );
 
 export const fromSafeUrl = (base64: string) => (
-    decodeURIComponent(escape(fromUrlSafeBase64(base64)))
+    decodeURIComponent(escape(atob(base64)))
 );

package/packages/sass-utils/src/linear-gradient.scss

@@ -1,8 +1,3 @@
-@use 'sass:list';
-@use 'sass:math';
-@use 'sass:meta';
-@use 'sass:map';
-
 @function legacy-direction($value) {
     @if is-direction($value) == false {
         @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
@@ -21,18 +16,18 @@
         to left top     : right bottom,
         to top left     : bottom right
     );
-    @if map.has-key($conversion-map, $value) {
-        @return map.get($conversion-map, $value);
+    @if map-has-key($conversion-map, $value) {
+        @return map-get($conversion-map, $value);
     }
     @return 90deg - $value;
 }
 
 @function is-direction($value) {
-    $is-keyword: list.index((
+    $is-keyword: index((
         to top, to top right, to right top, to right, to bottom right, to right bottom,
         to bottom, to bottom left, to left bottom, to left, to left top, to top left,
     ), $value);
-    $is-angle: meta.type-of($value) == 'number' and list.index('deg' 'grad' 'turn' 'rad', math.unit($value));
+    $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
 
     @return $is-keyword or $is-angle;
 }

package/packages/sass-utils/src/scale.1080.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 @function scale($value) {
-    @return math.round($number: $value);
+    @return round($number: $value);
 }

package/packages/sass-utils/src/scale.720.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
 
 @function scale($value) {
-    @return math.round($number: math.div($value, 1.5));
+    @return round($number: math.div($value, 1.5));
 }

package/packages/time/README.md

@@ -52,7 +52,7 @@ await time.init({
 ```
 
 ### `getCurrentTime(): Date`
-It returns date object having UTC time set to local time.
+It returns date object having local time set to server current time.
 
 ### `getCurrentUnixTime(): number`
 It returns UNIX time in milliseconds of server UTC time.
@@ -60,9 +60,6 @@ It returns UNIX time in milliseconds of server UTC time.
 ### `getTimezoneOffset(): number`
 It returns timezone offset in minutes, for UTC+1 (Germany) is 60.
 
-### `getTimezoneOffsetMs(): number`
-It returns timezone offset in milliseconds, for UTC+1 (Germany) is 3600000.
-
 ### `initStatus: InitStatus`
 To check what time you are using, just check the `initStatus` property.
 

package/packages/time/src/Time.ts

@@ -1,6 +1,6 @@
 import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
 import { parseIsoDate, getDayStart, getDayEnd } from './utils';
-import { InitStatus, ErrorCode, MS_PER_MINUTE } from './constants';
+import { InitStatus, ErrorCode } from './constants';
 import { Config, TimeServiceResp } from './types';
 
 /**
@@ -22,9 +22,6 @@ class Time {
     /** The difference in milliseconds between System Date and Server Date */
     offsetMs = 0;
 
-    /** The difference Date object internally adds to timestamp if not asking for UTC time. */
-    deviceOffset = new Date().getTimezoneOffset() * MS_PER_MINUTE;
-
     /** Timer for periodical time update */
     syncInterval = createInterval();
 
@@ -116,7 +113,7 @@ class Time {
         this.currentTime = currentTime;
         this.serverTime = date;
         this.serverUnixTime = unixTime;
-        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime() + this.deviceOffset;
+        this.offsetMs = this.currentTime.getTime() - this.serverTime.getTime();
         this.timezoneOffset = timezoneOffset;
     }
 
@@ -171,15 +168,6 @@ class Time {
         return this.timezoneOffset;
     }
 
-    /**
-     * Returns the timezone offset in milliseconds.
-     *
-     * @returns Timezone offset in milliseconds, e.g. for UTC+1 (Germany) is 3600000.
-     */
-    getTimezoneOffsetMs() {
-        return this.timezoneOffset * MS_PER_MINUTE;
-    }
-
     /**
      * Returns offset (milliseconds) between System and Server Date object.
      *
@@ -204,34 +192,24 @@ class Time {
     }
 
     /**
-     * Returns time, which is manipulated, based on the fact, that UI is displaying values in UTC.
+     * Returns current time.
      *
-     * @returns Current time values as being in UTC zone.
+     * @returns Current time.
      */
     getCurrentTime() {
         const now = new Date().getTime();
         return new Date(now - this.offsetMs);
     }
 
-    /**
-     * Returns current time.
-     *
-     * @returns Current time.
-     */
-    getCurrentTimeReal() {
-        const nowShifted = this.getCurrentTime().getTime();
-        return new Date(nowShifted + this.deviceOffset);
-    }
-
     /**
      * Returns whether the timestamp belongs to today
      * @param timestamp to check
      * @returns true if the timestamp falls between start and end of today
      */
     isToday(timestamp: number) {
-        const currentDate = this.getCurrentTimeReal();
-        const startOfToday = getDayStart(currentDate) - this.deviceOffset; // We must get 00:00 UTC
-        const endOfToday = getDayEnd(currentDate) - this.deviceOffset;
+        const currentTime = this.getCurrentTime();
+        const startOfToday = getDayStart(currentTime);
+        const endOfToday = getDayEnd(currentTime);
         return startOfToday <= timestamp && timestamp < endOfToday;
     }
 
@@ -241,10 +219,10 @@ class Time {
      * @returns true if the timestamp falls between start and end of tomorrow
      */
     isTomorrow(timestamp: number) {
-        const currentDate = this.getCurrentTimeReal();
-        const startOfTomorrow = getDayEnd(currentDate) - this.deviceOffset;
+        const currentTime = this.getCurrentTime();
+        const startOfTomorrow = getDayEnd(currentTime);
         const tommorow = new Date(startOfTomorrow + 1);
-        const endOfTomorrow = getDayEnd(tommorow) - this.deviceOffset;
+        const endOfTomorrow = getDayEnd(tommorow);
         return startOfTomorrow <= timestamp && timestamp < endOfTomorrow;
     }
 
@@ -254,10 +232,10 @@ class Time {
      * @returns true if the timestamp falls between start and end of yesterday
      */
     isYesterday(timestamp: number) {
-        const currentDate = this.getCurrentTimeReal();
-        const endOfYesterday = getDayStart(currentDate) - this.deviceOffset;
+        const currentTime = this.getCurrentTime();
+        const endOfYesterday = getDayStart(currentTime);
         const yesterday = new Date(endOfYesterday - 1);
-        const startOfYesterday = getDayStart(yesterday) - this.deviceOffset;
+        const startOfYesterday = getDayStart(yesterday);
         return startOfYesterday <= timestamp && timestamp < endOfYesterday;
     }
 }

package/packages/time/src/constants.ts

@@ -9,6 +9,5 @@ export const ErrorCode = {
     NO_TIME_SERVICE_PROVIDER: 'NO_TIME_SERVICE_PROVIDER',
 };
 
-export const MS_PER_MINUTE = 60000;
 export const MINUTES_PER_HOUR = 60;
 export const HOURS_PER_DAY = 24;

package/packages/toast/src/ToastService.tsx

@@ -34,22 +34,11 @@ export class ToastService<T extends MinimalToastProps> extends Component<Props<T
                 this.serviceContinue();
             },
         } as T);
-
-        // Check if toast element with the same message already exists in stack
-        const elementExists = this.toastElementBuffer.find((item) => {
-            const { message: newMessage } = toastElement.props;
-            const { message } = item.props;
-
-            return message === newMessage;
-        }) !== undefined;
-
-        if (!elementExists) {
-            if (!this.isShowingToast) {
-                this.appendMount(toastElement, this.rootDivRef);
-                this.isShowingToast = true;
-            } else {
-                this.toastElementBuffer.push(toastElement);
-            }
+        if (!this.isShowingToast) {
+            this.appendMount(toastElement, this.rootDivRef);
+            this.isShowingToast = true;
+        } else {
+            this.toastElementBuffer.push(toastElement);
         }
     }
 

package/packages/types-bigscreen-jsx/README.md

@@ -1,12 +1,11 @@
 # BIGscreen JSX Types
 BIGscreen JSX is a set of tools that allow you to write JSX and converts it to JS Dom API.
-This package contains types originally from @types/react, modified for bigscreen-jsx needs.
+This package contains types originally from @types/react, modified for smartapps-bigscreen-jsx needs.
 
 # Contributing
-Navigate to `<root>/node_modules/@types/react/`.
-All react types are inside files `index.d.ts` and `global.d.ts`. Modify them to suit your needs and afterwards run this commands in the `<root>` directory:
+Navigate to `<root>/packages/types-smartapps-bigscreen-jsx/node_modules/@types/react/`.
+All react types are inside files `index.d.ts` and `global.d.ts`. Modify them to suit your needs and afterwards run this command in the `packages/types-smartapps-bigscreen-jsx/` directory:
 
 `npx patch-package @types/react`
-`npm install`
 
-You can confirm everything worked by looking into `<root>/patches/`. You should see a file named `@types+react+<version-etc>.patch` that includes diff of your changes.
+You can confirm everything worked by looking into `packages/types-smartapps-bigscreen-jsx/patches/`. You should see a file named `@types+react+<version-etc>.patch` that includes diff of your changes.