fadfdsa

artsy · Feb 21, 2020 · 570dd84 · 570dd84
1 parent d80ea03
commit 570dd84
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 56 deletions.
diff --git a/src/lib/Components/ArtworkFilterOptions/SortOptions.tsx b/src/lib/Components/ArtworkFilterOptions/SortOptions.tsx
@@ -1,7 +1,7 @@
-import { ArrowLeftIcon, Box, Flex, Sans, Serif } from "@artsy/palette"
+import { ArrowLeftIcon, Box, Flex, Sans, Serif, space } from "@artsy/palette"
 import { BackgroundFill, OptionListItem } from "lib/Components/FilterModal"
 import React from "react"
-import { FlatList } from "react-native"
+import { FlatList, TouchableOpacity } from "react-native"
 import NavigatorIOS from "react-native-navigator-ios"
 import styled from "styled-components/native"
 
@@ -14,22 +14,12 @@ export class SortOptionsScreen extends React.Component<SortOptionsScreenProps> {
     this.props.navigator.pop()
   }
 
-  renderSortOption = ({ item }) => {
-    return (
-      <OptionListItem>
-        <Flex p={2} flexDirection="row" justifyContent="space-between" flexGrow={1}>
-          <Serif size="3">{item}</Serif>
-        </Flex>
-      </OptionListItem>
-    )
-  }
-
   render() {
     return (
       <Flex flexGrow={1}>
         <SortHeader>
           <Flex alignItems="flex-end" mt={0.5} mb={2}>
-            <ArrowLeftIconContainer onTouchStart={() => this.handleBackNavigation()}>
+            <ArrowLeftIconContainer onPress={() => this.handleBackNavigation()}>
               <ArrowLeftIcon fill="black100" />
             </ArrowLeftIconContainer>
           </Flex>
@@ -39,10 +29,20 @@ export class SortOptionsScreen extends React.Component<SortOptionsScreenProps> {
           <Box></Box>
         </SortHeader>
         <Flex>
-          <FlatList
+          <FlatList<string>
             keyExtractor={(_item, index) => String(index)}
             data={SortOptions}
-            renderItem={item => <Box>{this.renderSortOption(item)}</Box>}
+            renderItem={({ item }) => (
+              <Box>
+                {
+                  <OptionListItem>
+                    <Flex p={2} flexDirection="row" justifyContent="space-between" flexGrow={1}>
+                      <Serif size="3">{item}</Serif>
+                    </Flex>
+                  </OptionListItem>
+                }
+              </Box>
+            )}
           />
         </Flex>
         <BackgroundFill />
@@ -64,10 +64,10 @@ const SortOptions = [
 export const SortHeader = styled(Flex)`
   flex-direction: row;
   justify-content: space-between;
-  padding-right: 20px;
+  padding-right: ${space(2)};
 `
 
-export const ArrowLeftIconContainer = styled(Box)`
-  margin-top: 20px;
-  margin-left: 20px;
+export const ArrowLeftIconContainer = styled(TouchableOpacity)`
+  margin-top: ${space(2)};
+  margin-left: ${space(2)};
 `
diff --git a/src/lib/Components/FilterModal.tsx b/src/lib/Components/FilterModal.tsx
@@ -1,7 +1,14 @@
-import { ArrowRightIcon, Box, Button, CloseIcon, color, Flex, Sans, Serif } from "@artsy/palette"
+import { ArrowRightIcon, Box, Button, CloseIcon, color, Flex, Sans, Serif, space } from "@artsy/palette"
 import { SortOptionsScreen as SortOptions } from "lib/Components/ArtworkFilterOptions/SortOptions"
 import React from "react"
-import { FlatList, LayoutAnimation, Modal as RNModal, TouchableWithoutFeedback, ViewProperties } from "react-native"
+import {
+  FlatList,
+  LayoutAnimation,
+  Modal as RNModal,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  ViewProperties,
+} from "react-native"
 import NavigatorIOS from "react-native-navigator-ios"
 import styled from "styled-components/native"
 
@@ -17,7 +24,7 @@ interface FilterModalState {
 }
 
 export class FilterModalNavigator extends React.Component<FilterModalProps, FilterModalState> {
-  state = {
+  state: FilterModalState = {
     isComponentMounted: false,
     sortableItems: [],
   }
@@ -45,13 +52,14 @@ export class FilterModalNavigator extends React.Component<FilterModalProps, Filt
           <RNModal animationType="fade" transparent={true} visible={isFilterArtworksModalVisible}>
             <TouchableWithoutFeedback onPress={null}>
               <ModalBackgroundView>
-                <Flex onTouchStart={this.props.closeModal} style={{ flexGrow: 1 }} />
+                <TouchableOpacity onPress={this.props.closeModal} style={{ flexGrow: 1 }} />
                 <ModalInnerView visible={isComponentMounted}>
                   <NavigatorIOS
                     navigationBarHidden={true}
                     initialRoute={{
                       component: FilterOptions,
                       passProps: { closeModal: this.props.closeModal },
+                      title: "", // this property (can be an empty string) is required otherwise RN throws a warning
                     }}
                     style={{ flex: 1 }}
                   />
@@ -71,15 +79,15 @@ export class FilterModalNavigator extends React.Component<FilterModalProps, Filt
 }
 
 interface FilterOptionsState {
-  filterOptions: Array<{ type: string; data: any }>
+  filterOptions: Array<{ type: string; onTap: () => void }>
 }
 
 interface FilterOptionsProps {
   closeModal: () => void
   navigator: NavigatorIOS
 }
 export class FilterOptions extends React.Component<FilterOptionsProps, FilterOptionsState> {
-  state = {
+  state: FilterOptionsState = {
     filterOptions: [],
   }
 
@@ -102,30 +110,14 @@ export class FilterOptions extends React.Component<FilterOptionsProps, FilterOpt
     })
   }
 
-  renderFilterOption = ({ item: { type, onTap } }) => {
-    return (
-      <OptionListItem>
-        <Flex p={2} flexDirection="row" justifyContent="space-between" flexGrow={1}>
-          <Serif size="3">{type}</Serif>
-          <TouchableOptionListItemRow onTouchStart={() => onTap()}>
-            <Serif color={color("black60")} size="3">
-              Default
-            </Serif>
-            <ArrowRightIcon fill="black30" ml={0.3} mt={0.3} />
-          </TouchableOptionListItemRow>
-        </Flex>
-      </OptionListItem>
-    )
-  }
-
   render() {
     const { filterOptions } = this.state
 
     return (
       <Flex flexGrow={1}>
         <Flex flexDirection="row" justifyContent="space-between">
           <Flex alignItems="flex-end" mt={0.5} mb={2}>
-            <CloseIconContainer onTouchStart={() => this.props.closeModal()}>
+            <CloseIconContainer onPress={() => this.props.closeModal()}>
               <CloseIcon fill="black100" />
             </CloseIconContainer>
           </Flex>
@@ -137,10 +129,26 @@ export class FilterOptions extends React.Component<FilterOptionsProps, FilterOpt
           </Sans>
         </Flex>
         <Flex>
-          <FlatList
+          <FlatList<{ onTap: () => void; type: string }>
             keyExtractor={(_item, index) => String(index)}
             data={filterOptions}
-            renderItem={item => <Box>{this.renderFilterOption(item)}</Box>}
+            renderItem={({ item }) => (
+              <Box>
+                {
+                  <OptionListItem>
+                    <Flex p={2} flexDirection="row" justifyContent="space-between" flexGrow={1}>
+                      <Serif size="3">{item.type}</Serif>
+                      <TouchableOptionListItemRow onPress={() => item.onTap()}>
+                        <Serif color={color("black60")} size="3">
+                          Default
+                        </Serif>
+                        <ArrowRightIcon fill="black30" ml={0.3} mt={0.3} />
+                      </TouchableOptionListItemRow>
+                    </Flex>
+                  </OptionListItem>
+                }
+              </Box>
+            )}
           />
         </Flex>
         <BackgroundFill />
@@ -172,12 +180,12 @@ export const FilterArtworkButton = styled(Button)`
   width: 110px;
 `
 
-export const TouchableOptionListItemRow = styled(Flex)`
+export const TouchableOptionListItemRow = styled(TouchableOpacity)`
   flex-direction: row;
 `
-export const CloseIconContainer = styled(Box)`
-  margin-left: 20px;
-  margin-top: 20px;
+export const CloseIconContainer = styled(TouchableOpacity)`
+  margin-left: ${space(2)};
+  margin-top: ${space(2)};
 `
 
 export const OptionListItem = styled(Flex)`
@@ -194,14 +202,14 @@ const ModalBackgroundView = styled.View`
   background-color: #00000099;
   flex: 1;
   flex-direction: column;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: ${space(1)};
+  border-top-right-radius: ${space(1)};
 `
 
 const ModalInnerView = styled.View<{ visible: boolean }>`
   flex-direction: column;
-  background-color: white;
+  background-color: ${color("white100")};
   height: 75%;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: ${space(1)};
+  border-top-right-radius: ${space(1)};
 `
diff --git a/src/lib/Components/__tests__/FilterModal-tests.tsx b/src/lib/Components/__tests__/FilterModal-tests.tsx
@@ -20,7 +20,7 @@ describe("Filter modal navigation flow", () => {
     )
     const filterListItem = filterScreen.root.findByType(TouchableOptionListItemRow)
 
-    act(() => filterListItem.props.onTouchStart())
+    act(() => filterListItem.props.onPress())
 
     filterScreen = mockNavigator.nextStep()
 
@@ -44,7 +44,7 @@ describe("Filter modal navigation flow", () => {
 
     const sortBackNavigationItem = sortScreen.root.findByType(ArrowLeftIconContainer)
 
-    act(() => sortBackNavigationItem.props.onTouchStart())
+    act(() => sortBackNavigationItem.props.onPress())
 
     mockNavigator.pop()
 
@@ -64,7 +64,7 @@ describe("Filter modal navigation flow", () => {
 
     const closeModalIcon = filterScreen.root.findByType(CloseIconContainer)
 
-    act(() => closeModalIcon.props.onTouchStart())
+    act(() => closeModalIcon.props.onPress())
 
     expect(modalClosed).toHaveBeenCalled()
   })