Merge branch 'stateful-list-split' into split-building-hours-helpers

Author: hawkrives

source/views/building-hours/detail/schedule-row.android.js

@@ -12,21 +12,21 @@ import {formatBuildingTimes, summarizeDays} from '../lib'
 
 export class ScheduleRow extends React.PureComponent {
   props: {
-    schedule: SingleBuildingScheduleType,
+    set: SingleBuildingScheduleType,
     isActive: boolean,
     now: moment,
   }
 
   render() {
-    const {schedule, isActive, now} = this.props
+    const {set, isActive, now} = this.props
     return (
       <View style={styles.scheduleRow}>
         <StyledText style={[styles.scheduleDays, isActive && styles.bold]}>
-          {summarizeDays(schedule.days)}
+          {summarizeDays(set.days)}
         </StyledText>
 
         <StyledText style={[styles.scheduleHours, isActive && styles.bold]}>
-          {formatBuildingTimes(schedule, now)}
+          {formatBuildingTimes(set, now)}
         </StyledText>
       </View>
     )

source/views/building-hours/detail/schedule-row.ios.js

@@ -13,19 +13,19 @@ import {formatBuildingTimes, summarizeDays} from '../lib'
 
 export class ScheduleRow extends React.PureComponent {
   props: {
-    schedule: SingleBuildingScheduleType,
+    set: SingleBuildingScheduleType,
     isActive: boolean,
     now: moment,
   }
 
   render() {
-    const {schedule, isActive, now} = this.props
+    const {set, isActive, now} = this.props
     return (
       <Cell
         cellStyle="RightDetail"
-        title={summarizeDays(schedule.days)}
+        title={summarizeDays(set.days)}
         titleTextStyle={isActive ? styles.bold : null}
-        detail={formatBuildingTimes(schedule, now)}
+        detail={formatBuildingTimes(set, now)}
         detailTextStyle={isActive ? styles.bold : null}
       />
     )

source/views/building-hours/detail/schedule-table.android.js

@@ -24,22 +24,22 @@ export class ScheduleTable extends React.PureComponent {
 
     return (
       <View>
-        {schedules.map(set =>
+        {schedules.map(schedule =>
           <Card
-            key={set.title}
+            key={schedule.title}
             style={styles.scheduleContainer}
-            header={set.title}
-            footer={set.notes}
+            header={schedule.title}
+            footer={schedule.notes}
           >
-            {set.hours.map((schedule, i) =>
+            {schedule.hours.map((set, i) =>
               <ScheduleRow
                 key={i}
                 now={now}
-                schedule={schedule}
+                set={set}
                 isActive={
-                  set.isPhysicallyOpen !== false &&
-                  schedule.days.includes(dayOfWeek) &&
-                  isScheduleOpenAtMoment(schedule, this.state.now)
+                  schedule.isPhysicallyOpen !== false &&
+                  set.days.includes(dayOfWeek) &&
+                  isBuildingOpenAtMoment(set, this.state.now)
                 }
               />,
             )}

source/views/building-hours/detail/schedule-table.ios.js

@@ -23,34 +23,34 @@ export class ScheduleTable extends React.PureComponent {
 
     return (
       <TableView>
-        <Section>
-          <Cell
-            accessory="DisclosureIndicator"
-            title="Suggest an Edit"
-            onPress={onProblemReport}
-          />
-        </Section>
-
-        {schedules.map(set =>
+        {schedules.map(schedule =>
           <Section
-            key={set.title}
-            header={set.title.toUpperCase()}
-            footer={set.notes}
+            key={schedule.title}
+            header={schedule.title.toUpperCase()}
+            footer={schedule.notes}
           >
-            {set.hours.map((schedule, i) =>
+            {schedule.hours.map((set, i) =>
               <ScheduleRow
                 key={i}
                 now={now}
-                schedule={schedule}
+                set={set}
                 isActive={
-                  set.isPhysicallyOpen !== false &&
-                  schedule.days.includes(dayOfWeek) &&
-                  isScheduleOpenAtMoment(schedule, now)
+                  schedule.isPhysicallyOpen !== false &&
+                  set.days.includes(dayOfWeek) &&
+                  isBuildingOpenAtMoment(set, now)
                 }
               />,
             )}
           </Section>,
         )}
+        
+        <Section>
+          <Cell
+            accessory="DisclosureIndicator"
+            title="Suggest an Edit"
+            onPress={onProblemReport}
+          />
+        </Section>
       </TableView>
     )
   }

source/views/components/__tests__/__snapshots__/cell-toggle.test.js.snap renamed to source/views/components/cells/__tests__/__snapshots__/toggle.test.js.snap

@@ -4,7 +4,7 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 
-import {CellToggle} from '../cell-toggle'
+import {CellToggle} from '../toggle'
 import noop from 'lodash/noop'
 
 test('renders', () => {

source/views/components/__tests__/cell-toggle.test.js renamed to source/views/components/cells/__tests__/toggle.test.js

@@ -0,0 +1,48 @@
+// @flow
+
+import React from 'react'
+import {StyleSheet, Text} from 'react-native'
+import {Cell} from 'react-native-tableview-simple'
+import * as c from '../../components/colors'
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'left',
+  },
+  active: {
+    color: c.infoBlue,
+  },
+  disabled: {
+    color: c.iosDisabledText,
+  },
+})
+
+export function ButtonCell({
+  indeterminate,
+  disabled,
+  onPress,
+  title,
+}: {
+  indeterminate?: boolean,
+  disabled?: boolean,
+  onPress: () => any,
+  title: string,
+}) {
+  return (
+    <Cell
+      titleTextStyle={styles.title}
+      isDisabled={indeterminate || disabled}
+      onPress={onPress}
+      title={
+        <Text
+          style={[
+            styles.text,
+            indeterminate || disabled ? styles.disabled : styles.active,
+          ]}
+        >
+          {title}
+        </Text>
+      }
+    />
+  )
+}

source/views/components/cells/button.js

@@ -0,0 +1,34 @@
+// @flow
+
+import React from 'react'
+import {StyleSheet, Alert} from 'react-native'
+import {Cell} from 'react-native-tableview-simple'
+import * as c from '../colors'
+
+const deleteStyles = StyleSheet.create({
+  text: {textAlign: 'center', color: c.red},
+})
+
+export const DeleteButtonCell = ({
+  title,
+  skipConfirm = false,
+  onPress,
+}: {
+  title: string,
+  skipConfirm?: boolean,
+  onPress?: () => any,
+}) => {
+  const onPressCallback = onPress ? onPress : () => {}
+
+  const callback = !skipConfirm
+    ? () =>
+        Alert.alert(title, 'Are you sure you want to delete this?', [
+          {text: 'Cancel', onPress: () => {}, style: 'cancel'},
+          {text: 'Delete', onPress: onPressCallback, style: 'destructive'},
+        ])
+    : onPressCallback
+
+  return (
+    <Cell title={title} titleTextStyle={deleteStyles.text} onPress={callback} />
+  )
+}

source/views/components/cells/delete-button.js

@@ -0,0 +1,99 @@
+// @flow
+import React from 'react'
+import {StyleSheet, Text, Platform, TextInput} from 'react-native'
+import {Cell} from 'react-native-tableview-simple'
+import {Row} from '../../components/layout'
+import * as c from '../../components/colors'
+
+const styles = StyleSheet.create({
+  label: {
+    width: 90,
+    fontSize: 16,
+    marginTop: Platform.OS === 'ios' ? -2 : 0, // lines the label up with the text on iOS
+    alignSelf: 'center',
+  },
+  hiddenLabel: {
+    width: 0,
+  },
+  customTextInput: {
+    flex: 1,
+  },
+  loginCell: {
+    height: Platform.OS === 'android' ? 65 : 44,
+    alignItems: 'stretch',
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+})
+
+export class CellTextField extends React.Component {
+  static defaultProps = {
+    disabled: false,
+    placeholder: '',
+    _ref: () => {},
+    returnKeyType: 'default',
+    secureTextEntry: false,
+  }
+
+  props: {
+    label?: string,
+    _ref: () => any,
+    disabled: boolean,
+    onChangeText: string => any,
+    onSubmitEditing: string => any,
+    placeholder: string,
+    returnKeyType: 'done' | 'next' | 'default',
+    secureTextEntry: boolean,
+    value: string,
+    labelWidth?: number,
+  }
+
+  _input: any
+  focusInput = () => this._input.focus()
+
+  cacheRef = (ref: any) => {
+    this._input = ref
+    this.props._ref(ref)
+  }
+
+  onSubmit = () => {
+    this.props.onSubmitEditing(this.props.value)
+  }
+
+  render() {
+    const labelWidthStyle = this.props.labelWidth !== null &&
+      this.props.labelWidth !== undefined
+      ? {width: this.props.labelWidth}
+      : null
+
+    const label = this.props.label
+      ? <Text onPress={this.focusInput} style={[styles.label, labelWidthStyle]}>
+          {this.props.label}
+        </Text>
+      : <Text style={styles.hiddenLabel} />
+
+    return (
+      <Cell
+        contentContainerStyle={styles.loginCell}
+        cellContentView={label}
+        cellAccessoryView={
+          <TextInput
+            ref={this.cacheRef}
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            disabled={this.props.disabled}
+            onChangeText={this.props.onChangeText}
+            onSubmitEditing={this.onSubmit}
+            placeholder={this.props.placeholder}
+            placeholderTextColor={c.iosPlaceholderText}
+            returnKeyType={this.props.returnKeyType}
+            secureTextEntry={this.props.secureTextEntry}
+            style={[styles.customTextInput]}
+            value={this.props.value}
+          />
+        }
+      />
+    )
+  }
+}