DuskMoon workflow duskmoon implemented 4 demos

DmSearch

DmSearch documents the DmSearch export from duskmoon.

Import @duskmoon-dev/components/dm-search

4 API sections

28 documented props

2 behavior scenarios

Key API

itemsonSearchextrafastFilterItemdefaultCollapsedhideCollapseBtn

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmSearch is most often configured through `items`, `onSearch`, `extra`, `fastFilterItem`.

Covered behavior

Submits values and toggles collapsed fields

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmSearch from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSearch } from "@duskmoon-dev/components/dm-search";

export function Example() {
  return (<DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Submits values and toggles collapsed fields

test-backed

DmSearch scenario from the component test coverage: submits values and toggles collapsed fields.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSearch } from "@duskmoon-dev/components/dm-search";

export function DmSearchSubmitsValuesAndTogglesDemo() {
  return (<DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Honors searchParams and imperative reset

test-backed

DmSearch scenario from the component test coverage: honors searchparams and imperative reset.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSearch } from "@duskmoon-dev/components/dm-search";

export function DmSearchHonorsSearchParamsAndImperativeDemo() {
  return (<DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>
</div>

<div data-theme="moonlight">
  <DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DmSearch. Start with `items`, `onSearch`, `extra`, `fastFilterItem` for common usage.

Types: packages/components/src/components/dm-search/DmSearch.types.ts Scenarios: packages/components/src/components/dm-search/DmSearch.test.tsx

DmSearchProps interface extends RefAttributes<DmSearchRef>

Prop	Type	Required	Description
`items`	`DmSearchItem[]`	No	items configures DmSearch.
`onSearch`	`(values: Record<string, unknown>) => void`	No	onSearch configures DmSearch.
`extra`	`ReactNode`	No	extra configures DmSearch.
`fastFilterItem`	`DmSearchItem`	No	fastFilterItem configures DmSearch.
`defaultCollapsed`	`boolean`	No	defaultCollapsed configures DmSearch.
`hideCollapseBtn`	`boolean`	No	hideCollapseBtn configures DmSearch.
`compact`	`boolean`	No	compact configures DmSearch.
`searchParams`	`Record<string, unknown>`	No	searchParams configures DmSearch.
`loading`	`boolean`	No	loading configures DmSearch.
`enableDefaultPlaceHolder`	`boolean`	No	enableDefaultPlaceHolder configures DmSearch.
`className`	`string`	No	className configures DmSearch.
`inputProps`	`Partial<InputProps>`	No	inputProps configures DmSearch.
`selectProps`	`Partial<SelectProps>`	No	selectProps configures DmSearch.
`datePickerProps`	`Partial<DatePickerProps & RangePickerProps>`	No	datePickerProps configures DmSearch.

DmSearchRef interface

Prop	Type	Required	Description
`onReset`	`() => void`	Yes	onReset configures DmSearch.

DmSearchItem interface

Prop	Type	Required	Description
`key`	`string`	Yes	key configures DmSearch.
`title`	`ReactNode`	Yes	title configures DmSearch.
`dataIndex`	`string`	Yes	dataIndex configures DmSearch.
`search`	`{`	Yes	search configures DmSearch.
`type`	`DmSearchItemType`	Yes	type configures DmSearch.
`extraProps`	`Record<string, unknown>`	No	extraProps configures DmSearch.
`formProps`	`{`	No	formProps configures DmSearch.
`initialValue`	`unknown`	No	initialValue configures DmSearch.
`rules`	`unknown[]`	No	rules configures DmSearch.
`render`	`(`	No	render configures DmSearch.
`value`	`unknown,`	Yes	value configures DmSearch.
`setValue`	`(value: unknown) => void,`	Yes	setValue configures DmSearch.
`item`	`DmSearchItem,`	Yes	item configures DmSearch.

DmSearchItemType type

| "input" | "input-number" | "select" | "radio" | "checkbox" | "date" | "dateRange" | "custom"