solid-lightning-primitives

Solid-Lightning-Primitives are a collection of primitives to get the most out of Lightning Solid.

To Install

> npm i @lightningjs/solid-primitives

useFocusManager

useFocusManager adds key handling, focusPath tracking, and focus and blur events on components. You can do this once in your App component. It returns a signal, focusPath which is an array of elements that currently have focus. When activeElement changes, the focusPath will be recalculated. During which all elements in focus will have a focus state added and onFocus(currentFocusedElm, prevFocusedElm) event called. Elements losing focus will have focus state removed and onBlur(currentFocusedElm, prevFocusedElm) called.

import{useFocusManager}from"@lightningjs/solid-primitives";constApp=()=>{// Only need to do this once in Application, but you can call it anywhere// if you need to get the focusPath signalconstfocusPath=useFocusManager(keyMap);return ...
}

The calculated focusPath is used for handling key events. When a key is pressed, the keyMap looks for the keyName and corresponding value to call on${key} then onKeyPress on each element until one handles the event.

import{useFocusManager}from'@lightningjs/solid-primitives';useFocusManager({Menu: 'm',Text: 't',Buttons: 'b',});<ViewonText={()=>navigate('/text')}onButtons={()=>navigate('/buttons')}onMenu={()=>navigate('/')}/>;

When keys m, t, b are pressed - onMenu, onText, onButtons will be called respectively.

withPadding

withPadding is a directive to set padding when a child text node loads. It follows css by taking a single padding value or Array [top, bottom | left, right ] or [top | right, left | bottom ] or [top | right | bottom | left]

import{Text}from'@lightningjs/solid';import{withPadding}from'@lightningjs/solid-primitives';constBadge=(props)=>{return(<nodeuse:withPadding={[10,15]}{...props}style={{color: '#00000099',borderRadius: 8,border: {width: 2,color: '#ffffff'},}}><Textstyle={{fontSize: 20,lineHeight: 20,}}>{props.children}</Text></node>);};<Badge>HD</Badge>;

createSpriteMap

createSpriteMap allows you to take a sprite and use different positions of the texture for different icons. This loads a texture once and allows it to be reused for performance and memory savings.

import{View}from'@lightningjs/solid';import{createSpriteMap}from'@lightningjs/solid-primitives';consticons=[{name: 'dolby',width: 39,height: 40,x: 0,y: 0},{name: 'ellipse',width: 56,height: 56,x: 40,y: 0},{name: 'ellipse1',width: 56,height: 56,x: 96,y: 0},];exportdefaultfunctionIcon(props){constsprite=createSpriteMap('/assets/icons/spritesheet.png',icons);return(<View{...props}texture={sprite[props.name]}width={sprite[props.name].props.width}height={sprite[props.name].props.height}x={(56-sprite[props.name].props.width)/2}y={(56-sprite[props.name].props.height)/2}></View>);}

createInfiniteItems

For Lightning apps it's really important to lazy load rows and items as much as possible.

const[items,{ setPage }]=createInfiniteItems(paginatedAPI);setPage(1);// load the first page - default no pages are loaded.constonSelectedChanged=(column,elm,index)=>{if(index<5){return;}else{constpage=Math.ceil((index-4)/10)+1;column.setPage(page);}};<Columnref={column}{...props}onFocus={onFocus}onSelectedChanged={onSelectedChanged}><Foreach={props.items()}>{(item)=><Button>{item.title}</Button>}</For></Column>;