Skip to content

Commit 0381d02

Browse files
dleadbetterdleadbetter
authored
Merge pull request #188 from performant-software/feature/basira200_search_facet_list
BASIRA #200 - Search facet list
2 parents 1e9c25e + b5d2079 commit 0381d02

File tree

8 files changed

+83
-15
lines changed

8 files changed

+83
-15
lines changed

‎packages/controlled-vocabulary/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/controlled-vocabulary",
3-
"version": "1.0.15",
3+
"version": "1.0.16",
44
"description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
55
"license": "MIT",
66
"main": "./build/index.js",
@@ -12,8 +12,8 @@
1212
"build": "webpack --mode production && flow-copy-source -v src types"
1313
},
1414
"dependencies": {
15-
"@performant-software/semantic-components": "^1.0.15",
16-
"@performant-software/shared-components": "^1.0.15",
15+
"@performant-software/semantic-components": "^1.0.16",
16+
"@performant-software/shared-components": "^1.0.16",
1717
"i18next": "^21.9.2",
1818
"semantic-ui-react": "^2.1.2",
1919
"underscore": "^1.13.2"

‎packages/semantic-ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/semantic-components",
3-
"version": "1.0.15",
3+
"version": "1.0.16",
44
"description": "A package of shared components based on the Semantic UI Framework.",
55
"license": "MIT",
66
"main": "./build/index.js",
@@ -12,7 +12,7 @@
1212
"build": "webpack --mode production && flow-copy-source -v src types"
1313
},
1414
"dependencies": {
15-
"@performant-software/shared-components": "^1.0.15",
15+
"@performant-software/shared-components": "^1.0.16",
1616
"@react-google-maps/api": "^2.8.1",
1717
"axios": "^0.26.1",
1818
"i18next": "^19.4.4",

‎packages/semantic-ui/src/components/FacetList.js‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
// @flow
22

3-
import React, { useEffect } from 'react';
3+
import { Timer } from '@performant-software/shared-components';
4+
import React, {
5+
useCallback,
6+
useEffect,
7+
useRef,
8+
useState
9+
} from 'react';
410
import {
511
Checkbox,
612
Icon,
13+
Input,
714
Label,
815
List
916
} from 'semantic-ui-react';
@@ -14,7 +21,8 @@ import LinkButton from './LinkButton';
1421
import { type RefinementListProps } from '../types/InstantSearch';
1522

1623
type Props = FacetProps & RefinementListProps & {
17-
defaultValue?: string
24+
defaultValue?: string,
25+
searchable?: boolean
1826
};
1927

2028
const FacetList = ({ useRefinementList, ...props }: Props) => {
@@ -23,9 +31,39 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
2331
refine,
2432
canToggleShowMore,
2533
isShowingMore,
34+
searchForItems,
2635
toggleShowMore,
2736
} = useRefinementList(props);
2837

38+
const ref = useRef();
39+
const [query, setQuery] = useState('');
40+
41+
/**
42+
* Clears the current search state.
43+
*
44+
* @type {(function(): void)|*}
45+
*/
46+
const onClear = useCallback(() => {
47+
// Reset the query view
48+
setQuery('');
49+
50+
// Reset the list of refinements
51+
searchForItems();
52+
53+
// Refocus the input element
54+
const { current: instance } = ref;
55+
if (instance) {
56+
instance.focus();
57+
}
58+
}, []);
59+
60+
/**
61+
* Executes the search within the list of facet values.
62+
*
63+
* @type {function(): *}
64+
*/
65+
const onSearch = useCallback(() => searchForItems(query), [query, searchForItems]);
66+
2967
/**
3068
* Sets the default value if provided.
3169
*/
@@ -36,9 +74,18 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
3674
}, [props.defaultValue]);
3775

3876
/**
39-
* Do not render the component if no items are present.
77+
* Persist the facet search when a user selects or deselects items.
78+
*/
79+
useEffect(() => {
80+
if (query) {
81+
searchForItems(query);
82+
}
83+
}, [items]);
84+
85+
/**
86+
* Do not render the component if no items are present and no query has been entered.
4087
*/
41-
if (_.isEmpty(items)) {
88+
if (_.isEmpty(items) && _.isEmpty(query)) {
4289
return null;
4390
}
4491

@@ -48,6 +95,24 @@ const FacetList = ({ useRefinementList, ...props }: Props) => {
4895
divided={props.divided}
4996
title={props.title}
5097
>
98+
{ props.searchable && (
99+
<Input
100+
icon={query && (
101+
<Icon
102+
link
103+
name='times'
104+
onClick={onClear}
105+
/>
106+
)}
107+
fluid
108+
onChange={(e, { value }) => setQuery(value)}
109+
onKeyDown={() => Timer.clearSearchTimer()}
110+
onKeyUp={() => Timer.setSearchTimer(onSearch)}
111+
placeholder={i18n.t('FacetList.labels.search')}
112+
ref={ref}
113+
value={query}
114+
/>
115+
)}
51116
<List
52117
className='facet-list'
53118
>

‎packages/semantic-ui/src/i18n/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,9 @@
129129
"buttons": {
130130
"showLess": "Show Less",
131131
"showMore": "Show More"
132+
},
133+
"labels": {
134+
"search": "Search"
132135
}
133136
},
134137
"FileUpload": {

‎packages/shared/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/shared-components",
3-
"version": "1.0.15",
3+
"version": "1.0.16",
44
"description": "A package of shared, framework agnostic, components.",
55
"license": "MIT",
66
"main": "./build/index.js",

‎packages/user-defined-fields/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/user-defined-fields",
3-
"version": "1.0.15",
3+
"version": "1.0.16",
44
"description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
55
"license": "MIT",
66
"main": "./build/index.js",
@@ -9,8 +9,8 @@
99
"build": "webpack --mode production && flow-copy-source -v src types"
1010
},
1111
"dependencies": {
12-
"@performant-software/semantic-components": "^1.0.15",
13-
"@performant-software/shared-components": "^1.0.15",
12+
"@performant-software/semantic-components": "^1.0.16",
13+
"@performant-software/shared-components": "^1.0.16",
1414
"i18next": "^21.9.1",
1515
"semantic-ui-react": "^2.1.2",
1616
"underscore": "^1.13.2"

‎packages/visualize/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/visualize",
3-
"version": "1.0.15",
3+
"version": "1.0.16",
44
"description": "A package of components used for data visualization",
55
"license": "MIT",
66
"main": "./build/index.js",

‎react-components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
"packages/user-defined-fields",
77
"packages/visualize"
88
],
9-
"version": "1.0.15"
9+
"version": "1.0.16"
1010
}

0 commit comments

Comments
 (0)