Make some chagnes

Author: Alex Lavrov

components/Buttons.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import Icon from '@expo/vector-icons/Ionicons'
 import { StyleSheet, TouchableOpacity } from 'react-native';
+import { MAX_SWIPE_DISTANCE } from "../constants";
 
 const styles = StyleSheet.create({
   headerButton: {
@@ -9,20 +10,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
 
-  removeButton: {
-    width: 60,
+  swipeButton: {
+    width: MAX_SWIPE_DISTANCE,
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center'
-  },
-
-  saveButton: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-    backgroundColor: '#f4511e',
-    alignItems: 'center',
-    justifyContent: 'center'
   }
 })
 
@@ -81,7 +73,7 @@ export class RemoveButton extends PureComponent {
   render() {
     return (
       <IconButton
-        style={styles.removeButton}
+        style={styles.swipeButton}
         iconName="md-trash"
         color="red"
         onPress={this.props.onPress}

components/NoteList.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Alert, View, SwipeableFlatList } from 'react-native';
 import { NoteListItem } from './NoteListItem'
 import { RemoveButton } from './Buttons'
+import { MAX_SWIPE_DISTANCE } from "../constants";
 
 export class NoteList extends Component {
   static propTypes = {
@@ -43,7 +44,7 @@ export class NoteList extends Component {
         data={notes}
         bounceFirstRowOnMount={false}
         keyExtractor={item => item.id}
-        maxSwipeDistance={60}
+        maxSwipeDistance={MAX_SWIPE_DISTANCE}
         renderQuickActions={this.renderDeleteButton}
         renderItem={this.renderItem}
       />

components/NoteListItem.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types'
-import { StyleSheet, Image, Text, View, UIManager, findNodeHandle } from 'react-native';
+import { StyleSheet, Image, Text, View, Platform, ActionSheetIOS, UIManager, findNodeHandle } from 'react-native';
 import { MoreButton } from './Buttons'
 
 const styles = StyleSheet.create({
@@ -57,7 +57,7 @@ export class NoteListItem extends Component {
     onNavigateNote: PropTypes.func,
   }
 
-  onPressMenu = (e, index) => {
+  onPressMenu = index => {
     const { note, onNavigateNote, onRemoveNote } = this.props
     switch (index) {
       case 0:
@@ -68,12 +68,13 @@ export class NoteListItem extends Component {
   }
 
   onOpenMenu = () => {
-    UIManager.showPopupMenu(
-      findNodeHandle(this._buttonRef),
-      [ 'Edit', 'Delete' ],
-      (e) => console.error(e),
-      this.onPressMenu
-    )
+    const button = findNodeHandle(this._buttonRef)
+    const options = [ 'Edit', 'Delete' ]
+
+    Platform.select({
+      ios: ActionSheetIOS.showActionSheetWithOptions(options, this.onPressMenu),
+      android: UIManager.showPopupMenu(button, options, (e) => console.error(e), (e, i) => this.onPressMenu(i))
+    })
   }
 
   render() {

components/ProjectList.js

@@ -1,33 +1,48 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { StyleSheet, FlatList, TouchableOpacity, Text, View } from 'react-native';
 
 const styles = StyleSheet.create({
   project: {
     backgroundColor: 'white',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: 'gray',
     paddingVertical: 30,
-    paddingHorizontal: 15
+    paddingHorizontal: 15,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: 'gray'
   },
   name: {
     fontSize: 16
   }
 })
 
-export class ProjectList extends Component {
+export class ProjectListItem extends PureComponent {
+  onPressProject = () => {
+    const { project, onPressProject } = this.props
+    onPressProject(project)
+  }
+
+  render() {
+    return (
+      <TouchableOpacity onPress={this.onPressProject}>
+        <View style={styles.project}>
+          <Text style={styles.name}>{this.props.project.name}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
+export class ProjectList extends PureComponent {
   renderItem = ({ item }) => (
-    <TouchableOpacity onPress={() => this.props.onPressProject(item.id, item.name)}>
-      <View style={styles.project} >
-        <Text style={styles.name}>{item.name}</Text>
-      </View>
-    </TouchableOpacity>
+    <ProjectListItem
+      project={item}
+      onPressProject={this.props.onPressProject}
+    />
   )
 
   render() {
-    const { projects } = this.props
     return (
       <FlatList
-        data={projects}
+        data={this.props.projects}
         keyExtractor={item => item.id}
         renderItem={this.renderItem}
       />

components/ProjectListItem.js

@@ -0,0 +1 @@
+export const MAX_SWIPE_DISTANCE = 60

constants.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { ProjectList } from '../components/ProjectList'
 import { AddButton } from '../components/Buttons'
 import { connect } from 'react-redux'
@@ -12,6 +12,10 @@ export class Projects extends Component {
     )
   })
 
+  componentDidMount() {
+    this.props.navigation.setParams({ onRightButtonPress: this.navigateNewProject })
+  }
+
   navigateNewProject = () => {
     this.props.navigation.navigate('Project')
   }
@@ -20,15 +24,10 @@ export class Projects extends Component {
     this.props.navigation.navigate('Project', { projectId, name })
   }
 
-  componentDidMount() {
-    this.props.navigation.setParams({ onRightButtonPress: this.navigateNewProject })
-  }
-
   render() {
-    const { projects } = this.props
     return (
       <ProjectList
-        projects={projects}
+        projects={this.props.projects}
         onPressProject={this.navigateExistingProject}
       />
     )