@24i/bigscreen-sdk 1.0.38 → 1.0.40-alpha.2687

package/packages/keyboard/src/WhitelabelNumericKeyboard/layout.ts

@@ -1,14 +1,14 @@
-/* eslint-disable no-magic-numbers */
-export const makeFocusMatrixStrings = (includeContinueButton: boolean) => [
-    ['1', '2', '3', 'backspace'],
-    ['4', '5', '6', 'clear'],
-    ['7', '8', '9'],
-    ['0', '0', '0'], ...(includeContinueButton ? [['continue']] : [[]]),
-];
-
-export const layout = [
-    ['1', '2', '3'],
-    ['4', '5', '6'],
-    ['7', '8', '9'],
-    ['0'],
-];
+/* eslint-disable no-magic-numbers */
+export const makeFocusMatrixStrings = (includeContinueButton: boolean) => [
+    ['1', '2', '3', 'backspace'],
+    ['4', '5', '6', 'clear'],
+    ['7', '8', '9'],
+    ['0', '0', '0'], ...(includeContinueButton ? [['continue']] : [[]]),
+];
+
+export const layout = [
+    ['1', '2', '3'],
+    ['4', '5', '6'],
+    ['7', '8', '9'],
+    ['0'],
+];

package/packages/keyboard/src/hwKeyboardEventToChar.ts

@@ -1,11 +1,11 @@
-/**
- * Converts pressed key char on HW keyboards to string.
- * Supports also shifted chars (e.g. ! for Shift+1).
- * @param event KeyboardEvent
- * @returns string value of the char or null
- */
-export const hwKeyboardEventToChar = ({ key }: KeyboardEvent) => {
-    // Some platforms do not have to have key. We need to check for it before accesing length.
-    if (key && key.length === 1) return key;
-    return null;
-};
+/**
+ * Converts pressed key char on HW keyboards to string.
+ * Supports also shifted chars (e.g. ! for Shift+1).
+ * @param event KeyboardEvent
+ * @returns string value of the char or null
+ */
+export const hwKeyboardEventToChar = ({ key }: KeyboardEvent) => {
+    // Some platforms do not have to have key. We need to check for it before accesing length.
+    if (key && key.length === 1) return key;
+    return null;
+};

package/packages/keyboard/src/types/index.ts

@@ -1,11 +1,11 @@
-export type KeyTexts = {
-    clear: string;
-    done: string;
-    shift: string;
-    shiftActive: string;
-    cancel: string;
-    toSpecialLayout: string;
-    toNormalLayout: string;
-};
-
-export type KeyMatrixCell = string;
+export type KeyTexts = {
+    clear: string;
+    done: string;
+    shift: string;
+    shiftActive: string;
+    cancel: string;
+    toSpecialLayout: string;
+    toNormalLayout: string;
+};
+
+export type KeyMatrixCell = string;

package/packages/keyboard/src/utils/caret.ts

@@ -1,48 +1,48 @@
-const updateCaretPosition = (input: HTMLInputElement, position: number) => {
-    input.selectionStart = position;
-    input.selectionEnd = position;
-};
-
-export const caretLeft = (input: HTMLInputElement | null): false | number => {
-    if (!input) return false;
-    const selectionStart = input.selectionStart!;
-    if (selectionStart > 0) {
-        const newPosition = selectionStart - 1;
-        updateCaretPosition(input, newPosition);
-        return newPosition;
-    }
-    return false;
-};
-
-export const caretRight = (input: HTMLInputElement | null): false | number => {
-    if (!input) return false;
-    const { value } = input;
-    const selectionStart = input.selectionStart!;
-    if (selectionStart < value.length) {
-        const newPosition = selectionStart + 1;
-        updateCaretPosition(input, newPosition);
-        return newPosition;
-    }
-    return false;
-};
-
-export const caretHome = (input: HTMLInputElement | null): false | number => {
-    if (!input) return false;
-    const selectionStart = input.selectionStart!;
-    if (selectionStart > 0) {
-        updateCaretPosition(input, 0);
-        return 0;
-    }
-    return false;
-};
-
-export const caretEnd = (input: HTMLInputElement | null): false | number => {
-    if (!input) return false;
-    const { value: { length } } = input;
-    const selectionStart = input.selectionStart!;
-    if (selectionStart < length) {
-        updateCaretPosition(input, length);
-        return length;
-    }
-    return false;
-};
+const updateCaretPosition = (input: HTMLInputElement, position: number) => {
+    input.selectionStart = position;
+    input.selectionEnd = position;
+};
+
+export const caretLeft = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart > 0) {
+        const newPosition = selectionStart - 1;
+        updateCaretPosition(input, newPosition);
+        return newPosition;
+    }
+    return false;
+};
+
+export const caretRight = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart < value.length) {
+        const newPosition = selectionStart + 1;
+        updateCaretPosition(input, newPosition);
+        return newPosition;
+    }
+    return false;
+};
+
+export const caretHome = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart > 0) {
+        updateCaretPosition(input, 0);
+        return 0;
+    }
+    return false;
+};
+
+export const caretEnd = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const { value: { length } } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart < length) {
+        updateCaretPosition(input, length);
+        return length;
+    }
+    return false;
+};

package/packages/keyboard/src/utils/generateFocusMatrixFromStringMatrix.ts

@@ -1,12 +1,12 @@
-import { createRef, Reference } from '@24i/bigscreen-sdk/jsx';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-
-export const generateFocusMatrixFromStringMatrix = (
-    refs: { [key: string]: Reference<HTMLDivElement> },
-    matrix: Array<Array<string | null>>,
-): Array<Array<Reference<HTMLDivElement>>> => map(matrix, (row) => (
-    map(row, (key) => {
-        if (!refs[key!]) refs[key!] = createRef();
-        return refs[key!];
-    })
-));
+import { createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+export const generateFocusMatrixFromStringMatrix = (
+    refs: { [key: string]: Reference<HTMLDivElement> },
+    matrix: Array<Array<string | null>>,
+): Array<Array<Reference<HTMLDivElement>>> => map(matrix, (row) => (
+    map(row, (key) => {
+        if (!refs[key!]) refs[key!] = createRef();
+        return refs[key!];
+    })
+));

package/packages/keyboard/src/utils/input.ts

@@ -1,40 +1,40 @@
-export const insertCharAtCaret = (input: HTMLInputElement | null, char: string): false | string => {
-    if (!input) return false;
-    const { value } = input;
-    const selectionStart = input.selectionStart!;
-    const preCaret = value.substring(0, selectionStart);
-    const postCaret = value.substring(selectionStart);
-    input.value = `${preCaret}${char}${postCaret}`;
-    const newCaretPosition = selectionStart + char.length;
-    input.selectionStart = newCaretPosition;
-    input.selectionEnd = newCaretPosition;
-    return input.value;
-};
-
-export const backspace = (input: HTMLInputElement): false | string => {
-    if (!input) return false;
-    const { value } = input;
-    const selectionStart = input.selectionStart!;
-    if (selectionStart === 0) return false;
-    const preCaret = value.substring(0, selectionStart - 1);
-    const postCaret = value.substring(selectionStart);
-    input.value = `${preCaret}${postCaret}`;
-    const newCaretPosition = selectionStart - 1;
-    input.selectionStart = newCaretPosition;
-    input.selectionEnd = newCaretPosition;
-    return input.value;
-};
-
-export const del = (input: HTMLInputElement): false | string => {
-    if (!input) return false;
-    const { value } = input;
-    const selectionStart = input.selectionStart!;
-    if (selectionStart === value.length) return false;
-    const preCaret = value.substring(0, selectionStart);
-    const postCaret = value.substring(selectionStart + 1);
-    input.value = `${preCaret}${postCaret}`;
-    const newCaretPosition = selectionStart;
-    input.selectionStart = newCaretPosition;
-    input.selectionEnd = newCaretPosition;
-    return input.value;
-};
+export const insertCharAtCaret = (input: HTMLInputElement | null, char: string): false | string => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    const preCaret = value.substring(0, selectionStart);
+    const postCaret = value.substring(selectionStart);
+    input.value = `${preCaret}${char}${postCaret}`;
+    const newCaretPosition = selectionStart + char.length;
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
+    return input.value;
+};
+
+export const backspace = (input: HTMLInputElement): false | string => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart === 0) return false;
+    const preCaret = value.substring(0, selectionStart - 1);
+    const postCaret = value.substring(selectionStart);
+    input.value = `${preCaret}${postCaret}`;
+    const newCaretPosition = selectionStart - 1;
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
+    return input.value;
+};
+
+export const del = (input: HTMLInputElement): false | string => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart === value.length) return false;
+    const preCaret = value.substring(0, selectionStart);
+    const postCaret = value.substring(selectionStart + 1);
+    input.value = `${preCaret}${postCaret}`;
+    const newCaretPosition = selectionStart;
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
+    return input.value;
+};

package/packages/l10n/README.md

@@ -1,120 +1,120 @@
----
-id: README
-title: l10n
-hide_title: true
-sidebar_label: l10n
----
-
-# l10n
-Localization package for SmartApps BIGscreen apps.
-
-## Supported features/locales
-
-| Locale/Feature | date | time |
-|:--------------:|:----:|:----:| 
-| **iso**        |  ✅  |  ✅  |
-| chi            |  ❌  |  ❌  |
-| cs             |  ✅  |  ✅  |
-| en-001         |  ✅  |  ✅  |
-| en-uk          |  ❌  |  ❌  |
-| en-us          |  ✅  |  ✅  |
-| fi             |  ❌  |  ❌  |
-| nl             |  ❌  |  ❌  |
-
-Chars to use in the table: ✅ ❌
-
-### Feature/ISO
-- Date: [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
-- Time: [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
-
-## How to use
-This package provides formatters for various locale specific things. It can have locale set globally
-during initialization / language change. Or it can be set specifically for each call.
-
-If the specified locale is not found, `iso` will be used as a fallback and warning will be printed
-into the console.
-
-```ts
-// setup:
-import { l10n } from '@24i/bigscreen-sdk/l10n';
-
-l10n.setLocale('en-us');
-```
-
-To use other than `iso` locales, they must be imported to the project. `iso` is included always.
-```ts
-import '@24i/bigscreen-sdk/l10n/locales/cs'; // includes czech locale
-```
-
-To use it as a string returning function:
-```ts
-import { l10n } from '@24i/bigscreen-sdk/l10n';
-
-l10n.date(new Date()).toLocaleString();
-```
-
-There is also a component exported that automatically updates itself after locale change:
-```tsx
-import { Locale } from '@24i/bigscreen-sdk/l10n';
-
-return <Locale type="date" value={new Date()} options={{ weekday: 'long' }} />;
-```
-
-### DateTime format
-For date time formatting options we use a subset of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) options. 
-The decision between 12 and 24 hour format is automated based on the set locale.
-```ts
-type DateTimeFormatOptions = {
-    weekday: 'narrow' | 'short' | 'long', // e.g. narrow - S, short - Sun, long - Sunday
-    year: '2-digit' | 'numeric', // e.g. 2-digit 98, numeric - 1998
-    // e.g. 2-digit - 07, numeric - 7, narrow - J, short - Jul, long - July
-    month: '2-digit' | 'numeric' | 'narrow' | 'short' | 'long',
-    day: '2-digit' | 'numeric', // e.g. 2-digit - 06, numeric - 6
-    hour: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
-    minute: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
-    second: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
-}
-```
-
-#### date-fns DateTime format
-It is also possible to use formatting provided by [date-fns](https://date-fns.org/v2.30.0/docs/format) library. First you need to globally configure the formats used (usually from backstage):
-```ts
-l10n.init({
-    dateFormatLong?: string | null, // e.g. 'eee, dd MMM' for "Wed, 09 Jul"
-    dateFormatNumeric?: string | null, // e.g. 'EEEE, MMMM d' for "Wednesday, July 9"
-    dateFormatShort?: string | null, // e.g. 'MM/dd/yyyy' for "07/09/2023"
-    timeFormat?: string | null, // e.g. 'h:mm a' for "9:05 PM"
-});
-```
-After that, `timeFormat` and `dateFormatShort` are used automatically where appropriate, in case the format string is _falsy_ the [default formatting implementation](#datetime-format) will be used. You can also specify which format you want to use in `DateTimeFormatOptions`:
-```ts
-type DateTimeFormatOptions = {
-    ...
-    formatType: 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat',
-}
-```
-
-You can use both `timestamp` in `ms` or `Date` object directly for formatting.
-
-#### Examples
-```ts
-import { l10n } from '@24i/bigscreen-sdk/l10n';
-
-l10n.date(timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' }); // 9:45
-
-l10n.date(new Date()).toLocaleTimeString({ hour: '2-digit', minute: '2-digit', second: '2-digit' }); // 09:45:30
-
-l10n.date(timestamp).toLocaleDateString({ day: '2-digit', month: '2-digit', year: 'numeric' }); // 18/03/2021
-
-l10n.date(new Date(), 'cs').toLocaleDateString({
-    { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' },
-}); // čtvrtek 18. března 2021
-
-l10n.date(timestamp, 'en-us').toLocaleString({
-    { month: '2-digit', day: '2-digit', year: 'numeric', hour: 'numeric', minute: '2-digit' },
-}); // 03/18/2021, 9:45 AM
-
-l10n.date(new Date(), 'cs').toLocaleString({
-    { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' },
-}); // čt 18. bře, 9:45
-```
+---
+id: README
+title: l10n
+hide_title: true
+sidebar_label: l10n
+---
+
+# l10n
+Localization package for SmartApps BIGscreen apps.
+
+## Supported features/locales
+
+| Locale/Feature | date | time |
+|:--------------:|:----:|:----:| 
+| **iso**        |  ✅  |  ✅  |
+| chi            |  ❌  |  ❌  |
+| cs             |  ✅  |  ✅  |
+| en-001         |  ✅  |  ✅  |
+| en-uk          |  ❌  |  ❌  |
+| en-us          |  ✅  |  ✅  |
+| fi             |  ❌  |  ❌  |
+| nl             |  ❌  |  ❌  |
+
+Chars to use in the table: ✅ ❌
+
+### Feature/ISO
+- Date: [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
+- Time: [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
+
+## How to use
+This package provides formatters for various locale specific things. It can have locale set globally
+during initialization / language change. Or it can be set specifically for each call.
+
+If the specified locale is not found, `iso` will be used as a fallback and warning will be printed
+into the console.
+
+```ts
+// setup:
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+
+l10n.setLocale('en-us');
+```
+
+To use other than `iso` locales, they must be imported to the project. `iso` is included always.
+```ts
+import '@24i/bigscreen-sdk/l10n/locales/cs'; // includes czech locale
+```
+
+To use it as a string returning function:
+```ts
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+
+l10n.date(new Date()).toLocaleString();
+```
+
+There is also a component exported that automatically updates itself after locale change:
+```tsx
+import { Locale } from '@24i/bigscreen-sdk/l10n';
+
+return <Locale type="date" value={new Date()} options={{ weekday: 'long' }} />;
+```
+
+### DateTime format
+For date time formatting options we use a subset of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) options. 
+The decision between 12 and 24 hour format is automated based on the set locale.
+```ts
+type DateTimeFormatOptions = {
+    weekday: 'narrow' | 'short' | 'long', // e.g. narrow - S, short - Sun, long - Sunday
+    year: '2-digit' | 'numeric', // e.g. 2-digit 98, numeric - 1998
+    // e.g. 2-digit - 07, numeric - 7, narrow - J, short - Jul, long - July
+    month: '2-digit' | 'numeric' | 'narrow' | 'short' | 'long',
+    day: '2-digit' | 'numeric', // e.g. 2-digit - 06, numeric - 6
+    hour: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
+    minute: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
+    second: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
+}
+```
+
+#### date-fns DateTime format
+It is also possible to use formatting provided by [date-fns](https://date-fns.org/v2.30.0/docs/format) library. First you need to globally configure the formats used (usually from backstage):
+```ts
+l10n.init({
+    dateFormatLong?: string | null, // e.g. 'eee, dd MMM' for "Wed, 09 Jul"
+    dateFormatNumeric?: string | null, // e.g. 'EEEE, MMMM d' for "Wednesday, July 9"
+    dateFormatShort?: string | null, // e.g. 'MM/dd/yyyy' for "07/09/2023"
+    timeFormat?: string | null, // e.g. 'h:mm a' for "9:05 PM"
+});
+```
+After that, `timeFormat` and `dateFormatShort` are used automatically where appropriate, in case the format string is _falsy_ the [default formatting implementation](#datetime-format) will be used. You can also specify which format you want to use in `DateTimeFormatOptions`:
+```ts
+type DateTimeFormatOptions = {
+    ...
+    formatType: 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat',
+}
+```
+
+You can use both `timestamp` in `ms` or `Date` object directly for formatting.
+
+#### Examples
+```ts
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+
+l10n.date(timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' }); // 9:45
+
+l10n.date(new Date()).toLocaleTimeString({ hour: '2-digit', minute: '2-digit', second: '2-digit' }); // 09:45:30
+
+l10n.date(timestamp).toLocaleDateString({ day: '2-digit', month: '2-digit', year: 'numeric' }); // 18/03/2021
+
+l10n.date(new Date(), 'cs').toLocaleDateString({
+    { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' },
+}); // čtvrtek 18. března 2021
+
+l10n.date(timestamp, 'en-us').toLocaleString({
+    { month: '2-digit', day: '2-digit', year: 'numeric', hour: 'numeric', minute: '2-digit' },
+}); // 03/18/2021, 9:45 AM
+
+l10n.date(new Date(), 'cs').toLocaleString({
+    { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' },
+}); // čt 18. bře, 9:45
+```

package/packages/l10n/interface.ts

@@ -1 +1 @@
-export { DateTimeFormatOptions, DateFormatOptions, TimeFormatOptions } from './src/date/types';
+export { DateTimeFormatOptions, DateFormatOptions, TimeFormatOptions } from './src/date/types';

package/packages/l10n/locales/cs.ts

@@ -1,4 +1,4 @@
-import { l10n } from '../src/l10n';
-import { csDateFormatter } from '../src/date/cs';
-
-l10n.addFormatter('date', 'cs', csDateFormatter);
+import { l10n } from '../src/l10n';
+import { csDateFormatter } from '../src/date/cs';
+
+l10n.addFormatter('date', 'cs', csDateFormatter);

package/packages/l10n/locales/en-001.ts

@@ -1,4 +1,4 @@
-import { l10n } from '../src/l10n';
-import { en001DateFormatter } from '../src/date/en-001';
-
-l10n.addFormatter('date', 'en-001', en001DateFormatter);
+import { l10n } from '../src/l10n';
+import { en001DateFormatter } from '../src/date/en-001';
+
+l10n.addFormatter('date', 'en-001', en001DateFormatter);

package/packages/l10n/locales/en-us.ts

@@ -1,4 +1,4 @@
-import { l10n } from '../src/l10n';
-import { enUsDateFormatter } from '../src/date/en-us';
-
-l10n.addFormatter('date', 'en-us', enUsDateFormatter);
+import { l10n } from '../src/l10n';
+import { enUsDateFormatter } from '../src/date/en-us';
+
+l10n.addFormatter('date', 'en-us', enUsDateFormatter);

package/packages/l10n/src/Locale.tsx

@@ -1,44 +1,44 @@
-import { Component, createRef, TextNode } from '@24i/bigscreen-sdk/jsx';
-import { l10n } from './l10n';
-import { Props } from './types';
-
-export class Locale extends Component<Props> {
-    textNode = createRef<Text>();
-
-    componentDidMount() {
-        l10n.addEventListener('localechange', this.onLocaleChange);
-    }
-
-    componentWillUnmount() {
-        l10n.removeEventListener('localechange', this.onLocaleChange);
-    }
-
-    onLocaleChange = () => {
-        const renderer = this.getRendererByType();
-        if (!this.textNode.current) return;
-        this.textNode.current.nodeValue = renderer();
-    };
-
-    getRendererByType() {
-        const { type } = this.props;
-        const FUNCTION_BY_TYPE = {
-            date: this.renderDate,
-        } as const;
-        return FUNCTION_BY_TYPE[type] ?? (() => null);
-    }
-
-    renderDate = () => {
-        const { locale, value, options } = this.props;
-        return l10n.date(value, locale).toLocaleString(options);
-    };
-
-    // @ts-ignore - Special case for BIGscreen JSX incompatible with types/react
-    render() {
-        const renderer = this.getRendererByType();
-        return (
-            <TextNode ref={this.textNode}>
-                {renderer()}
-            </TextNode>
-        );
-    }
-}
+import { Component, createRef, TextNode } from '@24i/bigscreen-sdk/jsx';
+import { l10n } from './l10n';
+import { Props } from './types';
+
+export class Locale extends Component<Props> {
+    textNode = createRef<Text>();
+
+    componentDidMount() {
+        l10n.addEventListener('localechange', this.onLocaleChange);
+    }
+
+    componentWillUnmount() {
+        l10n.removeEventListener('localechange', this.onLocaleChange);
+    }
+
+    onLocaleChange = () => {
+        const renderer = this.getRendererByType();
+        if (!this.textNode.current) return;
+        this.textNode.current.nodeValue = renderer();
+    };
+
+    getRendererByType() {
+        const { type } = this.props;
+        const FUNCTION_BY_TYPE = {
+            date: this.renderDate,
+        } as const;
+        return FUNCTION_BY_TYPE[type] ?? (() => null);
+    }
+
+    renderDate = () => {
+        const { locale, value, options } = this.props;
+        return l10n.date(value, locale).toLocaleString(options);
+    };
+
+    // @ts-ignore - Special case for BIGscreen JSX incompatible with types/react
+    render() {
+        const renderer = this.getRendererByType();
+        return (
+            <TextNode ref={this.textNode}>
+                {renderer()}
+            </TextNode>
+        );
+    }
+}