FilterChip

Ein Filter als eine Pill, „Status ist 2xx“: Eigenschaft, Operator und Wert, jeweils mit eigenem Menü.

Status

function Basic() {
  const [status, setStatus] = useState(["2xx"]);
  const [op, setOp] = useState("is");
  return (
    <div className="flex items-center gap-8">
      <FilterChip
        property="Status"
        propertyIcon={icons.chart}
        operator={op}
        operators={["is", "is not"]}
        onOperatorChange={setOp}
        value={status.length > 1 ? `${status.length} classes` : (status[0] ?? "any")}
        multiple
        values={[
          { value: "2xx", label: "2xx" },
          { value: "4xx", label: "4xx" },
          { value: "5xx", label: "5xx" },
        ]}
        selected={status}
        onSelectedChange={setStatus}
        onRemove={() => setStatus([])}
      />
      <Button variant="ghost" size="sm" leadingIcon={icons.add}>
        Add filter
      </Button>
    </div>
  );
}

import { FilterChip } from "@logicplanes/kaeso-ui";

Props

defaultValuesOpen
boolean
Öffnet das Wertemenü, sobald der Chip erscheint: Ein gerade hinzugefügter Filter fragt sofort nach seinem Wert.
multiple
boolean
Mehrere Werte sind wählbar.
onOperatorChange
((operator: string) => void)
Wird mit dem gewählten Vergleich aufgerufen.
onRemove
(() => void)
Wird aufgerufen, wenn der Filter entfernt wird.
onSelectedChange
((selected: string[]) => void)
Wird mit den gewählten Werten aufgerufen.
operator
string
„ist“, „ist nicht“, „ist eines von“
operators
string[]
Die Vergleiche, die zur Wahl stehen, etwa „ist“ und „ist nicht“.
property
ReactNode
„Status“
propertyIcon
IconSvgElement
Das Symbol der Eigenschaft, auf die der Filter wirkt.
selected
string[] = []
Die gewählten Werte.
value
ReactNode
Der Wert, wie angezeigt: „2xx“ oder „2 Modelle“.
values
FilterChipChoice[]
Auswahlmöglichkeiten für das Wertemenü.