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

PropertyDescriptionTypeDefault
clearTooltipClear button tooltip textstring-
filterLookupKeykey in parameter item object for displaying parameter label in inputstring-
hideLabelHide label in search inputboolean-
disableInputDisable search inputboolean-
inputPropsProps object passed to the SearchInput componentInputProps-
onParameterValueChangeCallback when set parameter typefunction-
onValueChangeCallback when input changesfunction-
parametersParameters items data displayed in search dropdownobject-
parametersDisplayPropsAn object containing the details of how parameters list should renderDataSetProps-
parameterValueChosen parameter typestring-
placeholderInput placeholderstring-
recentRecent items data displayed in search dropdownobject-
recentDisplayPropsAn object containing the details of how recent items list should renderDataSetProps-
suggestionsSuggestions items data displayed after picking particular parameter in search dropdownobject or undefined or null-
suggestionsDisplayPropsAn object containing the details of how suggestions list should renderDataSetProps or undefined or null-
textLookupConfigconfig of keys for lookup in parameters, recent and suggestions datasets{ parameters: string; recent: string; suggestions: string}-
valueThe input content valuestring-
widthWidth of the search input when expandednumber-

DataSetProps

PropertyDescriptionTypeDefault
dividerReactElement displayed at the bottom of the listReactElement-
itemRenderFunction rendering single item of the list(item: object) => JSX.Element-
rowHeightHeight of item in the listnumber-
titleTitle of the item liststring-
tooltipTooltip of the item list, displayed when hovering on the icon next to the titlestring-
visibleRowsNumber of rows visible in the liststring-

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

PropertyDescriptionTypeDefault
alwaysHighlightWhen set, the input always has blue border when expandedbooleanfalse
alwaysExpandedBoolean value to force expanded state of the inputbooleanfalse
clearTooltipClear button tooltip textstring-
closeOnClickOutsideBoolean value to prevent / force toggling the input when clicking outsidebooleanfalse
filterLabelLabel displayed on the left-hand side of the input caretobject-
focusTriggerBoolean value for triggering focus on the inputboolean-
inputPropsProps object passed to the input element of the componentInputProps-
onValueChangeCallback when input changesfunction-
onButtonClickCallback executed when clicking search buttonfunction-
onClearCallback after clicking clear buttonfunction-
onClickCallback executed when clicking inside an inputfunction-
onKeyDownCallback executed when pressing a keyboard key.function-
onToggleCallback executed when expanding / narrowing the input wrapperfunction-
placeholderInput placeholderstring-
toggleTriggerBoolean value for triggering expanding / narrowing the inputboolean-
valueThe input content valuestring-

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}
/>
)