Merge pull request #307 from performant-software/feature/basira290_fa…

…cet_tooltip BASIRA #290 - Facet tooltip
performant-software · Dec 23, 2024 · a1cc8a6 · a1cc8a6
2 parents ca85a9c + 1b258ba
commit a1cc8a6
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 29 deletions.
diff --git a/packages/controlled-vocabulary/package.json b/packages/controlled-vocabulary/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.19",
-    "@performant-software/shared-components": "^2.2.19",
+    "@performant-software/semantic-components": "^2.2.20",
+    "@performant-software/shared-components": "^2.2.20",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

diff --git a/packages/core-data/package.json b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -40,8 +40,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/geospatial": "^2.2.19",
-    "@performant-software/shared-components": "^2.2.19",
+    "@performant-software/geospatial": "^2.2.20",
+    "@performant-software/shared-components": "^2.2.20",
     "@peripleo/maplibre": "^0.5.2",
     "@peripleo/peripleo": "^0.5.2",
     "react": ">= 16.13.1 < 19.0.0",

diff --git a/packages/geospatial/package.json b/packages/geospatial/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of components for all things map-related.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -35,7 +35,7 @@
     "zotero-translation-client": "^5.0.1"
   },
   "peerDependencies": {
-    "@performant-software/shared-components": "^2.2.19",
+    "@performant-software/shared-components": "^2.2.20",
     "@samvera/clover-iiif": "^2.3.2",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dnd": "^11.1.3",

diff --git a/packages/semantic-ui/src/components/Facet.js b/packages/semantic-ui/src/components/Facet.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, {
+  useEffect,
   useImperativeHandle,
   useMemo,
   useState,
@@ -42,6 +43,11 @@ type Props = {
     current: ?HTMLElement
   },
 
+  /**
+   * Callback fired when the facet active state is toggled.
+   */
+  onActive?: () => void,
+
   /**
    * Facet title to display at the top.
    */
@@ -86,6 +92,12 @@ const Facet = (props: Props) => {
     expand: () => setActive(true)
   }));
 
+  useEffect(() => {
+    if (active && props.onActive) {
+      props.onActive();
+    }
+  }, [active]);
+
   return (
     <>
       <Accordion

diff --git a/packages/semantic-ui/src/components/FacetList.css b/packages/semantic-ui/src/components/FacetList.css
@@ -2,3 +2,7 @@
   display: block;
   margin-top: 1em;
 }
+
+.facet-list.ui.list > .item > .ui.checkbox {
+  width: 100%;
+}
diff --git a/packages/semantic-ui/src/components/FacetList.js b/packages/semantic-ui/src/components/FacetList.js
@@ -24,6 +24,11 @@ import { type RefinementListProps } from '../types/InstantSearch';
 import './FacetList.css';
 
 type Props = FacetProps & RefinementListProps & {
+  /**
+   * (Optional) class name to append to the root element.
+   */
+  className?: string,
+
   /**
    * The default value for the `operator` prop. If not provided, this will default to `or`.
    */
@@ -34,6 +39,11 @@ type Props = FacetProps & RefinementListProps & {
    */
   defaultValue?: string,
 
+  /**
+   * Renders a custom label element for the passed item.
+   */
+  renderLabel?: (item: any) => JSX.Element,
+
   /**
    * If "true", the component will render a search box for searching individual facet values.
    */
@@ -45,6 +55,7 @@ type Props = FacetProps & RefinementListProps & {
   toggleable?: boolean
 };
 
+const CLASS_SEPARATOR = ' ';
 const OPERATOR_OR = 'or';
 const OPERATOR_AND = 'and';
 
@@ -68,6 +79,11 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE
   const searchRef = useRef();
   const [query, setQuery] = useState('');
 
+  /**
+   * Memo-izes the class name.
+   */
+  const className = useMemo(() => _.compact(['facet-list', props.className]).join(CLASS_SEPARATOR), [props.className]);
+
   /**
    * Clears the current search state.
    *
@@ -128,10 +144,11 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE
 
   return (
     <Facet
-      className='facet-list'
+      className={className}
       defaultActive={props.defaultActive}
       divided={props.divided}
       innerRef={ref}
+      onActive={props.onActive}
       title={props.title}
       visible={visible}
     >
@@ -156,23 +173,25 @@ const FacetList = forwardRef(({ useRefinementList, ...props }: Props, ref: HTMLE
       <List
         className='facet-list'
       >
-        { _.map(items, (item, index) => (
+        { _.map(items, (item) => (
           <List.Item
-            key={index}
+            key={item.value}
           >
             <Checkbox
               checked={item.isRefined}
               label={{
-                children: (
-                  <>
-                    <span>{ item.label }</span>
-                    <Label
-                      circular
-                      content={item.count}
-                      size='small'
-                    />
-                  </>
-                )
+                children: props.renderLabel
+                  ? props.renderLabel(item)
+                  : (
+                    <>
+                      <span>{ item.label }</span>
+                      <Label
+                        circular
+                        content={item.count}
+                        size='small'
+                      />
+                    </>
+                  )
               }}
               onClick={() => refine(item.value)}
             />

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

diff --git a/packages/storybook/src/semantic-ui/FacetList.stories.js b/packages/storybook/src/semantic-ui/FacetList.stories.js
@@ -2,7 +2,7 @@
 
 import { action } from '@storybook/addon-actions';
 import React, { useCallback, useRef } from 'react';
-import { Button } from 'semantic-ui-react';
+import { Button, Checkbox, List } from 'semantic-ui-react';
 import FacetList from '../../../semantic-ui/src/components/FacetList';
 
 export default {
@@ -227,3 +227,76 @@ export const ExpandCollapse = () => {
     </>
   );
 };
+
+export const CustomRender = () => (
+  <FacetList
+    renderLabel={(item) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%'
+        }}
+      >
+        <span>{ item.label }</span>
+        <span>{ item.count }</span>
+      </div>
+    )}
+    title='Make'
+    useRefinementList={() => ({
+      items: [{
+        label: 'Chevrolet',
+        count: 783,
+        value: 'chevrolet'
+      }, {
+        label: 'Ford',
+        count: 399,
+        value: 'ford'
+      }, {
+        label: 'Toyota',
+        count: 236,
+        value: 'toyota'
+      }, {
+        label: 'Acura',
+        count: 122,
+        value: 'acura'
+      }],
+      refine: action('refine'),
+      canToggleShowMore: false,
+      isShowingMore: false,
+      searchForItems: action('search'),
+      toggleShowMore: action('show more')
+    })}
+  />
+);
+
+export const onActive = () => (
+  <FacetList
+    onActive={action('active')}
+    title='Make'
+    useRefinementList={() => ({
+      items: [{
+        label: 'Chevrolet',
+        count: 783,
+        value: 'chevrolet'
+      }, {
+        label: 'Ford',
+        count: 399,
+        value: 'ford'
+      }, {
+        label: 'Toyota',
+        count: 236,
+        value: 'toyota'
+      }, {
+        label: 'Acura',
+        count: 122,
+        value: 'acura'
+      }],
+      refine: action('refine'),
+      canToggleShowMore: false,
+      isShowingMore: false,
+      searchForItems: action('search'),
+      toggleShowMore: action('show more')
+    })}
+  />
+);
diff --git a/packages/user-defined-fields/package.json b/packages/user-defined-fields/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.19",
-    "@performant-software/shared-components": "^2.2.19",
+    "@performant-software/semantic-components": "^2.2.20",
+    "@performant-software/shared-components": "^2.2.20",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

diff --git a/packages/visualize/package.json b/packages/visualize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

diff --git a/react-components.json b/react-components.json
@@ -8,5 +8,5 @@
     "packages/user-defined-fields",
     "packages/visualize"
   ],
-  "version": "2.2.19"
+  "version": "2.2.20"
 }