withZoomFocus

Returns a cell template that scales on focus via the grid tween primitive

import { withZoomFocus } from "@roku-sdk/flex-grid/zoom-focus";

withZoomFocus<T>(Cell: Component<CellRenderProps<T>>, options: ZoomFocusOptions): Component<CellRenderProps<T>>

Description

Returns a cell template that scales on focus via the grid tween primitive.

The wrapped template receives the same CellRenderProps (including focused) so it can draw its own outline or ignore focus.

Which templates zoom is decided here, when the registry is built; there is no per-row opt-out. A template that must decide at runtime should read props.row and apply its own scale instead of being wrapped.

Parameters

Name	Type	Description
`Cell`	`Component<CellRenderProps<T>>`
`options`	ZoomFocusOptions

Return values

Returns Component<CellRenderProps<T>>.

Example

import { withZoomFocus } from "@roku-sdk/flex-grid/zoom-focus";

const PortraitCell = withZoomFocus(PortraitSimpleCell, {
  focusedScale: 1.0,
  unfocusedScale: 0.85,
});

Types

ZoomFocusOptions

Zoom Focus Options configuration and callbacks.

Name	Type	Description
`durationSec?`	`number`	Scale tween duration in seconds. Default: 0.25
`focusedScale?`	`number`	Scale factor when the cell has focus. Default: 1.0
`idPrefix?`	`string`	Prefix for scaler-group SceneGraph ids; defaults to geZoom_${n} per wrapped template.
`unfocusedScale?`	`number`	Scale factor when the cell does not have focus. Default: 0.95