Add ability to pass extra props to Cancel button text in modal (#149)

peacechen · Aug 19, 2020 · e65e933 · e65e933
1 parent f47fbe2
commit e65e933
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -173,6 +173,7 @@ Prop                | Type     | Optional | Default      | Description
 `passThruProps`| object   | Yes  | {}        | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
 `selectTextPassThruProps`| object   | Yes  | {}        | props to pass through to the select text component
 `optionTextPassThruProps`| object   | Yes  | {}        | props to pass through to the options text components in the modal
+`cancelTextPassThruProps`| object   | Yes  | {}        | props to pass through to the cancel text components in the modal
 `scrollViewPassThruProps`| object   | Yes  | {}        | props to pass through to the internal ScrollView
 `openButtonContainerAccessible`| bool   | Yes  | false        | `true` enables accessibility for the open button container. Note: if `false` be sure to define accessibility props directly in the wrapped component.
 `listItemAccessible`| bool   | Yes  | false        | `true` enables accessibility for data items. Note: data items should have an `accessibilityLabel` property if this is enabled

diff --git a/index.d.ts b/index.d.ts
@@ -308,6 +308,13 @@ interface IModalSelectorProps<TOption> {
    */
   optionTextPassThruProps?: object;
 
+  /**
+   * props to pass through to the cancel text components in the modal
+   *
+   * Default is `{}`
+   */
+  cancelTextPassThruProps?: object;
+
   /**
    * props to pass through to the internal ScrollView
    *

diff --git a/index.js b/index.js
@@ -69,6 +69,7 @@ const propTypes = {
     passThruProps:                  PropTypes.object,
     selectTextPassThruProps:        PropTypes.object,
     optionTextPassThruProps:        PropTypes.object,
+    cancelTextPassThruProps:        PropTypes.object,
     scrollViewPassThruProps:        PropTypes.object,
     modalOpenerHitSlop:             PropTypes.object,
     customSelector:                 PropTypes.node,
@@ -121,6 +122,7 @@ const defaultProps = {
     passThruProps:                  {},
     selectTextPassThruProps:        {},
     optionTextPassThruProps:        {},
+    cancelTextPassThruProps:        {},
     scrollViewPassThruProps:        {},
     modalOpenerHitSlop:             {top: 0, bottom: 0, left: 0, right: 0},
     customSelector:                 undefined,
@@ -309,7 +311,7 @@ export default class ModalSelector extends React.Component {
                     <View style={[styles.cancelContainer, cancelContainerStyle]}>
                         <TouchableOpacity onPress={this.close} activeOpacity={touchableActiveOpacity} accessible={cancelButtonAccessible} accessibilityLabel={cancelButtonAccessibilityLabel}>
                             <View style={[styles.cancelStyle, cancelStyle]}>
-                                <Text style={[styles.cancelTextStyle,cancelTextStyle]}>{cancelText}</Text>
+                                <Text style={[styles.cancelTextStyle,cancelTextStyle]} {...this.props.cancelTextPassThruProps}>{cancelText}</Text>
                             </View>
                         </TouchableOpacity>
                     </View>