@dokuhero/react-native-components/dist/components/PopupMessage.js

Sets of React Native components that works with dokuhero/react-native-theme and react-i18next

import * as tslib_1 from "tslib";
import { withLocaleClass } from '@dokuhero/react-18n-ts-helper';
import { withThemeClass } from '@dokuhero/react-native-theme';
import React from 'react';
import { Modal, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import { Card } from 'react-native-elements';
import { Utils } from '../utils';
import { Button } from './Button';
import { Text } from './Text';
var PopupMessage = /** @class */ (function (_super) {
    tslib_1.__extends(PopupMessage, _super);
    function PopupMessage(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            visible: props.visible
        };
        _this.hide = _this.hide.bind(_this);
        return _this;
    }
    PopupMessage.getDerivedStateFromProps = function (props, state) {
        if (props.visible === state.visible) {
            return null;
        }
        return {
            visible: props.visible
        };
    };
    PopupMessage.prototype.render = function () {
        var visible = this.state.visible;
        var _a = this
            .props, title = _a.title, message = _a.message, t = _a.t, onAccept = _a.onAccept, onClose = _a.onClose, theme = _a.theme;
        return (<Modal transparent visible={visible} onRequestClose={this.hide}>
        <TouchableWithoutFeedback onPress={this.hide}>
          <View style={{
            flex: 1,
            backgroundColor: 'rgba(0,0,0,0.4)',
            justifyContent: 'center'
        }}>
            <Card title={Utils.toUpper(title)} titleStyle={{ fontFamily: theme.fontName.bold }}>
              <View style={styles.textContainer}>
                <Text>{message}</Text>
              </View>

              <View style={styles.buttonContainer}>
                <Button containerViewStyle={styles.button} buttonStyle={{ backgroundColor: theme.color.primary }} title={t('ok')} onPress={function () {
            // TODO: add loading animation while accepting
            if (onAccept) {
                onAccept();
            }
            if (onClose) {
                onClose();
            }
        }}/>
              </View>
            </Card>
          </View>
        </TouchableWithoutFeedback>
      </Modal>);
    };
    PopupMessage.prototype.hide = function () {
        this.setState({ visible: false });
        var onClose = this.props.onClose;
        if (onClose) {
            onClose();
        }
    };
    PopupMessage = tslib_1.__decorate([
        withLocaleClass('common'),
        withThemeClass(),
        tslib_1.__metadata("design:paramtypes", [Object])
    ], PopupMessage);
    return PopupMessage;
}(React.Component));
export { PopupMessage };
var styles = StyleSheet.create({
    textContainer: {
        marginBottom: 10
    },
    buttonContainer: {
        flexDirection: 'row',
        padding: 0
    },
    button: {
        flex: 1,
        marginLeft: 0,
        marginRight: 0,
        padding: 0
    }
});
//# sourceMappingURL=PopupMessage.js.map