Skip to content
zidane
UI kit reference

code/editor/find/useFind

import { … } from 'zidane-ui/code/editor'ui/src/code/editor/find/useFind.ts

Functions#

useFindFunction#

Find state for a file view or a column of diffs: counts every match in the model, highlights the rendered ones and scrolls the current match into view. Pass the result to FindBar.

TypeScript
function useFind(
  args: UseFindArgs,
): { asked: number; capped: boolean; caseSensitive: boolean; close: () => void; index: number; jumpTo: (q: string, o: FindOptions, at: Omit<LineMatch, 'end'>) => void; open: boolean; query: string; searching: boolean; setQuery: Dispatch<SetStateAction<string>>; show: () => void; step: (direction: -1 | 1) => void; toggleCase: () => void; total: number }

Parameters

Parameters
NameTypeDescription
argsUseFindArgs

See UseFindArgs.

Returns

{ asked: number; capped: boolean; caseSensitive: boolean; close: () => void; index: number; jumpTo: (q: string, o: FindOptions, at: Omit<LineMatch, 'end'>) => void; open: boolean; query: string; searching: boolean; setQuery: Dispatch<SetStateAction<string>>; show: () => void; step: (direction: -1 | 1) => void; toggleCase: () => void; total: number }

ui/src/code/editor/find/useFind.ts:50

Interfaces#

FindPartsInterface#

One diff (or the file) to search: its lines and the part key its matches carry.

TypeScript
interface FindParts

Properties

FindParts properties
NameTypeDescription
linesreadonly FindLine[]

The searchable lines (fileLines, diffLines).

partstring

Ties matches to the rendered surface with the same FindSurface.part; '' for a lone file.

ui/src/code/editor/find/useFind.ts:21

UseFindArgsInterface#

What useFind searches, paints and scrolls.

TypeScript
interface UseFindArgs

Properties

UseFindArgs properties
NameTypeDescription
fallback(match: LineMatch, scroller: HTMLElement) => ScrollTarget

Where a match's part is when its line is not rendered: an element, or an estimate.

parts() => readonly FindParts[]

The searchable model; only built while find is open.

scroller() => HTMLElement | null

The scroll box holding the surfaces.

smoothboolean

Ease the scroll to the current match over several frames; false jumps (reduced motion).

surfaces() => readonly FindSurface[]

Rendered surfaces, read at paint time.

versionunknown

Bumps when parts would change (new file contents, new diffs).

ui/src/code/editor/find/useFind.ts:29

Types#

FindStateType#

What useFind returns: open state, the query and match case, the current index and total (capped when the total reads N+), and the actions show, step, jumpTo and close.

TypeScript
type FindState = ReturnType<typeof useFind>

ui/src/code/editor/find/useFind.ts:203