From 78eba6182008c003e61dd757e0d41b42584ab8c7 Mon Sep 17 00:00:00 2001
From: Benoit <benoit.delville@gmail.com>
Date: Sat, 24 Mar 2018 21:11:45 +1300
Subject: [PATCH] Key/Label extractors of data (#56)

* Add Key/Label extractors of data
---
 README.md | 22 ++++++++++++++++++++++
 index.js  | 14 +++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index e42e93e1..79a61fb5 100644
--- a/README.md
+++ b/README.md
@@ -78,12 +78,34 @@ class SampleApp extends Component {
 }
 ```
 
+## Data Format
+
+The selector accept a specific format of data:
+```javascript
+[{ key: 5, label: 'Red Apples' }]
+```
+
+If your data has a specific format, you can define extractors of data, example:
+```javascript
+this.setState({data: [{ id: 5, name: 'Red Apples' }]});
+
+return (
+  <ModalSelector
+     data={this.state.data}
+     keyExtractor= {(item) => item.id}
+     labelExtractor= {(item) => item.name}/>
+);
+```
+
+
 ## API
 ### Props
 Prop                | Type     | Optional | Default      | Description
 ------------------- | -------- | -------- | ------------ | -----------
 `data`              | array    | No       | []           | array of objects with a unique key and label to select in the modal.
 `onChange`          | function | Yes      | () => {}     | callback function, when the users has selected an option
+`keyExtractor       | function | Yes      | (data) => data.key   | extract the key from the data item
+`labelExtractor     | function | Yes      | (data) => data.label | extract the label from the data item
 `initValue`         | string   | Yes      | `Select me!` | text that is initially shown on the button
 `cancelText`        | string   | Yes      | `cancel`     | text of the cancel button
 `animationType`     | string   | Yes      | `slide`      | type of animation to be used to show the modal. Must be one of `none`, `slide` or `fade`.
diff --git a/index.js b/index.js
index 97e213e4..3ba439b2 100644
--- a/index.js
+++ b/index.js
@@ -23,6 +23,8 @@ let componentIndex = 0;
 const propTypes = {
     data:                           PropTypes.array,
     onChange:                       PropTypes.func,
+    keyExtractor:                   PropTypes.func,
+    labelExtractor:                 PropTypes.func,
     initValue:                      PropTypes.string,
     animationType:                  Modal.propTypes.animationType,
     style:                          ViewPropTypes.style,
@@ -53,6 +55,8 @@ const propTypes = {
 const defaultProps = {
     data:                           [],
     onChange:                       () => {},
+    keyExtractor:                   (item) => item.key,
+    labelExtractor:                 (item) => item.label,
     initValue:                      'Select me!',
     animationType:                  'slide',
     style:                          {},
@@ -104,7 +108,7 @@ export default class ModalSelector extends React.Component {
             // RN >= 0.50 on iOS comes with the onDismiss prop for Modal which solves RN issue #10471
             this.props.onChange(item);
         }
-        this.setState({selected: item.label, changedItem: item });
+        this.setState({selected: this.props.labelExtractor(item), changedItem: item });
         this.close();
     }
 
@@ -123,8 +127,8 @@ export default class ModalSelector extends React.Component {
 
     renderSection = (section) => {
         return (
-            <View key={section.key} style={[styles.sectionStyle,this.props.sectionStyle]}>
-                <Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{section.label}</Text>
+            <View key={this.props.keyExtractor(section)} style={[styles.sectionStyle,this.props.sectionStyle]}>
+                <Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{this.props.labelExtractor(section)}</Text>
             </View>
         );
     }
@@ -132,7 +136,7 @@ export default class ModalSelector extends React.Component {
     renderOption = (option, isLastItem) => {
         return (
             <TouchableOpacity
-              key={option.key}
+              key={this.props.keyExtractor(option)}
               onPress={() => this.onChange(option)}
               accessible={this.props.accessible}
               accessibilityLabel={option.accessibilityLabel || undefined}
@@ -140,7 +144,7 @@ export default class ModalSelector extends React.Component {
             >
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
                 {borderBottomWidth: 0}]}>
-                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
+                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{this.props.labelExtractor(option)}</Text>
                 </View>
             </TouchableOpacity>);
     }