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

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

@@ -1,102 +1,102 @@
-import { Component, createRef, Reference, clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import {
-    setActiveElementAsFocusCandidate, focusCandidate, refocusAfterHashChange,
-} from '@24i/bigscreen-sdk/focus';
-import { noop } from '@24i/bigscreen-sdk/utils';
-import { IModal } from './IModal';
-import './ModalService.styles';
-
-type Props = {
-    className?: string;
-    isFocusable?: boolean;
-    onCloseLastModal?: Function,
-};
-
-type RenderFunction = (ref:Reference) => JSX.Element;
-
-export class ModalService extends Component<Props> {
-    private openState = false;
-
-    private readonly rootRef = createRef<HTMLDivElement>();
-
-    private readonly modalQueue: RenderFunction[] = [];
-
-    modalRef = createRef<any>();
-
-    static defaultProps = {
-        className: '',
-        isFocusable: true,
-        onCloseLastModal: noop,
-    };
-
-    declare props: DeclareProps<Props, typeof ModalService.defaultProps>;
-
-    componentDidMount() {
-        window.addEventListener('hashchange', this.onHashChange);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('hashchange', this.onHashChange);
-    }
-
-    private onHashChange = () => {
-        if (this.openState) {
-            refocusAfterHashChange(this.rootRef);
-        }
-    };
-
-    getMountedComponent() {
-        return this.modalRef as Reference<IModal>;
-    }
-
-    private enqueueModal(modal: RenderFunction) {
-        this.modalQueue.push(modal);
-    }
-
-    private dequeueModal() {
-        return this.modalQueue.shift();
-    }
-
-    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element, queueModal = false) {
-        if (queueModal && this.openState) {
-            this.enqueueModal(render);
-            return;
-        }
-        const { isFocusable } = this.props;
-        this.openState = true;
-        this.clearMount(
-            render(this.modalRef),
-            this.rootRef,
-        );
-        if (isFocusable) {
-            setActiveElementAsFocusCandidate();
-            this.modalRef.current!.focus();
-        }
-    }
-
-    close(ignoreQueue = false) {
-        const { isFocusable, onCloseLastModal } = this.props;
-        this.openState = false;
-        clearNode(this.rootRef);
-        if (isFocusable) {
-            focusCandidate();
-        }
-        const modalFromQueue = this.dequeueModal();
-        if (modalFromQueue && !ignoreQueue) this.open(modalFromQueue);
-        if (!this.modalQueue.length) onCloseLastModal();
-    }
-
-    isOpen() {
-        return this.openState;
-    }
-
-    render() {
-        const { className } = this.props;
-        return (
-            <div
-                className={`modal-service-root ${className}`}
-                ref={this.rootRef}
-            />
-        );
-    }
-}
+import { Component, createRef, Reference, clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import {
+    setActiveElementAsFocusCandidate, focusCandidate, refocusAfterHashChange,
+} from '@24i/bigscreen-sdk/focus';
+import { noop } from '@24i/bigscreen-sdk/utils';
+import { IModal } from './IModal';
+import './ModalService.styles';
+
+type Props = {
+    className?: string;
+    isFocusable?: boolean;
+    onCloseLastModal?: Function,
+};
+
+type RenderFunction = (ref:Reference) => JSX.Element;
+
+export class ModalService extends Component<Props> {
+    private openState = false;
+
+    private readonly rootRef = createRef<HTMLDivElement>();
+
+    private readonly modalQueue: RenderFunction[] = [];
+
+    modalRef = createRef<any>();
+
+    static defaultProps = {
+        className: '',
+        isFocusable: true,
+        onCloseLastModal: noop,
+    };
+
+    declare props: DeclareProps<Props, typeof ModalService.defaultProps>;
+
+    componentDidMount() {
+        window.addEventListener('hashchange', this.onHashChange);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('hashchange', this.onHashChange);
+    }
+
+    private onHashChange = () => {
+        if (this.openState) {
+            refocusAfterHashChange(this.rootRef);
+        }
+    };
+
+    getMountedComponent() {
+        return this.modalRef as Reference<IModal>;
+    }
+
+    private enqueueModal(modal: RenderFunction) {
+        this.modalQueue.push(modal);
+    }
+
+    private dequeueModal() {
+        return this.modalQueue.shift();
+    }
+
+    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element, queueModal = false) {
+        if (queueModal && this.openState) {
+            this.enqueueModal(render);
+            return;
+        }
+        const { isFocusable } = this.props;
+        this.openState = true;
+        this.clearMount(
+            render(this.modalRef),
+            this.rootRef,
+        );
+        if (isFocusable) {
+            setActiveElementAsFocusCandidate();
+            this.modalRef.current!.focus();
+        }
+    }
+
+    close(ignoreQueue = false) {
+        const { isFocusable, onCloseLastModal } = this.props;
+        this.openState = false;
+        clearNode(this.rootRef);
+        if (isFocusable) {
+            focusCandidate();
+        }
+        const modalFromQueue = this.dequeueModal();
+        if (modalFromQueue && !ignoreQueue) this.open(modalFromQueue);
+        if (!this.modalQueue.length) onCloseLastModal();
+    }
+
+    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

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

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

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

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

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

package/packages/mouse-navigation/README.md

@@ -1,105 +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';
-```
+---
+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

@@ -1,58 +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}
-            />
-        );
-    }
-}
+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}
+            />
+        );
+    }
+}