Key/Label extractors of data (#56)

* Add Key/Label extractors of data
peacechen · Mar 24, 2018 · 78eba61 · 78eba61
1 parent cf05b17
commit 78eba61
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git 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
@@ -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,24 +127,24 @@ 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>
         );
     }
 
     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}
               {...this.props.passThruProps}
             >
                 <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>);
     }