1.1.8 • Published 1 month ago

@synerise/ds-search v1.1.8

Weekly downloads
451
License
ISC
Repository
github
Last release
1 month ago

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>{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}
              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>{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-
alwaysExpandedEnable expanded input on Search component with dropdownboolean / undefined-

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

3 months ago

1.1.0

3 months ago

1.1.8

1 month ago

1.1.7

1 month ago

1.1.6

2 months ago

1.1.5

2 months ago

1.1.4

2 months ago

1.1.3

3 months ago

1.1.2

3 months ago

1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

4 months ago

1.0.3

3 months ago

0.10.10

4 months ago

0.10.9

4 months ago

0.10.7

4 months ago

0.10.8

4 months ago

0.10.4

5 months ago

0.10.5

5 months ago

0.10.6

5 months ago

0.10.1

5 months ago

0.10.2

5 months ago

0.10.3

5 months ago

0.10.0

5 months ago

0.9.25

6 months ago

0.9.24

6 months ago

0.9.23

7 months ago

0.9.20

7 months ago

0.9.21

7 months ago

0.9.22

7 months ago

0.9.17

8 months ago

0.9.18

8 months ago

0.9.19

8 months ago

0.9.15

9 months ago

0.9.16

9 months ago

0.9.14

9 months ago

0.9.12

10 months ago

0.9.13

9 months ago

0.9.8

10 months ago

0.9.7

10 months ago

0.9.9

10 months ago

0.9.4

11 months ago

0.9.3

11 months ago

0.9.6

11 months ago

0.9.5

11 months ago

0.8.95

1 year ago

0.8.92

1 year ago

0.8.94

1 year ago

0.8.93

1 year ago

0.9.10

10 months ago

0.9.11

10 months ago

0.9.0

1 year ago

0.9.2

12 months ago

0.9.1

12 months ago

0.8.91

1 year ago

0.8.90

1 year ago

0.8.89

1 year ago

0.8.88

1 year ago

0.8.87

1 year ago

0.8.86

1 year ago

0.8.85

1 year ago

0.8.84

1 year ago

0.8.83

1 year ago

0.8.82

1 year ago

0.8.81

1 year ago

0.8.80

1 year ago

0.8.79

1 year ago

0.8.78

1 year ago

0.8.77

1 year ago

0.8.76

1 year ago

0.8.75

2 years ago

0.8.74

2 years ago

0.8.73

2 years ago

0.8.70

2 years ago

0.8.72

2 years ago

0.8.71

2 years ago

0.8.67

2 years ago

0.8.66

2 years ago

0.8.69

2 years ago

0.8.68

2 years ago

0.8.63

2 years ago

0.8.62

2 years ago

0.8.65

2 years ago

0.8.64

2 years ago

0.8.61

2 years ago

0.8.60

2 years ago

0.8.56

2 years ago

0.8.55

2 years ago

0.8.58

2 years ago

0.8.57

2 years ago

0.8.59

2 years ago

0.8.54

2 years ago

0.8.53

2 years ago

0.8.52

2 years ago

0.8.51

2 years ago

0.8.50

2 years ago

0.8.45

2 years ago

0.8.44

2 years ago

0.8.47

2 years ago

0.8.46

2 years ago

0.8.41

2 years ago

0.8.43

2 years ago

0.8.42

2 years ago

0.8.49

2 years ago

0.8.48

2 years ago

0.8.40

2 years ago

0.8.38

2 years ago

0.8.39

2 years ago

0.8.36

2 years ago

0.8.35

2 years ago

0.8.34

2 years ago

0.8.33

2 years ago

0.8.30

3 years ago

0.8.32

2 years ago

0.8.31

3 years ago

0.8.25

3 years ago

0.8.24

3 years ago

0.8.27

3 years ago

0.8.26

3 years ago

0.8.29

3 years ago

0.8.28

3 years ago

0.8.23

3 years ago

0.8.22

3 years ago

0.8.21

3 years ago

0.8.20

3 years ago

0.8.14

3 years ago

0.8.13

3 years ago

0.8.19

3 years ago

0.8.16

3 years ago

0.8.15

3 years ago

0.8.17

3 years ago

0.8.5

3 years ago

0.8.4

3 years ago

0.8.7

3 years ago

0.8.6

3 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.8.12

3 years ago

0.8.11

3 years ago

0.8.10

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.7.10

3 years ago

0.7.9

3 years ago

0.7.6

3 years ago

0.7.5

3 years ago

0.7.8

3 years ago

0.7.7

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.0

3 years ago

0.6.10

4 years ago

0.6.7

4 years ago

0.6.6

4 years ago

0.6.9

4 years ago

0.6.8

4 years ago

0.6.3

4 years ago

0.6.2

4 years ago

0.6.5

4 years ago

0.6.4

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.54

4 years ago

0.5.53

4 years ago

0.5.52

4 years ago

0.5.51

4 years ago

0.5.50

4 years ago

0.5.49

4 years ago

0.5.47

4 years ago

0.5.48

4 years ago

0.5.44

4 years ago

0.5.45

4 years ago

0.5.46

4 years ago

0.5.43

4 years ago

0.5.42

4 years ago

0.5.41

4 years ago

0.5.40

4 years ago

0.5.39

4 years ago

0.5.38

4 years ago

0.5.37

4 years ago

0.5.36

4 years ago

0.5.34

4 years ago

0.5.35

4 years ago

0.5.33

4 years ago

0.5.32

4 years ago

0.5.31

4 years ago

0.5.30

4 years ago

0.5.29

4 years ago

0.5.26

4 years ago

0.5.21

4 years ago

0.5.22

4 years ago

0.5.23

4 years ago

0.5.20

4 years ago

0.5.19

4 years ago

0.5.18

4 years ago

0.5.17

4 years ago

0.5.16

4 years ago

0.5.15

4 years ago

0.5.11

4 years ago

0.5.14

4 years ago

0.5.12

4 years ago

0.5.13

4 years ago

0.5.10

4 years ago

0.5.9

4 years ago

0.5.8

4 years ago

0.5.7

4 years ago

0.5.6

4 years ago

0.5.5

4 years ago

0.5.4

4 years ago

0.5.3

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.20

4 years ago

0.4.18

4 years ago

0.4.17

4 years ago

0.4.16

4 years ago

0.4.15

4 years ago

0.4.14

4 years ago

0.4.13

5 years ago

0.4.12

5 years ago

0.4.11

5 years ago

0.4.10

5 years ago

0.4.9

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.5

5 years ago

0.4.6

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.3

5 years ago

0.2.4

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.94

5 years ago

0.1.92

5 years ago

0.1.93

5 years ago

0.1.90

5 years ago

0.1.89

5 years ago

0.1.87

5 years ago

0.1.88

5 years ago

0.1.86

5 years ago

0.1.85

5 years ago

0.1.84

5 years ago

0.1.82

5 years ago

0.1.80

5 years ago

0.1.81

5 years ago

0.1.78

5 years ago

0.1.79

5 years ago

0.1.77

5 years ago

0.1.76

5 years ago

0.1.75

5 years ago

0.1.74

5 years ago

0.1.73

5 years ago

0.1.72

5 years ago

0.1.71

5 years ago

0.1.70

5 years ago

0.1.69

5 years ago

0.1.68

5 years ago

0.1.67

5 years ago

0.1.66

5 years ago

0.1.65

5 years ago

0.1.64

5 years ago

0.1.63

5 years ago

0.1.62

5 years ago

0.1.61

5 years ago

0.1.59

5 years ago

0.1.60

5 years ago

0.1.57

5 years ago

0.1.58

5 years ago

0.1.56

5 years ago

0.1.55

5 years ago

0.1.54

5 years ago

0.1.53

5 years ago

0.1.52

5 years ago

0.1.51

5 years ago

0.1.50

5 years ago

0.1.49

5 years ago

0.1.48

5 years ago

0.1.47

5 years ago

0.1.44

5 years ago

0.1.45

5 years ago

0.1.46

5 years ago

0.1.41

5 years ago

0.1.43

5 years ago

0.1.40

5 years ago

0.1.39

5 years ago

0.1.38

5 years ago

0.1.37

5 years ago

0.1.35

5 years ago

0.1.36

5 years ago

0.1.34

5 years ago

0.1.33

5 years ago

0.1.32

5 years ago

0.1.30

5 years ago

0.1.31

5 years ago

0.1.29

5 years ago

0.1.28

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.25

5 years ago

0.1.24

5 years ago

0.1.22

5 years ago

0.1.23

5 years ago

0.1.21

5 years ago

0.1.20

5 years ago

0.1.19

5 years ago

0.1.18

5 years ago

0.1.16

5 years ago

0.1.17

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.12

5 years ago

0.1.13

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.0

5 years ago

0.1.1

5 years ago

0.0.33

5 years ago

0.0.34

5 years ago

0.0.32

5 years ago

0.0.31

5 years ago

0.0.30

5 years ago

0.0.29

5 years ago

0.0.28

5 years ago

0.0.27

5 years ago

0.0.26

5 years ago

0.0.25

5 years ago

0.0.24

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.18

5 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.13

5 years ago

0.0.14

5 years ago

0.0.11

5 years ago

0.0.12

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.5

5 years ago

0.0.6

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago