Utilizes ModalBase for mobile action sheet; tapping on "Filter" scrol…

…ls to top
artsy · May 27, 2020 · 7337b41 · 7337b41
1 parent 45651b5
commit 7337b41
Showing 1 changed file with 22 additions and 24 deletions.
diff --git a/src/v2/Components/v2/ArtworkFilter/ArtworkFilterMobileActionSheet.tsx b/src/v2/Components/v2/ArtworkFilter/ArtworkFilterMobileActionSheet.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Sans, Flex, color } from "@artsy/palette"
-import React, { SFC } from "react"
+import { ModalBase, Box, Button, Flex, color } from "@artsy/palette"
+import React, { SFC, useRef } from "react"
 import styled from "styled-components"
 import {
   useArtworkFilterContext,
@@ -13,22 +13,35 @@ export const ArtworkFilterMobileActionSheet: SFC<{
 }> = ({ children, onClose }) => {
   const filterContext = useArtworkFilterContext()
 
+  const contentRef = useRef<HTMLDivElement | null>(null)
+
   // This reflects our zero state for this UI which doesn't include the keyword
   const isReset = isEqual(
     omit(filterContext.filters, "reset", "keyword"),
     initialArtworkFilterState
   )
 
+  const handleScrollToTop = () => {
+    if (!contentRef.current) return
+    contentRef.current.scrollTop = 0
+  }
+
   return (
-    <Container>
+    <ModalBase
+      onClose={onClose}
+      dialogProps={{
+        width: "100%",
+        height: "100%",
+        background: color("white100"),
+        flexDirection: "column",
+      }}
+    >
       <Header p={1}>
         <Button variant="noOutline" size="small" onClick={onClose}>
           Close
         </Button>
 
-        <Title size="3" weight="medium" textAlign="center">
-          Filter
-        </Title>
+        <Title onClick={handleScrollToTop}>Filter</Title>
 
         <Button
           size="small"
@@ -40,7 +53,7 @@ export const ArtworkFilterMobileActionSheet: SFC<{
         </Button>
       </Header>
 
-      <Content>
+      <Content ref={contentRef as any}>
         <Box width="100%" p={2}>
           {children}
         </Box>
@@ -51,25 +64,10 @@ export const ArtworkFilterMobileActionSheet: SFC<{
           Apply
         </Button>
       </Footer>
-    </Container>
+    </ModalBase>
   )
 }
 
-const Container = styled(Box)`
-  position: fixed;
-
-  /* The z-index after Force's mobile top-nav header */
-  z-index: 971;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`
-
 const Header = styled(Flex)`
   width: 100%;
   align-items: center;
@@ -87,6 +85,6 @@ const Content = styled(Flex)`
   -webkit-overflow-scrolling: touch;
 `
 
-const Title = styled(Sans)`
+const Title = styled(Button).attrs({ variant: "primaryWhite" })`
   flex: 1;
 `