Merge pull request #2754 from StoDevX/hawken-filter-popovers

Refactoring of Filter Popover

Author: hawkrives

source/views/components/filter/filter-popover.js

@@ -1,13 +1,13 @@
 //@flow
 import * as React from 'react'
-import {StyleSheet, View, TouchableOpacity} from 'react-native'
 import Popover from 'react-native-popover-view'
 import {FilterSection} from './section'
 import type {FilterType} from './types'
+import {type TouchableUnion} from '../touchable'
 import * as c from '../colors'
 
 type Props = {
-	anchor: React.Ref<typeof TouchableOpacity>,
+	anchor: ?React.Ref<TouchableUnion>,
 	filter: FilterType,
 	onClosePopover: (filter: FilterType) => any,
 	visible: boolean,
@@ -43,20 +43,17 @@ export class FilterPopover extends React.PureComponent<Props, State> {
 				isVisible={visible}
 				onClose={() => onClosePopover(filter)}
 				placement="bottom"
+				popoverStyle={popoverContainer}
 			>
-				<View style={styles.popoverContainer}>
-					<FilterSection filter={filter} onChange={this.onFilterChanged} />
-				</View>
+				<FilterSection filter={filter} onChange={this.onFilterChanged} />
 			</Popover>
 		)
 	}
 }
 
-const styles = StyleSheet.create({
-	popoverContainer: {
-		minWidth: 200,
-		maxWidth: 300,
-	},
-})
+const popoverContainer = {
+	minWidth: 200,
+	maxWidth: 300,
+}
 
 const arrowStyle = {backgroundColor: c.iosLightBackground}

source/views/components/filter/filter-toolbar-button.js

@@ -1,10 +1,11 @@
 // @flow
 import * as React from 'react'
-import {StyleSheet, Text, Platform, TouchableOpacity} from 'react-native'
+import {StyleSheet, Text, Platform} from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import type {FilterType} from './types'
 import {FilterPopover} from './filter-popover'
 import * as c from '../colors'
+import {Touchable, type TouchableUnion} from '../touchable'
 
 const buttonStyles = StyleSheet.create({
 	button: {
@@ -51,12 +52,12 @@ type State = {
 }
 
 export class FilterToolbarButton extends React.PureComponent<Props, State> {
-	touchable: TouchableOpacity
-
 	state = {
 		popoverVisible: false,
 	}
 
+	touchable: ?TouchableUnion = null
+
 	openPopover = () => {
 		this.setState(() => ({popoverVisible: true}))
 	}
@@ -101,14 +102,15 @@ export class FilterToolbarButton extends React.PureComponent<Props, State> {
 
 		return (
 			<React.Fragment>
-				<TouchableOpacity
-					ref={ref => (this.touchable = ref)}
+				<Touchable
+					getRef={ref => (this.touchable = ref)}
+					highlight={false}
 					onPress={this.openPopover}
 					style={[buttonStyles.button, activeButtonStyle, style]}
 				>
 					<Text style={buttonTextStyle}>{title}</Text>
 					<Icon name={icon} size={18} style={activeContentStyle} />
-				</TouchableOpacity>
+				</Touchable>
 				<FilterPopover
 					anchor={this.touchable}
 					filter={filter}

source/views/components/filter/filter-toolbar.js

@@ -41,36 +41,33 @@ export function FilterToolbar({filters, onPopoverDismiss}: Props) {
 		onPopoverDismiss(newFilter)
 	}
 
-	const filterToggles = filters.map((filter, index) => (
+	const filterToggles = filters.map(filter => (
 		<FilterToolbarButton
 			key={filter.spec.title}
 			filter={filter}
 			isActive={filter.enabled}
 			onPopoverDismiss={onPopoverDismiss}
-			style={index === 0 ? styles.first : null}
 			title={filter.spec.title}
 		/>
 	))
 
-	const allButtons = filters.filter(f => f.enabled).map((filter, i) => {
+	const allButtons = filters.filter(f => f.enabled).map(filter => {
 		if (filter.type === 'toggle') {
 			return (
 				<ActiveFilterButton
 					key={filter.spec.title}
 					filter={filter}
 					label={filter.spec.label}
 					onRemove={filter => updateFilter(filter)}
-					style={i === 0 ? styles.first : null}
 				/>
 			)
 		} else if (filter.type === 'list') {
-			return filter.spec.selected.map((selected, j) => (
+			return filter.spec.selected.map(selected => (
 				<ActiveFilterButton
 					key={selected.title}
 					filter={filter}
 					label={selected.label || selected.title.toString()}
 					onRemove={filter => updateFilter(filter, selected)}
-					style={i === 0 && j === 0 ? styles.first : null}
 				/>
 			))
 		}
@@ -81,11 +78,19 @@ export function FilterToolbar({filters, onPopoverDismiss}: Props) {
 
 	return (
 		<React.Fragment>
-			<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+			<ScrollView
+				contentContainerStyle={styles.scroller}
+				horizontal={true}
+				showsHorizontalScrollIndicator={false}
+			>
 				<Toolbar>{filterToggles}</Toolbar>
 			</ScrollView>
 			{anyFiltersEnabled && (
-				<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+				<ScrollView
+					contentContainerStyle={styles.scroller}
+					horizontal={true}
+					showsHorizontalScrollIndicator={false}
+				>
 					{activeFilterButtons}
 				</ScrollView>
 			)}
@@ -94,7 +99,7 @@ export function FilterToolbar({filters, onPopoverDismiss}: Props) {
 }
 
 const styles = StyleSheet.create({
-	first: {
-		marginLeft: 10,
+	scroller: {
+		paddingLeft: 10,
 	},
 })

source/views/components/touchable.js

@@ -9,6 +9,11 @@ import {
 	View,
 } from 'react-native'
 
+export type TouchableUnion =
+	| typeof TouchableHighlight
+	| typeof TouchableOpacity
+	| typeof TouchableNativeFeedback
+
 type Props = {|
 	accessibilityComponentType?: string,
 	accessibilityLabel?: string,
@@ -17,6 +22,7 @@ type Props = {|
 	borderless?: boolean,
 	children?: React.Node,
 	containerStyle?: any,
+	getRef?: () => TouchableUnion,
 	highlight?: boolean,
 	onPress?: () => any,
 	style?: any,
@@ -27,6 +33,7 @@ export const Touchable = ({
 	borderless = false,
 	children,
 	containerStyle,
+	getRef,
 	highlight = true,
 	onPress = () => {},
 	style,
@@ -45,6 +52,7 @@ export const Touchable = ({
 
 			return (
 				<Component
+					ref={getRef}
 					onPress={onPress}
 					{...innerProps}
 					style={containerStyle}
@@ -64,6 +72,7 @@ export const Touchable = ({
 
 			return (
 				<TouchableNativeFeedback
+					ref={getRef}
 					background={background}
 					onPress={onPress}
 					style={containerStyle}