make separator a separate component

Purii · Aug 29, 2017 · a0c68c9 · a0c68c9
1 parent c9ef86d
commit a0c68c9
Show file tree

Hide file tree

Showing 7 changed files with 846 additions and 328 deletions.
diff --git a/README.md b/README.md
@@ -3,10 +3,10 @@
 [![npm version](http://img.shields.io/npm/v/react-native-tableview-simple.svg?style=flat)](https://www.npmjs.com/package/react-native-tableview-simple)
 [![npm](https://img.shields.io/npm/dm/react-native-tableview-simple.svg)](https://www.npmjs.com/package/react-native-tableview-simple)
 
-This cross-platform component is a copy of the iOS-TableView made with pure CSS. The intention is to provide **a flexible and lightweight alternative to a bridged component**.
+This cross-platform component is inspired by the iOS-TableView. Made with pure CSS, the intention is to provide **a flexible and lightweight alternative to a bridged component**.
 
-The focus is set on the presentation. The component is therefore not intended to render large data sets.
 A possible use case might be an about- or a settings-screen with a few rows.
+For displaying long datalists it is recommended to use the `FlatList` Component together with `Cell` and `Separator` Components. ([see example](#compatibility-with-flatlist))
 
 Have a look at the [examples below](https://github.com/Purii/react-native-tableview-simple#examples)! :-)
 
@@ -45,6 +45,8 @@ Just move your component to the folder `components` and choose a meaningful name
 Currently `TableView` doesn't support any properties.
 
 ### Section
+The Section component is needed, to render the separators and hide them, if needed.
+
 | Prop  | Default | Type | Description |
 | :------------ | :---------------:| :---------------:| ---------------|
 | allowFontScaling | `true` | `bool` | Respect Text Size accessibility setting on iOS |
@@ -141,6 +143,21 @@ const CellVariant = (props) => (
 ...
 ```
 
+### Separator
+In general the Separator component is used internally by the Section component.
+Additionally this component can be used with FlatList, as the prop `ItemSeparatorComponent`.
+See the [example below](#render-with-flatlist).
+
+| Prop  | Default | Type | Description |
+| :------------ | :---------------:| :---------------:| ---------------|
+
+| backgroundColor | `#EFEFF4` | `string` | Background color |
+| insetLeft | `15` | `number` | Left inset of separator |
+| insetRight | `0` | `number` | Right inset of separator |
+| isHidden | `false` | `bool` | Hide separator but keeping its height |
+| tintColor | `#C8C7CC` | `string` | Color of separator |
+
+
 ### CustomCell - *deprecated*
 The `CustomCell` is deprecated.
 Instead you can use the prop `cellContentView` of `Cell`.
@@ -158,6 +175,7 @@ To run the example project, follow these steps:
 * [Quick look](#quick-look)
 * [Use case: About-screen](#use-case-about-screen)
 * [Complete example / vs. native iOS](#react-native-tableview-simple-vs-native-ios)
+* [Render with `FlatList`](#render-with-flatlist)
 
 ### Quick look
 
@@ -550,3 +568,37 @@ const styles = StyleSheet.create({
 AppRegistry.registerComponent('example', () => Example);
 
 ```
+
+### Render with `FlatList`
+
+```javascript
+import React from 'react';
+import { FlatList } from 'react-native';
+
+import { Cell, Separator, TableView } from 'react-native-tableview-simple';
+
+const data = [
+  { id: 1, title: '1' },
+  { id: 2, title: '2' },
+  { id: 3, title: '3' },
+  { id: 4, title: '4' },
+];
+
+export default (ExampleWithFlatList = () =>
+  <FlatList
+    extraData={this.state}
+    data={data}
+    keyExtractor={(item, index) => item.id}
+    renderItem={({ item, separators }) =>
+      <Cell
+        title={item.title}
+        onPress={console.log}
+        onHighlightRow={separators.highlight}
+        onUnHighlightRow={separators.unhighlight}
+      />}
+    ItemSeparatorComponent={({ highlighted }) =>
+      <Separator isHidden={highlighted} />}
+  />);
+
+
+``
diff --git a/components/Section.js b/components/Section.js
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 
 import { StyleSheet, Text, View } from 'react-native';
 
+import Separator from './Separator';
+
 class Section extends Component {
   constructor(props) {
     super(props);
@@ -60,14 +62,6 @@ class Section extends Component {
         styles.sectionfooter__text,
         { color: footerTextColor },
       ],
-      separator_inner: [
-        styles.separator_inner,
-        {
-          backgroundColor: separatorTintColor,
-          marginLeft: separatorInsetLeft,
-          marginRight: separatorInsetRight,
-        },
-      ],
     };
 
     /**
@@ -95,55 +89,26 @@ class Section extends Component {
         return React.cloneElement(child, propsToAdd);
       }
 
-      // eslint-disable-next-line no-underscore-dangle
-      let _localstyles = { ..._styles };
-
-      _localstyles = {
-        ..._localstyles,
-        separator: [
-          _localstyles.separator,
-          {
-            backgroundColor: child.props.backgroundColor,
-          },
-        ],
-      };
-
-      // Add margin, if Image is provided
-      if (child.props.image) {
-        _localstyles = {
-          ..._localstyles,
-          separator_inner: [
-            _localstyles.separator_inner,
-            {
-              // Better way to priorize and keep defaultProp?
-              marginLeft: separatorInsetLeft !== 15 ? separatorInsetLeft : 60,
-            },
-          ],
-        };
-      }
-
       const invisibleSeparator =
         this.state.highlightedRowIndex === index ||
         this.state.highlightedRowIndex === index + 1;
 
-      if (invisibleSeparator) {
-        _localstyles = {
-          ..._localstyles,
-          separator_inner: [
-            _localstyles.separator_inner,
-            {
-              backgroundColor: 'transparent',
-            },
-          ],
-        };
+      // Add margin, if Image is provided
+      if (child.props.image) {
+        // Only update if not manually updated
+        const insetLeft = separatorInsetLeft !== 15 ? separatorInsetLeft : 60;
       }
 
       return (
         <View>
           {React.cloneElement(child, propsToAdd)}
-          <View style={_localstyles.separator}>
-            <View style={_localstyles.separator_inner} />
-          </View>
+          <Separator
+            isHidden={invisibleSeparator}
+            backgroundColor={child.props.backgroundColor}
+            tintColor={separatorTintColor}
+            insetLeft={separatorInsetLeft}
+            insetRight={separatorInsetRight}
+          />
         </View>
       );
     };
@@ -223,10 +188,6 @@ const styles = StyleSheet.create({
   sectionfooter__text: {
     fontSize: 13,
   },
-  separator: {},
-  separator_inner: {
-    height: StyleSheet.hairlineWidth,
-  },
 });
 
 Section.propTypes = {
@@ -254,15 +215,15 @@ Section.defaultProps = {
   headerComponent: null,
   footer: null,
   header: null,
-  headerTextColor: '#6d6d72',
+  headerTextColor: '#6D6D72',
   hideSeparator: false,
   sectionPaddingBottom: 15,
   sectionPaddingTop: 15,
   sectionTintColor: '#EFEFF4',
   footerTextColor: '#6d6d72',
   separatorInsetLeft: 15,
   separatorInsetRight: 0,
-  separatorTintColor: '#c8c7cc',
+  separatorTintColor: '#C8C7CC',
 };
 
 export default Section;
diff --git a/components/Separator.js b/components/Separator.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+export default (Separator = props => {
+  const localStyles = {
+    separator: [styles.separator, { backgroundColor: props.backgroundColor }],
+    separator_inner: [
+      styles.separator_inner,
+      {
+        backgroundColor: props.isHidden ? 'transparent' : props.tintColor,
+        marginLeft: props.insetLeft,
+        marginRight: props.insetRight,
+      },
+    ],
+  };
+
+  return (
+    <View style={localStyles.separator}>
+      <View style={localStyles.separator_inner} />
+    </View>
+  );
+});
+
+Separator.defaultProps = {
+  backgroundColor: '#FFF',
+  insetLeft: 15,
+  insetRight: 0,
+  isHidden: false,
+  tintColor: '#C8C7CC',
+};
+
+Separator.propTypes = {
+  backgroundColor: PropTypes.string,
+  insetLeft: PropTypes.number.isRequired,
+  insetRight: PropTypes.number.isRequired,
+  isHidden: PropTypes.bool,
+  tintColor: PropTypes.string.isRequired,
+};
+
+const styles = StyleSheet.create({
+  separator: {},
+  separator_inner: {
+    height: StyleSheet.hairlineWidth,
+  },
+});
diff --git a/example/exampleWithFlatList.js b/example/exampleWithFlatList.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+
+import { Cell, Separator, TableView } from 'react-native-tableview-simple';
+
+const data = [
+  { id: 1, title: '1' },
+  { id: 2, title: '2' },
+  { id: 3, title: '3' },
+  { id: 4, title: '4' },
+];
+
+export default (ExampleWithFlatList = () =>
+  <FlatList
+    extraData={this.state}
+    data={data}
+    keyExtractor={(item, index) => item.id}
+    renderItem={({ item, separators }) =>
+      <Cell
+        title={item.title}
+        onPress={console.log}
+        onHighlightRow={separators.highlight}
+        onUnHighlightRow={separators.unhighlight}
+      />}
+    ItemSeparatorComponent={({ highlighted }) =>
+      <Separator isHidden={highlighted} />}
+  />);
diff --git a/example/index.ios.js b/example/index.ios.js
@@ -18,7 +18,14 @@ import {
   View,
 } from 'react-native';
 
+/*
 import { Cell, Section, TableView } from 'react-native-tableview-simple';
+*/
+import Cell from './components/Cell';
+import Section from './components/Section';
+import TableView from './components/TableView';
+
+import ExampleWithFlatList from './exampleWithFlatList';
 
 // Example component for section:headerComponent
 const CustomSectionHeader = () =>
@@ -30,6 +37,11 @@ const CustomSectionHeader = () =>
 class Example extends Component {
   // eslint-disable-next-line class-methods-use-this
   render() {
+    /*
+     * Uncomment following line to render example with flatlist
+     */
+    // return <ExampleWithFlatList />;
+
     return (
       <ScrollView contentContainerStyle={styles.stage}>
         <TableView>

diff --git a/example/package.json b/example/package.json
@@ -7,14 +7,14 @@
 		"test": "jest"
 	},
 	"dependencies": {
-		"react": "16.0.0-alpha.6",
-		"react-native": "0.44.2",
+		"react": "16.0.0-alpha.12",
+		"react-native": "0.47.2",
 		"react-native-tableview-simple": "^0.16.9"
 	},
 	"devDependencies": {
-		"babel-jest": "20.0.1",
-		"babel-preset-react-native": "1.9.2",
-		"jest": "20.0.1",
+		"babel-jest": "20.0.3",
+		"babel-preset-react-native": "3.0.1",
+		"jest": "20.0.4",
 		"react-test-renderer": "16.0.0-alpha.6"
 	},
 	"jest": {