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

package/packages/list/src/FirstOnlyList/FirstOnlyList.tsx

@@ -0,0 +1,122 @@
+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,
+    SharedProps,
+    AnimationConfiguration,
+} from '../types';
+import { FirstOnlyListController } from './controller';
+import { CONFIG } from './config';
+
+type Props<T extends Item<U>, U> = SharedProps<T, U> & {
+    animation?: Partial<AnimationConfiguration>,
+};
+
+export class FirstOnlyList<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 FirstOnlyListController<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 FirstOnlyList.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/FirstOnlyList/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/FirstOnlyList/controller.ts

@@ -0,0 +1,11 @@
+import { SharedProps } from '../types';
+import { ControllableListBase, ListConfig } from '../UnifiedListController/interface';
+import { UnifiedListController } from '../UnifiedListController/UnifiedListController';
+
+export class FirstOnlyListController<T> extends UnifiedListController<T> {
+    constructor(list: ControllableListBase<SharedProps<any, any>>, CONFIG: ListConfig) {
+        super(list, CONFIG);
+        this.leftBoundary = -this.limitExtra;
+        this.rightBoundary = 0;
+    }
+}

package/packages/list/src/FirstOnlyVariedList/FirstOnlyVariedList.tsx

@@ -0,0 +1,132 @@
+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 { UnifiedVariedListController } from '../UnifiedListController/UnifiedVariedListController';
+import { ControllableListBase } from '../UnifiedListController/interface';
+import { VariedList } from '../interface';
+import {
+    SharedVariedProps,
+    Item,
+    AnimationConfiguration,
+} from '../types';
+import { CONFIG } from './config';
+
+type Props<T extends Item<U>, U> = SharedVariedProps<T, U> & {
+    /**
+     * Optional animation configuration
+     */
+    animation?: Partial<AnimationConfiguration>,
+};
+
+export class FirstOnlyVariedList<T extends Item<U>, U> extends Component<Props<T, U>>
+    implements IFocusable, VariedList<T, U, Props<T, U>>, ControllableListBase {
+    /**
+     * Reference to instance of ListBase component, to interact with its API.
+     */
+    base = createRef<ListBase<T, U>>();
+
+    /**
+     * Controller to take care of common functionality
+     */
+    controller = new UnifiedVariedListController<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
+        extraPrevItems: 0,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        extraNextItems: 0,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        firstScrollStepPx: 0,
+        // eslint-disable-next-line react/default-props-match-prop-types
+        animate: CONFIG.animate,
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof FirstOnlyVariedList.defaultProps>;
+
+    componentDidMount() {
+        this.controller.componentDidMount();
+    }
+
+    componentWillUnmount() {
+        this.controller.componentWillUnmount();
+    }
+
+    forward = (): boolean => {
+        const list = this.base.current!;
+        if (list.index < list.data.length - 1) {
+            list.index += 1;
+            this.controller.scroll(0);
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    backward = (): boolean => {
+        const list = this.base.current!;
+        if (list.index > 0) {
+            list.index -= 1;
+            this.controller.scroll(0);
+            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(0);
+    }
+
+    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/FirstOnlyVariedList/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/FixedToEndList/FixedToEndList.tsx

@@ -0,0 +1,125 @@
+import { createRef, Component, 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,
+    SharedProps,
+    AnimationConfiguration,
+} from '../types';
+import { FixedToEndListController } from './controller';
+import { CONFIG } from './config';
+
+type Props<T extends Item<U>, U> = SharedProps<T, U> & {
+    animation?: Partial<AnimationConfiguration>,
+};
+
+export class FixedToEndList<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 FixedToEndListController<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 FixedToEndList.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;
+            if (list.index <= list.data.length - visibleItems + 2) {
+                this.controller.scroll(list.index);
+            }
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    backward = (): boolean => {
+        const { visibleItems } = this.props;
+        const list = this.base.current!;
+        if (list.index > 0) {
+            list.index -= 1;
+            if (list.index < list.data.length - visibleItems + 2) {
+                this.controller.scroll(list.index);
+            }
+            this.controller.focusCurrentItem();
+            return true;
+        }
+        return false;
+    };
+
+    shouldShowMrcuForward = () => {
+        const { visibleItems } = this.props;
+        const list = this.base.current!;
+        return list.index <= list.data.length - visibleItems + 1;
+    };
+
+    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;
+        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/FixedToEndList/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/FixedToEndList/controller.ts

@@ -0,0 +1,44 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { UnifiedListController } from '../UnifiedListController/UnifiedListController';
+import { changeItemsOffsetBy, prepareAnimatedItems } from '../utils';
+
+export class FixedToEndListController<T> extends UnifiedListController<T> {
+    appendData(data: T[]) {
+        const { base: { current: base }, props: { visibleItems } } = this.list;
+        super.appendData(data);
+        if (base!.index <= base!.data.length - visibleItems + 2) {
+            this.adjustItemsOffsetsForward(base!.index);
+            this.scroll(base!.index, false);
+        }
+    }
+
+    prependData(data: T[]) {
+        const {
+            base: { current: base },
+            props: { scrollStep, horizontal, visibleItems },
+        } = this.list;
+        const { items, itemsCount, limitExtra } = this;
+        const dataLength = data.length;
+        base!.prependData(data);
+        if (items.length < itemsCount) {
+            this.items = prepareAnimatedItems(base!);
+        }
+        base!.index += dataLength;
+        const decisionIndex = Math.min(Math.floor(limitExtra / 2), dataLength);
+        const correctedIndexChange = items[0].dataIndex < decisionIndex
+            ? dataLength - (decisionIndex - items[0].dataIndex)
+            : dataLength;
+        forEach(this.items, (item, index) => {
+            item.dataIndex += correctedIndexChange;
+            base!.updateItem(index, item.dataIndex - index);
+        });
+        changeItemsOffsetBy(this.items, correctedIndexChange * scrollStep, horizontal);
+        this.scrollIndex += dataLength;
+        this.scrollListScroller(
+            this.scrollIndexToPixels(
+                Math.min(base!.index, base!.data.length - visibleItems + 2),
+            ),
+        );
+        this.focusCurrentItem();
+    }
+}