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

package/packages/keyboard/src/WhitelabelNumericKeyboard/NumericKeyboard.tsx

@@ -1,161 +1,161 @@
-import { DeclareProps, clearNode } from '@24i/bigscreen-sdk/jsx';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { Matrix, CircularDirection } from '@24i/bigscreen-sdk/focus';
-import { Interactable } from '@24i/bigscreen-sdk/interactable';
-import { Backdrop } from '../Backdrop/Backdrop';
-import { BaseProps, KeyboardBase } from '../KeyboardBase';
-import { makeFocusMatrixStrings, layout } from './layout';
-import './NumericKeyboard.styles';
-
-type Layouts = 'normal';
-
-export type Props = BaseProps<Layouts> & {
-    texts?: {
-        clear: string | JSX.Element,
-        continue: string | JSX.Element,
-    };
-    includeContinueButton?: boolean;
-};
-
-export class NumericKeyboard extends KeyboardBase<Layouts, Props> {
-    static defaultProps = {
-        ...KeyboardBase.defaultProps,
-        className: 'numeric-keyboard',
-        circular: CircularDirection.NONE,
-        layouts: {
-            normal: layout,
-        },
-        texts: {
-            clear: 'Clear',
-            continue: 'Continue',
-        },
-        initialFocus: { x: 0, y: 0 },
-        shouldHideOnBackdropClick: true,
-        includeContinueButton: false,
-    };
-
-    declare props: DeclareProps<Props, typeof NumericKeyboard.defaultProps>;
-
-    createFocusMatrices() {
-        const { includeContinueButton } = this.props;
-        super.createFocusMatrices({
-            normal: makeFocusMatrixStrings(includeContinueButton),
-        });
-    }
-
-    show() {
-        super.show();
-        this.renderNumericKeyboard();
-    }
-
-    hide() {
-        super.hide();
-        clearNode(this.keyboardWrapper);
-    }
-
-    generateKey = (char: string) => (
-        <Interactable
-            ref={this.keyRefs[char]}
-            className={`key key-${char}`}
-            onPress={() => this.onKey(char)}
-        >
-            {char}
-        </Interactable>
-    );
-
-    renderNumericKeyboard() {
-        const { texts, circular, shouldHideOnBackdropClick, includeContinueButton } = this.props;
-        this.clearMount(
-            <>
-                <Backdrop
-                    onClick={() => this.onCancel()}
-                    enableOnClick={shouldHideOnBackdropClick}
-                />
-                <Matrix
-                    ref={this.matrix}
-                    domRef={this.keyboardWrapper}
-                    matrix={this.focusMatrices.normal}
-                    circular={circular}
-                    dir="ltr"
-                >
-                    <div className="numeric-keyboard-wrapper">
-                        <div className="keys-container key-layout">
-                            <div className="rounded-border-container">
-                                <div className="key-row key-chars">
-                                    {map(layout[0], this.generateKey)}
-                                </div>
-                                <div className="key-row key-chars">
-                                    {map(layout[1], this.generateKey)}
-                                </div>
-                                <div className="key-row key-chars">
-                                    {map(layout[2], this.generateKey)}
-                                </div>
-                                <div className="key-row key-chars">
-                                    <div className="key key-blank">&nbsp;</div>
-                                    <div className="key-background-wrapper">
-                                        {
-                                            // eslint-disable-next-line no-magic-numbers
-                                            this.generateKey(layout[3][0])
-                                        }
-                                    </div>
-                                    <div className="key key-blank">&nbsp;</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="keys-container side-bar">
-                            <div className="rounded-border-container">
-                                <div className="key-row">
-                                    <Interactable
-                                        ref={this.keyRefs.backspace}
-                                        className="key key-wide key-with-icon key-backspace"
-                                        onPress={() => this.onBackspace()}
-                                    >
-                                        <div className="key-mask-icon" />
-                                    </Interactable>
-                                </div>
-                                <div className="key-row">
-                                    <Interactable
-                                        ref={this.keyRefs.clear}
-                                        className="key key-wide key-clear"
-                                        onPress={() => this.onClear()}
-                                        dir="auto"
-                                    >
-                                        {texts.clear}
-                                    </Interactable>
-                                </div>
-                            </div>
-                            <div className="key-row">
-                                <div className="key key-wide key-empty">&nbsp;</div>
-                            </div>
-                            {
-                                includeContinueButton
-                                    ? (
-                                        <div className="rounded-border-container">
-                                            <div className="key-row">
-                                                <Interactable
-                                                    ref={this.keyRefs.continue}
-                                                    className="key key-wide key-continue"
-                                                    onPress={() => this.onDone()}
-                                                    dir="auto"
-                                                >
-                                                    <div className="key-background">
-                                                        {texts.continue}
-                                                    </div>
-                                                </Interactable>
-                                            </div>
-                                        </div>
-                                    )
-                                    : (
-                                        <div className="key-row">
-                                            <div className="key key-wide key-empty">&nbsp;</div>
-                                        </div>
-                                    )
-                            }
-                        </div>
-                    </div>
-                </Matrix>
-            </>,
-            this.keyboardWrapper,
-        );
-    }
-}
+import { DeclareProps, clearNode } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Matrix, CircularDirection } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import { makeFocusMatrixStrings, layout } from './layout';
+import './NumericKeyboard.styles';
+
+type Layouts = 'normal';
+
+export type Props = BaseProps<Layouts> & {
+    texts?: {
+        clear: string | JSX.Element,
+        continue: string | JSX.Element,
+    };
+    includeContinueButton?: boolean;
+};
+
+export class NumericKeyboard extends KeyboardBase<Layouts, Props> {
+    static defaultProps = {
+        ...KeyboardBase.defaultProps,
+        className: 'numeric-keyboard',
+        circular: CircularDirection.NONE,
+        layouts: {
+            normal: layout,
+        },
+        texts: {
+            clear: 'Clear',
+            continue: 'Continue',
+        },
+        initialFocus: { x: 0, y: 0 },
+        shouldHideOnBackdropClick: true,
+        includeContinueButton: false,
+    };
+
+    declare props: DeclareProps<Props, typeof NumericKeyboard.defaultProps>;
+
+    createFocusMatrices() {
+        const { includeContinueButton } = this.props;
+        super.createFocusMatrices({
+            normal: makeFocusMatrixStrings(includeContinueButton),
+        });
+    }
+
+    show() {
+        super.show();
+        this.renderNumericKeyboard();
+    }
+
+    hide() {
+        super.hide();
+        clearNode(this.keyboardWrapper);
+    }
+
+    generateKey = (char: string) => (
+        <Interactable
+            ref={this.keyRefs[char]}
+            className={`key key-${char}`}
+            onPress={() => this.onKey(char)}
+        >
+            {char}
+        </Interactable>
+    );
+
+    renderNumericKeyboard() {
+        const { texts, circular, shouldHideOnBackdropClick, includeContinueButton } = this.props;
+        this.clearMount(
+            <>
+                <Backdrop
+                    onClick={() => this.onCancel()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.normal}
+                    circular={circular}
+                    dir="ltr"
+                >
+                    <div className="numeric-keyboard-wrapper">
+                        <div className="keys-container key-layout">
+                            <div className="rounded-border-container">
+                                <div className="key-row key-chars">
+                                    {map(layout[0], this.generateKey)}
+                                </div>
+                                <div className="key-row key-chars">
+                                    {map(layout[1], this.generateKey)}
+                                </div>
+                                <div className="key-row key-chars">
+                                    {map(layout[2], this.generateKey)}
+                                </div>
+                                <div className="key-row key-chars">
+                                    <div className="key key-blank">&nbsp;</div>
+                                    <div className="key-background-wrapper">
+                                        {
+                                            // eslint-disable-next-line no-magic-numbers
+                                            this.generateKey(layout[3][0])
+                                        }
+                                    </div>
+                                    <div className="key key-blank">&nbsp;</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="keys-container side-bar">
+                            <div className="rounded-border-container">
+                                <div className="key-row">
+                                    <Interactable
+                                        ref={this.keyRefs.backspace}
+                                        className="key key-wide key-with-icon key-backspace"
+                                        onPress={() => this.onBackspace()}
+                                    >
+                                        <div className="key-mask-icon" />
+                                    </Interactable>
+                                </div>
+                                <div className="key-row">
+                                    <Interactable
+                                        ref={this.keyRefs.clear}
+                                        className="key key-wide key-clear"
+                                        onPress={() => this.onClear()}
+                                        dir="auto"
+                                    >
+                                        {texts.clear}
+                                    </Interactable>
+                                </div>
+                            </div>
+                            <div className="key-row">
+                                <div className="key key-wide key-empty">&nbsp;</div>
+                            </div>
+                            {
+                                includeContinueButton
+                                    ? (
+                                        <div className="rounded-border-container">
+                                            <div className="key-row">
+                                                <Interactable
+                                                    ref={this.keyRefs.continue}
+                                                    className="key key-wide key-continue"
+                                                    onPress={() => this.onDone()}
+                                                    dir="auto"
+                                                >
+                                                    <div className="key-background">
+                                                        {texts.continue}
+                                                    </div>
+                                                </Interactable>
+                                            </div>
+                                        </div>
+                                    )
+                                    : (
+                                        <div className="key-row">
+                                            <div className="key key-wide key-empty">&nbsp;</div>
+                                        </div>
+                                    )
+                            }
+                        </div>
+                    </div>
+                </Matrix>
+            </>,
+            this.keyboardWrapper,
+        );
+    }
+}

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/_sizes.1080.scss

@@ -1,7 +1,7 @@
-$normal-font-size: 30px;
-$normal-letter-spacing: -0.31px;
-$normal-line-height: normal;
-
-$small-font-size: 24px;
-$small-letter-spacing: -0.26px;
-$small-line-height: normal;
+$normal-font-size: 30px;
+$normal-letter-spacing: -0.31px;
+$normal-line-height: normal;
+
+$small-font-size: 24px;
+$small-letter-spacing: -0.26px;
+$small-line-height: normal;

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/_sizes.scss

@@ -1,7 +1,7 @@
-$normal-font-size: 20px;
-$normal-letter-spacing: -0.21px;
-$normal-line-height: normal;
-
-$small-font-size: 16px;
-$small-letter-spacing: -0.17px;
-$small-line-height: normal;
+$normal-font-size: 20px;
+$normal-letter-spacing: -0.21px;
+$normal-line-height: normal;
+
+$small-font-size: 16px;
+$small-letter-spacing: -0.17px;
+$small-line-height: normal;

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/index.ts

@@ -1 +1 @@
-import './whitelabel.styles';
+import './whitelabel.styles';

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/whitelabel.scss

@@ -1,62 +1,62 @@
-// Colors
-$key-background: rgb(255, 255, 255);
-$focus-background: rgb(255, 255, 255, 0.1);
-$keyboard-background: rgba(31, 31, 31, 0.6);
-$keyboard-background-over: rgba(31, 31, 31, 0.9);
-$medium-background: rgba(97, 98, 100, 0.6);
-$light-background: rgba(97, 98, 100, 0.3);
-
-.numeric-keyboard {
-    background-color: $keyboard-background;
-
-    .numeric-keyboard-wrapper {
-        background-color: $keyboard-background-over;
-    }
-
-    .keys-container.key-layout {
-        .key-row,
-        .key-background-wrapper {
-            background-color: $medium-background;
-        }
-    }
-
-    .keys-container.side-bar {
-        .rounded-border-container {
-            background-color: $medium-background;
-        }
-    }
-
-    .key {
-        &.key-blank {
-            background-color: $light-background;
-        }
-
-        &:focus {
-            background-color: $focus-background;
-            border-color: $key-background;
-        }
-
-        .key-mask-icon {
-            background-color: $key-background;
-        }
-    }
-}
-
-// Typography
-.numeric-keyboard {
-    .keys-container {
-        &.key-layout {
-            font-size: $normal-font-size;
-            font-weight: 700;
-            letter-spacing: $normal-letter-spacing;
-            line-height: $normal-line-height;
-        }
-
-        &.side-bar {
-            font-size: $small-font-size;
-            font-weight: 600;
-            letter-spacing: $small-letter-spacing;
-            line-height: $small-line-height;
-        }
-    }
-}
+// Colors
+$key-background: rgb(255, 255, 255);
+$focus-background: rgb(255, 255, 255, 0.1);
+$keyboard-background: rgba(31, 31, 31, 0.6);
+$keyboard-background-over: rgba(31, 31, 31, 0.9);
+$medium-background: rgba(97, 98, 100, 0.6);
+$light-background: rgba(97, 98, 100, 0.3);
+
+.numeric-keyboard {
+    background-color: $keyboard-background;
+
+    .numeric-keyboard-wrapper {
+        background-color: $keyboard-background-over;
+    }
+
+    .keys-container.key-layout {
+        .key-row,
+        .key-background-wrapper {
+            background-color: $medium-background;
+        }
+    }
+
+    .keys-container.side-bar {
+        .rounded-border-container {
+            background-color: $medium-background;
+        }
+    }
+
+    .key {
+        &.key-blank {
+            background-color: $light-background;
+        }
+
+        &:focus {
+            background-color: $focus-background;
+            border-color: $key-background;
+        }
+
+        .key-mask-icon {
+            background-color: $key-background;
+        }
+    }
+}
+
+// Typography
+.numeric-keyboard {
+    .keys-container {
+        &.key-layout {
+            font-size: $normal-font-size;
+            font-weight: 700;
+            letter-spacing: $normal-letter-spacing;
+            line-height: $normal-line-height;
+        }
+
+        &.side-bar {
+            font-size: $small-font-size;
+            font-weight: 600;
+            letter-spacing: $small-letter-spacing;
+            line-height: $small-line-height;
+        }
+    }
+}

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/whitelabel.styles.1080.scss

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

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/whitelabel.styles.scss

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

package/packages/keyboard/src/WhitelabelNumericKeyboard/_sizes.1080.scss

@@ -1,29 +1,29 @@
-$keyboard-padding-top: 24px;
-$keyboard-padding-bottom: 54px;
-
-$keys-container-margin: 0 12px;
-
-$side-bar-width: 176px;
-
-$key-row-height: 74px;
-
-$key-border-radius: 8px;
-$key-border-size: 2px;
-$key-padding: 18px;
-$key-height: 74px;
-$key-width: 88px;
-
-$rounded-border-container-shadow-1: 0 4px 6px 0;
-$rounded-border-container-shadow-2: 0 1px 1px 0;
-
-$key-wide-padding: 21px 18px;
-$key-wide-width: 176px;
-
-$icon-mask-size: 40px;
-
-$key-with-icon-padding: 17px 22px;
-
-$key-space-width: 528px;
-
-$focus-shadow-1: 0 1px 3px 0;
-$focus-shadow-2: 0 20px 32px 0;
+$keyboard-padding-top: 24px;
+$keyboard-padding-bottom: 54px;
+
+$keys-container-margin: 0 12px;
+
+$side-bar-width: 176px;
+
+$key-row-height: 74px;
+
+$key-border-radius: 8px;
+$key-border-size: 2px;
+$key-padding: 18px;
+$key-height: 74px;
+$key-width: 88px;
+
+$rounded-border-container-shadow-1: 0 4px 6px 0;
+$rounded-border-container-shadow-2: 0 1px 1px 0;
+
+$key-wide-padding: 21px 18px;
+$key-wide-width: 176px;
+
+$icon-mask-size: 40px;
+
+$key-with-icon-padding: 17px 22px;
+
+$key-space-width: 528px;
+
+$focus-shadow-1: 0 1px 3px 0;
+$focus-shadow-2: 0 20px 32px 0;

package/packages/keyboard/src/WhitelabelNumericKeyboard/_sizes.scss

@@ -1,29 +1,29 @@
-$keyboard-padding-top: 16px;
-$keyboard-padding-bottom: 37px;
-
-$keys-container-margin: 0 8px;
-
-$side-bar-width: 118px;
-
-$key-row-height: 49px;
-
-$key-border-radius: 5px;
-$key-border-size: 1px;
-$key-padding: 12px;
-$key-height: 49px;
-$key-width: 58px;
-
-$rounded-border-container-shadow-1: 0 3px 4px 0;
-$rounded-border-container-shadow-2: 0 1px 1px 0;
-
-$key-wide-padding: 14px 12px;
-$key-wide-width: 117px;
-
-$icon-mask-size: 27px;
-
-$key-with-icon-padding: 11px 15px;
-
-$key-space-width: 352px;
-
-$focus-shadow-1: 0 1px 2px 0;
-$focus-shadow-2: 0 13px 21px 0;
+$keyboard-padding-top: 16px;
+$keyboard-padding-bottom: 37px;
+
+$keys-container-margin: 0 8px;
+
+$side-bar-width: 118px;
+
+$key-row-height: 49px;
+
+$key-border-radius: 5px;
+$key-border-size: 1px;
+$key-padding: 12px;
+$key-height: 49px;
+$key-width: 58px;
+
+$rounded-border-container-shadow-1: 0 3px 4px 0;
+$rounded-border-container-shadow-2: 0 1px 1px 0;
+
+$key-wide-padding: 14px 12px;
+$key-wide-width: 117px;
+
+$icon-mask-size: 27px;
+
+$key-with-icon-padding: 11px 15px;
+
+$key-space-width: 352px;
+
+$focus-shadow-1: 0 1px 2px 0;
+$focus-shadow-2: 0 13px 21px 0;

package/packages/keyboard/src/WhitelabelNumericKeyboard/icons/key_backspace.svg

@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>System icons/onPrimary-Backspace</title>
-    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="backspace-white-18dp-2" transform="translate(5.000000, 5.000000)">
-            <polygon id="Path" points="0 0 30 0 30 30 0 30"></polygon>
-            <path d="M27.5,3.75 L8.75,3.75 C7.8875,3.75 7.2125,4.1875 6.7625,4.85 L0.4625,14.3125 C0.1875,14.7375 0.1875,15.275 0.4625,15.7 L6.7625,25.15 C7.2125,25.8 7.8875,26.25 8.75,26.25 L27.5,26.25 C28.875,26.25 30,25.125 30,23.75 L30,6.25 C30,4.875 28.875,3.75 27.5,3.75 Z M22.875,20.375 C22.3875,20.8625 21.6,20.8625 21.1125,20.375 L17.5,16.7625 L13.8875,20.375 C13.4,20.8625 12.6125,20.8625 12.125,20.375 C11.6375,19.8875 11.6375,19.1 12.125,18.6125 L15.7375,15 L12.125,11.3875 C11.6375,10.9 11.6375,10.1125 12.125,9.625 C12.6125,9.1375 13.4,9.1375 13.8875,9.625 L17.5,13.2375 L21.1125,9.625 C21.6,9.1375 22.3875,9.1375 22.875,9.625 C23.3625,10.1125 23.3625,10.9 22.875,11.3875 L19.2625,15 L22.875,18.6125 C23.35,19.0875 23.35,19.8875 22.875,20.375 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
-        </g>
-    </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-Backspace</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="backspace-white-18dp-2" transform="translate(5.000000, 5.000000)">
+            <polygon id="Path" points="0 0 30 0 30 30 0 30"></polygon>
+            <path d="M27.5,3.75 L8.75,3.75 C7.8875,3.75 7.2125,4.1875 6.7625,4.85 L0.4625,14.3125 C0.1875,14.7375 0.1875,15.275 0.4625,15.7 L6.7625,25.15 C7.2125,25.8 7.8875,26.25 8.75,26.25 L27.5,26.25 C28.875,26.25 30,25.125 30,23.75 L30,6.25 C30,4.875 28.875,3.75 27.5,3.75 Z M22.875,20.375 C22.3875,20.8625 21.6,20.8625 21.1125,20.375 L17.5,16.7625 L13.8875,20.375 C13.4,20.8625 12.6125,20.8625 12.125,20.375 C11.6375,19.8875 11.6375,19.1 12.125,18.6125 L15.7375,15 L12.125,11.3875 C11.6375,10.9 11.6375,10.1125 12.125,9.625 C12.6125,9.1375 13.4,9.1375 13.8875,9.625 L17.5,13.2375 L21.1125,9.625 C21.6,9.1375 22.3875,9.1375 22.875,9.625 C23.3625,10.1125 23.3625,10.9 22.875,11.3875 L19.2625,15 L22.875,18.6125 C23.35,19.0875 23.35,19.8875 22.875,20.375 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
 </svg>

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

@@ -1,2 +1,2 @@
-export { NumericKeyboard } from './NumericKeyboard';
-export type { Props } from './NumericKeyboard';
+export { NumericKeyboard } from './NumericKeyboard';
+export type { Props } from './NumericKeyboard';