Add visible prop to control open/close state of modal.

See #46
peacechen · Apr 10, 2018 · e8d0fd2 · e8d0fd2
1 parent 3f20c37
commit e8d0fd2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -109,6 +109,7 @@ Prop                | Type     | Optional | Default      | Description
 `onModalClose`      | function | Yes      | () => {}     | callback function, when modal is closing
 `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
+`visible`           | bool     | Yes      | false        | control open/close state of modal
 `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
@@ -27,6 +27,7 @@ const propTypes = {
     onModalClose:                   PropTypes.func,
     keyExtractor:                   PropTypes.func,
     labelExtractor:                 PropTypes.func,
+    visible:                        PropTypes.bool,
     initValue:                      PropTypes.string,
     animationType:                  Modal.propTypes.animationType,
     style:                          ViewPropTypes.style,
@@ -62,6 +63,7 @@ const defaultProps = {
     onModalClose:                   () => {},
     keyExtractor:                   (item) => item.key,
     labelExtractor:                 (item) => item.label,
+    visible:                        false,
     initValue:                      'Select me!',
     animationType:                  'slide',
     style:                          {},
@@ -96,16 +98,26 @@ export default class ModalSelector extends React.Component {
         super(props);
 
         this.state = {
-            modalVisible:  false,
+            modalVisible:  props.visible,
             selected:      props.initValue,
             cancelText:    props.cancelText,
             changedItem:   undefined,
         };
     }
 
     componentDidUpdate(prevProps, prevState) {
+        let newState = {};
+        let doUpdate = false;
         if (prevProps.initValue !== this.props.initValue) {
-            this.setState({selected: this.props.initValue});
+            newState.selected = this.props.initValue;
+            doUpdate = true;
+        }
+        if (prevProps.visible !== this.props.visible) {
+            newState.modalVisible = this.props.visible;
+            doUpdate = true;
+        }
+        if (doUpdate) {
+            this.setState(newState);
         }
     }