diff --git a/README.md b/README.md index b1c1e1b4..7de82ce3 100644 --- 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 index c42c72a5..dcbc0c5e 100644 --- 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,7 +98,7 @@ export default class ModalSelector extends React.Component { super(props); this.state = { - modalVisible: false, + modalVisible: props.visible, selected: props.initValue, cancelText: props.cancelText, changedItem: undefined, @@ -104,8 +106,18 @@ export default class ModalSelector extends React.Component { } 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); } }