feat: add separate search facets dialog, add small breakpoint facet l…

…ayout

package.json

@@ -36,7 +36,7 @@
     "@commitlint/config-conventional": "11.0.0",
     "@sanity/components": "2.0.2",
     "@sanity/icons": "1.0.0",
-    "@sanity/ui": "0.30.1",
+    "@sanity/ui": "0.30.2",
     "@tanem/react-nprogress": "3.0.8",
     "commitizen": "4.2.2",
     "cz-conventional-changelog": "3.3.0",

src/components/Browser/index.tsx

@@ -1,5 +1,5 @@
 import {Card, Flex} from '@sanity/ui'
-import React, {useEffect} from 'react'
+import React, {FC, useEffect} from 'react'
 import {useDispatch} from 'react-redux'
 // import styled from 'styled-components'
 
@@ -24,7 +24,7 @@ const CustomThing = styled.div(({theme}) => {
 })
 */
 
-const Browser = (props: Props) => {
+const Browser: FC<Props> = (props: Props) => {
   const {onClose} = props
 
   // Redux

src/components/Controls/index.tsx

@@ -1,17 +1,28 @@
-import {Box, Flex} from '@sanity/ui'
+import {EditIcon} from '@sanity/icons'
+import {Box, Button, Flex, Inline} from '@sanity/ui'
 import React, {FC} from 'react'
+import {useDispatch} from 'react-redux'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
+import {dialogShowSearchFacets} from '../../modules/dialog'
 import ButtonViewGroup from '../ButtonViewGroup'
-import SearchFacets from '../SearchFacets'
 import OrderSelect from '../OrderSelect'
 import Progress from '../Progress'
+import SearchFacets from '../SearchFacets'
+import SearchFacetsControl from '../SearchFacetsControl'
 import TextInputSearch from '../TextInputSearch'
 
 const Controls: FC = () => {
   // Redux
+  const dispatch = useDispatch()
   const fetching = useTypedSelector(state => state.assets.fetching)
   const pageIndex = useTypedSelector(state => state.assets.pageIndex)
+  const searchFacets = useTypedSelector(state => state.assets.searchFacets)
+
+  // Callbacks
+  const handleShowSearchFacetDialog = () => {
+    dispatch(dialogShowSearchFacets())
+  }
 
   return (
     <Box
@@ -50,8 +61,26 @@ const Controls: FC = () => {
               <TextInputSearch />
             </Box>
 
-            {/* Filters */}
-            <SearchFacets />
+            <Box display={['none', 'none', 'none', 'block']}>
+              <Inline>
+                <SearchFacets />
+
+                {/* Search Facets Control (add / clear) */}
+                <SearchFacetsControl />
+              </Inline>
+            </Box>
+
+            <Box display={['block', 'block', 'block', 'none']}>
+              <Button
+                fontSize={1}
+                icon={EditIcon}
+                mode="ghost"
+                onClick={handleShowSearchFacetDialog}
+                text={`Filters${searchFacets.length > 0 ? ' (' + searchFacets.length + ')' : ''}`}
+                tone="primary"
+              />
+            </Box>
+            {/* <SearchFacetsControl /> */}
           </Flex>
         </Flex>
       </Box>

src/components/DialogDetails/index.tsx

@@ -29,6 +29,15 @@ type Props = {
   item: Item
 }
 
+const Footer = () => (
+  <Box padding={3}>
+    <Flex justify="space-between">
+      <Button mode="bleed" text="Delete" tone="critical" />
+      <Button icon={PublishIcon} text="Update" tone="primary" />
+    </Flex>
+  </Box>
+)
+
 const DialogDetails: FC<Props> = (props: Props) => {
   const {item} = props
 
@@ -65,15 +74,6 @@ const DialogDetails: FC<Props> = (props: Props) => {
 
   const imageUrl = imageDprUrl(item?.asset, 250)
 
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify="space-between">
-        <Button mode="bleed" text="Delete" tone="critical" />
-        <Button icon={PublishIcon} text="Update" tone="primary" />
-      </Flex>
-    </Box>
-  )
-
   return (
     <Dialog
       scheme="dark"

src/components/DialogSearchFacets/index.tsx

@@ -0,0 +1,28 @@
+import {Box, Dialog} from '@sanity/ui'
+import React, {FC, useCallback} from 'react'
+import {useDispatch} from 'react-redux'
+
+import {dialogClear} from '../../modules/dialog'
+import SearchFacets from '../SearchFacets'
+import SearchFacetsControl from '../SearchFacetsControl'
+
+const DialogSearchFacets: FC = () => {
+  // Redux
+  const dispatch = useDispatch()
+
+  // Callbacks
+  const handleClose = useCallback(() => {
+    dispatch(dialogClear())
+  }, [])
+
+  return (
+    <Dialog scheme="dark" header="Filters" id="example" onClose={handleClose} width={1}>
+      <Box padding={3}>
+        <SearchFacets layout="stack" />
+        <SearchFacetsControl />
+      </Box>
+    </Dialog>
+  )
+}
+
+export default DialogSearchFacets

src/components/Dialogs/index.tsx

@@ -2,19 +2,21 @@ import React, {FC} from 'react'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
 import DialogDetails from '../DialogDetails'
+import DialogSearchFacets from '../DialogSearchFacets'
 
 const Dialogs: FC = () => {
+  // Redux
   const {asset, type} = useTypedSelector(state => state.dialog)
   const {byIds} = useTypedSelector(state => state.assets)
 
   const currentItem = asset && byIds[asset._id]
 
-  if (!currentItem) {
-    return null
+  if (type === 'details' && currentItem) {
+    return <DialogDetails item={currentItem} />
   }
 
-  if (asset && type === 'details') {
-    return <DialogDetails item={currentItem} />
+  if (type === 'searchFacets') {
+    return <DialogSearchFacets />
   }
 
   return null

src/components/SearchFacet/index.tsx

@@ -1,8 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
-import {Box, Card, Flex, Label, Text} from '@sanity/ui'
+import {Box, Flex, Label, Text} from '@sanity/ui'
 import {SearchFacetProps} from '@types'
 import React, {FC, ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
+import styled from 'styled-components'
 
 import {assetsSearchFacetsRemove} from '../../modules/assets'
 
@@ -11,6 +12,11 @@ type Props = {
   facet: SearchFacetProps
 }
 
+const Container = styled(Box)`
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: ${props => props.theme.sanity.radius[2]}px;
+`
+
 const SearchFacet: FC<Props> = (props: Props) => {
   const {children, facet} = props
 
@@ -22,30 +28,40 @@ const SearchFacet: FC<Props> = (props: Props) => {
   }
 
   return (
-    <Card
-      padding={1}
-      radius={2}
-      style={{
-        background: 'rgba(255, 255, 255, 0.05)',
-        display: 'inline-block'
-      }}
-    >
-      <Flex align="center">
+    <Container padding={[2, 2, 2, 1]}>
+      <Flex
+        align={['flex-start', 'flex-start', 'flex-start', 'center']}
+        direction={['column', 'column', 'column', 'row']}
+      >
         {/* Title */}
-        <Box paddingLeft={1} paddingRight={2}>
-          <Label size={0}>{facet.title}</Label>
+        <Box
+          paddingBottom={[3, 3, 3, 0]}
+          paddingLeft={1}
+          paddingRight={2}
+          paddingTop={[1, 1, 1, 0]}
+        >
+          <Label
+            size={0}
+            style={{
+              whiteSpace: 'nowrap'
+            }}
+          >
+            {facet.title}
+          </Label>
         </Box>
 
-        {children}
+        <Flex align="center">
+          {children}
 
-        {/* Close button */}
-        <Box paddingLeft={3} paddingRight={2} style={{opacity: 0.75}}>
-          <Text size={0}>
-            <CloseIcon onClick={handleClose} />
-          </Text>
-        </Box>
+          {/* Close button */}
+          <Box paddingLeft={3} paddingRight={2} style={{opacity: 0.75}}>
+            <Text size={0}>
+              <CloseIcon onClick={handleClose} />
+            </Text>
+          </Box>
+        </Flex>
       </Flex>
-    </Card>
+    </Container>
   )
 }