Add test id prop (d-a-n#48)

* add passThruProps prop for container View and options' TouchableOpacity. * may be used to pass through testId or any desired custom prop. * update README props section.
bdelville · Mar 7, 2018 · cf05b17 · cf05b17
1 parent 993509b
commit cf05b17
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -105,7 +105,7 @@ Prop                | Type     | Optional | Default      | Description
 `cancelTextStyle`   | object   | Yes      | {}           | style definitions for the cancel text element
 `cancelContainerStyle`| object | Yes      | {}           | style definitions for the cancel container
 `backdropPressToClose`| bool   | Yes  | false        | `true` makes the modal close when the overlay is pressed
+`passThruProps`| object   | Yes  | {}        | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
 `accessible`| bool   | Yes  | false        | `true` enables accessibility for modal and options. Note: data items should have an `accessibilityLabel` property if this is enabled
 `scrollViewAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the modal ScrollView
 `cancelButtonAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the cancel button
-
diff --git a/index.js b/index.js
@@ -47,6 +47,7 @@ const propTypes = {
     accessible:                     PropTypes.bool,
     scrollViewAccessibilityLabel:   PropTypes.string,
     cancelButtonAccessibilityLabel: PropTypes.string,
+    passThruProps:                  PropTypes.object,
 };
 
 const defaultProps = {
@@ -76,6 +77,7 @@ const defaultProps = {
     accessible:                     false,
     scrollViewAccessibilityLabel:   undefined,
     cancelButtonAccessibilityLabel: undefined,
+    passThruProps:                  {},
 };
 
 export default class ModalSelector extends React.Component {
@@ -129,7 +131,13 @@ export default class ModalSelector extends React.Component {
 
     renderOption = (option, isLastItem) => {
         return (
-            <TouchableOpacity key={option.key} onPress={() => this.onChange(option)} accessible={this.props.accessible} accessibilityLabel={option.accessibilityLabel || undefined}>
+            <TouchableOpacity
+              key={option.key}
+              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>
@@ -200,7 +208,7 @@ export default class ModalSelector extends React.Component {
         );
 
         return (
-            <View style={this.props.style}>
+            <View style={this.props.style} {...this.props.passThruProps}>
                 {dp}
                 <TouchableOpacity style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
                     <View style={this.props.childrenContainerStyle} pointerEvents="none">