wip: Replace RangeSlider with ModalViewMenu

Resolves #139

package.json

@@ -26,12 +26,12 @@
     "parser": "babel-eslint"
   },
   "dependencies": {
-    "@ptomasroos/react-native-multi-slider": "^1.0.0",
     "expo": "^35.0.1",
     "expo-font": "~7.0.0",
     "expo-image-manipulator": "~7.0.0",
     "expo-image-picker": "~7.0.0",
     "expo-secure-store": "~7.0.0",
+    "expo-sqlite": "~7.0.0",
     "mime": "^2.4.4",
     "mobx": "^5.15.0",
     "mobx-persist": "^0.4.1",
@@ -50,8 +50,7 @@
     "react-native-modal-datetime-picker": "^6.1.0",
     "react-native-responsive-screen": "^1.3.0",
     "react-native-svg": "~9.9.2",
-    "react-navigation": "^3.11.0",
-    "expo-sqlite": "~7.0.0"
+    "react-navigation": "^3.11.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.7.4",

src/components/modal/MenuModalOption.js

@@ -13,7 +13,8 @@ export default class MenuModalOption extends Component {
         onPress={this.props.onPress}
       >
         <View style={{ ...styles.container, ...this.props.style }}>
-          <View>
+          <View style={styles.iconsContainer}>
+            {this.props.customIcon}
             {this.props.icon && <Icon
               name={this.props.icon}
               size={Layout.window.hp(4)}
@@ -43,7 +44,8 @@ MenuModalOption.propTypes = {
   icon: PropTypes.string,
   label: PropTypes.string.isRequired,
   onPress: PropTypes.func.isRequired,
-  style: PropTypes.any
+  style: PropTypes.any,
+  customIcon: PropTypes.object
 }
 
 const styles = StyleSheet.create({
@@ -78,5 +80,8 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: -Layout.window.hp(1),
     top: -Layout.window.hp(1)
+  },
+  iconsContainer: {
+    flexDirection: 'row'
   }
 })

src/components/modal/ModalViewMenu.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import ModalView from './ModalView'
+import MenuModalOption from './MenuModalOption'
+
+export default class ModalViewMenu extends Component {
+  render () {
+    return (
+      <ModalView {...this.props}>
+        {this.props.options.map((option, index) => <MenuModalOption
+          key={'opt_' + index}
+          {...option}
+        />)}
+      </ModalView>
+    )
+  }
+}
+
+ModalViewMenu.propTypes = {
+  ...ModalView.propTypes,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    ...MenuModalOption.propTypes
+  }))
+}

src/components/ride/new_ride/TrailFilter.js

@@ -1,31 +1,68 @@
 import React, { Component } from 'react'
-import { View, StyleSheet } from 'react-native'
-import DifficultyRangeSlider from './DifficultyRangeSlider'
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
 import Colors from '../../../../constants/Colors'
 import Layout from '../../../../constants/Layout'
 import InputTitle from '../../form/InputTitle'
 import TextInputWithTitle from '../../form/TextInputWithTitle'
+import ModalViewMenu from '../../modal/ModalViewMenu'
+import DifficultyIcon from '../../icons/DifficultyIcon'
 
 export default class TrailFilter extends Component {
-  filter = {
-    difficulty: [],
-    search: ''
+  state = {
+    showMenu: false,
+    filter: {
+      difficulty: [],
+      search: ''
+    }
   }
 
   updateFilter = (update) => {
-    this.filter = { ...this.filter, ...update }
-    this.props.onFilterUpdate(this.filter)
+    let filter = { ...this.state.filter, ...update }
+    this.props.onFilterUpdate(filter)
+    this.setState({ filter: filter })
   }
 
+  showFilterMenu = () => this.setState({ showMenu: true })
+  hideFilterMenu = () => this.setState({ showMenu: false })
+
+  renderFilterTouchable = () => <TouchableOpacity onPress={this.showFilterMenu}>
+    <Text style={styles.filterText}>Tap to set filters</Text>
+  </TouchableOpacity>
+
+  toggleDifficulty = (difficulty: Number) => {
+    let selected = [...this.state.filter.difficulty]
+    this.state.filter.difficulty.includes(difficulty)
+      ? selected = selected.filter((d) => d !== difficulty)
+      : selected.push(difficulty)
+
+    this.updateFilter({ difficulty: selected })
+  }
+
+  renderFilterMenu = () => <ModalViewMenu
+    isVisible={this.state.showMenu}
+    onBackdropPress={this.hideFilterMenu}
+    onBackButtonPress={this.hideFilterMenu}
+    onClose={this.hideFilterMenu}
+    options={Object.keys(DifficultyIcon.icons).map(Number).map((difficulty: Number) => ({
+      onPress: () => this.toggleDifficulty(difficulty),
+      customIcon: <DifficultyIcon d={difficulty} size={Layout.window.hp(5)} />,
+      label: DifficultyIcon.icons[difficulty].label,
+      icon: this.state.filter.difficulty.includes(difficulty)
+        ? 'check'
+        : this.state.filter.difficulty.length > 0
+          ? 'clear'
+          : 'check',
+      highlight: this.state.filter.difficulty.includes(difficulty)
+    }))}
+  />
+
   render () {
     return (
       <View {...this.props} style={{ ...styles.container, ...this.props.style }}>
         <View style={styles.row}>
-          <InputTitle>Difficulties: </InputTitle>
-          <DifficultyRangeSlider
-            width={Layout.window.wp(55)}
-            onValuesChange={(values) => this.updateFilter({ difficulty: values })}
-          />
+          <InputTitle>Filters: </InputTitle>
+          {this.renderFilterTouchable()}
+          {this.renderFilterMenu()}
         </View>
         <TextInputWithTitle
           title='Search:'
@@ -50,5 +87,11 @@ const styles = StyleSheet.create({
   },
   input: {
     width: Layout.window.wp(55)
+  },
+  filterText: {
+    width: Layout.window.wp(55),
+    color: '#fffa',
+    padding: Layout.window.hp(2),
+    textAlign: 'center'
   }
 })