createRowCardsClipPlugin

Clips a row's cards to a rect that moves with the row but not with its horizontal scroll, so the cards scroll through it and a card is cut at its edge with its motion untouched

import { createRowCardsClipPlugin } from "@roku-sdk/flex-grid/row-clip";

createRowCardsClipPlugin<T>(config: RowCardsClipConfig): InitGridPlugin<T>

Description

Clips a row's cards to a rect that moves with the row but not with its horizontal scroll, so the cards scroll through it and a card is cut at its edge with its motion untouched. Hiding the card instead removes it mid-slide, and the slot it was heading for then fills by appearing rather than gliding in.

Row chrome is not affected: the rect goes on an ancestor of the cards alone, so a title reaching past the rect keeps drawing.

Parameters

Return values

Returns InitGridPlugin<T>.

Example

import { createRowCardsClipPlugin } from "@roku-sdk/flex-grid/row-clip";
createFlexGrid({
    plugins: [createRowCardsClipPlugin({ clip: row => (railCovered(row) ? RAIL_RECT : undefined) })]
});

Types

RowCardsClipConfig

Row Cards Clip Config configuration and callbacks.

RowCardsClipConfig.clip

The rect row row's cards are cut to, or undefined to leave that row alone.

Read inside the grid's render, so reactive state it touches updates the rect on its own, with no relayout. A row it answers undefined for gets a rect larger than anything it can reach.

Answer with a rect only while whatever hides the cut is drawn. The cut is invisible because something opaque covers it; the moment that thing is gone; the row lost focus, a panel closed, a scroll session dropped an overlay; the same rect cuts the row's cards away with nothing over them, and the row renders blank.

RowClipRect

[x, y, width, height], in the row's own coordinates.

type RowClipRect = [number, number, number, number];