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

package/packages/l10n/src/date/types.ts

@@ -1,56 +1,56 @@
-/**
- * Following types are based on ECMA 402 specification (Intl.DateTimeFormat)
- */
-
-type Narrow = 'narrow';
-type Short = 'short';
-type Long = 'long';
-type TwoDigit = '2-digit';
-type Numeric = 'numeric';
-
-export type Weekday = Narrow | Short | Long;
-export type Year = TwoDigit | Numeric;
-export type Month = TwoDigit | Numeric | Narrow | Short | Long;
-export type Day = TwoDigit | Numeric;
-export type Hour = TwoDigit | Numeric;
-export type Minute = TwoDigit | Numeric;
-export type Second = TwoDigit | Numeric;
-
-type TimeKeys = 'hour' | 'minute' | 'second';
-
-type DateKeys = 'weekday' | 'year' | 'month' | 'day';
-
-type FormatType = 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat';
-
-export type DateTimeFormatOptions = {
-    weekday?: Weekday,
-    year?: Year,
-    month?: Month,
-    day?: Day,
-    hour?: Hour,
-    minute?: Minute,
-    second?: Second,
-    formatType?: FormatType,
-};
-
-export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;
-export type TimeFormatOptions = Pick<DateTimeFormatOptions, TimeKeys>;
-
-export type DateTimeFormattter = (timestampOrDate: number | Date) => {
-    toLocaleString(options?: DateTimeFormatOptions): string,
-    toLocaleTimeString(options?: TimeFormatOptions): string,
-    toLocaleDateString(options?: DateFormatOptions): string,
-};
-
-export type Props = {
-    type: 'date',
-    value: number | Date,
-    locale?: string,
-    options?: DateTimeFormatOptions,
-};
-
-export type LocaleData = {
-    narrow: string[];
-    short: string[];
-    long: string[];
-};
+/**
+ * Following types are based on ECMA 402 specification (Intl.DateTimeFormat)
+ */
+
+type Narrow = 'narrow';
+type Short = 'short';
+type Long = 'long';
+type TwoDigit = '2-digit';
+type Numeric = 'numeric';
+
+export type Weekday = Narrow | Short | Long;
+export type Year = TwoDigit | Numeric;
+export type Month = TwoDigit | Numeric | Narrow | Short | Long;
+export type Day = TwoDigit | Numeric;
+export type Hour = TwoDigit | Numeric;
+export type Minute = TwoDigit | Numeric;
+export type Second = TwoDigit | Numeric;
+
+type TimeKeys = 'hour' | 'minute' | 'second';
+
+type DateKeys = 'weekday' | 'year' | 'month' | 'day';
+
+type FormatType = 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat';
+
+export type DateTimeFormatOptions = {
+    weekday?: Weekday,
+    year?: Year,
+    month?: Month,
+    day?: Day,
+    hour?: Hour,
+    minute?: Minute,
+    second?: Second,
+    formatType?: FormatType,
+};
+
+export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;
+export type TimeFormatOptions = Pick<DateTimeFormatOptions, TimeKeys>;
+
+export type DateTimeFormattter = (timestampOrDate: number | Date) => {
+    toLocaleString(options?: DateTimeFormatOptions): string,
+    toLocaleTimeString(options?: TimeFormatOptions): string,
+    toLocaleDateString(options?: DateFormatOptions): string,
+};
+
+export type Props = {
+    type: 'date',
+    value: number | Date,
+    locale?: string,
+    options?: DateTimeFormatOptions,
+};
+
+export type LocaleData = {
+    narrow: string[];
+    short: string[];
+    long: string[];
+};

package/packages/l10n/src/index.ts

@@ -1,2 +1,2 @@
-export { l10n } from './l10n';
-export { Locale } from './Locale';
+export { l10n } from './l10n';
+export { Locale } from './Locale';

package/packages/l10n/src/l10n.ts

@@ -1,112 +1,112 @@
-import { format } from 'date-fns';
-import * as fnsLocales from 'date-fns/locale';
-import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
-import { csDateFormatter } from './date/cs';
-import { deDateFormatter } from './date/de';
-import { esDateFormatter } from './date/es';
-import { frDateFormatter } from './date/fr';
-import { heDateFormatter } from './date/he';
-import { isoDateFormatter } from './date/iso';
-import { Formatters } from './types';
-import { DateTimeFormatOptions } from './date/types';
-
-type Events = {
-    'localechange': () => void,
-};
-
-type DateFnsConfig = Partial<
-Record<NonNullable<DateTimeFormatOptions['formatType']>, string | null>
->;
-
-class L10n implements IEvents<Events> {
-    private dateFnsConfig: DateFnsConfig = {};
-
-    private readonly events = new EventsManager<Events>();
-
-    addEventListener = this.events.addEventListener;
-
-    removeEventListener = this.events.removeEventListener;
-
-    triggerEvent = this.events.triggerEvent;
-
-    private locale = 'iso';
-
-    private readonly formatters: Formatters = {
-        date: {
-            iso: isoDateFormatter,
-            cs: csDateFormatter,
-            fr: frDateFormatter,
-            es: esDateFormatter,
-            de: deDateFormatter,
-            he: heDateFormatter,
-        },
-    };
-
-    private getFormatterByLocale(formatter: keyof Formatters, locale: string = this.locale) {
-        const localeFormatter = this.formatters[formatter][locale];
-        if (localeFormatter) return localeFormatter;
-        // eslint-disable-next-line no-console
-        console.warn(`
-            Formatter '${formatter}' for locale '${locale}' was requested
-            but not found. Falling back to 'iso' ${formatter} formatter!
-        `);
-        return this.formatters[formatter].iso;
-    }
-
-    init(config: DateFnsConfig) {
-        this.dateFnsConfig = config;
-    }
-
-    setLocale(locale: string) {
-        if (locale === this.locale) return;
-        this.locale = locale;
-        this.triggerEvent('localechange');
-    }
-
-    getDateFnsFormatter = (
-        timestamp: number | Date,
-        locale: string,
-        fallbackCb: (options?: DateTimeFormatOptions) => string,
-        fallbackFormatType?: DateTimeFormatOptions['formatType'],
-    ) => (
-        (options?: DateTimeFormatOptions): string => {
-            const { formatType, ...baseOptions } = options || {};
-            const dateFnsBsFormat = this.dateFnsConfig?.[formatType || fallbackFormatType!];
-            if (!dateFnsBsFormat) {
-                if (!options || Object.keys(baseOptions).length === 0) {
-                    return fallbackCb();
-                }
-                return fallbackCb(baseOptions);
-            }
-            return format(
-                timestamp,
-                dateFnsBsFormat,
-                { locale: fnsLocales[locale as keyof typeof fnsLocales] },
-            );
-        }
-    );
-
-    date(timestamp: number | Date, locale: string = this.locale) {
-        const formatter = this.getFormatterByLocale('date', locale)(timestamp);
-
-        return {
-            toLocaleString: this.getDateFnsFormatter(
-                timestamp, locale, formatter.toLocaleString,
-            ),
-            toLocaleTimeString: this.getDateFnsFormatter(
-                timestamp, locale, formatter.toLocaleTimeString, 'timeFormat',
-            ),
-            toLocaleDateString: this.getDateFnsFormatter(
-                timestamp, locale, formatter.toLocaleDateString, 'dateFormatShort',
-            ),
-        };
-    }
-
-    addFormatter<T extends keyof Formatters, U extends keyof Formatters[T]>(
-        formatterType: T, locale: keyof Formatters[T], formatter: Formatters[T][U],
-    ) {
-        this.formatters[formatterType][locale] = formatter;
-    }
-}
-
-export const l10n = new L10n();
+import { format } from 'date-fns';
+import * as fnsLocales from 'date-fns/locale';
+import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
+import { csDateFormatter } from './date/cs';
+import { deDateFormatter } from './date/de';
+import { esDateFormatter } from './date/es';
+import { frDateFormatter } from './date/fr';
+import { heDateFormatter } from './date/he';
+import { isoDateFormatter } from './date/iso';
+import { Formatters } from './types';
+import { DateTimeFormatOptions } from './date/types';
+
+type Events = {
+    'localechange': () => void,
+};
+
+type DateFnsConfig = Partial<
+Record<NonNullable<DateTimeFormatOptions['formatType']>, string | null>
+>;
+
+class L10n implements IEvents<Events> {
+    private dateFnsConfig: DateFnsConfig = {};
+
+    private readonly events = new EventsManager<Events>();
+
+    addEventListener = this.events.addEventListener;
+
+    removeEventListener = this.events.removeEventListener;
+
+    triggerEvent = this.events.triggerEvent;
+
+    private locale = 'iso';
+
+    private readonly formatters: Formatters = {
+        date: {
+            iso: isoDateFormatter,
+            cs: csDateFormatter,
+            fr: frDateFormatter,
+            es: esDateFormatter,
+            de: deDateFormatter,
+            he: heDateFormatter,
+        },
+    };
+
+    private getFormatterByLocale(formatter: keyof Formatters, locale: string = this.locale) {
+        const localeFormatter = this.formatters[formatter][locale];
+        if (localeFormatter) return localeFormatter;
+        // eslint-disable-next-line no-console
+        console.warn(`
+            Formatter '${formatter}' for locale '${locale}' was requested
+            but not found. Falling back to 'iso' ${formatter} formatter!
+        `);
+        return this.formatters[formatter].iso;
+    }
+
+    init(config: DateFnsConfig) {
+        this.dateFnsConfig = config;
+    }
+
+    setLocale(locale: string) {
+        if (locale === this.locale) return;
+        this.locale = locale;
+        this.triggerEvent('localechange');
+    }
+
+    getDateFnsFormatter = (
+        timestamp: number | Date,
+        locale: string,
+        fallbackCb: (options?: DateTimeFormatOptions) => string,
+        fallbackFormatType?: DateTimeFormatOptions['formatType'],
+    ) => (
+        (options?: DateTimeFormatOptions): string => {
+            const { formatType, ...baseOptions } = options || {};
+            const dateFnsBsFormat = this.dateFnsConfig?.[formatType || fallbackFormatType!];
+            if (!dateFnsBsFormat) {
+                if (!options || Object.keys(baseOptions).length === 0) {
+                    return fallbackCb();
+                }
+                return fallbackCb(baseOptions);
+            }
+            return format(
+                timestamp,
+                dateFnsBsFormat,
+                { locale: fnsLocales[locale as keyof typeof fnsLocales] },
+            );
+        }
+    );
+
+    date(timestamp: number | Date, locale: string = this.locale) {
+        const formatter = this.getFormatterByLocale('date', locale)(timestamp);
+
+        return {
+            toLocaleString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleString,
+            ),
+            toLocaleTimeString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleTimeString, 'timeFormat',
+            ),
+            toLocaleDateString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleDateString, 'dateFormatShort',
+            ),
+        };
+    }
+
+    addFormatter<T extends keyof Formatters, U extends keyof Formatters[T]>(
+        formatterType: T, locale: keyof Formatters[T], formatter: Formatters[T][U],
+    ) {
+        this.formatters[formatterType][locale] = formatter;
+    }
+}
+
+export const l10n = new L10n();

package/packages/l10n/src/types.ts

@@ -1,22 +1,22 @@
-import { DateTimeFormattter, Props as DateTimeProps } from './date/types';
-
-type FormatterTypes = 'date';
-
-/**
- * This will ensure that there will always be at least iso formatter
- */
-interface IFormatters extends Record<FormatterTypes, {
-    iso: (...args: any) => any,
-    [key: string]: (...args: any) => any,
-}> {}
-
-export interface Formatters extends IFormatters {
-    date: {
-        iso: DateTimeFormattter,
-        [key: string]: DateTimeFormattter,
-    },
-}
-
-export type Props = (
-    | DateTimeProps
-);
+import { DateTimeFormattter, Props as DateTimeProps } from './date/types';
+
+type FormatterTypes = 'date';
+
+/**
+ * This will ensure that there will always be at least iso formatter
+ */
+interface IFormatters extends Record<FormatterTypes, {
+    iso: (...args: any) => any,
+    [key: string]: (...args: any) => any,
+}> {}
+
+export interface Formatters extends IFormatters {
+    date: {
+        iso: DateTimeFormattter,
+        [key: string]: DateTimeFormattter,
+    },
+}
+
+export type Props = (
+    | DateTimeProps
+);

package/packages/list/AttachDetachItem/README.md

@@ -1,128 +1,128 @@
----
-id: README
-title: AttachDetachItem
-hide_title: true
-sidebar_label: AttachDetachItem
----
-
-# AttachDetachItem
-This is a wrapper item that is used when you don't want to use `updateData` method on items, but instead,
-you want to render the item only once during the list's lifetime. The most common use case is when you
-need to have more complex items in the list such as other List components (e.g. Home scene).
-Rendered item is then attached or detached by the list during scrolling when it's needed.
-
-## Item Specific Props
-
-```ts
-type Props<T extends AttachDetachItemData<any, any>> = {
-    data: T,
-    index: number,
-    children: (data: T['data'], index: number, ref: T['ref']) => JSX.Element,
-    className?: string,
-};
-```
-
-## Interfaces
-
-```ts
-type AttachDetachItemData<T, U> = {
-    data: U,
-    ref: Reference<T>,
-    isFastScrolling: boolean,
-    node?: HTMLElement,
-};
-```
-
-## Usage
-First you need to wrap your original list types with `AttachDetachItemData` type. It is because you need to provide
-to your list another layer of additional information, where the references and rendered items are stored.
-
-### Defining data types
-Lets assume that this is our original list, where `Teaser` is an item and `Asset` is the type of your data inserted into the list:
-
-```ts
-type MyCustomList = BasicList<Teaser, Asset>
-```
-
-Now, the `Teaser` and `Asset` are the T and U types of the `AttachDetachItemData` type. This represents our wrapped list data.
-We also need to define, what type would be the actual item. For simplifying we will use two types `ListData` and `ListItem`.
-
-```ts
-type ListData = AttachDetachItemData<Teaser, Asset>;
-type ListItem = AttachDetachItem<ListData>;
-```
-
-Now we can define our new list type, which uses `AttachDetachItem`:
-
-```ts
-type MyCustomList = BasicList<ListItem, ListData>
-```
-
-or without support types like this:
-
-```ts
-type MyCustomList = BasicList<AttachDetachItem<AttachDetachItemData<Teaser, Asset>>, AttachDetachItemData<Teaser, Asset>>
-```
-
-### Preparing data
-Next we need to prepare our data. It basically means that we will create a list of `ListData` type, where would be our references and
-rendered items stored. For this procedure, there is a function `prepareAttachDetachItemData` from the AttachDetachItem item package.
-
-```ts
-function prepareAttachDetachItemData<T, U>(data: U[]): AttachDetachItemData<T, U>[]
-```
-
-```ts
-const preparedData = prepareAttachDetachItemData<Teaser, Asset>(models) as ListData[];
-```
-
-this step will wrap our original data like this:
-
-```
-[
-    {
-        data: <original data on index 0>,
-        ref: { current: null },
-        isFastScrolling: false,
-    },
-    {
-        data: <original data on index 1>,
-        ref: { current: null },
-        isFastScrolling: false,
-    },
-    {
-        data: <original data on index 2>,
-        ref: { current: null },
-        isFastScrolling: false,
-    },
-    {
-        data: <original data on index 3>,
-        ref: { current: null },
-        isFastScrolling: false,
-    }
-]
-```
-
-This structure is ready to be used instead of the original data in the list.
-
-### Wrapping the original item
-Final step is to wrap our original list item with `AttachDetachItem` in the `renderItem` method of the list.
-AttachDetachItem as its children prop takes function for rendering the actual original item.
-
-```tsx
-renderItem: (data: ListData, index: number, ref: Reference<ListItem>) => (
-    <AttachDetachItem 
-        data={data}
-        index={index}
-        ref={ref}
-        className="stack-panel-item"
-    >
-        {(asset: Asset, index: number, itemRef: Reference<Teaser>) => (
-            <Teaser
-                model={asset}
-                ref={itemRef}
-            />
-        )}
-    </AttachDetachItem>
-)
-```
+---
+id: README
+title: AttachDetachItem
+hide_title: true
+sidebar_label: AttachDetachItem
+---
+
+# AttachDetachItem
+This is a wrapper item that is used when you don't want to use `updateData` method on items, but instead,
+you want to render the item only once during the list's lifetime. The most common use case is when you
+need to have more complex items in the list such as other List components (e.g. Home scene).
+Rendered item is then attached or detached by the list during scrolling when it's needed.
+
+## Item Specific Props
+
+```ts
+type Props<T extends AttachDetachItemData<any, any>> = {
+    data: T,
+    index: number,
+    children: (data: T['data'], index: number, ref: T['ref']) => JSX.Element,
+    className?: string,
+};
+```
+
+## Interfaces
+
+```ts
+type AttachDetachItemData<T, U> = {
+    data: U,
+    ref: Reference<T>,
+    isFastScrolling: boolean,
+    node?: HTMLElement,
+};
+```
+
+## Usage
+First you need to wrap your original list types with `AttachDetachItemData` type. It is because you need to provide
+to your list another layer of additional information, where the references and rendered items are stored.
+
+### Defining data types
+Lets assume that this is our original list, where `Teaser` is an item and `Asset` is the type of your data inserted into the list:
+
+```ts
+type MyCustomList = BasicList<Teaser, Asset>
+```
+
+Now, the `Teaser` and `Asset` are the T and U types of the `AttachDetachItemData` type. This represents our wrapped list data.
+We also need to define, what type would be the actual item. For simplifying we will use two types `ListData` and `ListItem`.
+
+```ts
+type ListData = AttachDetachItemData<Teaser, Asset>;
+type ListItem = AttachDetachItem<ListData>;
+```
+
+Now we can define our new list type, which uses `AttachDetachItem`:
+
+```ts
+type MyCustomList = BasicList<ListItem, ListData>
+```
+
+or without support types like this:
+
+```ts
+type MyCustomList = BasicList<AttachDetachItem<AttachDetachItemData<Teaser, Asset>>, AttachDetachItemData<Teaser, Asset>>
+```
+
+### Preparing data
+Next we need to prepare our data. It basically means that we will create a list of `ListData` type, where would be our references and
+rendered items stored. For this procedure, there is a function `prepareAttachDetachItemData` from the AttachDetachItem item package.
+
+```ts
+function prepareAttachDetachItemData<T, U>(data: U[]): AttachDetachItemData<T, U>[]
+```
+
+```ts
+const preparedData = prepareAttachDetachItemData<Teaser, Asset>(models) as ListData[];
+```
+
+this step will wrap our original data like this:
+
+```
+[
+    {
+        data: <original data on index 0>,
+        ref: { current: null },
+        isFastScrolling: false,
+    },
+    {
+        data: <original data on index 1>,
+        ref: { current: null },
+        isFastScrolling: false,
+    },
+    {
+        data: <original data on index 2>,
+        ref: { current: null },
+        isFastScrolling: false,
+    },
+    {
+        data: <original data on index 3>,
+        ref: { current: null },
+        isFastScrolling: false,
+    }
+]
+```
+
+This structure is ready to be used instead of the original data in the list.
+
+### Wrapping the original item
+Final step is to wrap our original list item with `AttachDetachItem` in the `renderItem` method of the list.
+AttachDetachItem as its children prop takes function for rendering the actual original item.
+
+```tsx
+renderItem: (data: ListData, index: number, ref: Reference<ListItem>) => (
+    <AttachDetachItem 
+        data={data}
+        index={index}
+        ref={ref}
+        className="stack-panel-item"
+    >
+        {(asset: Asset, index: number, itemRef: Reference<Teaser>) => (
+            <Teaser
+                model={asset}
+                ref={itemRef}
+            />
+        )}
+    </AttachDetachItem>
+)
+```

package/packages/list/AttachDetachItem/index.ts

@@ -1,3 +1,3 @@
-export { AttachDetachItem } from '../src/AttachDetachItem/AttachDetachItem';
-export { AttachDetachItemData } from '../src/interface';
-export { prepareAttachDetachItemData } from '../src/AttachDetachItem/prepareAttachDetachItemData';
+export { AttachDetachItem } from '../src/AttachDetachItem/AttachDetachItem';
+export { AttachDetachItemData } from '../src/interface';
+export { prepareAttachDetachItemData } from '../src/AttachDetachItem/prepareAttachDetachItemData';