Skip to main content

Class: ScrollList<P>

Defined in: src/garminsdk/components/list/ScrollList.tsx:55

A scrollable list.

Extends

  • DisplayComponent<P>

Extended by

Type Parameters

Type ParameterDefault type
P extends ScrollListPropsScrollListProps

Constructors

Constructor

new ScrollList<P>(props): ScrollList<P>

Defined in: src/sdk/components/FSComponent.ts:73

Creates an instance of a DisplayComponent.

Parameters

ParameterTypeDescription
propsPThe propertis of the component.

Returns

ScrollList<P>

Inherited from

DisplayComponent<P>.constructor

Properties

_animationTargetScrollPos

protected readonly _animationTargetScrollPos: Subject<undefined | number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:185


_firstVisibleIndex

protected readonly _firstVisibleIndex: MappedSubject<[number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:202


_itemsPerPage

protected readonly _itemsPerPage: undefined | Subject<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:75


_lengthPx

protected readonly _lengthPx: Subscribable<number> | MappedSubscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:103


_listItemLengthWithMarginPx

protected readonly _listItemLengthWithMarginPx: MappedSubject<[number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:84


_maxScrollPos

protected readonly _maxScrollPos: MappedSubject<[number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:129


_renderWindow

protected readonly _renderWindow: Vec2Subject

Defined in: src/garminsdk/components/list/ScrollList.tsx:234


_scrollPos

protected readonly _scrollPos: Subject<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:142


_totalLengthPx

protected readonly _totalLengthPx: MappedSubject<[number, number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:92


animateFunc()

protected readonly animateFunc: () => void

Defined in: src/garminsdk/components/list/ScrollList.tsx:241

Called once per animation frame while we are animating.

Returns

void


animationTargetScrollPos

readonly animationTargetScrollPos: Subscribable<undefined | number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:190

The scroll position targeted by this list's current scrolling animation, in pixels, or undefined if scrolling is not currently animated or the animation has no defined target scroll position.


childrenNode?

protected optional childrenNode: VNode

Defined in: src/garminsdk/components/list/ScrollList.tsx:58


context?

optional context: [] = undefined

Defined in: src/sdk/components/FSComponent.ts:64

The context on this component, if any.

Inherited from

DisplayComponent.context


contextType?

readonly optional contextType: readonly [] = undefined

Defined in: src/sdk/components/FSComponent.ts:67

The type of context for this component, if any.

Inherited from

DisplayComponent.contextType


cssClassSub?

protected optional cssClassSub: Subscription | Subscription[]

Defined in: src/garminsdk/components/list/ScrollList.tsx:257


deltaTimeSeconds

protected deltaTimeSeconds: number = 0

Defined in: src/garminsdk/components/list/ScrollList.tsx:246


firstVisibleIndex

readonly firstVisibleIndex: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:210


goToAnimationTargetPos

protected goToAnimationTargetPos: boolean = false

Defined in: src/garminsdk/components/list/ScrollList.tsx:252


interval?

protected optional interval: number

Defined in: src/garminsdk/components/list/ScrollList.tsx:253


isAnimating

protected isAnimating: boolean = false

Defined in: src/garminsdk/components/list/ScrollList.tsx:243


itemCount

protected readonly itemCount: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:70


itemsContainerRef

protected readonly itemsContainerRef: NodeReference<HTMLDivElement>

Defined in: src/garminsdk/components/list/ScrollList.tsx:62


itemsPerPage

readonly itemsPerPage: undefined | Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:80

The number of visible list items per page displayed by this list, or undefined if the number of items per page is not prescribed.


itemsPerPageProp

protected readonly itemsPerPageProp: undefined | Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:66


lastTimeSeconds

protected lastTimeSeconds: number = 0

Defined in: src/garminsdk/components/list/ScrollList.tsx:245


lengthPx

readonly lengthPx: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:116

The visible length of this list, in pixels, along its scroll axis.


listItemLengthPx

protected readonly listItemLengthPx: Subject<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:68


listItemLengthPxProp

protected readonly listItemLengthPxProp: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:64


listItemLengthWithMarginPx

readonly listItemLengthWithMarginPx: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:90

The length, in pixels, of one item in this list plus its margin along this list's scroll axis.


listItemParamSubs

protected readonly listItemParamSubs: Subscription[] = []

Defined in: src/garminsdk/components/list/ScrollList.tsx:255


listItemSpacingPx

protected readonly listItemSpacingPx: Subject<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:69


listItemSpacingPxProp

protected readonly listItemSpacingPxProp: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:65


maxOverscrollPx

protected readonly maxOverscrollPx: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:140

How many pixels we will allow overscrolling before stopping.


maxRenderedItemCount

protected readonly maxRenderedItemCount: undefined | MappedSubject<[number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:212


maxScrollPos

readonly maxScrollPos: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:137

This list's maximum allowed scroll position, in pixels. Does not include overscroll.


maxTimeInOverscrollSeconds

protected maxTimeInOverscrollSeconds: number = 0.5

Defined in: src/garminsdk/components/list/ScrollList.tsx:249

How long to wait while overscrolled before snapping back.


pageLength

protected readonly pageLength: MappedSubscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:119

The length of one page, in pixels, along this list's scroll axis.


props

props: P & ComponentProps

Defined in: src/sdk/components/FSComponent.ts:61

The properties of the component.

Inherited from

DisplayComponent.props


renderWindow

readonly renderWindow: Subscribable<Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>>

Defined in: src/garminsdk/components/list/ScrollList.tsx:239

The window of rendered list items, as [startIndex, endIndex], where startIndex is the index of the first rendered item, inclusive, and endIndex is the index of the last rendered item, exclusive.


renderWindowStartIndex

protected readonly renderWindowStartIndex: Subject<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:220


renderWindowStartPos

protected readonly renderWindowStartPos: MappedSubject<[number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:221


rootRef

protected readonly rootRef: NodeReference<HTMLDivElement>

Defined in: src/garminsdk/components/list/ScrollList.tsx:60


scrollAxis

readonly scrollAxis: "x" | "y"

Defined in: src/garminsdk/components/list/ScrollList.tsx:73

The axis along which this list scrolls.


scrollBarLengthFraction

readonly scrollBarLengthFraction: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:177

The fraction of this list's visible length compared to the total length of all items in this list plus their margins along this list's scroll axis.


scrollPos

readonly scrollPos: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:147

This list's current scroll position, in pixels. The scroll position is zero when the list is scrolled to the beginning (without overscroll) and increases as the list is scrolled toward the end.


scrollPosFraction

readonly scrollPosFraction: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:153

This list's current scroll position, normalized such that 0 represents when the list is scrolled to the beginning (without overscroll) and 1 represents when the list is scrolled to the end (without overscroll).


snappingTransitionSpeed

protected snappingTransitionSpeed: number = 200

Defined in: src/garminsdk/components/list/ScrollList.tsx:251

Once at or below this velocity, we pick that target Y to snap to.


snapToItem

protected readonly snapToItem: boolean

Defined in: src/garminsdk/components/list/ScrollList.tsx:82


targetScrollPos

readonly targetScrollPos: MappedSubject<[undefined | number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:196

This list's current target scroll position, in pixels. The target scroll position is equal to the current animation target if it is defined; otherwise it is equal to the current scroll position.


timeInOverscrollSeconds

protected timeInOverscrollSeconds: number = 0

Defined in: src/garminsdk/components/list/ScrollList.tsx:247


totalLengthPx

readonly totalLengthPx: Subscribable<number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:101

The total length, in pixels, of all items in this list plus their margins along this list's scroll axis.


translatableRef

protected readonly translatableRef: NodeReference<HTMLDivElement>

Defined in: src/garminsdk/components/list/ScrollList.tsx:61


trueScrollPos

protected readonly trueScrollPos: MappedSubject<[number, number], number>

Defined in: src/garminsdk/components/list/ScrollList.tsx:228

This list's current scroll position adjusted for the render window.


velocity

protected velocity: number = 0

Defined in: src/garminsdk/components/list/ScrollList.tsx:244


RESERVED_CLASSES

protected readonly static RESERVED_CLASSES: string[]

Defined in: src/garminsdk/components/list/ScrollList.tsx:56

Methods

animate()

protected animate(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:488

Called once per animation frame while we are animating.

Returns

void


animateSnapback()

protected animateSnapback(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:557

Animates scrolling back when overscrolled.

Returns

void


animateSnapping()

protected animateSnapping(deltaTimeSeconds): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:588

If we have a target Y position to stop scrolling at, animate towards a smooth stop right at that point.

Parameters

ParameterTypeDescription
deltaTimeSecondsnumberSeconds since last animation frame.

Returns

void


animateVelocity()

protected animateVelocity(deltaTimeSeconds): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:532

Applies the velocity to the scroll position, which gives it the "flick" effect. Also slows the velocity down overtime.

Parameters

ParameterTypeDescription
deltaTimeSecondsnumberSeconds since last animation frame.

Returns

void


changeRenderWindow()

protected changeRenderWindow(scrollPos, renderCount, itemLength, windowLength): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:739

Changes this list's item render window.

Parameters

ParameterTypeDescription
scrollPosnumberThe scroll position on which to center the new render window, in pixels.
renderCountnumberThe number of items to render in the new window.
itemLengthnumberThe length of each item to render, including margin, in pixels.
windowLengthnumberThe length of the render window, in pixels.

Returns

void


destroy()

destroy(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:872

Returns

void

Inherit Doc

Overrides

DisplayComponent.destroy


ensureScrollIsInBounds()

protected ensureScrollIsInBounds(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:766

Checks if the list is scrolled past the maximum limit, and if so, snaps the list back to the limit.

Returns

void


executeScrollTo()

protected executeScrollTo(pos, animate): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:449

Executes a scroll to a specifed position.

Parameters

ParameterTypeDescription
posnumberThe position to which to scroll.
animatebooleanWhether to animate the scroll.

Returns

void


getContainerRef()

getContainerRef(): HTMLDivElement

Defined in: src/garminsdk/components/list/ScrollList.tsx:306

Returns a reference to the element where the list items should be added.

Returns

HTMLDivElement

A reference to the element where the list items should be added.


getContext()

protected getContext(context): never

Defined in: src/sdk/components/FSComponent.ts:106

Gets a context data subscription from the context collection.

Parameters

ParameterTypeDescription
contextneverThe context to get the subscription for.

Returns

never

The requested context.

Throws

An error if no data for the specified context type could be found.

Inherited from

DisplayComponent.getContext


getDampening()

protected getDampening(direction): number

Defined in: src/garminsdk/components/list/ScrollList.tsx:782

Returns a number used to dampen the mouse movement when overscrolled.

Parameters

ParameterTypeDescription
directionnumberWhat direction os the mouse moving in.

Returns

number

a number used to dampen the mouse movement when overscrolled.


getOverscrollPx()

protected getOverscrollPx(): number

Defined in: src/garminsdk/components/list/ScrollList.tsx:814

Gets the distance by which this list is currently overscrolled, in pixels along the scroll axis.

Returns

number

The distance by which this list is currently overscrolled, in pixels along the scroll axis.


getReservedCssClasses()

protected getReservedCssClasses(): readonly string[]

Defined in: src/garminsdk/components/list/ScrollList.tsx:867

Gets an array of this list's reserved CSS classes.

Returns

readonly string[]

An array of this list's reserved CSS classes.


isOverscrolled()

protected isOverscrolled(): boolean

Defined in: src/garminsdk/components/list/ScrollList.tsx:828

Returns whether this list is currently overscrolled.

Returns

boolean

Whether this list is currently overscrolled.


onAfterRender()

onAfterRender(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:260

Returns

void

Inherit Doc

Overrides

DisplayComponent.onAfterRender


onBeforeRender()

onBeforeRender(): void

Defined in: src/sdk/components/FSComponent.ts:80

A callback that is called before the component is rendered.

Returns

void

Inherited from

DisplayComponent.onBeforeRender


onListItemParamChanged()

protected onListItemParamChanged(pipeTo, value): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:694

Responds to when one of this list's item parameters changes when the list supports snapping to items.

Parameters

ParameterTypeDescription
pipeToMutableSubscribable<number>The mutable subscribable to which to pipe the new parameter value.
valuenumberThe new parameter value.

Returns

void


pageBack()

pageBack(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:313

Scrolls backward by one full page length.

Returns

void


pageForward()

pageForward(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:328

Scrolls forward by one full page length.

Returns

void


pickNearestSnapToPos()

protected pickNearestSnapToPos(pos): number

Defined in: src/garminsdk/components/list/ScrollList.tsx:685

Picks the scroll position, in pixels, of the snap-to target that is nearest to a given scroll position.

Parameters

ParameterTypeDescription
posnumberThe scroll position, in pixels, for which to find the nearest snap-to target.

Returns

number

The scroll position, in pixels, of the snap-to target that is nearest to the specified scroll position.


render()

render(): VNode

Defined in: src/garminsdk/components/list/ScrollList.tsx:833

Returns

VNode

Inherit Doc

Overrides

DisplayComponent.render


scrollToIndex()

scrollToIndex(index, position, animate): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:349

Scrolls until the item at a specified index is in view.

Parameters

ParameterTypeDescription
indexnumberThe index of the item to which to scroll.
positionnumberThe position to place the target item at the end of the scroll. Position 0 is the top/left-most visible slot, position 1 is the next slot, and so on. Values greater than or equal to the number of visible items per page will be clamped. Negative values will be interpreted as counting backwards from the bottom/right-most visible slot starting with -1. Ignored if this list does not support snapping to list items.
animatebooleanWhether to animate the scroll.

Returns

void


scrollToIndexWithMargin()

scrollToIndexWithMargin(index, margin, animate): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:405

Scrolls the minimum possible distance until the item at a specified index is in view with a given margin from the edges of the visible list.

Parameters

ParameterTypeDescription
indexnumberThe index of the item to which to scroll.
marginnumberThe margin from the edges of the visible list to respect when scrolling to the target item. In other words, the scrolling operation will attempt to place the target item at least as far from the edges of the visible list as the specified margin. If this list supports snapping to items, then the margin should be expressed as an item count. If this list does not support snapping to items, then the margin should be expressed as pixels. The margin will be clamped between zero and the largest possible value such that an item can be placed within the visible list while respecting the margin value on both sides.
animatebooleanWhether to animate the scroll.

Returns

void


startAnimating()

protected startAnimating(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:466

Reset the animation vars and start the animation, if not already started.

Returns

void


stopAnimating()

protected stopAnimating(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:478

Stop the animation.

Returns

void


updateRenderWindow()

protected updateRenderWindow(): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:709

Updates this list's item render window.

Returns

void


updateTransformX()

protected updateTransformX(scrollPos): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:751

Updates this list's item container's x-transform based on the current true scroll position.

Parameters

ParameterTypeDescription
scrollPosnumberThe current true scroll position, in pixels.

Returns

void


updateTransformY()

protected updateTransformY(scrollPos): void

Defined in: src/garminsdk/components/list/ScrollList.tsx:759

Updates this list's item container's y-transform based on the current true scroll position.

Parameters

ParameterTypeDescription
scrollPosnumberThe current true scroll position, in pixels.

Returns

void