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

package/packages/icon/README.md

@@ -1,107 +1,107 @@
----
-id: README
-title: Icon
-hide_title: true
-sidebar_label: Icon
----
-
-# Icon
-Icon component provides a typesafe way for displaying icons defined in a spritemap. In SmartApps BIGscreen
-Template based projects, icons are handled automatically during build process. We currently support
-`svg` and `png` formats. All your icons are stored in `project_root/icons` directory and the build engine
-will process icons recursively from any sub-directory structure you will prepare. Icons are then
-converted into a spritemap and build engine will produce two main files:
-
-- `project_root/platformAssets/icons.json` - JSON object contains all icon names as object keys used for types
-- `project_root/platformAssets/runtime/icons.css` - CSS file with all generated icon styles (for you to import)
-
-Additional files:
-- `project_root/platformAssets/svg_icons.json` - JSON object containing only svg icon names (exists only if svg images are present)
-- `project_root/platformAssets/png_icons.json` - JSON object containing only png icon names with more detailed config for each icon
-generated from spritesmith plugin (exists only if png images are present)
-
-Icon names are generated in the following way:
-- file `featured scene.svg` will have icon name `featured-scene` and css class `icon-featured-scene`
-- file `home_scene.png` will have icon name `home_scene` and css class `icon-home_scene`
-
-## Props
-- `icon` - optional, icon name (`featured-scene` or `home_scene`)
-- `domRef` - optional, allows you to manage icons DOM
-
-## Usage
-In your project you should have a file similar to following
-```tsx
-// src/components/Icon/index.tsx
-import { Icon } from '@24i/bigscreen-sdk/icon';
-import * as Icons from '../../platformAssets/icons.json';
-
-class TypedIcon extends Icon<typeof Icons> {}
-
-export { TypedIcon as Icon };
-```
-
-Then you can do
-```tsx
-import { Icon } from '../components/Icon';
-
-class MyComponent {
-    ...
-    render () {
-        return (<Icon icon="my-symbol" />);
-    }
-}
-```
-
-Which will render
-```html
-<div class="icon icon-my-symbol"></div>
-```
-
-Component also has methods:
-- `setIcon` - change the current icon, can be either for different icon, or for focused state
-- `clearIcon` - clear the current icon, so the component will stay blank
-
-## "Coloring" svg icons
-For every SVG icon file name you put into the `maskList` array of rnv configuration (`svgIconsMaskList` in renative.json)
-a `mask-<icon-name>` variant is also generated in spritemap. This one uses css property `-webkit-mask` instead of `background`.
-This renders the icon in single color, but allows you to change it via `background-color` css property.
-
-You may want to use global style similar to this one when using svg icons:
-```scss
-.icon {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    -webkit-mask-size: contain;
-    mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-position: center;
-}
-```
-
-## Custom icon prefix
-When you have both icon types and they have same names, you can specify custom
-prefix for both png and svg icons in renative.json file in your project.
-- property `svgIconPrefix` for svg files, when prefix is `"svg-"`:
-  - file `featured scene.svg` will have icon name `svg-featured-scene` (`mask-svg-featured-scene` for mask)
-  and css class `icon-svg-featured-scene` (`icon-mask-svg-featured-scene`)
-- property `pngIconPrefix` for png files, when prefix is `"png-"`:
-  - file `home_scene.png` will have icon name `png-home_scene` and css class `icon-png-home_scene`.
-
-Prefix `icon-` in class names can't be changed.
-
-## Generating icon files for jest tests
-If you are using icon types in your tests, you will probably also need icon json files. You can use utility
-`generateIcons` from build engine as standalone functionality without need to run the whole build procedure.
-
-In those cases, put this code snippet into `jest-global-setup.js` file in your project.
-
-```js
-const { generateIcons } = require('./node_modules/@24i/bigscreen-sdk/rnv-build-engine/dist/src/scripts/utils/generateIcons');
-
-module.exports = async () => {
-    await generateIcons();
-};
-```
+---
+id: README
+title: Icon
+hide_title: true
+sidebar_label: Icon
+---
+
+# Icon
+Icon component provides a typesafe way for displaying icons defined in a spritemap. In SmartApps BIGscreen
+Template based projects, icons are handled automatically during build process. We currently support
+`svg` and `png` formats. All your icons are stored in `project_root/icons` directory and the build engine
+will process icons recursively from any sub-directory structure you will prepare. Icons are then
+converted into a spritemap and build engine will produce two main files:
+
+- `project_root/platformAssets/icons.json` - JSON object contains all icon names as object keys used for types
+- `project_root/platformAssets/runtime/icons.css` - CSS file with all generated icon styles (for you to import)
+
+Additional files:
+- `project_root/platformAssets/svg_icons.json` - JSON object containing only svg icon names (exists only if svg images are present)
+- `project_root/platformAssets/png_icons.json` - JSON object containing only png icon names with more detailed config for each icon
+generated from spritesmith plugin (exists only if png images are present)
+
+Icon names are generated in the following way:
+- file `featured scene.svg` will have icon name `featured-scene` and css class `icon-featured-scene`
+- file `home_scene.png` will have icon name `home_scene` and css class `icon-home_scene`
+
+## Props
+- `icon` - optional, icon name (`featured-scene` or `home_scene`)
+- `domRef` - optional, allows you to manage icons DOM
+
+## Usage
+In your project you should have a file similar to following
+```tsx
+// src/components/Icon/index.tsx
+import { Icon } from '@24i/bigscreen-sdk/icon';
+import * as Icons from '../../platformAssets/icons.json';
+
+class TypedIcon extends Icon<typeof Icons> {}
+
+export { TypedIcon as Icon };
+```
+
+Then you can do
+```tsx
+import { Icon } from '../components/Icon';
+
+class MyComponent {
+    ...
+    render () {
+        return (<Icon icon="my-symbol" />);
+    }
+}
+```
+
+Which will render
+```html
+<div class="icon icon-my-symbol"></div>
+```
+
+Component also has methods:
+- `setIcon` - change the current icon, can be either for different icon, or for focused state
+- `clearIcon` - clear the current icon, so the component will stay blank
+
+## "Coloring" svg icons
+For every SVG icon file name you put into the `maskList` array of rnv configuration (`svgIconsMaskList` in renative.json)
+a `mask-<icon-name>` variant is also generated in spritemap. This one uses css property `-webkit-mask` instead of `background`.
+This renders the icon in single color, but allows you to change it via `background-color` css property.
+
+You may want to use global style similar to this one when using svg icons:
+```scss
+.icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+```
+
+## Custom icon prefix
+When you have both icon types and they have same names, you can specify custom
+prefix for both png and svg icons in renative.json file in your project.
+- property `svgIconPrefix` for svg files, when prefix is `"svg-"`:
+  - file `featured scene.svg` will have icon name `svg-featured-scene` (`mask-svg-featured-scene` for mask)
+  and css class `icon-svg-featured-scene` (`icon-mask-svg-featured-scene`)
+- property `pngIconPrefix` for png files, when prefix is `"png-"`:
+  - file `home_scene.png` will have icon name `png-home_scene` and css class `icon-png-home_scene`.
+
+Prefix `icon-` in class names can't be changed.
+
+## Generating icon files for jest tests
+If you are using icon types in your tests, you will probably also need icon json files. You can use utility
+`generateIcons` from build engine as standalone functionality without need to run the whole build procedure.
+
+In those cases, put this code snippet into `jest-global-setup.js` file in your project.
+
+```js
+const { generateIcons } = require('./node_modules/@24i/bigscreen-sdk/rnv-build-engine/dist/src/scripts/utils/generateIcons');
+
+module.exports = async () => {
+    await generateIcons();
+};
+```

package/packages/icon/src/Icon.tsx

@@ -1,71 +1,71 @@
-import { createRef, Reference, Component } from '@24i/bigscreen-sdk/jsx';
-import {
-    getDisplayToggler,
-    IDisplayToggler,
-    removeClass,
-    addClass,
-    DISPLAY_NONE,
-} from '@24i/bigscreen-sdk/utils';
-
-const ICON_PREFIX = 'icon-';
-
-type Props<SpritesJSON> = {
-    icon?: keyof SpritesJSON,
-    domRef?: Reference<HTMLDivElement>,
-    className?: string,
-    initialIsHidden?: boolean,
-};
-
-export class Icon<T> extends Component<Props<T>> {
-    ref: Reference<HTMLDivElement>;
-
-    currentIcon: keyof T | undefined;
-
-    iconDisplay: IDisplayToggler;
-
-    constructor(props: Props<T>) {
-        super(props);
-        this.ref = props.domRef || createRef();
-        this.currentIcon = props.icon;
-        this.iconDisplay = getDisplayToggler(this.ref, props.initialIsHidden);
-    }
-
-    getClass(icon: keyof T): string {
-        return `${ICON_PREFIX}${icon as string}`;
-    }
-
-    setIcon(icon: keyof T) {
-        if (icon === this.currentIcon) return;
-        if (this.currentIcon) removeClass(this.ref, this.getClass(this.currentIcon));
-        addClass(this.ref, this.getClass(icon));
-        this.currentIcon = icon;
-    }
-
-    show() {
-        if (!this.currentIcon) return;
-        this.iconDisplay.show();
-    }
-
-    hide() {
-        if (!this.currentIcon) return;
-        this.iconDisplay.hide();
-    }
-
-    clearIcon() {
-        if (!this.currentIcon) return;
-        removeClass(this.ref, this.getClass(this.currentIcon));
-        this.currentIcon = undefined;
-    }
-
-    render() {
-        const { icon, className, initialIsHidden } = this.props;
-        return (
-            <div
-                ref={this.ref}
-                className={`${className || ''} icon ${icon
-                    ? this.getClass(icon) : ''} ${initialIsHidden
-                    ? DISPLAY_NONE : ''}`}
-            />
-        );
-    }
-}
+import { createRef, Reference, Component } from '@24i/bigscreen-sdk/jsx';
+import {
+    getDisplayToggler,
+    IDisplayToggler,
+    removeClass,
+    addClass,
+    DISPLAY_NONE,
+} from '@24i/bigscreen-sdk/utils';
+
+const ICON_PREFIX = 'icon-';
+
+type Props<SpritesJSON> = {
+    icon?: keyof SpritesJSON,
+    domRef?: Reference<HTMLDivElement>,
+    className?: string,
+    initialIsHidden?: boolean,
+};
+
+export class Icon<T> extends Component<Props<T>> {
+    ref: Reference<HTMLDivElement>;
+
+    currentIcon: keyof T | undefined;
+
+    iconDisplay: IDisplayToggler;
+
+    constructor(props: Props<T>) {
+        super(props);
+        this.ref = props.domRef || createRef();
+        this.currentIcon = props.icon;
+        this.iconDisplay = getDisplayToggler(this.ref, props.initialIsHidden);
+    }
+
+    getClass(icon: keyof T): string {
+        return `${ICON_PREFIX}${icon as string}`;
+    }
+
+    setIcon(icon: keyof T) {
+        if (icon === this.currentIcon) return;
+        if (this.currentIcon) removeClass(this.ref, this.getClass(this.currentIcon));
+        addClass(this.ref, this.getClass(icon));
+        this.currentIcon = icon;
+    }
+
+    show() {
+        if (!this.currentIcon) return;
+        this.iconDisplay.show();
+    }
+
+    hide() {
+        if (!this.currentIcon) return;
+        this.iconDisplay.hide();
+    }
+
+    clearIcon() {
+        if (!this.currentIcon) return;
+        removeClass(this.ref, this.getClass(this.currentIcon));
+        this.currentIcon = undefined;
+    }
+
+    render() {
+        const { icon, className, initialIsHidden } = this.props;
+        return (
+            <div
+                ref={this.ref}
+                className={`${className || ''} icon ${icon
+                    ? this.getClass(icon) : ''} ${initialIsHidden
+                    ? DISPLAY_NONE : ''}`}
+            />
+        );
+    }
+}

package/packages/icon/src/index.ts

@@ -1 +1 @@
-export { Icon } from './Icon';
+export { Icon } from './Icon';

package/packages/ime/README.md

@@ -1,72 +1,72 @@
----
-id: README
-title: IME
-hide_title: true
-sidebar_label: IME
----
-
-# Input Method Editor
-Input method editor (ime for short) is a package that connects input method (system/virtual keyboard) and input.
-
-## Usage
-From application perspective the only interaction you do with ime is setting the keyboard.
-Ideal place to do so is either in a scene component on `(re)activate` or if you have only
-one keyboard in the whole app in componentDidMount of the App component.
-If you have scene special keyboard you should clear it on `deactivate`
-```tsx
-class Scene extends Component {
-    keyboard = createRef<Keyboard>();
-
-    activate() { // or reactivate or both
-        ime.setKeyboard(this.keyboard.current);
-    }
-
-    deactivate() {
-        ime.clearKeyboard();
-    }
-
-    render() {
-        // ...
-        <Keyboard ref={this.keyboard} />
-        // ...
-    }
-}
-```
-
-## Interface - Input
-If you are preparing a custom Input you will be interested in `async ime.input(this.inputElement.current)`.
-
-This function returns a promise that is resolved when the keyboard is closed. You should also start listening on `caretpositionchange` to get new caret position. You can use this event to also update
-input value.
-```ts
-onInputEnter() {
-    this.startInput(); // Prepare visuals (caret, border, etc.)
-    ime.addEventListener('caretpositionchange', this.onCaretPositionChange);
-    await ime.input(this.inputElement.current);
-    ime.removeEventListener('caretpositionchange', this.onCaretPositionChange);
-    this.endInput(); // Clean visuals again
-}
-```
-
-## Interface - Keyboard
-If you are preparing custom Keyboard you need to implement `IKeyboard` interface exported by ime package.
-
-That currently is:
-```ts
-type CaretPositionChangeListener = (payload: number) => void;
-
-export interface IKeyboardEvents extends EventMapType {
-    'caretpositionchange': CaretPositionChangeListener,
-}
-
-interface IKeyboard extends IEvents<IKeyboardEvents> {
-    async input(inputElement: HTMLInputElement) => Promise<void>;
-}
-```
-
-Calling the input function should cause keyboard to appear and to take over the control. With each change keyboard should trigger `caretpositionchange`. (Ime relays `addEventListener` and `removeEventListener` between Input and Keyboard.)
-
-It is the keyboard's responsibility to edit input's value and caret position.
-
-Once the user finishes typing and hides the keyboard. It is also keyboard's responsibility to return the focus
-and to resolve the Promise so the Input code execution can continue.
+---
+id: README
+title: IME
+hide_title: true
+sidebar_label: IME
+---
+
+# Input Method Editor
+Input method editor (ime for short) is a package that connects input method (system/virtual keyboard) and input.
+
+## Usage
+From application perspective the only interaction you do with ime is setting the keyboard.
+Ideal place to do so is either in a scene component on `(re)activate` or if you have only
+one keyboard in the whole app in componentDidMount of the App component.
+If you have scene special keyboard you should clear it on `deactivate`
+```tsx
+class Scene extends Component {
+    keyboard = createRef<Keyboard>();
+
+    activate() { // or reactivate or both
+        ime.setKeyboard(this.keyboard.current);
+    }
+
+    deactivate() {
+        ime.clearKeyboard();
+    }
+
+    render() {
+        // ...
+        <Keyboard ref={this.keyboard} />
+        // ...
+    }
+}
+```
+
+## Interface - Input
+If you are preparing a custom Input you will be interested in `async ime.input(this.inputElement.current)`.
+
+This function returns a promise that is resolved when the keyboard is closed. You should also start listening on `caretpositionchange` to get new caret position. You can use this event to also update
+input value.
+```ts
+onInputEnter() {
+    this.startInput(); // Prepare visuals (caret, border, etc.)
+    ime.addEventListener('caretpositionchange', this.onCaretPositionChange);
+    await ime.input(this.inputElement.current);
+    ime.removeEventListener('caretpositionchange', this.onCaretPositionChange);
+    this.endInput(); // Clean visuals again
+}
+```
+
+## Interface - Keyboard
+If you are preparing custom Keyboard you need to implement `IKeyboard` interface exported by ime package.
+
+That currently is:
+```ts
+type CaretPositionChangeListener = (payload: number) => void;
+
+export interface IKeyboardEvents extends EventMapType {
+    'caretpositionchange': CaretPositionChangeListener,
+}
+
+interface IKeyboard extends IEvents<IKeyboardEvents> {
+    async input(inputElement: HTMLInputElement) => Promise<void>;
+}
+```
+
+Calling the input function should cause keyboard to appear and to take over the control. With each change keyboard should trigger `caretpositionchange`. (Ime relays `addEventListener` and `removeEventListener` between Input and Keyboard.)
+
+It is the keyboard's responsibility to edit input's value and caret position.
+
+Once the user finishes typing and hides the keyboard. It is also keyboard's responsibility to return the focus
+and to resolve the Promise so the Input code execution can continue.

package/packages/ime/src/IKeyboard.ts

@@ -1,6 +1,6 @@
-import { IEvents } from '@24i/bigscreen-sdk/events-manager';
-import { IKeyboardEvents } from './IKeyboardEvent';
-
-export interface IKeyboard extends IEvents<IKeyboardEvents> {
-    input(input: HTMLInputElement): Promise<any>
-}
+import { IEvents } from '@24i/bigscreen-sdk/events-manager';
+import { IKeyboardEvents } from './IKeyboardEvent';
+
+export interface IKeyboard extends IEvents<IKeyboardEvents> {
+    input(input: HTMLInputElement): Promise<any>
+}

package/packages/ime/src/IKeyboardEvent.ts

@@ -1,7 +1,7 @@
-import { EventMapType } from '@24i/bigscreen-sdk/events-manager';
-
-type CaretPositionChangeListener = (payload: number | null) => void;
-
-export interface IKeyboardEvents extends EventMapType {
-    'caretpositionchange': CaretPositionChangeListener,
-}
+import { EventMapType } from '@24i/bigscreen-sdk/events-manager';
+
+type CaretPositionChangeListener = (payload: number | null) => void;
+
+export interface IKeyboardEvents extends EventMapType {
+    'caretpositionchange': CaretPositionChangeListener,
+}

package/packages/ime/src/ImeManager.ts

@@ -1,33 +1,33 @@
-import { SystemKeyboard } from './SystemKeyboard';
-import { IKeyboard } from './IKeyboard';
-import { IKeyboardEvents } from './IKeyboardEvent';
-
-class ImeManager {
-    keyboard: IKeyboard = new SystemKeyboard();
-
-    setKeyboard(keyboard: IKeyboard) {
-        this.keyboard = keyboard;
-    }
-
-    clearKeyboard() {
-        this.keyboard = new SystemKeyboard();
-    }
-
-    async input(input: HTMLInputElement): Promise<any> {
-        return this.keyboard.input(input);
-    }
-
-    addEventListener <K extends keyof IKeyboardEvents>(
-        eventName: K, listener: IKeyboardEvents[K],
-    ) {
-        this.keyboard.addEventListener(eventName, listener);
-    }
-
-    removeEventListener <K extends keyof IKeyboardEvents>(
-        eventName: K, listener: IKeyboardEvents[K],
-    ) {
-        this.keyboard.removeEventListener(eventName, listener);
-    }
-}
-
-export const ime = new ImeManager();
+import { SystemKeyboard } from './SystemKeyboard';
+import { IKeyboard } from './IKeyboard';
+import { IKeyboardEvents } from './IKeyboardEvent';
+
+class ImeManager {
+    keyboard: IKeyboard = new SystemKeyboard();
+
+    setKeyboard(keyboard: IKeyboard) {
+        this.keyboard = keyboard;
+    }
+
+    clearKeyboard() {
+        this.keyboard = new SystemKeyboard();
+    }
+
+    async input(input: HTMLInputElement): Promise<any> {
+        return this.keyboard.input(input);
+    }
+
+    addEventListener <K extends keyof IKeyboardEvents>(
+        eventName: K, listener: IKeyboardEvents[K],
+    ) {
+        this.keyboard.addEventListener(eventName, listener);
+    }
+
+    removeEventListener <K extends keyof IKeyboardEvents>(
+        eventName: K, listener: IKeyboardEvents[K],
+    ) {
+        this.keyboard.removeEventListener(eventName, listener);
+    }
+}
+
+export const ime = new ImeManager();