split row and list into {ios,android} pairs

Author: hawkrives

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

@@ -0,0 +1,79 @@
+// @flow
+
+import React from 'react'
+import {Dimensions, StyleSheet} 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'
+import {allViews} from '../../views'
+import {EditHomeRow} from './row'
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    backgroundColor: c.androidLightBackground,
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+})
+
+type Props = {
+  onSaveOrder: (ViewType[]) => any,
+  order: string[],
+}
+;[]
+
+type State = {
+  width: number,
+}
+;[]
+
+class EditHomeView extends React.PureComponent<void, Props, State> {
+  static navigationOptions = {
+    title: 'Edit Home',
+  }
+
+  renderRow = ({data, active}: {data: ViewType, active: boolean}) => (
+    <EditHomeRow data={data} active={active} width={this.state.width} />
+  )
+
+  onChangeOrder = (order: ViewType[]) => this.props.onSaveOrder(order)
+
+  keyExtractor = (item: ViewType) => view.view
+
+  render() {
+    const data = sortBy(allViews, (item: ViewType) =>
+      this.props.order.indexOf(item.view),
+    )
+
+    return (
+      <FlatList
+        contentContainerStyle={styles.contentContainer}
+        data={allViews}
+        keyExtractor={this.keyExtractor}
+        onChangeOrder={this.onChangeOrder}
+        renderRow={this.renderRow}
+      />
+    )
+  }
+}
+
+function mapState(state) {
+  return {
+    order: state.homescreen.order,
+  }
+}
+
+function mapDispatch(dispatch) {
+  return {
+    onSaveOrder: newOrder => dispatch(saveHomescreenOrder(newOrder)),
+  }
+}
+
+export const ConnectedEditHomeView = connect(mapState, mapDispatch)(
+  EditHomeView,
+)

source/views/home/edit/list.js renamed to source/views/home/edit/list.ios.js

@@ -30,6 +30,7 @@ type Props = {
   onSaveOrder: (ViewType[]) => any,
   order: string[],
 }
+
 type State = {
   width: number,
 }

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

@@ -0,0 +1,95 @@
+// @flow
+
+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 {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,
+  },
+  viewIcon: {
+    // marginRight: 20,
+  },
+  text: {
+    flex: 1,
+    flexShrink: 0,
+    fontSize: 18,
+    color: c.white,
+  },
+})
+
+const MenuIcon = ({icon, tint}: {icon: string, tint: string}) => (
+  <EntypoIcon
+    name={icon}
+    size={32}
+    style={[styles.icon, styles.viewIcon, {color: tint}]}
+  />
+)
+
+type Props = {
+  data: ViewType,
+  width: number,
+  onMoveUp: string => any,
+  onMoveDown: string => any,
+}
+;[]
+
+export class EditHomeRow extends React.PureComponent<void, Props, void> {
+  onMoveUp = () => {
+    this.props.onMoveUp(this.props.data.view)
+  }
+
+  onMoveDown = () => {
+    this.props.onMoveDown(this.props.data.view)
+  }
+
+  render() {
+    const width = this.props.width - ROW_HORIZONTAL_MARGIN * 2
+
+    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>
+
+        <Touchable onPress={this.onMoveUp}>
+          <IonIcon name="md-arrow-up" size={32} style={styles.icon} />
+        </Touchable>
+
+        <Touchable onPress={this.onMoveDown}>
+          <IonIcon name="md-arrow-down" size={32} style={styles.icon} />
+        </Touchable>
+      </View>
+    )
+  }
+}

source/views/home/edit/row.js renamed to source/views/home/edit/row.ios.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react'
-import {Animated, Easing, StyleSheet, Text, Platform} from 'react-native'
+import {Animated, Easing, StyleSheet, Text} from 'react-native'
 
 import * as c from '../../components/colors'
 
@@ -46,14 +46,6 @@ const styles = StyleSheet.create({
   },
 })
 
-const reorderIcon = (
-  <IonIcon
-    name={Platform.OS === 'ios' ? 'ios-reorder' : 'md-reorder'}
-    size={32}
-    style={[styles.icon]}
-  />
-)
-
 const MenuIcon = ({icon, tint}: {icon: string, tint: string}) => (
   <EntypoIcon
     name={icon}
@@ -173,10 +165,12 @@ export class EditHomeRow extends React.Component<void, Props, State> {
     return (
       <Animated.View style={[styles.row, this.state.style, {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>
-        {reorderIcon}
+
+        <IonIcon name="ios-reorder" size={32} style={[styles.icon]} />
       </Animated.View>
     )
   }