GridTile

The GridTile component is content wrapper component made to be used only within the Grid component. It is used to specify on which row and column the content inside it should be placed on the Grid.

Usage

The GridTile component must be provided with the specific row and column through the rows and cols props. You can dynamically move, remove and replace the tile in specific cells using the provided methods.

import Grid from '@components/Layout/Grid/Grid';
import GridTile from '@components/Layout/GridTile/GridTile';
import Block from '@components/Layout/Block/Block';

const App = () => {
    return (
        <Grid cols={3} rows={3} >
            <GridTile row={2} col={2}><Block>Placed in row 2 column 2</Block></GridTile>
            <GridTile row={3} col={2}><Block>Placed in row 3 column 2</Block></GridTile>
            <GridTile row={3} col={3}><Block>Placed in row 3 column 3</Block></GridTile>
        </Grid>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	GridTileRef	undefined	Retrieves the GridTile’s properties, methods and HTML element and assigns them to a local variable
row	number	Required	The row index where the tile will be placed.
col	number	Required	The column index where the tile will be placed.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Allows you to add custom navigation action handlers to the component. See the Navigation component documentation for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, this component’s actions will execute. Can be a CSS selector or HTMLElement.

Methods

Method	Parameters	Return Value	Description
moveTile	newRow: number, newCol: number	void	Moves the tile to a different place on the grid. Will throw an error if the row and column don’t exist.
removeItem	void	void	Removes the tile from the grid. Will throw an error if the row and column don’t exist.
replaceTile	newTile: JSX.ELement	void	Inserts new content on the place of the tile. Will throw an error if the row and column don’t exist.

Guide

Dynamically Updating the GridTile

The GridTile component provides methods to dynamically move, remove and replace the component. These methods can be accessed via the ref prop.

The steps to achieve it are as follows:

1. Declare a variable to hold the ref but don’t initialize it with a value
2. The declared value should have a type of GridRef, which you need to import
3. Set the declared variable as the value of the ref prop of the Grid component
4. Call the methods from the ref

Example

import Grid from '@components/Layout/Grid/Grid';
import GridTile { GridTileRef } from '@components/Layout/GridTile/GridTile';
import Block from '@components/Layout/Block/Block';

const App = () => {
    let gridTileRef!: GridTileRef;

    const replaceTile = () => {
        const newBlock = (<Block>New</Block>)
        gridTileRef.replaceTile(1, 1, newBlock);
    }

    const moveTile = () => {
        gridRef.moveTile(1, 1);
    }

    return (
        <Grid ref={gridTileRef} cols={3} rows={3} >
            <GridTile row={2} col={2}><Block>Placed in row 2 column 2</Block></GridTile>
        </Grid>
        <Block click={replaceTile}>Replace Tile</Block>
        <Block click={moveTile}>Move Tile</Block>
    );
};

export default App;

Making Grid Tiles navigable

To make the GridTile component navigable via keyboard or gamepad, you can use the Navigation component. There are two ways to achieve this.

The Declarative Approach

You can use the Navigation.Area component to wrap your tiles, but you are required to use the selector prop.

1. Assign a specific class name to your GridTile components.
2. Pass that exact same class (without the dot) to the selector prop of the Navigation.Area.

import Navigation from '@components/Utility/Navigation/Navigation';
import Grid from '@components/Layout/Grid/Grid';
import GridTile from '@components/Layout/Grid/GridTile';
import Block from '@components/Layout/Block/Block';
import styles from './MyPage.module.scss';

const App = () => {
    return (
        <Grid rows={3} cols={3}>
            <Navigation.Area name="grid-area" selector={styles.tile} focused>

                <GridTile row={1} col={1} class={styles.tile}>
                    <Block>Item 1</Block>
                </GridTile>

                <GridTile row={1} col={2} class={styles.tile}>
                    <Block>Item 2</Block>
                </GridTile>

                <GridTile row={2} col={1} class={styles.tile}>
                    <Block>Item 3</Block>
                </GridTile>

            </Navigation.Area>
        </Grid>
    );
};

Selector is Mandatory

Unlike standard components, you cannot omit the selector prop for Grids.

Alternative: Manual Registration With Callback Ref

You can manually register the tiles as a navigable area using the registerArea method.

1. Wrap the Grid (or a parent) with the Navigation component.
2. Use the ref callback to access the Navigation API immediately.
3. Register the specific class name of your list items using registerArea.

import Navigation, { NavigationRef } from '@components/Utility/Navigation/Navigation';

const App = () => {
    const handleNavReady = (api: NavigationRef) => {
        // Manually register the class used on the tiles
        api.registerArea('grid-area', ['.my-grid-tile'], true);
    };

    return (
        <Navigation ref={handleNavReady}>
            <Grid rows={2} cols={2}>
                 <GridTile row={1} col={1} class="my-grid-tile">...</GridTile>
                 <GridTile row={1} col={2} class="my-grid-tile">...</GridTile>
            </Grid>
        </Navigation>
    );
}