@24i/bigscreen-sdk 1.0.22-alpha.2374 → 1.0.22-alpha.2377

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.22-alpha.2374",
+    "version": "1.0.22-alpha.2377",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/list/src/UnifiedListController/UnifiedListController.ts

@@ -144,12 +144,16 @@ extends SharedProps<any, any> = SharedProps<any, any>>
         if (backward) {
             nextScrollIndex = this.scrollPixelsToIndex(scrollValuePx, backward);
             if (this.lastScrollIndex !== nextScrollIndex) {
-                this.adjustItemsOffsetsBackward(nextScrollIndex);
+                for (let i = this.lastScrollIndex - 1; i >= nextScrollIndex; i--) {
+                    this.adjustItemsOffsetsBackward(i);
+                }
             }
         } else {
             nextScrollIndex = this.scrollPixelsToIndex(scrollValuePx, backward);
             if (this.lastScrollIndex !== nextScrollIndex) {
-                this.adjustItemsOffsetsForward(nextScrollIndex);
+                for (let i = this.lastScrollIndex + 1; i <= nextScrollIndex; i++) {
+                    this.adjustItemsOffsetsForward(i);
+                }
             }
         }
         this.lastScrollIndex = nextScrollIndex;

package/packages/modal-service/README.md

@@ -9,7 +9,10 @@ sidebar_label: Modal Service
 A component which helps managing modal windows. Handles rendering and focus management.
 
 ## Props
-- ref - the reference to the modal service instance
+- ```ref``` - the reference to the modal service instance
+- ```className``` - custom class name for modal service div
+- ```isFocusable``` - whether is modal focusable or not
+- ```onCloseLastModal``` - function called when the last modal is closed
 
 ## Provided functionality
 - exports interface which needs to be implemented by the modal component

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

@@ -1,13 +1,15 @@
-import { Component, createRef, Reference, clearNode } from '@24i/bigscreen-sdk/jsx';
+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;
@@ -24,8 +26,11 @@ export class ModalService extends Component<Props> {
     static defaultProps = {
         className: '',
         isFocusable: true,
+        onCloseLastModal: noop,
     };
 
+    declare props: DeclareProps<Props, typeof ModalService.defaultProps>;
+
     componentDidMount() {
         window.addEventListener('hashchange', this.onHashChange);
     }
@@ -41,7 +46,7 @@ export class ModalService extends Component<Props> {
     };
 
     getMountedComponent() {
-        return this.modalRef;
+        return this.modalRef as Reference<IModal>;
     }
 
     private enqueueModal(modal: RenderFunction) {
@@ -70,7 +75,7 @@ export class ModalService extends Component<Props> {
     }
 
     close(ignoreQueue = false) {
-        const { isFocusable } = this.props;
+        const { isFocusable, onCloseLastModal } = this.props;
         this.openState = false;
         clearNode(this.rootRef);
         if (isFocusable) {
@@ -78,6 +83,7 @@ export class ModalService extends Component<Props> {
         }
         const modalFromQueue = this.dequeueModal();
         if (modalFromQueue && !ignoreQueue) this.open(modalFromQueue);
+        if (!this.modalQueue.length) onCloseLastModal();
     }
 
     isOpen() {

package/packages/router/src/Route.tsx

@@ -8,6 +8,7 @@ import {
 } from '@24i/bigscreen-sdk/jsx';
 import { filter, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
 import { addClass, removeClass } from '@24i/bigscreen-sdk/utils';
+import { ModalService } from '@24i/bigscreen-sdk/modal-service';
 import { menuService } from '@24i/bigscreen-sdk/menu';
 import { getCurrentHash } from './utils';
 import { IRoute, RouteParams } from './types';
@@ -31,6 +32,10 @@ export class Route extends Component<Props> {
 
     component = createRef<IRoute | null>();
 
+    modalService = createRef<ModalService>();
+
+    shouldCallReactivateOnCloseModal = false;
+
     getParams(): RouteParams {
         const { regexpPath, paramNames } = this.props;
         if (!paramNames || !regexpPath) return {};
@@ -54,11 +59,34 @@ export class Route extends Component<Props> {
         }
     };
 
+    onCloseModalService = () => {
+        if (this.shouldCallReactivateOnCloseModal) {
+            this.component.current?.reactivate(this.getParams());
+        }
+        this.shouldCallReactivateOnCloseModal = false;
+    };
+
+    getModalService() {
+        if (!this.modalService.current) {
+            this.appendMount(
+                <ModalService
+                    ref={this.modalService}
+                    onCloseLastModal={this.onCloseModalService}
+                />,
+                this.domRef,
+            );
+        }
+        return this.modalService;
+    }
+
     show() {
         menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
         if (!this.wasCreated) {
             this.mountRoute();
             this.component.current?.activate(this.getParams());
+        } else if (this.modalService.current?.isOpen()) {
+            this.focusModal();
+            this.shouldCallReactivateOnCloseModal = true;
         } else {
             this.component.current?.reactivate(this.getParams());
         }
@@ -98,9 +126,18 @@ export class Route extends Component<Props> {
         }
     }
 
+    private focusModal() {
+        const mountedComponent = this.modalService.current!.getMountedComponent();
+        mountedComponent.current?.focus();
+    }
+
     focus() {
         if (this.wasCreated) {
-            this.component.current?.focus();
+            if (this.modalService.current?.isOpen()) {
+                this.focusModal();
+            } else {
+                this.component.current?.focus();
+            }
         }
     }