rework the android edithome view

Author: hawkrives

source/views/home/edit/list.android.js

@@ -1,12 +1,11 @@
 // @flow
 
 import React from 'react'
-import {Dimensions, StyleSheet} from 'react-native'
+import {StyleSheet, FlatList} from 'react-native'
 
 import {saveHomescreenOrder} from '../../../flux/parts/homescreen'
 import {connect} from 'react-redux'
 import * as c from '../../components/colors'
-import fromPairs from 'lodash/fromPairs'
 import sortBy from 'lodash/sortBy'
 
 import type {ViewType} from '../../views'
@@ -22,28 +21,54 @@ const styles = StyleSheet.create({
 })
 
 type Props = {
-  onSaveOrder: (ViewType[]) => any,
+  onChangeOrder: (string[]) => any,
   order: string[],
 }
-;[]
 
-type State = {
-  width: number,
-}
-;[]
-
-class EditHomeView extends React.PureComponent<void, Props, State> {
+class EditHomeView extends React.PureComponent<void, Props, void> {
   static navigationOptions = {
     title: 'Edit Home',
   }
 
-  renderRow = ({data, active}: {data: ViewType, active: boolean}) => (
-    <EditHomeRow data={data} active={active} width={this.state.width} />
-  )
+  handleMoveUp = (currentOrder: string[], viewName: string) => {
+    const currentIndex = currentOrder.indexOf(viewName)
+    const newIndex = Math.max(0, currentIndex - 1)
+    this.onChangeOrder(currentOrder, viewName, newIndex)
+  }
+
+  handleMoveDown = (currentOrder: string[], viewName: string) => {
+    const currentIndex = currentOrder.indexOf(viewName)
+    const newIndex = Math.min(currentOrder.length - 1, currentIndex + 1)
+    this.onChangeOrder(currentOrder, viewName, newIndex)
+  }
+
+  onChangeOrder = (
+    currentOrder: string[],
+    viewName: string,
+    newIndex: number,
+  ) => {
+    const newOrder = currentOrder.filter(v => v !== viewName)
+    newOrder.splice(newIndex, 0, viewName)
+
+    this.props.onChangeOrder(newOrder)
+  }
 
-  onChangeOrder = (order: ViewType[]) => this.props.onSaveOrder(order)
+  renderItem = ({item}: {item: ViewType}) => {
+    const index = this.props.order.indexOf(item.view)
+    const last = this.props.order.length - 1
+    return (
+      <EditHomeRow
+        item={item}
+        isFirst={index === 0}
+        isLast={index === last}
+        order={this.props.order}
+        onMoveUp={this.handleMoveUp}
+        onMoveDown={this.handleMoveDown}
+      />
+    )
+  }
 
-  keyExtractor = (item: ViewType) => view.view
+  keyExtractor = (item: ViewType) => item.view
 
   render() {
     const data = sortBy(allViews, (item: ViewType) =>
@@ -53,24 +78,22 @@ class EditHomeView extends React.PureComponent<void, Props, State> {
     return (
       <FlatList
         contentContainerStyle={styles.contentContainer}
-        data={allViews}
+        data={data}
         keyExtractor={this.keyExtractor}
         onChangeOrder={this.onChangeOrder}
-        renderRow={this.renderRow}
+        renderItem={this.renderItem}
       />
     )
   }
 }
 
 function mapState(state) {
-  return {
-    order: state.homescreen.order,
-  }
+  return {order: state.homescreen.order}
 }
 
 function mapDispatch(dispatch) {
   return {
-    onSaveOrder: newOrder => dispatch(saveHomescreenOrder(newOrder)),
+    onChangeOrder: newOrder => dispatch(saveHomescreenOrder(newOrder)),
   }
 }
 

source/views/home/edit/row.android.js

@@ -2,94 +2,101 @@
 
 import React from 'react'
 import {View, StyleSheet, Text} from 'react-native'
-
-import * as c from '../../components/colors'
-
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 import IonIcon from 'react-native-vector-icons/Ionicons'
-
+import * as c from '../../components/colors'
 import {Touchable} from '../../components/touchable'
 import type {ViewType} from '../../views'
 
 const ROW_HORIZONTAL_MARGIN = 15
 const styles = StyleSheet.create({
   row: {
     flex: 1,
-
     flexDirection: 'row',
     alignItems: 'center',
-
     backgroundColor: c.white,
 
     marginVertical: 5,
     marginHorizontal: ROW_HORIZONTAL_MARGIN,
     paddingVertical: 12,
     paddingRight: 10,
-
     borderRadius: 4,
-
     elevation: 1,
   },
   icon: {
-    paddingLeft: 10,
-    paddingRight: 10,
-    color: c.black,
+    paddingHorizontal: 10,
+    color: c.androidTextColor,
   },
-  viewIcon: {
-    // marginRight: 20,
+  disabledIcon: {
+    color: c.androidDisabledIcon,
   },
   text: {
     flex: 1,
     flexShrink: 0,
     fontSize: 18,
-    color: c.white,
+    color: c.black,
   },
 })
 
 const MenuIcon = ({icon, tint}: {icon: string, tint: string}) => (
-  <EntypoIcon
-    name={icon}
-    size={32}
-    style={[styles.icon, styles.viewIcon, {color: tint}]}
-  />
+  <EntypoIcon name={icon} size={32} style={[styles.icon, {color: tint}]} />
 )
 
 type Props = {
-  data: ViewType,
-  width: number,
-  onMoveUp: string => any,
-  onMoveDown: string => any,
+  item: ViewType,
+  isFirst: boolean,
+  isLast: boolean,
+  order: string[],
+  onMoveUp: (string[], string) => any,
+  onMoveDown: (string[], string) => any,
 }
-;[]
 
 export class EditHomeRow extends React.PureComponent<void, Props, void> {
   onMoveUp = () => {
-    this.props.onMoveUp(this.props.data.view)
+    this.props.onMoveUp(this.props.order, this.props.item.view)
   }
 
   onMoveDown = () => {
-    this.props.onMoveDown(this.props.data.view)
+    this.props.onMoveDown(this.props.order, this.props.item.view)
   }
 
   render() {
-    const width = this.props.width - ROW_HORIZONTAL_MARGIN * 2
-
+    const {item, isFirst, isLast} = this.props
     return (
-      <View style={[styles.row, {width}]}>
-        <MenuIcon icon={this.props.data.icon} tint={this.props.data.tint} />
-
-        <Text style={[styles.text, {color: this.props.data.tint}]}>
-          {this.props.data.title}
-        </Text>
+      <View style={styles.row}>
+        <MenuIcon icon={this.props.item.icon} tint={item.tint} />
 
-        <Touchable onPress={this.onMoveUp}>
-          <IonIcon name="md-arrow-up" size={32} style={styles.icon} />
-        </Touchable>
+        <Text style={[styles.text, {color: item.tint}]}>{item.title}</Text>
 
-        <Touchable onPress={this.onMoveDown}>
-          <IonIcon name="md-arrow-down" size={32} style={styles.icon} />
-        </Touchable>
+        <ArrowIcon dir="up" disabled={isFirst} onPress={this.onMoveUp} />
+        <ArrowIcon dir="down" disabled={isLast} onPress={this.onMoveDown} />
       </View>
     )
   }
 }
+
+type ArrowIconProps = {
+  dir: 'up' | 'down',
+  disabled: boolean,
+  onPress: () => any,
+}
+const ArrowIcon = ({dir, disabled, onPress}: ArrowIconProps) => {
+  const icon = `md-arrow-${dir}`
+  const size = 24
+
+  if (disabled) {
+    return (
+      <IonIcon
+        name={icon}
+        size={size}
+        style={[styles.icon, styles.disabledIcon]}
+      />
+    )
+  }
+
+  return (
+    <Touchable borderless={true} onPress={onPress}>
+      <IonIcon name={icon} size={size} style={styles.icon} />
+    </Touchable>
+  )
+}