Panel parts component · Kition Tessera

When to use

Layers, tracks, pages panels.

Examples

A layer row

Background

1 layerDouble-click to rename

panel-parts.tsx

import { useState } from 'react'
import { EyeButton, PanelFooter, RenameField } from '@kition/tessera-ui'

export default function Demo() {
  const [visible, setVisible] = useState(true)
  const [name, setName] = useState('Background')
  const [editing, setEditing] = useState(false)
  return (
    <div className="demo-frame" style={{ width: 280 }}>
      <div className="demo-layer-row">
        <EyeButton visible={visible} label={`Show ${name}`} onPress={() => setVisible(!visible)} />
        {editing ? (
          <RenameField value={name} label="Layer name" onChange={setName} onDone={() => setEditing(false)} />
        ) : (
          <span onDoubleClick={() => setEditing(true)}>{name}</span>
        )}
      </div>
      <PanelFooter start={<span>1 layer</span>} end={<span>Double-click to rename</span>} />
    </div>
  )
}

Props

EyeButton

A row's eye: the eye icon while shown, an empty box while hidden (as Photoshop draws it). A press toggles at once (onPress hears whether Alt was held); with sweep, dragging on from the press down the eye column (mouse, pen, or touch) reaches every other eye of the group the pointer crosses, through sweep.onOver, so the panel gives each the visibility the first press set. A keyboard click toggles too. It is pressed while its row shows; tabIndex takes it out of the tab order where a list moves the focus itself.

Prop	Type	Default
`visible`required	`boolean`	—
`label`required	`string`	—
`onPress`required	`(alt: boolean) => void`	—
`sweep`	`EyeSweep`	—
`tabIndex`	`number`	—
`testId`	`string`	—

RenameField

A row name's in-place editor, focused with its text selected: Enter or leaving it commits, Escape cancels (onDone once, with which); a composing input method keeps Enter for itself. It keeps its presses and keys from the row (no selection change, no editor shortcut).

Prop	Type	Default
`value`required	`string`	—
`label`required	`string`	—
`onChange`required	`(text: string) => void`	—
`onDone`required	`(commit: boolean) => void`	—
`testId`	`string`	—

PanelFooter

The buttons along a list panel's bottom, as Photoshop's: start on the left, end on the right.

Prop	Type	Default	Description
`start`	`ReactNode`	—
`end`	`ReactNode`	—

Thumbnail

A thumbnail: image fitted in a size × size cell at its own aspect, over a checkerboard where it is transparent, with a thin frame; an empty cell while there is no image (not drawn yet, or its source could not draw one).

Prop	Type	Default
`image`required	`ThumbnailImage \| null`	—
`size`required	`number`	—
`testId`	`string`	—

Panel

Prop	Type	Default
`side`required	`'left' \| 'right'`	—
`width`required	`number`	—
`title`	`string`	—
`children`required	`ReactNode`	—
`testId`	`string`	—

Used in

4 of Kition's 16 kits use these components.

Board
Design
Film
Photo