Entity header

The head of an entity (a collection, a shop, a studio): its picture, its name and description edited where they are read, its tags, and a refusal said with the product's own words.

Web · ✓Mobile · ✓Desktop · ✓BetaBlocks

import { EntityHeader } from "@krizaka/ui/entity-header";

Everything booked from March to May.

Seasonal
Priority

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Akinaza's multi-shop and the collections of Yomizaka and Akinaza: the head of one shop or collection (ADR-006, krizaka-ui#740).

When to use

At the top of the page of one collection, shop or studio, where the owner renames it, describes it and changes its picture.
When the server answers with a refusal code (NAME_TAKEN, AVATAR_NOT_ALLOWED, DEFAULT_COLLECTION) and the page must say it in words.

When not to use

For the signed-in person's own profile and picture.Use instead: Account settings
To move between collections.Use instead: Collection switcher

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { EntityHeader } from "@krizaka/ui/entity-header";

Examples

Rename in place

Name and description edited where they are read; a taken name is refused in words.

Everything booked from March to May.

Seasonal
Priority

Props

The head of an entity: picture, name and description editable in place, tags, a refusal said in words, actions.

Prop	Type	Default	Description
`name`required	`string`	—	The entity's name.
`actions`	`ReactNode`	—	After the text: the actions of the entity (a menu, a button).
`avatar`	`EntityAvatar`	—	The picture.
`avatarPicker`	`{ label: string; kind?: DefaultAvatarEntityKind; options: readonly EntityAvatarOption[]; noneLabel?: string; value?: string \| undefined; onValueChange?: ((id: string) => void) \| undefined; triggerLabel: string; } \| undefined`	—	Makes the picture changeable: a button over it opens the library's `AvatarPicker`.
`className`	`string`	—	Classes merged last, on the header.
`description`	`string`	—	One line under the name.
`descriptionLabel`	`string`	`Description`	What editing the description does (“Edit the description”), passed translated: the field's name, and the button's after the visible text.
`descriptionPlaceholder`	`string`	—	Shown when there is no description and it is editable (“Add a description”), passed translated.
`nameLabel`	`string`	—	What editing the name does (“Rename the collection”), passed translated: the field's name, and the button's after the visible name.
`onDescriptionChange`	`((description: string) => void \| Promise<void>)`	—	Makes the description editable in place. Same contract as `onNameChange`.
`onNameChange`	`((name: string) => void \| Promise<void>)`	—	Makes the name editable in place: called with the trimmed new name. Throw (or reject with) an error carrying a `code` to show its refusal.
`onTagRemove`	`((id: string) => void)`	—	Lets the viewer remove a tag: each `TagChip` gets a remove button. Without it the tags are read-only labels.
`refusal`	`{ code: OrganizeCode; } \| null`	—	A refusal to say now (the last answer of the server), by its code.
`refusals`	`Partial<Record<OrganizeCode, string>>`	—	The messages by refusal code: `NAME_TAKEN`, `AVATAR_NOT_ALLOWED`, `DEFAULT_COLLECTION`, … A code with no message says nothing.
`tagRemoveLabel`	`((label: string) => string)`	—	The remove button's accessible name for a tag (“Remove Seasonal”), passed translated.
`tags`	`readonly EntityTag[]`	—	The entity's tags.
`tagsLabel`	`string`	—	The accessible name of the tags' list (“Tags”), passed translated.

Accessibility

The name is the page's h1; the button inside it is named by nameLabel.
A refusal is announced as an alert, in the product's words.
The picture's button is named by triggerLabel; the picker inside it is the library's radio group.

Keyboard

Keys	Action
`Enter`	On the name or description: opens the field. In the field: saves.
`Escape`	In the field: gives back the previous text.
`Tab`	Leaves the field, which saves it.

Best practices

Give onNameChange only when the viewer may rename: without it the name is plain text, not a button.
Throw an error with a code from onNameChange to show refusals[code]; the field stays open with the text typed.
Pass refusals for the codes your product can get; a code without a message says nothing, so the product never shows raw codes.

Generated from the code of @krizaka/ui 3.66.0: its meta.ts, its examples and its types.Edit this documentation on GitHub