Ant.Design React Search Bar

Kibana style search+filter bar

---

Install

npm install ant-react-search-bar

---

Basic Usage

• Component

import React, { useState } from "react";
import { ReactSearchBar, RsbFilter, RsbField, RsbOperator, RsbType } from "../lib";

export const Tester = () => {
  const [query, setQuery] = useState("");
  const [filters, setFilters] = useState([
    {
      field: "string",
      operator: RsbOperator.IS,
      value: "test",
      required: true
    },
    {
      field: "string",
      operator: RsbOperator.IS,
      value: "hello",
      negative: true
    }
  ]);
  const fields: RsbField[] = [
    { key: "string", name: "String", type: RsbType.string },
    { key: "number", name: "Number", type: RsbType.number },
    { key: "bool", name: "Boolean", type: RsbType.boolean },
    { key: "date", name: "Date", type: RsbType.date },
    { key: "loc", name: "Location", type: RsbType.geo }
  ];

  const doSearch = () => api(query, filters);

  return (
    <ReactSearchBar
      collapsed={false}
      fields={fields}
      query={query}
      onQueryChange={setQuery}
      filters={filters}
      onFilterChange={setFilters}
      onSearch={doSearch}
    />
  );
};

• PROPS

query?: string;
disabled?: boolean;
filters?: IFilterObject[];
fields?: IFilterField[];
placeholder?: string;
options?: ReactElement<Select>;
actions?: ReactElement<Menu>;
collapsed?: boolean;
onCollapsed?: (c: boolean) => void;
onSearch?: (o: IQueryObject) => void;
onQueryChange?: (query: string) => void;
onFilterChange?: (filters: IFilterObject[]) => void;

primaryColor?: string;
negativeColor?: string;