Add an expanded classname to the facet container (#114)

* Add expanded class so we can apply styles * Lint fix * Prop to preserve facet items when not expanded * Formatting
mitodl · Jun 25, 2024 · ed4f12d · ed4f12d
1 parent 3b4d0ec
commit ed4f12d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/src/facet_display/Facet.tsx b/src/facet_display/Facet.tsx
@@ -14,18 +14,29 @@ interface Props {
   selected: string[]
   onUpdate: React.ChangeEventHandler<HTMLInputElement>
   expandedOnLoad: boolean
+  preserveItems?: boolean
 }
 
 function SearchFacet(props: Props) {
-  const { name, title, results, selected, onUpdate, expandedOnLoad } = props
+  const {
+    name,
+    title,
+    results,
+    selected,
+    onUpdate,
+    expandedOnLoad,
+    preserveItems
+  } = props
 
   const [showFacetList, setShowFacetList] = useState(expandedOnLoad)
   const [showAllFacets, setShowAllFacets] = useState(false)
 
   const titleLineIcon = showFacetList ? "expand_less" : "expand_more"
 
   return results && results.length === 0 ? null : (
-    <div className="facets base-facet">
+    <div
+      className={`facets base-facet${showFacetList ? " facets-expanded" : ""}`}
+    >
       <button
         className="filter-section-button"
         type="button"
@@ -37,7 +48,7 @@ function SearchFacet(props: Props) {
           {titleLineIcon}
         </i>
       </button>
-      {showFacetList ? (
+      {showFacetList || preserveItems ? (
         <>
           {results ?
             results.map((bucket, i) =>

diff --git a/src/facet_display/FacetDisplay.tsx b/src/facet_display/FacetDisplay.tsx
@@ -129,6 +129,7 @@ const AvailableFacets: React.FC<Omit<FacetDisplayProps, "clearAllFilters">> = ({
               }
               selected={activeFacets[facetSettings.name] || []}
               expandedOnLoad={facetSettings.expandedOnLoad}
+              preserveItems={facetSettings.preserveItems}
             />
           )
         } else if (facetSettings.type === "filterable") {
@@ -146,6 +147,7 @@ const AvailableFacets: React.FC<Omit<FacetDisplayProps, "clearAllFilters">> = ({
               }
               selected={activeFacets[facetSettings.name] || []}
               expandedOnLoad={facetSettings.expandedOnLoad}
+              preserveItems={facetSettings.preserveItems}
             />
           )
         } else if (facetSettings.type === "group") {

diff --git a/src/facet_display/FilterableFacet.tsx b/src/facet_display/FilterableFacet.tsx
@@ -18,10 +18,19 @@ interface Props {
   selected: string[]
   onUpdate: React.ChangeEventHandler<HTMLInputElement>
   expandedOnLoad: boolean
+  preserveItems?: boolean
 }
 
 function FilterableFacet(props: Props) {
-  const { name, title, results, selected, onUpdate, expandedOnLoad } = props
+  const {
+    name,
+    title,
+    results,
+    selected,
+    onUpdate,
+    expandedOnLoad,
+    preserveItems
+  } = props
   const [showFacetList, setShowFacetList] = useState(expandedOnLoad)
 
   const [filterText, setFilterText] = useState("")
@@ -45,7 +54,11 @@ function FilterableFacet(props: Props) {
 
   const buckets = (filteredResults || results) ?? []
   return results && results.length === 0 ? null : (
-    <div className="facets filterable-facet">
+    <div
+      className={`facets filterable-facet${
+        showFacetList ? " facets-expanded" : ""
+      }`}
+    >
       <button
         className="filter-section-button"
         type="button"
@@ -57,7 +70,7 @@ function FilterableFacet(props: Props) {
           {titleLineIcon}
         </i>
       </button>
-      {showFacetList ? (
+      {showFacetList || preserveItems ? (
         <>
           <div className="input-wrapper">
             <input

diff --git a/src/facet_display/types.ts b/src/facet_display/types.ts
@@ -23,6 +23,7 @@ export type SingleFacetOptions = {
   name: FacetKey
   title: string
   expandedOnLoad: boolean
+  preserveItems?: boolean
   labelFunction?: ((value: string) => string) | null
 }