diff --git a/app/containers/StatusModal.js b/app/containers/StatusModal.js new file mode 100644 index 00000000000..f8341b12fed --- /dev/null +++ b/app/containers/StatusModal.js @@ -0,0 +1,198 @@ +import React, { Component } from 'react'; +import { + View, Text, StyleSheet, ScrollView, TouchableHighlight +} from 'react-native'; +import PropTypes from 'prop-types'; +import Modal from 'react-native-modal'; +import { responsive } from 'react-native-responsive-ui'; + +import TextInput from './TextInput'; +import Button from './Button'; +import I18n from '../i18n'; +import sharedStyles from '../views/Styles'; +import { isIOS } from '../utils/deviceInfo'; +import { themes } from '../constants/colors'; +import { withTheme } from '../theme'; +import { withSplit } from '../split'; + +const styles = StyleSheet.create({ + modal: { + width: '100%', + alignItems: 'center', + margin: 0 + }, + titleContainer: { + flexDirection: 'row', + paddingHorizontal: 16, + paddingTop: 16 + }, + title: { + fontSize: 14, + ...sharedStyles.textBold + }, + container: { + height: 230, + flexDirection: 'column' + }, + scrollView: { + flex: 1, + padding: 16 + }, + buttonContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + padding: 16 + }, + button: { + marginBottom: 0 + }, + androidButton: { + paddingHorizontal: 15, + justifyContent: 'center', + height: 48, + borderRadius: 2 + }, + androidButtonText: { + fontSize: 18, + textAlign: 'center' + } + +}); + +class StatusModal extends Component { + static propTypes = { + isVisible: PropTypes.bool, + close: PropTypes.func, + submit: PropTypes.func, + window: PropTypes.object, + theme: PropTypes.string, + statusText: PropTypes.string, + split: PropTypes.bool + } + + state = { + statusText: '', + saving: false + }; + + componentDidMount() { + const { statusText } = this.props; + this.setState({ statusText }); + } + + shouldComponentUpdate(nextProps, nextState) { + const { statusText } = this.state; + const { + window, isVisible, split, theme + } = this.props; + + if (nextState.statusText !== statusText) { + return true; + } + if (nextProps.split !== split) { + return true; + } + if (nextProps.theme !== theme) { + return true; + } + if (nextProps.isVisible !== isVisible) { + return true; + } + if (nextProps.window.width !== window.width) { + return true; + } + return false; + } + + submit = () => { + this.setState({ saving: true }); + const { submit } = this.props; + const { statusText } = this.state; + submit(statusText); + } + + renderButtons = () => { + const { close, theme } = this.props; + const { saving } = this.state; + if (isIOS) { + return ( + +