@synerise/ds-search v0.8.89

id: search

title: Search

Search UI Component

Installation

npm i @synerise/ds-search
or
yarn add @synerise/ds-search

Usage

import Search from '@synerise/ds-search';

const parameters = [
  { text: 'First Name', icon: <VarTypeStringM /> },
  { text: 'Last Name', icon: <VarTypeStringM /> },
  { text: 'Sex', icon: <VarTypeStringM /> },
  { text: 'City', icon: <VarTypeStringM /> },
  { text: 'Transactions', icon: <VarTypeNumberM /> }
];
const recent = [
  { text: 'Bangkok', filter: 'City', icon: <VarTypeStringM /> },
  { text: 'Frank', filter: 'Last Name', icon: <VarTypeStringM /> },
  { text: 'Basel', filter: 'City', icon: <VarTypeStringM /> },
];
const [value, setValue] = React.useState<string>('');
const [parameterValue, setParameterValue] = React.useState<string>('');
const [suggestions, setSuggestions] = React.useState([]);
return (
      <Search
        clearTooltip="Clear"
        placeholder="Search"
        parameters={parameters.slice(0, parametersCount)}
        recent={recent.slice(0, recentCount)}
        suggestions={suggestions}
        value={value}
        parameterValue={parameterValue}
        onValueChange={value => {
          setValue(value);
        }}
        onParameterValueChange={(value, parameter) => {
          setParameterValue(value);
          const fakeApiResponse = getSuggestions(value);
          setSuggestions(fakeApiResponse);
        }}
        recentDisplayProps={{
          tooltip: "recentTooltip",
          title: "recentTitle",
          rowHeight: 32,
          visibleRows: 3,
          itemRender: (item: FilterElement) => <Menu.Item onItemHover={(): void => {}}>{item && item.text}</Menu.Item>,
          divider: (
            <div style={{ padding: '12px', paddingBottom: '0px' }}>
              <Divider dashed />{' '}
            </div>
          ),
        }}
        parametersDisplayProps={{
          tooltip: "parametersTooltip",
          title: "parametersTitle",
          rowHeight: 32,
          visibleRows: 6,
          itemRender: (item: FilterElement) => (
            <Menu.Item
              highlight={value}
              onItemHover={(): void => {}}
              prefixel={item && <Icon component={item && item.icon} />}
            >
              {item && item.text}
            </Menu.Item>
          ),
        }}
        suggestionsDisplayProps={{
          tooltip: "suggestionsTooltip",
          title: "suggestionsTitle",
          rowHeight: 32,
          visibleRows: 6,
          itemRender: (item: FilterElement) => <Menu.Item onItemHover={(): void => {}}>{item && item.text}</Menu.Item>,
        }}
      />
)

Demo

API

DataSetProps

Search usage

import { SearchInput } from '@synerise/ds-search/dist/Elements';

    const [value, setValue] = React.useState<string>('');
      <SearchInput
        clearTooltip="Clear"
        placeholder="Search"
        onValueChange={value => {
          console.log(value);
          setValue(value);
        }}
        value={value}
        onClear={() => {
          console.log('Cleared!');
        }}
        closeOnClickOutside={true}
      />

SearchInput

SearchInput usage

import { SearchInput } from '@synerise/ds-search/dist/Elements';

const [value, setValue] = React.useState<string>('');
return (
      <SearchInput
        clearTooltip="Clear"
        placeholder="Search"
        onValueChange={value => {
          console.log(value);
          setValue(value);
        }}
        value={value}
        onClear={() => {
          console.log('Cleared!');
        }}
        closeOnClickOutside={true}
      />
)