@24i/bigscreen-sdk 1.0.32 → 1.0.33-alpha.2548

package/packages/time/src/types.ts

@@ -1,39 +1,39 @@
-/**
- * Object for handling parsed time
- */
-export type ParsedIsoDate = {
-    /**
-     * Date object reflecting parsed time
-     */
-    date: Date;
-    /**
-     * Timezone offset in minutes
-     */
-    timezoneOffset: number;
-    /**
-     * Miliseconds since epoch for parsed time
-     */
-    unixTime: number;
-};
-
-/**
- * Time service response
- */
-export type TimeServiceResp = {
-    /**
-     * An ISO-8601 valid string representing the current, local date/time.
-     */
-    datetime: string,
-};
-
-export type Config = {
-    /**
-     * Time service to obtain the current time e.g. from server. If unavailable,
-     * then system time is used.
-     */
-    timeService?: () => Promise<TimeServiceResp | null>,
-    /**
-     * Interval in milliseconds, to periodically synchronize the time with server.
-     */
-    syncIntervalMs?: number,
-};
+/**
+ * Object for handling parsed time
+ */
+export type ParsedIsoDate = {
+    /**
+     * Date object reflecting parsed time
+     */
+    date: Date;
+    /**
+     * Timezone offset in minutes
+     */
+    timezoneOffset: number;
+    /**
+     * Miliseconds since epoch for parsed time
+     */
+    unixTime: number;
+};
+
+/**
+ * Time service response
+ */
+export type TimeServiceResp = {
+    /**
+     * An ISO-8601 valid string representing the current, local date/time.
+     */
+    datetime: string,
+};
+
+export type Config = {
+    /**
+     * Time service to obtain the current time e.g. from server. If unavailable,
+     * then system time is used.
+     */
+    timeService?: () => Promise<TimeServiceResp | null>,
+    /**
+     * Interval in milliseconds, to periodically synchronize the time with server.
+     */
+    syncIntervalMs?: number,
+};

package/packages/time/src/utils.ts

@@ -1,79 +1,79 @@
-import { MINUTES_PER_HOUR, HOURS_PER_DAY } from './constants';
-import { ParsedIsoDate } from './types';
-
-/*
- * ISO 8601 date/time format:
- * - YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)
- * - YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00)
- * where TZD = time zone designator (Z or +hh:mm or -hh:mm)
- *
- * Inspiration: https://www.w3.org/TR/NOTE-datetime
- */
-// eslint-disable-next-line max-len
-const ISO_DATE_REGEXP = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})([.,]\d+)?([Z]|([+-])(\d{2}):(\d{2}))/;
-
-function integer(string: string | number) {
-    return parseInt(string.toString(), 10);
-}
-
-/**
- * @param isoDateTimeStr a date/time string in ISO-8601 format:
- * 1) YYYY-MM-DDThh:mm:ssTZD (eg. 1997-07-16T19:20:30+01:00)
- * 2) YYYY-MM-DDThh:mm:ss.sTZD (eg. 1997-07-16T19:20:30.45+01:00)
- * where TZD = time zone designator (Z or +hh:mm or -hh:mm)
- * @return date object keeping parsed local datetime, timezone offset in
- * minutes, unixTime in milliseconds. Null if parsing failed.
- */
-export function parseIsoDate(isoDateTimeStr: string): ParsedIsoDate | null {
-    const m = ISO_DATE_REGEXP.exec(isoDateTimeStr);
-    /* eslint-disable no-magic-numbers */
-    if (m) {
-        const year = integer(m[1]);
-        const month = integer(m[2]);
-        const date = integer(m[3]);
-        const hours = integer(m[4]);
-        const minutes = integer(m[5]);
-        const seconds = integer(m[6]);
-        const milliseconds = m[7] ? integer(m[7] as any * 1000) : 0;
-
-        let timezoneOffset = 0;
-        if (m[8] !== 'Z') {
-            let offsetMinutes = integer(m[10]) * MINUTES_PER_HOUR + integer(m[11]);
-            if (m[9] === '-') {
-                offsetMinutes = -offsetMinutes;
-            }
-            timezoneOffset = offsetMinutes;
-        }
-
-        const serverLocalDate = new Date(
-            year, month - 1, date, hours, minutes, seconds, milliseconds,
-        );
-        const unixTime = Date.UTC(
-            year, month - 1, date, hours, minutes - timezoneOffset, seconds, milliseconds,
-        );
-
-        return { date: serverLocalDate, timezoneOffset, unixTime };
-    }
-    /* eslint-enable no-magic-numbers */
-    return null;
-}
-
-/**
- * Returns the timestamp of the day start
- * @param date The date representing the day
- * @returns timestamp in ms
- */
-export const getDayStart = (date: Date) => {
-    date.setHours(0, 0, 0, 0);
-    return date.getTime();
-};
-
-/**
- * Returns the timestamp of the day end
- * @param date The date representing the day
- * @returns timestamp in ms
- */
-export const getDayEnd = (date: Date) => {
-    date.setHours(HOURS_PER_DAY, 0, 0, 0);
-    return date.getTime();
-};
+import { MINUTES_PER_HOUR, HOURS_PER_DAY } from './constants';
+import { ParsedIsoDate } from './types';
+
+/*
+ * ISO 8601 date/time format:
+ * - YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)
+ * - YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00)
+ * where TZD = time zone designator (Z or +hh:mm or -hh:mm)
+ *
+ * Inspiration: https://www.w3.org/TR/NOTE-datetime
+ */
+// eslint-disable-next-line max-len
+const ISO_DATE_REGEXP = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})([.,]\d+)?([Z]|([+-])(\d{2}):(\d{2}))/;
+
+function integer(string: string | number) {
+    return parseInt(string.toString(), 10);
+}
+
+/**
+ * @param isoDateTimeStr a date/time string in ISO-8601 format:
+ * 1) YYYY-MM-DDThh:mm:ssTZD (eg. 1997-07-16T19:20:30+01:00)
+ * 2) YYYY-MM-DDThh:mm:ss.sTZD (eg. 1997-07-16T19:20:30.45+01:00)
+ * where TZD = time zone designator (Z or +hh:mm or -hh:mm)
+ * @return date object keeping parsed local datetime, timezone offset in
+ * minutes, unixTime in milliseconds. Null if parsing failed.
+ */
+export function parseIsoDate(isoDateTimeStr: string): ParsedIsoDate | null {
+    const m = ISO_DATE_REGEXP.exec(isoDateTimeStr);
+    /* eslint-disable no-magic-numbers */
+    if (m) {
+        const year = integer(m[1]);
+        const month = integer(m[2]);
+        const date = integer(m[3]);
+        const hours = integer(m[4]);
+        const minutes = integer(m[5]);
+        const seconds = integer(m[6]);
+        const milliseconds = m[7] ? integer(m[7] as any * 1000) : 0;
+
+        let timezoneOffset = 0;
+        if (m[8] !== 'Z') {
+            let offsetMinutes = integer(m[10]) * MINUTES_PER_HOUR + integer(m[11]);
+            if (m[9] === '-') {
+                offsetMinutes = -offsetMinutes;
+            }
+            timezoneOffset = offsetMinutes;
+        }
+
+        const serverLocalDate = new Date(
+            year, month - 1, date, hours, minutes, seconds, milliseconds,
+        );
+        const unixTime = Date.UTC(
+            year, month - 1, date, hours, minutes - timezoneOffset, seconds, milliseconds,
+        );
+
+        return { date: serverLocalDate, timezoneOffset, unixTime };
+    }
+    /* eslint-enable no-magic-numbers */
+    return null;
+}
+
+/**
+ * Returns the timestamp of the day start
+ * @param date The date representing the day
+ * @returns timestamp in ms
+ */
+export const getDayStart = (date: Date) => {
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+};
+
+/**
+ * Returns the timestamp of the day end
+ * @param date The date representing the day
+ * @returns timestamp in ms
+ */
+export const getDayEnd = (date: Date) => {
+    date.setHours(HOURS_PER_DAY, 0, 0, 0);
+    return date.getTime();
+};

package/packages/toast/README.md

@@ -1,116 +1,116 @@
----
-id: README
-title: Toast
-hide_title: true
-sidebar_label: Toast
----
-
-# ToastService
-Service allows displaying time limited, short notification to the user. Toast can be your custom component or you can use predefined default Toast.
-
-## Provided functionality
-- ToastService handles toasts rendering and buffering logic, toast hiding and visuals are placed in the Toast component.
-- ToastService root can be placed anywhere, preferably at top of the application though.
-- One ToastService can operate simultaneously only one type of Toast component.
-- Focus and the rest of the application is unchanged
-
-## Usage
-Should be used almost identically as ThrobberService, but it isn't using ModalService under the hood. Ideally ToastService needs to be placed near the application root.
-
-## Props
-- `toast: (props: T) => JSX.Element` - function wraps passed toast component (`<Toast />` or a custom component) to mount at the toast root element.
-
-```tsx
-import { Toast, ToastService, ToastProps } from '@24i/bigscreen-sdk/toast';
-
-const toastServiceRef = createRef<ToastService<ToastProps>>();
-
-<App>
-    <ToastService
-        toast={(props: ToastProps) => <Toast {...props} />}
-        ref={toastServiceRef}
-    />
-</App>
-```
-
-To show Toast, service reference has to be used.
-```ts
-toastServiceRef.show({
-    message: 'Hello, I am Toast!',
-});
-```
-
-# Toast
-For particular cases, default Toast component could be used. It has it's default style and implements simple fading logic. Toast is visible for certain time (`duration`) and then it began to hide with fade out effect (`hidingAnimTimeoutMs`). Toast component does not import styles by default, so custom or default styles needs to be imported before use.
-
-```ts
-toastServiceRef.show({
-    message: 'Hello, I am longer Toast!',
-    duration: 1500,                 // optional - how long toast would be fully displayed (default is 800 ms)
-    hidingAnimTimeoutMs: 500,       // optional - how long it take to hide with decreasing fade out hiding animation (default is 300 ms)
-    onFinish: () => noop,           // optional - callback to execute after hiding Toast Component
-});
-```
-
-Toast renders by default this DOM structure:
-```tsx
-<div className="toast-wrap">
-    <div className="toast">
-        <div className="toast-text">
-            {message}
-        </div>
-    </div>
-</div>
-```
-
-# Toast custom render
-Toast component has ability to render custom DOM content. Its for easier customization rather than creating whole new component because for example one additional DIV element. For these situation there is optional `render` parameter in props.
-
-```ts
-export type ToastRenderProps = {
-    toastWrapperRef: Reference<HTMLDivElement>,
-    message: string,
-};
-
-render?: (toastWrapperRef: ToastRenderProps) => JSX.Element;
-```
-
-Function takes object with type `ToastRenderProps` as only parameter. In this type, first parameter is `toastWrapperRef` which is reference to your custom wrapper element used in Toast component and `message` is text to be shown in Toast. Toast created with custom render function could look like this:
-
-```tsx
-const customRender = ({ toastWrapperRef, message }) => (
-    <div ref={toastWrapperRef} className="my-toast-wrap">
-        {message}
-    </div>
-);
-
-<ToastService
-    toast={(props: ToastProps) => (
-        <Toast
-            {...props}
-            render={customRender}
-        />
-    )}
-    ref={toastServiceRef}
-/>
-```
-
-You can also set custom render function in ToastService `show` method as a part of Toast props.
-
-# Custom toast
-Toast component's props needs to be extended from MinimalToastProps which includes methods for proper service working (`toastServiceContinue` and optionally `onFinish`).
-
-Important: callback `toastServiceContinue` then needs to be called after toast ends its lifetime. Callback onFinish is also handled in ToastService and ideally should not be called inside custom toast component.
-
-```ts
-type MyToastProps = {
-    ...
-} & MinimalToastProps;
-
-class MyToast extends Components<MyToastProps> {
-    destroy() {
-        const { toastServiceContinue } = this.props;
-        toastServiceContinue();
-    }
-}
-```
+---
+id: README
+title: Toast
+hide_title: true
+sidebar_label: Toast
+---
+
+# ToastService
+Service allows displaying time limited, short notification to the user. Toast can be your custom component or you can use predefined default Toast.
+
+## Provided functionality
+- ToastService handles toasts rendering and buffering logic, toast hiding and visuals are placed in the Toast component.
+- ToastService root can be placed anywhere, preferably at top of the application though.
+- One ToastService can operate simultaneously only one type of Toast component.
+- Focus and the rest of the application is unchanged
+
+## Usage
+Should be used almost identically as ThrobberService, but it isn't using ModalService under the hood. Ideally ToastService needs to be placed near the application root.
+
+## Props
+- `toast: (props: T) => JSX.Element` - function wraps passed toast component (`<Toast />` or a custom component) to mount at the toast root element.
+
+```tsx
+import { Toast, ToastService, ToastProps } from '@24i/bigscreen-sdk/toast';
+
+const toastServiceRef = createRef<ToastService<ToastProps>>();
+
+<App>
+    <ToastService
+        toast={(props: ToastProps) => <Toast {...props} />}
+        ref={toastServiceRef}
+    />
+</App>
+```
+
+To show Toast, service reference has to be used.
+```ts
+toastServiceRef.show({
+    message: 'Hello, I am Toast!',
+});
+```
+
+# Toast
+For particular cases, default Toast component could be used. It has it's default style and implements simple fading logic. Toast is visible for certain time (`duration`) and then it began to hide with fade out effect (`hidingAnimTimeoutMs`). Toast component does not import styles by default, so custom or default styles needs to be imported before use.
+
+```ts
+toastServiceRef.show({
+    message: 'Hello, I am longer Toast!',
+    duration: 1500,                 // optional - how long toast would be fully displayed (default is 800 ms)
+    hidingAnimTimeoutMs: 500,       // optional - how long it take to hide with decreasing fade out hiding animation (default is 300 ms)
+    onFinish: () => noop,           // optional - callback to execute after hiding Toast Component
+});
+```
+
+Toast renders by default this DOM structure:
+```tsx
+<div className="toast-wrap">
+    <div className="toast">
+        <div className="toast-text">
+            {message}
+        </div>
+    </div>
+</div>
+```
+
+# Toast custom render
+Toast component has ability to render custom DOM content. Its for easier customization rather than creating whole new component because for example one additional DIV element. For these situation there is optional `render` parameter in props.
+
+```ts
+export type ToastRenderProps = {
+    toastWrapperRef: Reference<HTMLDivElement>,
+    message: string,
+};
+
+render?: (toastWrapperRef: ToastRenderProps) => JSX.Element;
+```
+
+Function takes object with type `ToastRenderProps` as only parameter. In this type, first parameter is `toastWrapperRef` which is reference to your custom wrapper element used in Toast component and `message` is text to be shown in Toast. Toast created with custom render function could look like this:
+
+```tsx
+const customRender = ({ toastWrapperRef, message }) => (
+    <div ref={toastWrapperRef} className="my-toast-wrap">
+        {message}
+    </div>
+);
+
+<ToastService
+    toast={(props: ToastProps) => (
+        <Toast
+            {...props}
+            render={customRender}
+        />
+    )}
+    ref={toastServiceRef}
+/>
+```
+
+You can also set custom render function in ToastService `show` method as a part of Toast props.
+
+# Custom toast
+Toast component's props needs to be extended from MinimalToastProps which includes methods for proper service working (`toastServiceContinue` and optionally `onFinish`).
+
+Important: callback `toastServiceContinue` then needs to be called after toast ends its lifetime. Callback onFinish is also handled in ToastService and ideally should not be called inside custom toast component.
+
+```ts
+type MyToastProps = {
+    ...
+} & MinimalToastProps;
+
+class MyToast extends Components<MyToastProps> {
+    destroy() {
+        const { toastServiceContinue } = this.props;
+        toastServiceContinue();
+    }
+}
+```

package/packages/toast/src/Toast/IVisualController.ts

@@ -1,7 +1,7 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-
-export abstract class IVisualController {
-    toastWrapperRef = createRef<HTMLDivElement>();
-
-    abstract hide(hidingTimeout: number, finishCallback: () => void): void;
-}
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+
+export abstract class IVisualController {
+    toastWrapperRef = createRef<HTMLDivElement>();
+
+    abstract hide(hidingTimeout: number, finishCallback: () => void): void;
+}

package/packages/toast/src/Toast/Toast.scss

@@ -1,22 +1,22 @@
-.toast-wrap {
-    position: absolute;
-    text-align: center;
-    top: $toast-wrap-top;
-    opacity: 1;
-    width: $toast-wrap-width;
-    left: 0;
-    right: 0;
-    z-index: 800;
-
-    >.toast {
-        display: inline-block;
-        color: #000;
-        background-color: #fff;
-        font-size: $toast-font-size;
-        padding-left: $toast-padding-left;
-        padding-right: $toast-padding-right;
-        padding-top: $toast-padding-top;
-        padding-bottom: $toast-padding-bottom;
-        border-radius: $toast-border-radius;
-    }
-}
+.toast-wrap {
+    position: absolute;
+    text-align: center;
+    top: $toast-wrap-top;
+    opacity: 1;
+    width: $toast-wrap-width;
+    left: 0;
+    right: 0;
+    z-index: 800;
+
+    >.toast {
+        display: inline-block;
+        color: #000;
+        background-color: #fff;
+        font-size: $toast-font-size;
+        padding-left: $toast-padding-left;
+        padding-right: $toast-padding-right;
+        padding-top: $toast-padding-top;
+        padding-bottom: $toast-padding-bottom;
+        border-radius: $toast-border-radius;
+    }
+}

package/packages/toast/src/Toast/Toast.styles.1080.scss

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

package/packages/toast/src/Toast/Toast.styles.scss

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