Merge pull request #1170 from StoDevX/extract-components

Extract custom Cell-based components

Author: hawkrives

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}
+          />
+        }
+      />
+    )
+  }
+}

source/views/settings/components/push-button.js renamed to source/views/components/cells/push-button.js

@@ -2,7 +2,7 @@
 import React from 'react'
 import type {ToggleType} from './types'
 import {Section} from 'react-native-tableview-simple'
-import {CellToggle} from '../../components/cell-toggle'
+import {CellToggle} from '../../components/cells/toggle'
 
 type PropsType = {
   filter: ToggleType,

source/views/components/cells/textfield.js

@@ -14,13 +14,15 @@ type PropsType = {
   children?: any,
   borderless?: boolean,
   style?: any,
+  containerStyle?: any,
 }
 export const Touchable = ({
   children,
   style,
   highlight = true,
   borderless = false,
   onPress = () => {},
+  containerStyle,
   ...props
 }: PropsType) => {
   // The child <View> is required; the Touchable needs a View as its direct child.
@@ -34,7 +36,12 @@ export const Touchable = ({
         ? {underlayColor: '#d9d9d9'}
         : {activeOpacity: 0.65}
       return (
-        <Component onPress={onPress} {...innerProps} {...props}>
+        <Component
+          onPress={onPress}
+          {...innerProps}
+          style={containerStyle}
+          {...props}
+        >
           {content}
         </Component>
       )
@@ -48,6 +55,7 @@ export const Touchable = ({
         <TouchableNativeFeedback
           onPress={onPress}
           background={background}
+          style={containerStyle}
           {...props}
         >
           {content}

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

@@ -1,23 +1,7 @@
 // @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({
-  button: {
-    justifyContent: 'flex-start',
-  },
-  text: {
-    fontSize: 16,
-  },
-  active: {
-    color: c.infoBlue,
-  },
-  disabled: {
-    color: c.iosDisabledText,
-  },
-})
+import React from 'react'
+import {ButtonCell} from '../../components/cells/button'
 
 export function LoginButton({
   loading,
@@ -32,22 +16,16 @@ export function LoginButton({
   onPress: () => any,
   label: string,
 }) {
-  let loginTextStyle = loading || disabled ? styles.disabled : styles.active
-
-  const contents = (
-    <Text style={[styles.text, loginTextStyle]}>
-      {loading
-        ? `Logging in to ${label}…`
-        : loggedIn ? `Sign Out of ${label}` : `Sign In to ${label}`}
-    </Text>
-  )
-
   return (
-    <Cell
-      contentContainerStyle={styles.button}
-      isDisabled={loading || disabled}
+    <ButtonCell
+      disabled={loading || disabled}
+      indeterminate={loading}
       onPress={onPress}
-      title={contents}
+      title={
+        loading
+          ? `Logging in to ${label}…`
+          : loggedIn ? `Sign Out of ${label}` : `Sign In to ${label}`
+      }
     />
   )
 }