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

package/packages/numeric-zapper/src/NumericZapper.scss

@@ -1,20 +1,20 @@
-.numeric-zapper {
-    border-radius: 6px;
-    font-size: $zapper-font-size;
-    height: $zapper-height;
-    left: $zapper-left;
-    line-height: $zapper-height;
-    position: absolute;
-    top: $zapper-top;
-    width: $zapper-width;
-    z-index: 700;
-    text-align: center;
-    outline: none;
-    background-color: #4c4c4c;
-
-    .zapper-number {
-        display: inline-block;
-        text-align: center;
-        width: $zapper-number-width;
-    }
-}
+.numeric-zapper {
+    border-radius: 6px;
+    font-size: $zapper-font-size;
+    height: $zapper-height;
+    left: $zapper-left;
+    line-height: $zapper-height;
+    position: absolute;
+    top: $zapper-top;
+    width: $zapper-width;
+    z-index: 700;
+    text-align: center;
+    outline: none;
+    background-color: #4c4c4c;
+
+    .zapper-number {
+        display: inline-block;
+        text-align: center;
+        width: $zapper-number-width;
+    }
+}

package/packages/numeric-zapper/src/NumericZapper.styles.1080.scss

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

package/packages/numeric-zapper/src/NumericZapper.styles.scss

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

package/packages/numeric-zapper/src/NumericZapper.tsx

@@ -1,257 +1,257 @@
-import {
-    createRef,
-    Component,
-    setText,
-    DeclareProps,
-    Reference,
-} from '@24i/bigscreen-sdk/jsx';
-import { getKeyDigit } from '@24i/bigscreen-sdk/device';
-import { BACK, ENTER } from '@24i/bigscreen-sdk/device/keymap';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { nTimes } from '@24i/bigscreen-sdk/utils/nTimes';
-import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
-import {
-    setActiveElementAsFocusCandidate, focusCandidate,
-} from '@24i/bigscreen-sdk/focus';
-import {
-    getDisplayToggler,
-    DISPLAY_NONE,
-} from '@24i/bigscreen-sdk/utils/displayToggler';
-import { noop } from '@24i/bigscreen-sdk/utils/noop';
-import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
-import { isZapperAllowed } from './ZapperAllower';
-
-type ZapFunction = (zap: number) => void;
-
-export type Props = {
-    className?: string,
-    enabled?: boolean;
-    onSubmit?: ZapFunction,
-    visibleOnEnable?: boolean,
-    timeout?: number,
-    placeholderChar?: string,
-    noPlaceholders?: boolean,
-};
-type SubmitZap = {
-    defaultZap: ZapFunction | undefined;
-    specificZap: ZapFunction | undefined;
-};
-
-const MAX_DIGITS = 4;
-
-export type ZapperInterface = {
-    enable: (callback?: ZapFunction, isDefault?: boolean) => void,
-    disable: () => void,
-    isEnabled: () => boolean,
-};
-
-export class NumericZapper extends Component<Props> {
-    div = createRef<HTMLDivElement>();
-
-    zapperNumbers: number[] = [];
-
-    waitingTimeout = createTimeout();
-
-    submit: SubmitZap = {
-        defaultZap: undefined,
-        specificZap: undefined,
-    };
-
-    isZapping = false;
-
-    isZapperEnabled = false;
-
-    displayToggler = getDisplayToggler(this.div, true);
-
-    charWrappers: Reference<HTMLDivElement>[] = nTimes(MAX_DIGITS, () => createRef());
-
-    charDisplayTogglers = map(this.charWrappers, (wrapper) => (
-        // eslint-disable-next-line react/destructuring-assignment
-        getDisplayToggler(wrapper, this.props.noPlaceholders)
-    ));
-
-    static defaultProps = {
-        className: '',
-        timeout: 2000,
-        enabled: false,
-        visibleOnEnable: false,
-        onSubmit: noop,
-        placeholderChar: '-',
-        noPlaceholders: false,
-    };
-
-    declare props: DeclareProps<Props, typeof NumericZapper.defaultProps>;
-
-    componentDidMount() {
-        const { enabled, onSubmit, visibleOnEnable } = this.props;
-        if (onSubmit) this.submit.defaultZap = onSubmit;
-        if (enabled) {
-            this.registerKeyHandler();
-            if (visibleOnEnable) this.showAndFocus();
-        }
-    }
-
-    componentWillUnmount() {
-        this.unregisterKeyHandler();
-        if (this.submit.specificZap) this.submit.specificZap = undefined;
-    }
-
-    getZapperInterface = (): ZapperInterface => ({
-        enable: this.enable,
-        disable: this.disable,
-        isEnabled: this.isEnabled,
-    });
-
-    isEnabled = () => this.isZapperEnabled;
-
-    enable = (callback?: (zap: number) => void, defaultSubmit = false) => {
-        if (callback) {
-            if (!defaultSubmit) this.submit.specificZap = callback;
-            else this.submit.defaultZap = callback;
-        }
-        this.isZapperEnabled = true;
-        this.registerKeyHandler();
-        const { visibleOnEnable } = this.props;
-        if (visibleOnEnable) {
-            this.showAndFocus();
-        }
-    };
-
-    disable = () => {
-        this.submit.specificZap = undefined;
-        this.isZapperEnabled = false;
-        this.unregisterKeyHandler();
-        this.resetZapper();
-    };
-
-    onGlobalKeyDown = (event: KeyboardEvent) => {
-        const digit = getKeyDigit(event);
-        if (digit !== undefined) {
-            this.processDigit(digit);
-        } else if (this.isZapping) {
-            if (isZapperAllowed()) {
-                if (BACK.is(event) && this.zapperNumbers.length !== 0) {
-                    this.resetZapper();
-                    stopEvent(event);
-                } else if (ENTER.is(event)) {
-                    this.submitZapAndResetZapper();
-                    stopEvent(event);
-                }
-            } else {
-                this.resetZapper();
-            }
-        }
-    };
-
-    processDigit(digit: number) {
-        if (isZapperAllowed()) {
-            if (!this.isZapping) {
-                this.isZapping = true;
-                this.showAndFocus();
-            }
-            this.updateData(digit);
-        } else if (this.isZapping) {
-            this.resetZapper();
-        }
-    }
-
-    registerKeyHandler() {
-        window.addEventListener('keydown', this.onGlobalKeyDown, true);
-    }
-
-    unregisterKeyHandler() {
-        window.removeEventListener('keydown', this.onGlobalKeyDown, true);
-    }
-
-    resetZapper(doNotHide = false) {
-        this.isZapping = false;
-        this.stopWaitingTimeout();
-        if (!doNotHide) this.hideAndBlur();
-
-        const { placeholderChar, noPlaceholders } = this.props;
-        const children = this.div.current!.childNodes;
-        for (let i = 0; i < children.length; i++) {
-            setText(children[i] as HTMLElement, placeholderChar);
-            if (noPlaceholders) this.charDisplayTogglers[i].hide();
-        }
-
-        this.zapperNumbers = [];
-    }
-
-    submitZapAndResetZapper() {
-        const { zapperNumbers } = this;
-
-        this.resetZapper();
-
-        if (!isZapperAllowed()) return;
-
-        const zapNumber = parseInt(zapperNumbers.join(''), 10);
-
-        if (this.submit.specificZap) {
-            this.submit.specificZap(zapNumber);
-        } else if (this.submit.defaultZap) {
-            this.submit.defaultZap(zapNumber);
-        }
-    }
-
-    startWaitingTimeout() {
-        const { timeout } = this.props;
-        this.stopWaitingTimeout();
-        this.waitingTimeout.set(() => {
-            this.submitZapAndResetZapper();
-        }, timeout);
-    }
-
-    stopWaitingTimeout() {
-        this.waitingTimeout.clear();
-    }
-
-    updateData(digit: number) {
-        const { noPlaceholders } = this.props;
-        if (this.zapperNumbers.length === MAX_DIGITS) {
-            this.resetZapper(true);
-        }
-        const index = this.zapperNumbers.length;
-        const element = this.div.current!.childNodes[index] as HTMLElement;
-        setText(element, digit.toString());
-        if (noPlaceholders) this.charDisplayTogglers[index].show();
-        this.zapperNumbers.push(digit);
-        this.startWaitingTimeout();
-    }
-
-    showAndFocus() {
-        if (this.displayToggler.isVisible()) return;
-        setActiveElementAsFocusCandidate();
-        this.displayToggler.show();
-        this.div.current!.focus();
-    }
-
-    hideAndBlur() {
-        if (this.displayToggler.isHidden()) return;
-        this.displayToggler.hide();
-        this.div.current!.blur();
-        focusCandidate();
-    }
-
-    render() {
-        const { className, placeholderChar, noPlaceholders } = this.props;
-        return (
-            <div
-                className={`numeric-zapper ${className || ''} ${DISPLAY_NONE}`}
-                ref={this.div}
-                tabIndex={0}
-                dir="ltr"
-                data-zapper-allowed
-            >
-                {nTimes(MAX_DIGITS, (_, index) => (
-                    <div
-                        ref={this.charWrappers[index]}
-                        className={`zapper-number ${noPlaceholders ? DISPLAY_NONE : ''}`}
-                    >
-                        {placeholderChar}
-                    </div>
-                ))}
-            </div>
-        );
-    }
-}
+import {
+    createRef,
+    Component,
+    setText,
+    DeclareProps,
+    Reference,
+} from '@24i/bigscreen-sdk/jsx';
+import { getKeyDigit } from '@24i/bigscreen-sdk/device';
+import { BACK, ENTER } from '@24i/bigscreen-sdk/device/keymap';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { nTimes } from '@24i/bigscreen-sdk/utils/nTimes';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import {
+    setActiveElementAsFocusCandidate, focusCandidate,
+} from '@24i/bigscreen-sdk/focus';
+import {
+    getDisplayToggler,
+    DISPLAY_NONE,
+} from '@24i/bigscreen-sdk/utils/displayToggler';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { isZapperAllowed } from './ZapperAllower';
+
+type ZapFunction = (zap: number) => void;
+
+export type Props = {
+    className?: string,
+    enabled?: boolean;
+    onSubmit?: ZapFunction,
+    visibleOnEnable?: boolean,
+    timeout?: number,
+    placeholderChar?: string,
+    noPlaceholders?: boolean,
+};
+type SubmitZap = {
+    defaultZap: ZapFunction | undefined;
+    specificZap: ZapFunction | undefined;
+};
+
+const MAX_DIGITS = 4;
+
+export type ZapperInterface = {
+    enable: (callback?: ZapFunction, isDefault?: boolean) => void,
+    disable: () => void,
+    isEnabled: () => boolean,
+};
+
+export class NumericZapper extends Component<Props> {
+    div = createRef<HTMLDivElement>();
+
+    zapperNumbers: number[] = [];
+
+    waitingTimeout = createTimeout();
+
+    submit: SubmitZap = {
+        defaultZap: undefined,
+        specificZap: undefined,
+    };
+
+    isZapping = false;
+
+    isZapperEnabled = false;
+
+    displayToggler = getDisplayToggler(this.div, true);
+
+    charWrappers: Reference<HTMLDivElement>[] = nTimes(MAX_DIGITS, () => createRef());
+
+    charDisplayTogglers = map(this.charWrappers, (wrapper) => (
+        // eslint-disable-next-line react/destructuring-assignment
+        getDisplayToggler(wrapper, this.props.noPlaceholders)
+    ));
+
+    static defaultProps = {
+        className: '',
+        timeout: 2000,
+        enabled: false,
+        visibleOnEnable: false,
+        onSubmit: noop,
+        placeholderChar: '-',
+        noPlaceholders: false,
+    };
+
+    declare props: DeclareProps<Props, typeof NumericZapper.defaultProps>;
+
+    componentDidMount() {
+        const { enabled, onSubmit, visibleOnEnable } = this.props;
+        if (onSubmit) this.submit.defaultZap = onSubmit;
+        if (enabled) {
+            this.registerKeyHandler();
+            if (visibleOnEnable) this.showAndFocus();
+        }
+    }
+
+    componentWillUnmount() {
+        this.unregisterKeyHandler();
+        if (this.submit.specificZap) this.submit.specificZap = undefined;
+    }
+
+    getZapperInterface = (): ZapperInterface => ({
+        enable: this.enable,
+        disable: this.disable,
+        isEnabled: this.isEnabled,
+    });
+
+    isEnabled = () => this.isZapperEnabled;
+
+    enable = (callback?: (zap: number) => void, defaultSubmit = false) => {
+        if (callback) {
+            if (!defaultSubmit) this.submit.specificZap = callback;
+            else this.submit.defaultZap = callback;
+        }
+        this.isZapperEnabled = true;
+        this.registerKeyHandler();
+        const { visibleOnEnable } = this.props;
+        if (visibleOnEnable) {
+            this.showAndFocus();
+        }
+    };
+
+    disable = () => {
+        this.submit.specificZap = undefined;
+        this.isZapperEnabled = false;
+        this.unregisterKeyHandler();
+        this.resetZapper();
+    };
+
+    onGlobalKeyDown = (event: KeyboardEvent) => {
+        const digit = getKeyDigit(event);
+        if (digit !== undefined) {
+            this.processDigit(digit);
+        } else if (this.isZapping) {
+            if (isZapperAllowed()) {
+                if (BACK.is(event) && this.zapperNumbers.length !== 0) {
+                    this.resetZapper();
+                    stopEvent(event);
+                } else if (ENTER.is(event)) {
+                    this.submitZapAndResetZapper();
+                    stopEvent(event);
+                }
+            } else {
+                this.resetZapper();
+            }
+        }
+    };
+
+    processDigit(digit: number) {
+        if (isZapperAllowed()) {
+            if (!this.isZapping) {
+                this.isZapping = true;
+                this.showAndFocus();
+            }
+            this.updateData(digit);
+        } else if (this.isZapping) {
+            this.resetZapper();
+        }
+    }
+
+    registerKeyHandler() {
+        window.addEventListener('keydown', this.onGlobalKeyDown, true);
+    }
+
+    unregisterKeyHandler() {
+        window.removeEventListener('keydown', this.onGlobalKeyDown, true);
+    }
+
+    resetZapper(doNotHide = false) {
+        this.isZapping = false;
+        this.stopWaitingTimeout();
+        if (!doNotHide) this.hideAndBlur();
+
+        const { placeholderChar, noPlaceholders } = this.props;
+        const children = this.div.current!.childNodes;
+        for (let i = 0; i < children.length; i++) {
+            setText(children[i] as HTMLElement, placeholderChar);
+            if (noPlaceholders) this.charDisplayTogglers[i].hide();
+        }
+
+        this.zapperNumbers = [];
+    }
+
+    submitZapAndResetZapper() {
+        const { zapperNumbers } = this;
+
+        this.resetZapper();
+
+        if (!isZapperAllowed()) return;
+
+        const zapNumber = parseInt(zapperNumbers.join(''), 10);
+
+        if (this.submit.specificZap) {
+            this.submit.specificZap(zapNumber);
+        } else if (this.submit.defaultZap) {
+            this.submit.defaultZap(zapNumber);
+        }
+    }
+
+    startWaitingTimeout() {
+        const { timeout } = this.props;
+        this.stopWaitingTimeout();
+        this.waitingTimeout.set(() => {
+            this.submitZapAndResetZapper();
+        }, timeout);
+    }
+
+    stopWaitingTimeout() {
+        this.waitingTimeout.clear();
+    }
+
+    updateData(digit: number) {
+        const { noPlaceholders } = this.props;
+        if (this.zapperNumbers.length === MAX_DIGITS) {
+            this.resetZapper(true);
+        }
+        const index = this.zapperNumbers.length;
+        const element = this.div.current!.childNodes[index] as HTMLElement;
+        setText(element, digit.toString());
+        if (noPlaceholders) this.charDisplayTogglers[index].show();
+        this.zapperNumbers.push(digit);
+        this.startWaitingTimeout();
+    }
+
+    showAndFocus() {
+        if (this.displayToggler.isVisible()) return;
+        setActiveElementAsFocusCandidate();
+        this.displayToggler.show();
+        this.div.current!.focus();
+    }
+
+    hideAndBlur() {
+        if (this.displayToggler.isHidden()) return;
+        this.displayToggler.hide();
+        this.div.current!.blur();
+        focusCandidate();
+    }
+
+    render() {
+        const { className, placeholderChar, noPlaceholders } = this.props;
+        return (
+            <div
+                className={`numeric-zapper ${className || ''} ${DISPLAY_NONE}`}
+                ref={this.div}
+                tabIndex={0}
+                dir="ltr"
+                data-zapper-allowed
+            >
+                {nTimes(MAX_DIGITS, (_, index) => (
+                    <div
+                        ref={this.charWrappers[index]}
+                        className={`zapper-number ${noPlaceholders ? DISPLAY_NONE : ''}`}
+                    >
+                        {placeholderChar}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}

package/packages/numeric-zapper/src/ZapperAllower.ts

@@ -1,15 +1,15 @@
-import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
-
-export const isZapperAllowed = () => {
-    const focusedElement = document.activeElement as HTMLElement;
-    let isAllowed = false;
-    isElementWrappedBy(focusedElement, (currentWrapper: HTMLElement) => {
-        const { zapperAllowed } = currentWrapper.dataset;
-        if (zapperAllowed !== undefined) {
-            isAllowed = zapperAllowed === 'true';
-            return true;
-        }
-        return false;
-    }, true);
-    return isAllowed;
-};
+import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
+
+export const isZapperAllowed = () => {
+    const focusedElement = document.activeElement as HTMLElement;
+    let isAllowed = false;
+    isElementWrappedBy(focusedElement, (currentWrapper: HTMLElement) => {
+        const { zapperAllowed } = currentWrapper.dataset;
+        if (zapperAllowed !== undefined) {
+            isAllowed = zapperAllowed === 'true';
+            return true;
+        }
+        return false;
+    }, true);
+    return isAllowed;
+};

package/packages/numeric-zapper/src/ZapperService.tsx

@@ -1,8 +1,8 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-import { NumericZapper, ZapperInterface } from './NumericZapper';
-
-export const zapperServiceRef = createRef<NumericZapper>();
-
-export const getZapperService = (): ZapperInterface => (
-    zapperServiceRef.current!.getZapperInterface()
-);
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { NumericZapper, ZapperInterface } from './NumericZapper';
+
+export const zapperServiceRef = createRef<NumericZapper>();
+
+export const getZapperService = (): ZapperInterface => (
+    zapperServiceRef.current!.getZapperInterface()
+);

package/packages/numeric-zapper/src/_sizes.1080.scss

@@ -1,7 +1,7 @@
-$zapper-top: 480px;
-$zapper-left: 735px;
-$zapper-height: 120px;
-$zapper-width: 450px;
-
-$zapper-font-size: 63px;
-$zapper-number-width: 72px;
+$zapper-top: 480px;
+$zapper-left: 735px;
+$zapper-height: 120px;
+$zapper-width: 450px;
+
+$zapper-font-size: 63px;
+$zapper-number-width: 72px;

package/packages/numeric-zapper/src/_sizes.scss

@@ -1,7 +1,7 @@
-$zapper-top: 320px;
-$zapper-left: 490px;
-$zapper-height: 80px;
-$zapper-width: 300px;
-
-$zapper-font-size: 42px;
-$zapper-number-width: 48px;
+$zapper-top: 320px;
+$zapper-left: 490px;
+$zapper-height: 80px;
+$zapper-width: 300px;
+
+$zapper-font-size: 42px;
+$zapper-number-width: 48px;

package/packages/numeric-zapper/src/index.ts

@@ -1,4 +1,4 @@
-export { NumericZapper } from './NumericZapper';
-export type { ZapperInterface } from './NumericZapper';
-export { getZapperService, zapperServiceRef } from './ZapperService';
-export { isZapperAllowed } from './ZapperAllower';
+export { NumericZapper } from './NumericZapper';
+export type { ZapperInterface } from './NumericZapper';
+export { getZapperService, zapperServiceRef } from './ZapperService';
+export { isZapperAllowed } from './ZapperAllower';

package/packages/numeric-zapper/src/interface.ts

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

package/packages/numeric-zapper/src/styles.ts

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