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

package/packages/list/src/BasicList/BasicList.tsx

@@ -0,0 +1,175 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { ListBase } from '../Base';
+import { UnifiedListController } from '../UnifiedListController/UnifiedListController';
+import { List } from '../interface';
+import {
+    Item,
+    SharedProps,
+    AnimationConfiguration,
+} from '../types';
+import { CONFIG } from './config';
+
+/**
+ * 1 for diff between length/index, 1 for partially visible item
+ * and 1 because it is that item not past that item
+ */
+const VISIBLE_ITEMS_OFFSET = 3;
+
+type Props<T extends Item<U>, U> = SharedProps<T, U> & {
+    firstScrollStep: number,
+    animation?: Partial<AnimationConfiguration>,
+};
+
+export class BasicList<T extends Item<U>, U>
+    extends Component<Props<T, U>> implements IFocusable, List<T, U, Props<T, U>> {
+    /**
+     * Reference to instance of ListBase component, to interact with its API.
+     */
+    base = createRef<ListBase<T, U>>();
+
+    /**
+     * Unified controller for leveraging common behaviour
+     */
+    controller = new UnifiedListController<U>(this, CONFIG);
+
+    static defaultProps = {
+        animation: {},
+        // eslint-disable-next-line react/default-props-match-prop-types
+        horizontal: false,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        onFocusChanged: noop,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        animate: CONFIG.animate,
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof BasicList.defaultProps>;
+
+    componentDidMount() {
+        this.controller.componentDidMount();
+    }
+
+    componentWillUnmount() {
+        this.controller.componentWillUnmount();
+    }
+
+    forward = (): boolean => {
+        const { visibleItems } = this.props;
+        const list = this.base.current!;
+        if (list.index < list.data.length - 1) {
+            list.index += 1;
+            const scrollTarget = list.index - visibleItems + VISIBLE_ITEMS_OFFSET;
+            if (scrollTarget > this.controller.scrollIndex) {
+                this.controller.scroll(scrollTarget);
+            }
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    backward = (): boolean => {
+        const { firstScrollStep, scrollStep } = this.props;
+        const list = this.base.current!;
+        if (list.index > 0) {
+            list.index -= 1;
+            const offset = firstScrollStep < scrollStep ? 1 : 0;
+            if (list.index - offset < this.controller.scrollIndex) {
+                this.controller.scroll(list.index);
+            }
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    mrcuForward = () => {
+        const { visibleItems } = this.props;
+        const { scrollIndex } = this.controller;
+        const list = this.base.current!;
+        list.index = Math.max(
+            0,
+            Math.min(scrollIndex + visibleItems - VISIBLE_ITEMS_OFFSET, list.data.length - 1),
+        );
+        this.forward();
+    };
+
+    mrcuBackward = () => {
+        const list = this.base.current!;
+        list.index = this.controller.scrollIndex;
+        this.backward();
+    };
+
+    shouldShowMrcuForward = () => {
+        const { visibleItems, data } = this.props;
+        return this.controller.scrollIndex < data.length - 1 - visibleItems + VISIBLE_ITEMS_OFFSET;
+    };
+
+    shouldShowMrcuBackward = () => this.controller.scrollIndex > 0;
+
+    adjustFocusFromTarget = (itemRefIndex: number) => {
+        this.base.current!.index = this.controller.items[itemRefIndex].dataIndex;
+    };
+
+    appendData(data: U[]) {
+        this.controller.appendData(data);
+    }
+
+    prependData(data: U[]) {
+        this.controller.prependData(data);
+    }
+
+    focus(options?: FocusOptions) {
+        this.controller.focusCurrentItem(options);
+    }
+
+    scrollTo(index: number) {
+        const list = this.base.current!;
+        const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
+        if (list.index === safeIndex) return;
+        if (list.index < safeIndex) {
+            this.scrollToForward(safeIndex);
+        } else {
+            this.scrollToBackward(safeIndex);
+        }
+    }
+
+    private scrollToForward(index: number) {
+        const { visibleItems } = this.props;
+        const list = this.base.current!;
+        list.index = index;
+        const scrollTarget = list.index - visibleItems + VISIBLE_ITEMS_OFFSET;
+        if (scrollTarget > this.controller.scrollIndex) {
+            this.controller.scroll(scrollTarget);
+        }
+    }
+
+    private scrollToBackward(index: number) {
+        const { firstScrollStep, scrollStep } = this.props;
+        const list = this.base.current!;
+        list.index = index;
+        const offset = firstScrollStep < scrollStep ? 1 : 0;
+        if (list.index - offset < this.controller.scrollIndex) {
+            this.controller.scroll(list.index);
+        }
+    }
+
+    render() {
+        return (
+            <ListBase
+                ref={this.base}
+                forward={this.forward}
+                backward={this.backward}
+                mrcuForward={this.mrcuForward}
+                mrcuBackward={this.mrcuBackward}
+                shouldShowMrcuForward={this.shouldShowMrcuForward}
+                shouldShowMrcuBackward={this.shouldShowMrcuBackward}
+                adjustFocusFromTarget={this.adjustFocusFromTarget}
+                shouldApplySlowdown={this.controller.shouldApplySlowdown}
+                {...this.props}
+                limit={this.controller.itemsCount}
+            />
+        );
+    }
+}

package/packages/list/src/BasicList/config.ts

@@ -0,0 +1,13 @@
+import { AnimationUtils } from '@24i/bigscreen-sdk/animations';
+import { AnimationConfiguration } from '../types';
+import { animate } from '../animate';
+
+export const CONFIG = {
+    defaultAnimation: {
+        normal: {
+            time: 700,
+            easing: AnimationUtils.easeOutQuart,
+        },
+    } as AnimationConfiguration,
+    animate,
+};

package/packages/list/src/CenteredList/CenteredList.tsx

@@ -0,0 +1,116 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { ListBase } from '../Base';
+import { List } from '../interface';
+import { Item } from '../types';
+import { CONFIG } from './config';
+import { CenteredListController } from './controller';
+import { Props } from './interface';
+
+export class CenteredList<T extends Item<U>, U>
+    extends Component<Props<T, U>> implements IFocusable, List<T, U, Props<T, U>> {
+    /**
+     * Reference to instance of ListBase component, to interact with its API.
+     */
+    base = createRef<ListBase<T, U>>();
+
+    /**
+     * Unified controller for leveraging common behaviour
+     */
+    controller = new CenteredListController<U>(this, CONFIG);
+
+    static defaultProps = {
+        initialFocusIndex: 0,
+        animation: {},
+        // eslint-disable-next-line react/default-props-match-prop-types
+        horizontal: false,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        onFocusChanged: noop,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        animate: CONFIG.animate,
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof CenteredList.defaultProps>;
+
+    componentDidMount() {
+        this.controller.componentDidMount();
+    }
+
+    componentWillUnmount() {
+        this.controller.componentWillUnmount();
+    }
+
+    forward = () => {
+        const list = this.base.current!;
+        if (list.index < list.data.length - 1) {
+            list.index += 1;
+            this.controller.scroll(list.index);
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    backward = () => {
+        const list = this.base.current!;
+        if (list.index > 0) {
+            list.index -= 1;
+            this.controller.scroll(list.index);
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    shouldShowMrcuForward = () => {
+        const { data } = this.props;
+        const list = this.base.current!;
+        return list.index < data.length - 1;
+    };
+
+    shouldShowMrcuBackward = () => {
+        const list = this.base.current!;
+        return list.index > 0;
+    };
+
+    adjustFocusFromTarget = (itemRefIndex: number) => {
+        this.base.current!.index = this.controller.items[itemRefIndex].dataIndex;
+    };
+
+    appendData(data: U[]) {
+        this.controller.appendData(data);
+    }
+
+    prependData(data: U[]) {
+        this.controller.prependData(data);
+    }
+
+    focus(options?: FocusOptions) {
+        this.controller.focusCurrentItem(options);
+    }
+
+    scrollTo(index: number) {
+        const list = this.base.current!;
+        const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
+        if (list.index === safeIndex) return;
+        list.index = safeIndex;
+        this.controller.scroll(list.index);
+    }
+
+    render() {
+        return (
+            <ListBase
+                ref={this.base}
+                forward={this.forward}
+                backward={this.backward}
+                shouldShowMrcuForward={this.shouldShowMrcuForward}
+                shouldShowMrcuBackward={this.shouldShowMrcuBackward}
+                adjustFocusFromTarget={this.adjustFocusFromTarget}
+                shouldApplySlowdown={this.controller.shouldApplySlowdown}
+                {...this.props}
+                limit={this.controller.itemsCount}
+            />
+        );
+    }
+}

package/packages/list/src/CenteredList/config.ts

@@ -0,0 +1,13 @@
+import { AnimationUtils } from '@24i/bigscreen-sdk/animations';
+import { AnimationConfiguration } from '../types';
+import { animate } from '../animate';
+
+export const CONFIG = {
+    defaultAnimation: {
+        normal: {
+            time: 700,
+            easing: AnimationUtils.easeOutQuart,
+        },
+    } as AnimationConfiguration,
+    animate,
+};

package/packages/list/src/CenteredList/controller.ts

@@ -0,0 +1,47 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils';
+import { ControllableListBase, ListConfig } from '../UnifiedListController/interface';
+import { UnifiedListController } from '../UnifiedListController/UnifiedListController';
+import { getOffsetObject, prepareAnimatedItems } from '../utils';
+import { Props } from './interface';
+
+export class CenteredListController<T> extends UnifiedListController<T, Props<any, any>> {
+    /**
+     * Initial offset to render the list centered
+     */
+    topOffset: number;
+
+    constructor(list: ControllableListBase<Props<any, any>>, CONFIG: ListConfig) {
+        super(list, CONFIG);
+        const { visibleItems, scrollStep } = this.list.props;
+        this.topOffset = Math.floor(visibleItems / 2) * scrollStep;
+        this.leftBoundary = -this.limitExtra;
+        this.rightBoundary = 0;
+    }
+
+    componentDidMount(): void {
+        const { initialFocusIndex, horizontal } = this.list.props;
+        const base = this.list.base.current!;
+        this.items = prepareAnimatedItems(base);
+        forEach(this.items, (item) => {
+            offsetPosition(item.element, getOffsetObject(horizontal, item.offset));
+        });
+        this.addScrollWrapFocusEvent();
+        this.scrollListScroller(-this.topOffset);
+        if (initialFocusIndex !== 0) {
+            base.index = initialFocusIndex!;
+            this.focusCurrentItem();
+            this.scroll(base.index);
+        }
+    }
+
+    scrollIndexToPixels(index: number) {
+        if (index === 0) return -this.topOffset;
+        const { firstScrollStep, scrollStep } = this.list.props;
+        if (typeof firstScrollStep === 'undefined') {
+            return scrollStep * index - this.topOffset;
+        }
+        if (index === 1) return firstScrollStep - this.topOffset;
+        return ((index - 1) * scrollStep - this.topOffset) + firstScrollStep;
+    }
+}

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

@@ -0,0 +1,10 @@
+import {
+    Item,
+    SharedProps,
+    AnimationConfiguration,
+} from '../types';
+
+export type Props<T extends Item<U>, U> = SharedProps<T, U> & {
+    initialFocusIndex?: number,
+    animation?: Partial<AnimationConfiguration>,
+};

package/packages/list/src/EdgeOffsetList/EdgeOffsetList.tsx

@@ -0,0 +1,172 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { ListBase } from '../Base';
+import { UnifiedListController } from '../UnifiedListController/UnifiedListController';
+import { List } from '../interface';
+import {
+    Item,
+    SharedProps,
+    AnimationConfiguration,
+} from '../types';
+import { CONFIG } from './config';
+
+/**
+ * 1 for diff between length/index, 1 for partially visible item
+ * and 1 because it is that item not past that item
+ */
+const VISIBLE_ITEMS_OFFSET = 1;
+
+type Props<T extends Item<U>, U> = SharedProps<T, U> & {
+    edgeOffset?: number,
+    animation?: Partial<AnimationConfiguration>,
+};
+
+export class EdgeOffsetList<T extends Item<U>, U>
+    extends Component<Props<T, U>> implements IFocusable, List<T, U, Props<T, U>> {
+    /**
+     * Reference to instance of ListBase component, to interact with its API.
+     */
+    base = createRef<ListBase<T, U>>();
+
+    /**
+     * Unified controller for leveraging common behaviour
+     */
+    controller = new UnifiedListController<U>(this, CONFIG);
+
+    static defaultProps = {
+        edgeOffset: 1,
+        animation: {},
+        // eslint-disable-next-line react/default-props-match-prop-types
+        horizontal: false,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        onFocusChanged: noop,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        animate: CONFIG.animate,
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof EdgeOffsetList.defaultProps>;
+
+    componentDidMount() {
+        this.controller.componentDidMount();
+    }
+
+    componentWillUnmount() {
+        this.controller.componentWillUnmount();
+    }
+
+    forward = (): boolean => {
+        const list = this.base.current!;
+        if (list.index < list.data.length - 1) {
+            this.scrollToForward(list.index + 1);
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    backward = (): boolean => {
+        const list = this.base.current!;
+        if (list.index > 0) {
+            this.scrollToBackward(list.index - 1);
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    mrcuForward = () => {
+        const { visibleItems } = this.props;
+        const { scrollIndex } = this.controller;
+        const list = this.base.current!;
+        list.index = Math.max(
+            0,
+            Math.min(scrollIndex + visibleItems - VISIBLE_ITEMS_OFFSET, list.data.length - 1),
+        );
+        this.forward();
+    };
+
+    mrcuBackward = () => {
+        const list = this.base.current!;
+        list.index = this.controller.scrollIndex;
+        this.backward();
+    };
+
+    shouldShowMrcuForward = () => {
+        const { edgeOffset, visibleItems } = this.props;
+        const { scrollIndex } = this.controller;
+        const list = this.base.current!;
+        return (
+            scrollIndex < list.data.length - visibleItems + VISIBLE_ITEMS_OFFSET - edgeOffset
+        );
+    };
+
+    shouldShowMrcuBackward = () => this.controller.scrollIndex > 0;
+
+    adjustFocusFromTarget = (itemRefIndex: number) => {
+        this.base.current!.index = this.controller.items[itemRefIndex].dataIndex;
+    };
+
+    appendData(data: U[]) {
+        this.controller.appendData(data);
+    }
+
+    prependData(data: U[]) {
+        this.controller.prependData(data);
+    }
+
+    focus(options?: FocusOptions) {
+        this.controller.focusCurrentItem(options);
+    }
+
+    scrollTo(index: number) {
+        const list = this.base.current!;
+        const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
+        if (list.index === safeIndex) return;
+        if (list.index < safeIndex) {
+            this.scrollToForward(safeIndex);
+        } else {
+            this.scrollToBackward(safeIndex);
+        }
+    }
+
+    private scrollToForward(index: number) {
+        const { visibleItems, edgeOffset } = this.props;
+        const list = this.base.current!;
+        list.index = index;
+        const offset = edgeOffset + list.index < list.data.length
+            ? edgeOffset
+            : edgeOffset + list.index - list.data.length - 1;
+        const scrollTarget = list.index - visibleItems + offset + VISIBLE_ITEMS_OFFSET;
+        if (scrollTarget > this.controller.scrollIndex) {
+            this.controller.scroll(scrollTarget);
+        }
+    }
+
+    private scrollToBackward(index: number) {
+        const { edgeOffset } = this.props;
+        const list = this.base.current!;
+        list.index = index;
+        if (list.index < this.controller.scrollIndex) {
+            this.controller.scroll(list.index < edgeOffset ? 0 : list.index - edgeOffset);
+        }
+    }
+
+    render() {
+        return (
+            <ListBase
+                ref={this.base}
+                forward={this.forward}
+                backward={this.backward}
+                mrcuForward={this.mrcuForward}
+                mrcuBackward={this.mrcuBackward}
+                shouldShowMrcuForward={this.shouldShowMrcuForward}
+                shouldShowMrcuBackward={this.shouldShowMrcuBackward}
+                adjustFocusFromTarget={this.adjustFocusFromTarget}
+                shouldApplySlowdown={this.controller.shouldApplySlowdown}
+                {...this.props}
+                limit={this.controller.itemsCount}
+            />
+        );
+    }
+}

package/packages/list/src/EdgeOffsetList/config.ts

@@ -0,0 +1,13 @@
+import { AnimationUtils } from '@24i/bigscreen-sdk/animations';
+import { AnimationConfiguration } from '../types';
+import { animate } from '../animate';
+
+export const CONFIG = {
+    defaultAnimation: {
+        normal: {
+            time: 700,
+            easing: AnimationUtils.easeOutQuart,
+        },
+    } as AnimationConfiguration,
+    animate,
+};

package/packages/list/src/FastFocusingOptimizer/FastFocusingOptimizer.ts

@@ -0,0 +1,54 @@
+interface ListBase {
+    isAnimatedScrollRunning: boolean;
+}
+
+type Options = {
+    /**
+     * Flag whether to enable this feature. Set `true` to enable.
+     */
+    enabled: boolean,
+};
+
+const FAST_FOCUSING_TRIGGERED_AT = 2;
+
+export class FastFocusingOptimizer {
+    base: ListBase;
+
+    keyDownCounter = 0;
+
+    enabled = false;
+
+    /**
+     * @param base Instance of List Base
+     * @param options Object with options
+     */
+    constructor(base: ListBase, options: Options) {
+        this.base = base;
+        this.enabled = options.enabled;
+    }
+
+    onKeyDown() {
+        this.keyDownCounter += 1;
+    }
+
+    /**
+     * Check if condition for fast focusing optimization is hit.
+     * @returns Boolean whether fast focusing optimization is up/down
+     */
+    isRunning() {
+        if (!this.enabled) return false;
+        return (
+            this.keyDownCounter >= FAST_FOCUSING_TRIGGERED_AT
+            && this.base.isAnimatedScrollRunning
+        );
+    }
+
+    /**
+     * It should be called in case:
+     * - on key up OR
+     * - on user scroll attempt while unavailable scroll (no more scrolls)
+     */
+    stop() {
+        this.keyDownCounter = 0;
+    }
+}