Skip to content

Commit a1cc8a6

Browse files
dleadbetterdleadbetter
authored
Merge pull request #307 from performant-software/feature/basira290_facet_tooltip
BASIRA #290 - Facet tooltip
2 parents ca85a9c + 1b258ba commit a1cc8a6

File tree

12 files changed

+137
-29
lines changed

12 files changed

+137
-29
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": "2.2.19",
3+
"version": "2.2.20",
44
"description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
2323
"underscore": "^1.13.2"
2424
},
2525
"peerDependencies": {
26-
"@performant-software/semantic-components": "^2.2.19",
27-
"@performant-software/shared-components": "^2.2.19",
26+
"@performant-software/semantic-components": "^2.2.20",
27+
"@performant-software/shared-components": "^2.2.20",
2828
"react": ">= 16.13.1 < 19.0.0",
2929
"react-dom": ">= 16.13.1 < 19.0.0"
3030
},

‎packages/core-data/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/core-data",
3-
"version": "2.2.19",
3+
"version": "2.2.20",
44
"description": "A package of components used with the Core Data platform.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -40,8 +40,8 @@
4040
"underscore": "^1.13.2"
4141
},
4242
"peerDependencies": {
43-
"@performant-software/geospatial": "^2.2.19",
44-
"@performant-software/shared-components": "^2.2.19",
43+
"@performant-software/geospatial": "^2.2.20",
44+
"@performant-software/shared-components": "^2.2.20",
4545
"@peripleo/maplibre": "^0.5.2",
4646
"@peripleo/peripleo": "^0.5.2",
4747
"react": ">= 16.13.1 < 19.0.0",

‎packages/geospatial/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/geospatial",
3-
"version": "2.2.19",
3+
"version": "2.2.20",
44
"description": "A package of components for all things map-related.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

‎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": "2.2.19",
3+
"version": "2.2.20",
44
"description": "A package of shared components based on the Semantic UI Framework.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -35,7 +35,7 @@
3535
"zotero-translation-client": "^5.0.1"
3636
},
3737
"peerDependencies": {
38-
"@performant-software/shared-components": "^2.2.19",
38+
"@performant-software/shared-components": "^2.2.20",
3939
"@samvera/clover-iiif": "^2.3.2",
4040
"react": ">= 16.13.1 < 19.0.0",
4141
"react-dnd": "^11.1.3",

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22

33
import React, {
4+
useEffect,
45
useImperativeHandle,
56
useMemo,
67
useState,
@@ -42,6 +43,11 @@ type Props = {
4243
current: ?HTMLElement
4344
},
4445

46+
/**
47+
* Callback fired when the facet active state is toggled.
48+
*/
49+
onActive?: () => void,
50+
4551
/**
4652
* Facet title to display at the top.
4753
*/
@@ -86,6 +92,12 @@ const Facet = (props: Props) => {
8692
expand: () => setActive(true)
8793
}));
8894

95+
useEffect(() => {
96+
if (active && props.onActive) {
97+
props.onActive();
98+
}
99+
}, [active]);
100+
89101
return (
90102
<>
91103
<Accordion

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,7 @@
22
display: block;
33
margin-top: 1em;
44
}
5+
6+
.facet-list.ui.list > .item > .ui.checkbox {
7+
width: 100%;
8+
}

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

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ import { type RefinementListProps } from '../types/InstantSearch';
2424
import './FacetList.css';
2525

2626
type Props = FacetProps & RefinementListProps & {
27+
/**
28+
* (Optional) class name to append to the root element.
29+
*/
30+
className?: string,
31+
2732
/**
2833
* The default value for the `operator` prop. If not provided, this will default to `or`.
2934
*/
@@ -34,6 +39,11 @@ type Props = FacetProps & RefinementListProps & {
3439
*/
3540
defaultValue?: string,
3641

42+
/**
43+
* Renders a custom label element for the passed item.
44+
*/
45+
renderLabel?: (item: any) => JSX.Element,
46+
3747
/**
3848
* If "true", the component will render a search box for searching individual facet values.
3949
*/
@@ -45,6 +55,7 @@ type Props = FacetProps & RefinementListProps & {
4555
toggleable?: boolean
4656
};
4757

58+
const CLASS_SEPARATOR = ' ';
4859
const OPERATOR_OR = 'or';
4960
const OPERATOR_AND = 'and';
5061

@@ -68,6 +79,11 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE
6879
const searchRef = useRef();
6980
const [query, setQuery] = useState('');
7081

82+
/**
83+
* Memo-izes the class name.
84+
*/
85+
const className = useMemo(() => _.compact(['facet-list', props.className]).join(CLASS_SEPARATOR), [props.className]);
86+
7187
/**
7288
* Clears the current search state.
7389
*
@@ -128,10 +144,11 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE
128144

129145
return (
130146
<Facet
131-
className='facet-list'
147+
className={className}
132148
defaultActive={props.defaultActive}
133149
divided={props.divided}
134150
innerRef={ref}
151+
onActive={props.onActive}
135152
title={props.title}
136153
visible={visible}
137154
>
@@ -156,23 +173,25 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE
156173
<List
157174
className='facet-list'
158175
>
159-
{ _.map(items, (item, index) => (
176+
{ _.map(items, (item) => (
160177
<List.Item
161-
key={index}
178+
key={item.value}
162179
>
163180
<Checkbox
164181
checked={item.isRefined}
165182
label={{
166-
children: (
167-
<>
168-
<span>{ item.label }</span>
169-
<Label
170-
circular
171-
content={item.count}
172-
size='small'
173-
/>
174-
</>
175-
)
183+
children: props.renderLabel
184+
? props.renderLabel(item)
185+
: (
186+
<>
187+
<span>{ item.label }</span>
188+
<Label
189+
circular
190+
content={item.count}
191+
size='small'
192+
/>
193+
</>
194+
)
176195
}}
177196
onClick={() => refine(item.value)}
178197
/>

‎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": "2.2.19",
3+
"version": "2.2.20",
44
"description": "A package of shared, framework agnostic, components.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

‎packages/storybook/src/semantic-ui/FacetList.stories.js‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { action } from '@storybook/addon-actions';
44
import React, { useCallback, useRef } from 'react';
5-
import { Button } from 'semantic-ui-react';
5+
import { Button, Checkbox, List } from 'semantic-ui-react';
66
import FacetList from '../../../semantic-ui/src/components/FacetList';
77

88
export default {
@@ -227,3 +227,76 @@ export const ExpandCollapse = () => {
227227
</>
228228
);
229229
};
230+
231+
export const CustomRender = () => (
232+
<FacetList
233+
renderLabel={(item) => (
234+
<div
235+
style={{
236+
display: 'flex',
237+
justifyContent: 'space-between',
238+
width: '100%'
239+
}}
240+
>
241+
<span>{ item.label }</span>
242+
<span>{ item.count }</span>
243+
</div>
244+
)}
245+
title='Make'
246+
useRefinementList={() => ({
247+
items: [{
248+
label: 'Chevrolet',
249+
count: 783,
250+
value: 'chevrolet'
251+
}, {
252+
label: 'Ford',
253+
count: 399,
254+
value: 'ford'
255+
}, {
256+
label: 'Toyota',
257+
count: 236,
258+
value: 'toyota'
259+
}, {
260+
label: 'Acura',
261+
count: 122,
262+
value: 'acura'
263+
}],
264+
refine: action('refine'),
265+
canToggleShowMore: false,
266+
isShowingMore: false,
267+
searchForItems: action('search'),
268+
toggleShowMore: action('show more')
269+
})}
270+
/>
271+
);
272+
273+
export const onActive = () => (
274+
<FacetList
275+
onActive={action('active')}
276+
title='Make'
277+
useRefinementList={() => ({
278+
items: [{
279+
label: 'Chevrolet',
280+
count: 783,
281+
value: 'chevrolet'
282+
}, {
283+
label: 'Ford',
284+
count: 399,
285+
value: 'ford'
286+
}, {
287+
label: 'Toyota',
288+
count: 236,
289+
value: 'toyota'
290+
}, {
291+
label: 'Acura',
292+
count: 122,
293+
value: 'acura'
294+
}],
295+
refine: action('refine'),
296+
canToggleShowMore: false,
297+
isShowingMore: false,
298+
searchForItems: action('search'),
299+
toggleShowMore: action('show more')
300+
})}
301+
/>
302+
);

‎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": "2.2.19",
3+
"version": "2.2.20",
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": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
2323
"underscore": "^1.13.2"
2424
},
2525
"peerDependencies": {
26-
"@performant-software/semantic-components": "^2.2.19",
27-
"@performant-software/shared-components": "^2.2.19",
26+
"@performant-software/semantic-components": "^2.2.20",
27+
"@performant-software/shared-components": "^2.2.20",
2828
"react": ">= 16.13.1 < 19.0.0",
2929
"react-dom": ">= 16.13.1 < 19.0.0"
3030
},

0 commit comments

Comments
 (0)