@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/modal-service/src/ModalService.tsx

@@ -0,0 +1,76 @@
+import { Component, createRef, Reference, clearNode } from '@24i/bigscreen-sdk/jsx';
+import {
+    setActiveElementAsFocusCandidate, focusCandidate, refocusAfterHashChange,
+} from '@24i/bigscreen-sdk/focus';
+import { IModal } from './IModal';
+import './ModalService.styles';
+
+type Props = {
+    className?: string;
+    isFocusable?: boolean;
+};
+
+export class ModalService extends Component<Props> {
+    private openState = false;
+
+    private readonly rootRef = createRef<HTMLDivElement>();
+
+    modalRef = createRef<any>();
+
+    static defaultProps = {
+        className: '',
+        isFocusable: true,
+    };
+
+    componentDidMount() {
+        window.addEventListener('hashchange', this.onHashChange);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('hashchange', this.onHashChange);
+    }
+
+    private onHashChange = () => {
+        if (this.openState) {
+            refocusAfterHashChange(this.rootRef);
+        }
+    };
+
+    getMountedComponent() { return this.modalRef; }
+
+    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element) {
+        const { isFocusable } = this.props;
+        this.openState = true;
+        this.clearMount(
+            render(this.modalRef),
+            this.rootRef,
+        );
+        if (isFocusable) {
+            setActiveElementAsFocusCandidate();
+            this.modalRef.current!.focus();
+        }
+    }
+
+    close() {
+        const { isFocusable } = this.props;
+        this.openState = false;
+        clearNode(this.rootRef);
+        if (isFocusable) {
+            focusCandidate();
+        }
+    }
+
+    isOpen() {
+        return this.openState;
+    }
+
+    render() {
+        const { className } = this.props;
+        return (
+            <div
+                className={`modal-service-root ${className}`}
+                ref={this.rootRef}
+            />
+        );
+    }
+}

package/packages/modal-service/src/_sizes.1080.scss

@@ -0,0 +1,2 @@
+$modal-service-root-width: 1920px;
+$modal-service-root-height: 1080px;

package/packages/modal-service/src/_sizes.scss

@@ -0,0 +1,2 @@
+$modal-service-root-width: 1280px;
+$modal-service-root-height: 720px;

package/packages/modal-service/src/index.ts

@@ -0,0 +1,2 @@
+export { ModalService } from './ModalService';
+export type { IModal } from './IModal';

package/packages/mouse-navigation/README.md

@@ -0,0 +1,105 @@
+---
+id: README
+title: MouseNavigation
+hide_title: true
+sidebar_label: MouseNavigation
+---
+
+# MouseNavigation
+This component enables the support of MRCU. It is intended to be used as `extension/wrapper` for when we want to enable MRCU support.
+
+## Props
+- `children` - the children that are to be rendered (these children won't be wrapped)
+- `getMountingPoint` - function that returns reference to the element where ArrowNavigation should be rendered
+- `direction` - direction of navigation (`horizontal` or `vertical`)
+- `forward` - function that is invoked after clicking on `next arrow` (horizontal - right, vertical - down)
+- `backward` - function that is invoked after clicking on `previous arrow` (horizontal - left, vertical - up)
+- `shouldShowMrcuForward` - function that returns true or false, determines whether to show the arrow that invokes the `forward` prop function, if not provided arrow is always displayed
+- `shouldShowMrcuBackward` - function that returns true or false, determines whether to show the arrow that invokes the `backward` prop function, if not provided arrow is always displayed
+
+## Usage
+To use this feature, you need to wrap desired component in the MouseNavigation and pass the necessary props.
+
+### Basic
+The basic implementation is simple:
+```jsx
+const someRef = createRef();
+
+...
+
+<MouseNavigation
+    getMountingPoint={() => someRef.current!.someDiv}
+    direction="horizontal"
+    forward={() => { ... some code for forward scroll (RIGHT / DOWN) ... }}
+    backward={() => { ... some code for backward scroll (LEFT / UP) ... }
+>
+    <Base {...props} />
+</MouseNavigation>
+```
+
+### Using the props passed into the `wrapped` component
+This example creates 'wrapped' and mouse-nav-enabled GridBase component with Arrows being injected into Scroller component:
+```jsx
+export const GridBase = forwardRef(<T extends Item<U>, U>(props: GridProps<T, U>,
+    gridRef: Reference<Base<T, U>>) => {
+    const direction = props.horizontal ? 'horizontal' : 'vertical';
+    return (
+        <MouseNavigation
+            getMountingPoint={() => gridRef.current!.scroller.current!.wrapRef}
+            direction={direction}
+            forward={props.forwardGroup}
+            backward={props.backwardGroup}
+        >
+            <Base {...props} ref={gridRef} />
+        </MouseNavigation>
+    );
+});
+```
+
+**Note** - the `getMountingPoint` has to be a function, since the value of the Reference might not be determined at the time of declaration.
+**Note** - as you can see, we are using `forwardRef` to be able to intercept the Props that we want to use in the `<MouseNavigation />` component.
+
+### ClassNames
+The arrows have predefined classNames. These can't be modified, and are
+
+```
+.icon-arrow-up, .icon-arrow-down, .icon-arrow-left, .icon-arrow-right
+```
+
+# MouseElementWrapper
+This component enables the use of MRCU for a custom element of yours. It is intended to be used as `wrapper` that adds MRCU support for features other than directional arrows, for example return, color buttons or various other shortcuts from standard RCU.
+
+## Props
+- `children` - the children that are to be rendered when MRCU pointer is used (these children will be wrapped in a div)
+- `getMountingPoint` - function that returns reference to the element where your `children` should be rendered
+
+## Usage
+To use this feature, you need to wrap desired component in the MouseElementWrapper and pass the necessary props. Following example implements a button shown only when MRCU is used.
+
+```jsx
+const someRef = createRef();
+
+...
+
+<MouseElementWrapper
+    getMountingPoint={() => someRef.current!.someDiv}
+>
+    <Button {...props} />
+</MouseElementWrapper>
+```
+
+
+### MouseNavigationInterface
+MouseNavigation provides an event-based interface for handling cases that are not handled automatically.
+This might typically be handling opened menu on hover - we want to hide arrows when opening the menu by hovering above certain place (not changing focus). This also hides content of MouseElementWrapper.
+
+It consists of two functions that can be used:
+```ts
+show(): void; // Will enable and possibly show the Arrows
+hide(): void; // Will disable and hide the Arrows
+```
+
+It can be imported from the same package as
+```ts
+import { MouseNavigationInterface } from '@24i/bigscreen-sdk/mouse-navigation';
+```

package/packages/mouse-navigation/src/ArrowNavigation/Arrow.tsx

@@ -0,0 +1,58 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { addClass, noop, removeClass } from '@24i/bigscreen-sdk/utils';
+
+export type ArrowType = 'left' | 'right' | 'up' | 'down';
+
+type Props = {
+    type: ArrowType;
+    enabled?: boolean;
+    onPress?: () => void;
+};
+
+const DISABLED_CLASS = 'disabled';
+
+export class Arrow extends Component<Props> {
+    ref = createRef<HTMLDivElement>();
+
+    enabled: boolean;
+
+    static defaultProps = {
+        enabled: true,
+        onPress: noop,
+    };
+
+    declare props: DeclareProps<Props, typeof Arrow.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        const { enabled } = this.props;
+        this.enabled = enabled;
+    }
+
+    disable() {
+        if (this.enabled) {
+            this.enabled = false;
+            addClass(this.ref, DISABLED_CLASS);
+        }
+    }
+
+    enable() {
+        if (!this.enabled) {
+            this.enabled = true;
+            removeClass(this.ref, DISABLED_CLASS);
+        }
+    }
+
+    render() {
+        const { type, onPress } = this.props;
+        const { enabled } = this;
+        const cls = enabled ? '' : DISABLED_CLASS;
+        return (
+            <div
+                className={`nav-arrow icon-arrow-${type} ${cls}`}
+                ref={this.ref}
+                onClick={onPress}
+            />
+        );
+    }
+}

package/packages/mouse-navigation/src/ArrowNavigation/ArrowNavigation.tsx

@@ -0,0 +1,95 @@
+import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { Arrow } from './Arrow';
+
+export type ArrowType = 'left' | 'right' | 'up' | 'down';
+
+type Props = {
+    /** Shorthand to show top and bottom arrow */
+    vertical?: boolean,
+    /** Shorthand to show left and right arrow */
+    horizontal?: boolean,
+    /** To show top arrow */
+    up?: boolean,
+    /** To show right arrow */
+    right?: boolean,
+    /** To show bottom arrow */
+    down?: boolean,
+    /** To show left arrow */
+    left?: boolean,
+
+    forward?: () => void,
+    backward?: () => void,
+};
+
+export class ArrowNavigation extends Component<Props> {
+    domRef = createRef<HTMLDivElement>();
+
+    arrowRefs: Record<ArrowType, null | Reference<Arrow>> = {
+        left: null,
+        right: null,
+        up: null,
+        down: null,
+    };
+
+    constructor(props: Props) {
+        super(props);
+        const {
+            up, right, down, left, horizontal, vertical,
+        } = this.props;
+
+        if (horizontal || left) {
+            this.arrowRefs.left = createRef<Arrow>();
+        }
+        if (horizontal || right) {
+            this.arrowRefs.right = createRef<Arrow>();
+        }
+        if (vertical || up) {
+            this.arrowRefs.up = createRef<Arrow>();
+        }
+        if (vertical || down) {
+            this.arrowRefs.down = createRef<Arrow>();
+        }
+    }
+
+    onPress = (key: ArrowType) => {
+        const { backward, forward } = this.props;
+        let result;
+
+        switch (key) {
+            case 'up':
+            case 'left':
+                result = backward;
+                break;
+            case 'down':
+            case 'right':
+                result = forward;
+                break;
+            default:
+                result = () => { };
+                break;
+        }
+
+        return result;
+    };
+
+    enableArrow(arrowType: ArrowType) {
+        this.arrowRefs[arrowType]?.current!.enable();
+    }
+
+    disableArrow(arrowType: ArrowType) {
+        this.arrowRefs[arrowType]?.current!.disable();
+    }
+
+    render() {
+        const arrowKeysToShow = (Object.keys(this.arrowRefs) as Array<ArrowType>)
+            .filter((key) => this.arrowRefs[key] !== null);
+
+        return (
+            <div className="arrow-navigation" ref={this.domRef}>
+                { arrowKeysToShow.map((key) => (
+                    <Arrow type={key} ref={this.arrowRefs[key]} onPress={this.onPress(key)} />
+                ))}
+            </div>
+        );
+    }
+}

package/packages/mouse-navigation/src/ArrowNavigation/__test__/Arrow.spec.tsx

@@ -0,0 +1,35 @@
+import { shallow, MountedComponent } from '@24i/bigscreen-sdk/jsx/test-utils';
+import { Arrow } from '../Arrow';
+
+describe('Arrow', () => {
+    let arrow: MountedComponent<Arrow>;
+
+    it('should render', () => {
+        arrow = shallow(<Arrow type="left" />);
+        expect(arrow.has('.icon-arrow-left')).toBe(true);
+        expect(arrow.ref().enabled).toBe(true);
+    });
+
+    it('should initialize "enabled" state from props', () => {
+        arrow = shallow(<Arrow type="left" enabled />);
+        expect(arrow.find('.icon-arrow-left').classList).not.toContain('disabled');
+
+        arrow = shallow(<Arrow type="left" enabled={false} />);
+        expect(arrow.find('.icon-arrow-left').classList).toContain('disabled');
+    });
+
+    it('should add/remove "disabled" class', () => {
+        arrow = shallow(<Arrow type="left" />);
+
+        expect(arrow.find('.icon-arrow-left').classList).not.toContain('disabled');
+        expect(arrow.ref().enabled).toBe(true);
+
+        arrow.ref().disable();
+        expect(arrow.find('.icon-arrow-left').classList).toContain('disabled');
+        expect(arrow.ref().enabled).toBe(false);
+
+        arrow.ref().enable();
+        expect(arrow.find('.icon-arrow-left').classList).not.toContain('disabled');
+        expect(arrow.ref().enabled).toBe(true);
+    });
+});

package/packages/mouse-navigation/src/ArrowNavigation/__test__/ArrowNavigation.spec.tsx

@@ -0,0 +1,45 @@
+import { shallow, MountedComponent } from '@24i/bigscreen-sdk/jsx/test-utils';
+import { ArrowNavigation } from '../ArrowNavigation';
+
+describe('ArrowNavigation', () => {
+    let arrowsNav: MountedComponent<ArrowNavigation>;
+
+    it('should render arrows specified by props', () => {
+        arrowsNav = shallow(<ArrowNavigation left up right down />);
+        expect(arrowsNav.has('.icon-arrow-left')).toBe(true);
+        expect(arrowsNav.has('.icon-arrow-right')).toBe(true);
+        expect(arrowsNav.has('.icon-arrow-up')).toBe(true);
+        expect(arrowsNav.has('.icon-arrow-down')).toBe(true);
+        expect(arrowsNav.find('.arrow-navigation').children).toHaveLength(4);
+    });
+
+    it('should render left and right arrows if "horizontal" flag in props', () => {
+        arrowsNav = shallow(<ArrowNavigation horizontal />);
+        expect(arrowsNav.has('.icon-arrow-left')).toBe(true);
+        expect(arrowsNav.has('.icon-arrow-right')).toBe(true);
+        expect(arrowsNav.find('.arrow-navigation').children).toHaveLength(2);
+    });
+
+    it('should render up and down arrows if "vertical" flag in props', () => {
+        arrowsNav = shallow(<ArrowNavigation vertical />);
+        expect(arrowsNav.has('.icon-arrow-up')).toBe(true);
+        expect(arrowsNav.has('.icon-arrow-down')).toBe(true);
+        expect(arrowsNav.find('.arrow-navigation').children).toHaveLength(2);
+    });
+
+    it('shouldn\'t render any arrow if not specified in props', () => {
+        arrowsNav = shallow(<ArrowNavigation />);
+        expect(arrowsNav.find('.arrow-navigation').children).toHaveLength(0);
+    });
+
+    it('should enable/disable specific arrow', () => {
+        arrowsNav = shallow(<ArrowNavigation left up right down />);
+        expect(arrowsNav.find('.icon-arrow-left').classList).not.toContain('disabled');
+
+        arrowsNav.ref().disableArrow('left');
+        expect(arrowsNav.find('.icon-arrow-left').classList).toContain('disabled');
+
+        arrowsNav.ref().enableArrow('left');
+        expect(arrowsNav.find('.icon-arrow-left').classList).not.toContain('disabled');
+    });
+});

package/packages/mouse-navigation/src/ArrowNavigation/index.tsx

@@ -0,0 +1 @@
+export { ArrowNavigation } from './ArrowNavigation';

package/packages/mouse-navigation/src/MouseElementWrapper.tsx

@@ -0,0 +1,70 @@
+import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { device, DeviceEventMap } from '@24i/bigscreen-sdk/device';
+import { STATE } from './MouseNavigation';
+
+type Props = {
+    children: JSX.Element;
+    getMountingPoint: () => Reference<HTMLElement>;
+};
+
+export class MouseElementWrapper extends Component<Props> {
+    domRef = createRef<HTMLDivElement>();
+
+    navigationState: STATE = 'inactive';
+
+    isEnabled = true;
+
+    componentDidMount() {
+        if (device.isMouseUsed()) {
+            this.renderMouseElement();
+        }
+        document.addEventListener('mouseNavigation', this.handleMouseInterface);
+        device.addEventListener('mouseactive', this.mouseListener);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mouseNavigation', this.handleMouseInterface);
+        device.removeEventListener('mouseactive', this.mouseListener);
+    }
+
+    handleMouseInterface = (event: CustomEvent) => {
+        const { enabled } = event.detail;
+        this.isEnabled = enabled;
+
+        if (!enabled) this.destroyMouseElement();
+        if (enabled && device.isMouseUsed()) this.renderMouseElement();
+    };
+
+    mouseListener: DeviceEventMap['mouseactive'] = ({ isMouseActive }) => {
+        if (isMouseActive && this.isEnabled) {
+            this.renderMouseElement();
+        } else {
+            this.destroyMouseElement();
+        }
+    };
+
+    renderMouseElement = () => {
+        if (this.navigationState === 'active') return;
+        const { getMountingPoint, children } = this.props;
+
+        this.appendMount(
+            <div ref={this.domRef}>
+                {children}
+            </div>,
+            getMountingPoint(),
+        );
+        this.navigationState = 'active';
+    };
+
+    destroyMouseElement() {
+        if (this.navigationState === 'inactive') return;
+        const { getMountingPoint } = this.props;
+
+        getMountingPoint().current!.removeChild(this.domRef.current!);
+        this.navigationState = 'inactive';
+    }
+
+    render(): null {
+        return null;
+    }
+}

package/packages/mouse-navigation/src/MouseNavigation.tsx

@@ -0,0 +1,139 @@
+import { Component, createRef, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
+import { device, DeviceEventMap } from '@24i/bigscreen-sdk/device';
+import { ArrowNavigation } from './ArrowNavigation';
+
+type Direction = 'horizontal' | 'vertical';
+
+type Props = {
+    children: JSX.Element;
+    getMountingPoint: () => Reference<HTMLElement>;
+    direction: Direction;
+    forward: () => void;
+    backward: () => void;
+    shouldShowMrcuForward?: () => boolean;
+    shouldShowMrcuBackward?: () => boolean;
+};
+
+export type STATE = 'active' | 'inactive';
+
+type MouseNavigationEvent = CustomEvent & { detail: { enabled: boolean } };
+
+declare global {
+    interface DocumentEventMap {
+        'mouseNavigation': MouseNavigationEvent,
+    }
+}
+
+export class MouseNavigation extends Component<Props> {
+    arrows = createRef<ArrowNavigation>();
+
+    navigationState: STATE = 'inactive';
+
+    isEnabled = true;
+
+    componentDidMount() {
+        if (device.isMouseUsed()) {
+            this.renderArrows();
+        }
+        document.addEventListener('mouseNavigation', this.handleMouseInterface);
+        device.addEventListener('mouseactive', this.mouseListener);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mouseNavigation', this.handleMouseInterface);
+        device.removeEventListener('mouseactive', this.mouseListener);
+    }
+
+    handleMouseInterface = (event: CustomEvent) => {
+        const { enabled } = event.detail;
+        this.isEnabled = enabled;
+
+        if (!enabled) this.destroyArrows();
+        if (enabled && device.isMouseUsed()) this.renderArrows();
+    };
+
+    mouseListener: DeviceEventMap['mouseactive'] = ({ isMouseActive }) => {
+        if (isMouseActive && this.isEnabled) {
+            this.renderArrows();
+        } else {
+            this.destroyArrows();
+        }
+    };
+
+    forward = () => {
+        const { forward } = this.props;
+        forward();
+        this.handleArrowState();
+    };
+
+    backward = () => {
+        const { backward } = this.props;
+        backward();
+        this.handleArrowState();
+    };
+
+    handleArrowState = () => {
+        const { shouldShowMrcuBackward, shouldShowMrcuForward, direction } = this.props;
+        const { horizontal } = this.mapDirectionToProps(direction);
+        if (shouldShowMrcuForward) {
+            const dir = horizontal ? 'right' : 'down';
+            if (shouldShowMrcuForward()) {
+                this.arrows.current?.enableArrow(dir);
+            } else {
+                this.arrows.current?.disableArrow(dir);
+            }
+        }
+
+        if (shouldShowMrcuBackward) {
+            const dir = horizontal ? 'left' : 'up';
+            if (shouldShowMrcuBackward()) {
+                this.arrows.current?.enableArrow(dir);
+            } else {
+                this.arrows.current?.disableArrow(dir);
+            }
+        }
+    };
+
+    isActive() {
+        return this.navigationState === 'active';
+    }
+
+    renderArrows = () => {
+        if (this.navigationState === 'active') return;
+        const { getMountingPoint, direction } = this.props;
+
+        this.appendMount(
+            <ArrowNavigation
+                ref={this.arrows}
+                {...this.mapDirectionToProps(direction)}
+                forward={this.forward}
+                backward={this.backward}
+            />,
+            getMountingPoint(),
+        );
+        this.handleArrowState();
+        this.navigationState = 'active';
+    };
+
+    mapDirectionToProps(direction: Direction) {
+        if (direction === 'horizontal') {
+            return { horizontal: true };
+        }
+
+        if (direction === 'vertical') {
+            return { vertical: true };
+        }
+        return {};
+    }
+
+    destroyArrows() {
+        if (this.navigationState === 'inactive') return;
+        this.navigationState = 'inactive';
+        removeNode(this.arrows.current!.domRef);
+    }
+
+    render() {
+        const { children } = this.props;
+        return children;
+    }
+}

package/packages/mouse-navigation/src/MouseNavigationInterface.ts

@@ -0,0 +1,8 @@
+const sendEvent = (enabled: boolean) => {
+    document.dispatchEvent(new CustomEvent('mouseNavigation', { detail: { enabled } }));
+};
+
+export const MouseNavigationInterface = {
+    show: () => sendEvent(true),
+    hide: () => sendEvent(false),
+};