feat: add support for future facet groups, re-work facet schema sligh…

…tly, use smaller menu item size
sanity-io · Jan 10, 2021 · bc3046b · bc3046b
1 parent 7f104eb
commit bc3046b
Show file tree

Hide file tree

Showing 9 changed files with 268 additions and 190 deletions.
diff --git a/src/components/SearchFacetNumber/index.tsx b/src/components/SearchFacetNumber/index.tsx
@@ -23,7 +23,7 @@ const SearchFacetNumber: FC<Props> = (props: Props) => {
   // Redux
   const dispatch = useDispatch()
 
-  const modifiers = facet?.options?.modifiers
+  const modifiers = facet?.modifiers
   const selectedModifier = facet?.modifier
     ? modifiers?.find(modifier => modifier.name === facet?.modifier)
     : modifiers?.[0]
@@ -60,7 +60,7 @@ const SearchFacetNumber: FC<Props> = (props: Props) => {
   return (
     <SearchFacet facet={facet}>
       {/* Optional operators */}
-      {facet?.options?.operatorTypes && (
+      {facet?.operatorTypes && (
         <MenuButton
           button={
             <Button
@@ -73,13 +73,15 @@ const SearchFacetNumber: FC<Props> = (props: Props) => {
           id="operators"
           menu={
             <Menu>
-              {facet.options.operatorTypes.map((operatorType, index) => {
+              {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
                   return (
                     <MenuItem
                       disabled={operatorType === selectedOperatorType}
+                      fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
+                      padding={2}
                       text={SEARCH_FACET_OPERATORS[operatorType].label}
                     />
                   )
@@ -113,7 +115,6 @@ const SearchFacetNumber: FC<Props> = (props: Props) => {
               iconRight={SelectIcon}
               padding={2} //
               text={selectedModifier?.title}
-              tone="primary"
             />
           }
           id="modifier"
@@ -122,8 +123,10 @@ const SearchFacetNumber: FC<Props> = (props: Props) => {
               {modifiers.map(modifier => (
                 <MenuItem
                   disabled={modifier.name === facet.modifier}
+                  fontSize={1}
                   key={modifier.name}
                   onClick={() => handleModifierClick(modifier)}
+                  padding={2}
                   text={modifier.title}
                 />
               ))}

diff --git a/src/components/SearchFacetSearchable/index.tsx b/src/components/SearchFacetSearchable/index.tsx
@@ -59,7 +59,7 @@ const SearchFacetSearchable: FC<Props> = (props: Props) => {
   return (
     <SearchFacet facet={facet}>
       {/* Optional operators */}
-      {facet?.options?.operatorTypes && (
+      {facet?.operatorTypes && (
         <MenuButton
           button={
             <Button
@@ -72,13 +72,15 @@ const SearchFacetSearchable: FC<Props> = (props: Props) => {
           id="operators"
           menu={
             <Menu>
-              {facet.options.operatorTypes.map((operatorType, index) => {
+              {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
                   return (
                     <MenuItem
                       disabled={operatorType === selectedOperatorType}
+                      fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
+                      padding={2}
                       text={SEARCH_FACET_OPERATORS[operatorType].label}
                     />
                   )

diff --git a/src/components/SearchFacetSelect/index.tsx b/src/components/SearchFacetSelect/index.tsx
@@ -22,15 +22,15 @@ const SearchFacetSelect: FC<Props> = (props: Props) => {
   // Redux
   const dispatch = useDispatch()
 
-  const list = facet?.options?.list
+  const options = facet?.options
 
-  const selectedItem = list?.find(v => v.name === facet?.value)
+  const selectedItem = options?.find(v => v.name === facet?.value)
 
-  const handleListItemClick = (list: SearchFacetInputSelectListItemProps) => {
+  const handleListItemClick = (option: SearchFacetInputSelectListItemProps) => {
     dispatch(
       assetsSearchFacetsUpdate({
         ...facet,
-        value: list.name
+        value: option.name
       })
     )
   }
@@ -49,7 +49,7 @@ const SearchFacetSelect: FC<Props> = (props: Props) => {
   return (
     <SearchFacet facet={facet}>
       {/* Optional operators */}
-      {facet?.options?.operatorTypes && (
+      {facet?.operatorTypes && (
         <MenuButton
           button={
             <Button
@@ -65,13 +65,15 @@ const SearchFacetSelect: FC<Props> = (props: Props) => {
           id="operators"
           menu={
             <Menu>
-              {facet.options.operatorTypes.map((operatorType, index) => {
+              {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
                   return (
                     <MenuItem
                       disabled={operatorType === selectedOperatorType}
+                      fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
+                      padding={2}
                       text={SEARCH_FACET_OPERATORS[operatorType].label}
                     />
                   )
@@ -92,17 +94,18 @@ const SearchFacetSelect: FC<Props> = (props: Props) => {
             iconRight={SelectIcon}
             padding={2} //
             text={selectedItem?.title}
-            tone="primary"
           />
         }
         id="list"
         menu={
           <Menu>
-            {list?.map((item, index) => (
+            {options?.map((item, index) => (
               <MenuItem
                 disabled={item.name === selectedItem?.name}
+                fontSize={1}
                 key={item.name}
-                onClick={() => handleListItemClick(list[index])}
+                onClick={() => handleListItemClick(options[index])}
+                padding={2}
                 text={item.title}
               />
             ))}

diff --git a/src/components/SearchFacetString/index.tsx b/src/components/SearchFacetString/index.tsx
@@ -41,7 +41,7 @@ const SearchFacetString: FC<Props> = (props: Props) => {
   return (
     <SearchFacet facet={facet}>
       {/* Optional operators */}
-      {facet?.options?.operatorTypes && (
+      {facet?.operatorTypes && (
         <MenuButton
           button={
             <Button
@@ -54,13 +54,15 @@ const SearchFacetString: FC<Props> = (props: Props) => {
           id="operators"
           menu={
             <Menu>
-              {facet.options.operatorTypes.map((operatorType, index) => {
+              {facet.operatorTypes.map((operatorType, index) => {
                 if (operatorType) {
                   return (
                     <MenuItem
                       disabled={operatorType === selectedOperatorType}
+                      fontSize={1}
                       key={operatorType}
                       onClick={() => handleOperatorItemClick(operatorType)}
+                      padding={2}
                       text={SEARCH_FACET_OPERATORS[operatorType].label}
                     />
                   )

diff --git a/src/components/SearchFacetsControl/index.tsx b/src/components/SearchFacetsControl/index.tsx
@@ -1,5 +1,6 @@
 import {AddCircleIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
+import {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '@types'
 import React, {FC} from 'react'
 import {useDispatch} from 'react-redux'
 
@@ -16,6 +17,40 @@ const SearchFacetsControl: FC = () => {
   // (This operates under the assumption that only one of each facet can be active at any given time)
   const remainingSearchFacets = FACETS.filter(facet => facet).length - searchFacets.length > 0
 
+  const renderMenuFacets = (
+    facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[]
+  ) => {
+    return (
+      <>
+        {facets?.map((facet, index) => {
+          if (facet.type === 'divider') {
+            return <MenuDivider key={index} />
+          }
+
+          // Recursively render menu facets
+          if (facet.type === 'group') {
+            return <MenuGroup title={facet.title}>{renderMenuFacets(facet.facets)}</MenuGroup>
+          }
+
+          if (facet) {
+            const isPresent = !!searchFacets.find(v => v.name === facet.name)
+
+            return (
+              <MenuItem
+                disabled={isPresent}
+                fontSize={1}
+                key={facet.name}
+                onClick={() => dispatch(assetsSearchFacetsAdd(facet))}
+                padding={2}
+                text={facet.title}
+              />
+            )
+          }
+        })}
+      </>
+    )
+  }
+
   return (
     <Flex>
       {/* Add filter button */}
@@ -32,28 +67,8 @@ const SearchFacetsControl: FC = () => {
           />
         }
         id="facets"
-        menu={
-          <Menu>
-            {FACETS?.map((facet, index) => {
-              if (facet) {
-                const isPresent = !!searchFacets.find(v => v.name === facet.name)
-
-                return (
-                  <MenuItem
-                    disabled={isPresent}
-                    fontSize={1}
-                    key={facet.name}
-                    onClick={() => dispatch(assetsSearchFacetsAdd(facet))}
-                    padding={2}
-                    text={facet.title}
-                  />
-                )
-              }
-
-              return <MenuDivider key={index} />
-            })}
-          </Menu>
-        }
+        menu={<Menu>{renderMenuFacets(FACETS)}</Menu>}
+        placement="right-start"
       />
 
       {/* Clear facets button */}

diff --git a/src/components/TableRow/index.tsx b/src/components/TableRow/index.tsx
@@ -184,7 +184,7 @@ const TableRow = (props: Props) => {
       >
         <AspectRatio ratio={4 / 3}>
           {/* File icon */}
-          {isFileAsset(asset) && <FileIcon asset={asset} width="50px" />}
+          {isFileAsset(asset) && <FileIcon asset={asset} width="40px" />}
 
           {/* Image */}
           {isImageAsset(asset) && (