fix #17

Purii · Dec 6, 2016 · cfd5a71 · cfd5a71
1 parent 8b803c7
commit cfd5a71
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 109 deletions.
diff --git a/components/Cell.js b/components/Cell.js
@@ -9,7 +9,6 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-/* eslint-enable import/no-unresolved */
 
 const Cell = (props) => {
   const {
@@ -23,13 +22,16 @@ const Cell = (props) => {
     highlightActiveOpacity,
     highlightUnderlayColor,
     isDisabled,
+    onPress,
+    onHighlightRow,
+    onUnHighlightRow,
     leftDetailColor,
     rightDetailColor,
     title,
     titleTextColor,
   } = props;
 
-  const isPressable = !!props.onPress;
+  const isPressable = !!onPress;
 
   /**
     * Merge styles with props
@@ -229,8 +231,10 @@ const Cell = (props) => {
       return (
         <TouchableHighlight
           activeOpacity={highlightActiveOpacity}
-          onPress={props.onPress}
+          onPress={onPress}
           underlayColor={highlightUnderlayColor}
+          onPressIn={onHighlightRow}
+          onPressOut={onUnHighlightRow}
         >
           {cellToRender()}
         </TouchableHighlight>
@@ -357,6 +361,8 @@ Cell.propTypes = {
   highlightUnderlayColor: PropTypes.string,
   isDisabled: PropTypes.bool,
   leftDetailColor: PropTypes.string,
+  onHighlightRow: PropTypes.func,
+  onUnHighlightRow: PropTypes.func,
   rightDetailColor: PropTypes.string,
   title: PropTypes.oneOfType([
     PropTypes.string,

diff --git a/components/CustomCell.js b/components/CustomCell.js
@@ -8,7 +8,6 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-/* eslint-enable import/no-unresolved */
 
 const CustomCell = (props) => {
   const {
@@ -18,6 +17,8 @@ const CustomCell = (props) => {
     highlightUnderlayColor,
     isDisabled,
     onPress,
+    onHighlightRow,
+    onUnHighlightRow,
   } = props;
 
   const isPressable = !!onPress;
@@ -39,6 +40,8 @@ const CustomCell = (props) => {
       <TouchableHighlight
         activeOpacity={highlightActiveOpacity}
         onPress={onPress}
+        onPressIn={onHighlightRow}
+        onPressOut={onUnHighlightRow}
         underlayColor={highlightUnderlayColor}
       >
         <View style={_styles.cell}>{children}</View>
@@ -74,6 +77,8 @@ CustomCell.propTypes = {
     PropTypes.bool,
     PropTypes.func,
   ]),
+  onHighlightRow: PropTypes.func,
+  onUnHighlightRow: PropTypes.func,
 };
 
 CustomCell.defaultProps = {

diff --git a/components/Section.js b/components/Section.js
@@ -1,5 +1,6 @@
 /* eslint-disable import/no-unresolved */
 import React, {
+  Component,
   PropTypes,
 } from 'react';
 
@@ -8,124 +9,165 @@ import {
   Text,
   View,
 } from 'react-native';
-/* eslint-enable import/no-unresolved */
 
-const Section = (props) => {
-  /** Deprecation messages */
-  // eslint-disable-next-line
-  if (props.footerTintColor) {
-    console.warn('`<Section footerTintColor="..."/>` is deprecated. Use `<Section footerTextColor="..."/>` instead.');
-  }
-  // eslint-disable-next-line
-  if (props.headerTintColor) {
-    console.warn('`<Section headerTintColor="..."/>` is deprecated. Use `<Section headerTextColor="..."/>` instead.');
+class Section extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlightedRowIndex: undefined,
+    };
+
+    this.handleHighlightRow = index => !this.state.highlightedRowIndex && this.setState({ highlightedRowIndex: index });
+    this.handleUnHighlightRow = () => this.setState({ highlightedRowIndex: undefined });
   }
+  render() {
+    const {
+      allowFontScaling,
+      children,
+      footerComponent,
+      headerComponent,
+      headerTextColor,
+      hideSeparator,
+      footerTextColor,
+      sectionTintColor,
+      separatorInsetLeft,
+      separatorInsetRight,
+      separatorTintColor,
+    } = this.props;
+
+    const header = this.props.header ? this.props.header : false;
+    const footer = this.props.footer ? this.props.footer : false;
+
+    /**
+     * Merge styles with props
+     */
+    // eslint-disable-next-line no-underscore-dangle
+    const _styles = {
+      section: [
+        ...{},
+        styles.section,
+        { backgroundColor: sectionTintColor },
+      ],
+      sectionheader__text: [
+        ...{},
+        styles.sectionheader__text,
+        { color: headerTextColor },
+      ],
+      sectionfooter__text: [
+        ...{},
+        styles.sectionfooter__text,
+        { color: footerTextColor },
+      ],
+      separator_inner: [
+        ...{},
+        styles.separator_inner,
+        {
+          backgroundColor: separatorTintColor,
+          marginLeft: separatorInsetLeft,
+          marginRight: separatorInsetRight,
+        },
+      ],
+    };
 
-  const {
-    allowFontScaling,
-    children,
-    headerTextColor,
-    hideSeparator,
-    footerTextColor,
-    sectionTintColor,
-    separatorInsetLeft,
-    separatorInsetRight,
-    separatorTintColor,
-  } = props;
-  const header = props.header ? props.header : false;
-  const footer = props.footer ? props.footer : false;
-
-  /* Declare and merge styles with props */
-  const styleSection = [...{}, styles.section, { backgroundColor: sectionTintColor }];
-  const styleSectionHeader__text = [...{}, styles.sectionheader__text, { color: headerTextColor }];
-  const styleSectionFooter__text = [...{}, styles.sectionfooter__text, { color: footerTextColor }];
-  const styleSeparatorInner = [...{}, styles.separator_inner, {
-    backgroundColor: separatorTintColor,
-    marginLeft: separatorInsetLeft,
-    marginRight: separatorInsetRight,
-  }];
-
-  /**
-   * Render Cell and add Border
-   * @param  {Cell} child [description]
-   * @param  {Int} index [description]
-   * @return {View}       [description]
-   */
-  const renderChild = (child, index) => {
-    if (children.length > 0 && index < children.length - 1) {
-      const styleSeparator = [
+    /**
+     * Render Cell and add Border
+     * @param  {Cell} child [description]
+     * @param  {Int} index [description]
+     * @return {View}       [description]
+     */
+    const renderChild = (child, index) => {
+      const propsToAdd = {
+        onHighlightRow: () => this.handleHighlightRow(index),
+        onUnHighlightRow: this.handleUnHighlightRow,
+      };
+
+      // Skip rendering of separator
+      if (hideSeparator || children.length === 1 || index === children.length - 1) {
+        return React.cloneElement(child, propsToAdd);
+      }
+
+      _styles.separator = [
         ...{},
         styles.separator,
-        { backgroundColor: child.props.backgroundColor },
+        {
+          backgroundColor: child.props.backgroundColor,
+        },
       ];
-      const renderSeparator = () => {
-        if (hideSeparator) { return null; }
-        return (
-          <View style={styleSeparator}>
-            <View style={styleSeparatorInner} />
-          </View>
-        );
-      };
+
+      const invisibleSeparator = this.state.highlightedRowIndex === index || this.state.highlightedRowIndex === index + 1;
+
+      if (invisibleSeparator) {
+        _styles.separator_inner = [
+          ...{},
+          _styles.separator_inner,
+          {
+            backgroundColor: 'transparent',
+          },
+        ];
+      }
 
       return (
         <View>
-          {child}
-          {renderSeparator()}
-        </View>
-      );
-    }
-    return child;
-  };
-
-  /**
-   * Render header if defined
-   * @return {View} View with Text
-   */
-  const renderHeader = () => {
-    if (header) {
-      return (
-        <View style={styles.sectionheader}>
-          <Text
-            allowFontScaling={allowFontScaling}
-            style={styleSectionHeader__text}
-          >
-            {header}
-          </Text>
+          {React.cloneElement(child, propsToAdd)}
+          <View style={_styles.separator}>
+            <View style={_styles.separator_inner} />
+          </View>
         </View>
       );
-    }
-    return null;
-  };
-
-  /**
-   * Render footer if defined
-   * @return {View} View with Text
-   */
-  const renderFooter = () => {
-    if (footer) {
-      return (
-        <View style={styles.sectionfooter}>
-          <Text
-            allowFontScaling={allowFontScaling}
-            style={styleSectionFooter__text}
-          >
-            {footer}
-          </Text>
+    };
+
+    /**
+     * Render header if defined
+     * @return {View} View with Text
+     */
+    const renderHeader = () => {
+      if (header) {
+        return (
+          <View style={styles.sectionheader}>
+            <Text
+              allowFontScaling={allowFontScaling}
+              style={_styles.sectionheader__text}
+            >
+              {header}
+            </Text>
+          </View>
+        );
+      }
+      return undefined;
+    };
+
+    /**
+     * Render footer if defined
+     * @return {View} View with Text
+     */
+    const renderFooter = () => {
+      if (footer) {
+        return (
+          <View style={styles.sectionfooter}>
+            <Text
+              allowFontScaling={allowFontScaling}
+              style={_styles.sectionfooter__text}
+            >
+              {footer}
+            </Text>
+          </View>
+        );
+      }
+      return undefined;
+    };
+
+    return (
+      <View style={_styles.section}>
+        {headerComponent || renderHeader()}
+        <View style={styles.section_inner}>
+          {React.Children.map(children, renderChild)}
         </View>
-      );
-    }
-    return null;
-  };
-  return (
-    <View style={styleSection}>
-      {props.headerComponent || renderHeader()}
-      <View style={styles.section_inner}>
-        {React.Children.map(children, renderChild)}
+        {footerComponent || renderFooter()}
       </View>
-      {props.footerComponent || renderFooter()}
-    </View>
-  );
-};
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   section: {