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

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

@@ -1,241 +1,241 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
-import { ListBase } from '../Base';
-import { SharedVariedProps } from '../types';
-import { getOffsetObject, prepareOffsetsPx, prepareScrollOffsetsPx } from '../utils';
-import { ControllableListBase, ListConfig } from './interface';
-import { UnifiedListControllerBase } from './UnifiedListControllerBase';
-
-export class UnifiedVariedListController<T, Props
-extends SharedVariedProps<any, any> = SharedVariedProps<any, any>>
-    extends UnifiedListControllerBase<Props, ControllableListBase<Props>, T> {
-    /**
-     * Array of item offsets in pixels in list.
-     * Offset defines position, to place an item relative to the edge of an list's box.
-     */
-    offsetsPx: number[] = [];
-
-    /**
-      * Array of scroll offsets in pixels for items (with first step scroll correction).
-      * Offset defines position, to place an item relative to the edge of an list's box.
-      */
-    scrollOffsetsPx: number[] = [];
-
-    constructor(list: ControllableListBase<Props>, CONFIG: ListConfig) {
-        super(list, CONFIG);
-        const { itemsSizesPx, firstScrollStepPx, visibleItems } = this.list.props;
-        const { slowdownRatio = 0 } = this.animationConfiguration;
-        this.maxAllowedScrollLength = Math.max(...itemsSizesPx) * visibleItems * slowdownRatio;
-        this.fastLinearScrollThreshold = itemsSizesPx.reduce(
-            (a, b) => a + b,
-        ) / itemsSizesPx.length;
-        this.itemsCount = this.calculateInitItemsLimit();
-        this.offsetsPx = prepareOffsetsPx(itemsSizesPx);
-        this.scrollOffsetsPx = prepareScrollOffsetsPx(itemsSizesPx, firstScrollStepPx!);
-    }
-
-    componentDidMount() {
-        const { horizontal } = this.list.props;
-        const base = this.list.base.current!;
-        this.items = this.prepareAnimatedItems(base, this.offsetsPx);
-        this.items.forEach((item) => {
-            offsetPosition(item.element, getOffsetObject(horizontal, item.offset));
-        });
-        this.addScrollWrapFocusEvent();
-    }
-
-    componentWillUnmount() {
-        this.removeScrollWrapFocusEvent();
-    }
-
-    /**
-     * Callback for scroll animation, called with passed new scroll value on every
-     * frame while animation is running.
-     *
-     * NOTE: Arrangement of items in carousel is controlled in this point, based
-     * on tracking scroll value. Which enables well-optimized items updating, with
-     * keeping minimum elements in DOM.
-     *
-     * @param value Scroll position in pixels
-     */
-    onFrame = (value: number) => {
-        const { scrollToPx, backward, canScroll } = this.getNextScrollConfig(value);
-        if (!canScroll) return;
-        if (this.shouldReturnNormalAnimation(value)) {
-            const { normal } = this.animationConfiguration;
-            this.animations
-                .start(value, this.toPx, normal.time, normal.easing)
-                .onFrame(this.onFrame);
-            return;
-        }
-        const { base, props: { animate } } = this.list;
-        if (animate && scrollToPx === this.toPx) {
-            base.current!.animatedScrollFinished();
-        }
-        this.adjustItemsOffsetsOnFrame(scrollToPx, backward);
-        this.handleOnScrollChanged(scrollToPx, backward);
-        this.scrollListScroller(scrollToPx);
-        if (this.isScrollWrapFocused()) {
-            // try to focus current item if available, otherwise keep focused Scroll wrap
-            this.focusCurrentItem();
-        }
-    };
-
-    scroll(_: number, animate: boolean | undefined = this.list.props.animate) {
-        const base = this.list.base.current!;
-
-        this.fromPx = this.currentScrollPx;
-        this.toPx = this.scrollIndexToPixels(base.index);
-
-        if (animate) {
-            const { time, easing } = this.getEasingAndTime();
-            base.animatedScrollStarted();
-            this.animations
-                .start(this.fromPx, this.toPx, time, easing)
-                .onFrame(this.onFrame);
-        } else {
-            this.onFrame(this.toPx);
-        }
-    }
-
-    handleOnScrollChanged(scrollToPx: number, backward: boolean) {
-        const { onScrollChanged } = this.list.props;
-        if (typeof onScrollChanged !== 'function') return;
-        let scrollIndex = 0;
-        const { scrollOffsetsPx } = this;
-        for (let i = 0; i < scrollOffsetsPx.length - 1; i++) {
-            if (backward) {
-                if (scrollToPx >= scrollOffsetsPx[i] && scrollToPx < scrollOffsetsPx[i + 1]) {
-                    scrollIndex = i;
-                    break;
-                }
-            } else if (scrollToPx > scrollOffsetsPx[i] && scrollToPx <= scrollOffsetsPx[i + 1]) {
-                scrollIndex = i + 1;
-                break;
-            }
-        }
-        if (this.lastAnimationScrollIndex !== scrollIndex) {
-            this.lastAnimationScrollIndex = scrollIndex;
-            const item = this.list.base.current?.getRefAtDataIndex(scrollIndex);
-            onScrollChanged(item!, scrollIndex);
-        }
-    }
-
-    /**
-     * Adjust items formation in carousel based on scroll value from animation
-     * @param scrollValuePx Scroll position in pixels
-     * @param backward Flag whether backward scroll is performed
-     */
-    adjustItemsOffsetsOnFrame(scrollValuePx: number, backward: boolean) {
-        const mainItemIndex = this.scrollIndex;
-        if (backward) {
-            // check position of scroll item item
-            const isScrolledRight = this.scrollOffsetsPx[mainItemIndex] > scrollValuePx;
-            if (isScrolledRight) {
-                // it is outside the placeholder for first visible item
-                const scrollIndex = this.scrollPixelsToIndex(scrollValuePx);
-                if (mainItemIndex !== scrollIndex) {
-                    this.scrollIndex = scrollIndex;
-                    this.adjustItemsOffsets(this.scrollIndex);
-                }
-            }
-        } else {
-            const isFullyOutOfViewport = (
-                this.scrollOffsetsPx[mainItemIndex + 1] <= scrollValuePx
-            );
-            if (isFullyOutOfViewport) {
-                const scrollIndex = this.scrollPixelsToIndex(scrollValuePx);
-                if (mainItemIndex !== scrollIndex) {
-                    this.scrollIndex = scrollIndex;
-                    this.adjustItemsOffsets(this.scrollIndex);
-                }
-            }
-        }
-    }
-
-    adjustItemsOffsets(scrollIndex: number) {
-        const { horizontal, extraPrevItems } = this.list.props;
-        const { itemsCount, offsetsPx } = this;
-        const base = this.list.base.current!;
-        const dataLength = this.list.base.current!.data.length;
-
-        let dataIndex = scrollIndex - extraPrevItems!;
-        if (dataIndex > dataLength - itemsCount) {
-            dataIndex = dataLength - itemsCount;
-        }
-        if (dataIndex < 0) {
-            dataIndex = 0;
-        }
-
-        const steps = Math.floor(dataIndex / itemsCount);
-        const offset = steps * itemsCount;
-
-        this.items.forEach((item, index) => {
-            let itemDataIndex = index + offset;
-            if (itemDataIndex < dataIndex) {
-                itemDataIndex += itemsCount;
-            }
-            if (itemDataIndex >= dataLength) {
-                itemDataIndex -= itemsCount;
-            }
-
-            if (item.dataIndex !== itemDataIndex) {
-                item.dataIndex = itemDataIndex;
-                item.offset = offsetsPx[item.dataIndex];
-                base.updateItem(index, item.dataIndex - index);
-                offsetPosition(item.element, getOffsetObject(horizontal, item.offset));
-            }
-        });
-    }
-
-    scrollIndexToPixels(index: number) {
-        return this.scrollOffsetsPx[index];
-    }
-
-    scrollPixelsToIndex(pixels: number) {
-        const { scrollOffsetsPx } = this;
-        let scrollIndex;
-        for (scrollIndex = 0; scrollIndex < scrollOffsetsPx.length - 1; scrollIndex++) {
-            if (scrollOffsetsPx[scrollIndex + 1] > pixels) {
-                return scrollIndex;
-            }
-        }
-        return scrollIndex;
-    }
-
-    private calculateInitItemsLimit() {
-        const { visibleItems, extraPrevItems, extraNextItems } = this.list.props;
-        return extraPrevItems! + visibleItems + extraNextItems!;
-    }
-
-    private prepareAnimatedItems(list: ListBase<any, any>, offsetsPx: number[]) {
-        const childNodes = Array.prototype.slice.call(
-            list.scroller.current!.scrollRef.current!.childNodes,
-        );
-        return childNodes.map(
-            (element: HTMLElement, dataIndex: number) => ({
-                element: createRef<HTMLElement>(element),
-                dataIndex,
-                offset: offsetsPx[dataIndex],
-            }),
-        );
-    }
-
-    adjustItemsOffsetsForward() {
-        throw new Error('Not supported');
-    }
-
-    adjustItemsOffsetsBackward() {
-        throw new Error('Not supported');
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    appendData(data: T[]) {
-        throw new Error('appendData not yet supported');
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    prependData(data: T[]) {
-        throw new Error('prependData not yet supported');
-    }
-}
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { ListBase } from '../Base';
+import { SharedVariedProps } from '../types';
+import { getOffsetObject, prepareOffsetsPx, prepareScrollOffsetsPx } from '../utils';
+import { ControllableListBase, ListConfig } from './interface';
+import { UnifiedListControllerBase } from './UnifiedListControllerBase';
+
+export class UnifiedVariedListController<T, Props
+extends SharedVariedProps<any, any> = SharedVariedProps<any, any>>
+    extends UnifiedListControllerBase<Props, ControllableListBase<Props>, T> {
+    /**
+     * Array of item offsets in pixels in list.
+     * Offset defines position, to place an item relative to the edge of an list's box.
+     */
+    offsetsPx: number[] = [];
+
+    /**
+      * Array of scroll offsets in pixels for items (with first step scroll correction).
+      * Offset defines position, to place an item relative to the edge of an list's box.
+      */
+    scrollOffsetsPx: number[] = [];
+
+    constructor(list: ControllableListBase<Props>, CONFIG: ListConfig) {
+        super(list, CONFIG);
+        const { itemsSizesPx, firstScrollStepPx, visibleItems } = this.list.props;
+        const { slowdownRatio = 0 } = this.animationConfiguration;
+        this.maxAllowedScrollLength = Math.max(...itemsSizesPx) * visibleItems * slowdownRatio;
+        this.fastLinearScrollThreshold = itemsSizesPx.reduce(
+            (a, b) => a + b,
+        ) / itemsSizesPx.length;
+        this.itemsCount = this.calculateInitItemsLimit();
+        this.offsetsPx = prepareOffsetsPx(itemsSizesPx);
+        this.scrollOffsetsPx = prepareScrollOffsetsPx(itemsSizesPx, firstScrollStepPx!);
+    }
+
+    componentDidMount() {
+        const { horizontal } = this.list.props;
+        const base = this.list.base.current!;
+        this.items = this.prepareAnimatedItems(base, this.offsetsPx);
+        this.items.forEach((item) => {
+            offsetPosition(item.element, getOffsetObject(horizontal, item.offset));
+        });
+        this.addScrollWrapFocusEvent();
+    }
+
+    componentWillUnmount() {
+        this.removeScrollWrapFocusEvent();
+    }
+
+    /**
+     * Callback for scroll animation, called with passed new scroll value on every
+     * frame while animation is running.
+     *
+     * NOTE: Arrangement of items in carousel is controlled in this point, based
+     * on tracking scroll value. Which enables well-optimized items updating, with
+     * keeping minimum elements in DOM.
+     *
+     * @param value Scroll position in pixels
+     */
+    onFrame = (value: number) => {
+        const { scrollToPx, backward, canScroll } = this.getNextScrollConfig(value);
+        if (!canScroll) return;
+        if (this.shouldReturnNormalAnimation(value)) {
+            const { normal } = this.animationConfiguration;
+            this.animations
+                .start(value, this.toPx, normal.time, normal.easing)
+                .onFrame(this.onFrame);
+            return;
+        }
+        const { base, props: { animate } } = this.list;
+        if (animate && scrollToPx === this.toPx) {
+            base.current!.animatedScrollFinished();
+        }
+        this.adjustItemsOffsetsOnFrame(scrollToPx, backward);
+        this.handleOnScrollChanged(scrollToPx, backward);
+        this.scrollListScroller(scrollToPx);
+        if (this.isScrollWrapFocused()) {
+            // try to focus current item if available, otherwise keep focused Scroll wrap
+            this.focusCurrentItem();
+        }
+    };
+
+    scroll(_: number, animate: boolean | undefined = this.list.props.animate) {
+        const base = this.list.base.current!;
+
+        this.fromPx = this.currentScrollPx;
+        this.toPx = this.scrollIndexToPixels(base.index);
+
+        if (animate) {
+            const { time, easing } = this.getEasingAndTime();
+            base.animatedScrollStarted();
+            this.animations
+                .start(this.fromPx, this.toPx, time, easing)
+                .onFrame(this.onFrame);
+        } else {
+            this.onFrame(this.toPx);
+        }
+    }
+
+    handleOnScrollChanged(scrollToPx: number, backward: boolean) {
+        const { onScrollChanged } = this.list.props;
+        if (typeof onScrollChanged !== 'function') return;
+        let scrollIndex = 0;
+        const { scrollOffsetsPx } = this;
+        for (let i = 0; i < scrollOffsetsPx.length - 1; i++) {
+            if (backward) {
+                if (scrollToPx >= scrollOffsetsPx[i] && scrollToPx < scrollOffsetsPx[i + 1]) {
+                    scrollIndex = i;
+                    break;
+                }
+            } else if (scrollToPx > scrollOffsetsPx[i] && scrollToPx <= scrollOffsetsPx[i + 1]) {
+                scrollIndex = i + 1;
+                break;
+            }
+        }
+        if (this.lastAnimationScrollIndex !== scrollIndex) {
+            this.lastAnimationScrollIndex = scrollIndex;
+            const item = this.list.base.current?.getRefAtDataIndex(scrollIndex);
+            onScrollChanged(item!, scrollIndex);
+        }
+    }
+
+    /**
+     * Adjust items formation in carousel based on scroll value from animation
+     * @param scrollValuePx Scroll position in pixels
+     * @param backward Flag whether backward scroll is performed
+     */
+    adjustItemsOffsetsOnFrame(scrollValuePx: number, backward: boolean) {
+        const mainItemIndex = this.scrollIndex;
+        if (backward) {
+            // check position of scroll item item
+            const isScrolledRight = this.scrollOffsetsPx[mainItemIndex] > scrollValuePx;
+            if (isScrolledRight) {
+                // it is outside the placeholder for first visible item
+                const scrollIndex = this.scrollPixelsToIndex(scrollValuePx);
+                if (mainItemIndex !== scrollIndex) {
+                    this.scrollIndex = scrollIndex;
+                    this.adjustItemsOffsets(this.scrollIndex);
+                }
+            }
+        } else {
+            const isFullyOutOfViewport = (
+                this.scrollOffsetsPx[mainItemIndex + 1] <= scrollValuePx
+            );
+            if (isFullyOutOfViewport) {
+                const scrollIndex = this.scrollPixelsToIndex(scrollValuePx);
+                if (mainItemIndex !== scrollIndex) {
+                    this.scrollIndex = scrollIndex;
+                    this.adjustItemsOffsets(this.scrollIndex);
+                }
+            }
+        }
+    }
+
+    adjustItemsOffsets(scrollIndex: number) {
+        const { horizontal, extraPrevItems } = this.list.props;
+        const { itemsCount, offsetsPx } = this;
+        const base = this.list.base.current!;
+        const dataLength = this.list.base.current!.data.length;
+
+        let dataIndex = scrollIndex - extraPrevItems!;
+        if (dataIndex > dataLength - itemsCount) {
+            dataIndex = dataLength - itemsCount;
+        }
+        if (dataIndex < 0) {
+            dataIndex = 0;
+        }
+
+        const steps = Math.floor(dataIndex / itemsCount);
+        const offset = steps * itemsCount;
+
+        this.items.forEach((item, index) => {
+            let itemDataIndex = index + offset;
+            if (itemDataIndex < dataIndex) {
+                itemDataIndex += itemsCount;
+            }
+            if (itemDataIndex >= dataLength) {
+                itemDataIndex -= itemsCount;
+            }
+
+            if (item.dataIndex !== itemDataIndex) {
+                item.dataIndex = itemDataIndex;
+                item.offset = offsetsPx[item.dataIndex];
+                base.updateItem(index, item.dataIndex - index);
+                offsetPosition(item.element, getOffsetObject(horizontal, item.offset));
+            }
+        });
+    }
+
+    scrollIndexToPixels(index: number) {
+        return this.scrollOffsetsPx[index];
+    }
+
+    scrollPixelsToIndex(pixels: number) {
+        const { scrollOffsetsPx } = this;
+        let scrollIndex;
+        for (scrollIndex = 0; scrollIndex < scrollOffsetsPx.length - 1; scrollIndex++) {
+            if (scrollOffsetsPx[scrollIndex + 1] > pixels) {
+                return scrollIndex;
+            }
+        }
+        return scrollIndex;
+    }
+
+    private calculateInitItemsLimit() {
+        const { visibleItems, extraPrevItems, extraNextItems } = this.list.props;
+        return extraPrevItems! + visibleItems + extraNextItems!;
+    }
+
+    private prepareAnimatedItems(list: ListBase<any, any>, offsetsPx: number[]) {
+        const childNodes = Array.prototype.slice.call(
+            list.scroller.current!.scrollRef.current!.childNodes,
+        );
+        return childNodes.map(
+            (element: HTMLElement, dataIndex: number) => ({
+                element: createRef<HTMLElement>(element),
+                dataIndex,
+                offset: offsetsPx[dataIndex],
+            }),
+        );
+    }
+
+    adjustItemsOffsetsForward() {
+        throw new Error('Not supported');
+    }
+
+    adjustItemsOffsetsBackward() {
+        throw new Error('Not supported');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    appendData(data: T[]) {
+        throw new Error('appendData not yet supported');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    prependData(data: T[]) {
+        throw new Error('prependData not yet supported');
+    }
+}

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

@@ -1,81 +1,81 @@
-import { Reference } from '@24i/bigscreen-sdk/jsx';
-import { ListBase } from '../Base';
-import {
-    AnimationConfiguration,
-    BasicProps,
-} from '../types';
-
-export type ListConfig = {
-    defaultAnimation: AnimationConfiguration,
-    animate: boolean,
-};
-
-export interface UnifiedListController<T> {
-    /**
-     * Focuses current index item and calls onFocusChanged callback
-     * @param options FocusOptions
-     */
-    focusCurrentItem: (options?: FocusOptions) => void,
-    /**
-     * Scrolls list to the new scrollIndex with or without animation
-     * @param newScrollIndex new scroll index to scroll to
-     * @param animate flag whether the scroll should be animated
-     * - defaults to list.props.animate
-     */
-    scroll: (newScrollIndex: number, animate?: boolean) => void,
-    /**
-     * Scrolls the Scroller in base to the given value in pixels
-     * @param scrollValuePx pixel to scroll to
-     */
-    scrollListScroller: (scrollValuePx: number) => void,
-    /**
-     * Function to return the number of pixels to scroll to given a scrollIndex value
-     * @param index the scrollIndex for which to calculate the pixels distance
-     * @returns the number of pixels for scroll value
-     */
-    scrollIndexToPixels: (index: number) => number,
-    /**
-      * Function to scrollIndex value from scroll position in pixels
-      * @param pixels scroll position in pixels (expect positive number)
-      * @param backward boolean param for determine scroll direction (true is backward)
-      * @returns the number of pixels for scroll value
-      */
-    scrollPixelsToIndex: (scrollValuePx: number, backward: boolean) => number,
-    /**
-     * Adjusts items rotation
-     * @param scrollValuePx number of pixels that is scrolled to
-     * @param backward flag whether we scroll forward or backward
-     */
-    adjustItemsOffsetsOnFrame: (scrollValuePx: number, backward: boolean) => void,
-    /**
-     * Adjusts items rotation forward
-     * @param scrollIndex the scrollIndex scrolled to
-     */
-    adjustItemsOffsetsForward: (scrollIndex: number) => void,
-    /**
-     * Adjusts items rotation backward
-     * @param scrollIndex the scrollIndex scrolled to
-     */
-    adjustItemsOffsetsBackward: (scrollIndex: number) => void,
-    /**
-     * Appends data at the end of data array
-     * @param data data to append
-     */
-    appendData: (data: T[]) => void,
-    /**
-     * Prepends data at the start of data array
-     * @param data data to prepend
-     */
-    prependData: (data: T[]) => void,
-}
-
-export interface ControllableListBase<T extends BasicProps<any, any> = BasicProps<any, any>> {
-    /**
-     * The list Base component
-     */
-    base: Reference<ListBase<any, any>>,
-    /**
-     * Props of the list
-     */
-    props: T,
-}
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { ListBase } from '../Base';
+import {
+    AnimationConfiguration,
+    BasicProps,
+} from '../types';
+
+export type ListConfig = {
+    defaultAnimation: AnimationConfiguration,
+    animate: boolean,
+};
+
+export interface UnifiedListController<T> {
+    /**
+     * Focuses current index item and calls onFocusChanged callback
+     * @param options FocusOptions
+     */
+    focusCurrentItem: (options?: FocusOptions) => void,
+    /**
+     * Scrolls list to the new scrollIndex with or without animation
+     * @param newScrollIndex new scroll index to scroll to
+     * @param animate flag whether the scroll should be animated
+     * - defaults to list.props.animate
+     */
+    scroll: (newScrollIndex: number, animate?: boolean) => void,
+    /**
+     * Scrolls the Scroller in base to the given value in pixels
+     * @param scrollValuePx pixel to scroll to
+     */
+    scrollListScroller: (scrollValuePx: number) => void,
+    /**
+     * Function to return the number of pixels to scroll to given a scrollIndex value
+     * @param index the scrollIndex for which to calculate the pixels distance
+     * @returns the number of pixels for scroll value
+     */
+    scrollIndexToPixels: (index: number) => number,
+    /**
+      * Function to scrollIndex value from scroll position in pixels
+      * @param pixels scroll position in pixels (expect positive number)
+      * @param backward boolean param for determine scroll direction (true is backward)
+      * @returns the number of pixels for scroll value
+      */
+    scrollPixelsToIndex: (scrollValuePx: number, backward: boolean) => number,
+    /**
+     * Adjusts items rotation
+     * @param scrollValuePx number of pixels that is scrolled to
+     * @param backward flag whether we scroll forward or backward
+     */
+    adjustItemsOffsetsOnFrame: (scrollValuePx: number, backward: boolean) => void,
+    /**
+     * Adjusts items rotation forward
+     * @param scrollIndex the scrollIndex scrolled to
+     */
+    adjustItemsOffsetsForward: (scrollIndex: number) => void,
+    /**
+     * Adjusts items rotation backward
+     * @param scrollIndex the scrollIndex scrolled to
+     */
+    adjustItemsOffsetsBackward: (scrollIndex: number) => void,
+    /**
+     * Appends data at the end of data array
+     * @param data data to append
+     */
+    appendData: (data: T[]) => void,
+    /**
+     * Prepends data at the start of data array
+     * @param data data to prepend
+     */
+    prependData: (data: T[]) => void,
+}
+
+export interface ControllableListBase<T extends BasicProps<any, any> = BasicProps<any, any>> {
+    /**
+     * The list Base component
+     */
+    base: Reference<ListBase<any, any>>,
+    /**
+     * Props of the list
+     */
+    props: T,
+}