react-native-network-toast
Version:
Network toast for react native screens
192 lines • 7.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_native_1 = require("react-native");
const netinfo_1 = require("@react-native-community/netinfo");
exports.withNetwork = (incomingArgs = {}) => (WrappedComponent) => class C extends React.PureComponent {
constructor(props) {
super(props);
this._setOnRetryBtn = (onRetry) => {
this.setState({
onRetry,
});
};
this._getModalStatus = () => this.state.modalVisible;
this._showToast = () => {
const { position, positionOffset } = incomingArgs;
let customValue = 0;
if (position) {
customValue = position === 'top' ? 30 : 0;
}
if (positionOffset) {
customValue = positionOffset;
}
this.setState({
modalVisible: true,
});
react_native_1.Animated.timing(this.state.positionValue, {
toValue: customValue,
duration: 400,
}).start();
};
this._hideToast = () => {
if (this._getModalStatus()) {
react_native_1.Animated.timing(this.state.positionValue, {
toValue: -100,
duration: 400,
}).start(this._closeModal.bind(this));
}
};
this._closeModal = () => {
this.setState({
modalVisible: false,
});
const { onRetry } = this.state;
if (onRetry && typeof onRetry === 'function') {
onRetry();
}
};
this._handleRetryButton = () => {
const { connected } = this.state;
if (!connected) {
return;
}
this._hideToast();
};
this._getMessageText = () => {
const { messageText } = incomingArgs;
const { message } = this.state;
if (!messageText) {
return message;
}
return messageText;
};
this._getButtonText = () => {
const { buttonText } = incomingArgs;
if (!buttonText || typeof buttonText !== 'string') {
return this.state.buttonText;
}
return buttonText.toUpperCase();
};
this._getContainerStyle = () => {
const { positionValue } = this.state;
let incomingArg = 'bottom';
const { position } = incomingArgs;
if (position) {
incomingArg = position;
}
return Object.assign({}, styles.defaultContainerStyle, { bottom: incomingArg === 'top' ? undefined : positionValue, top: incomingArg === 'top' ? positionValue : undefined });
};
this._getToastStyles = () => {
const { containerStyles } = incomingArgs;
let incomingStyles = {};
if (containerStyles) {
incomingStyles = containerStyles;
}
return Object.assign({}, styles.defaultToastStyle, incomingStyles);
};
this._getMessageTextStyles = () => {
const { messageStyles } = incomingArgs;
let incomingStyles = {};
if (messageStyles) {
incomingStyles = messageStyles;
}
return Object.assign({}, styles.messageText, incomingStyles);
};
this._getButtonStyles = () => {
const { buttonStyles } = incomingArgs;
let incomingStyles = {};
if (buttonStyles) {
incomingStyles = buttonStyles;
}
return Object.assign({}, styles.defaultButtonStyle, incomingStyles);
};
this._getButtonTextStyles = () => {
const { buttonTextStyles } = incomingArgs;
let incomingStyles = {};
if (buttonTextStyles) {
incomingStyles = buttonTextStyles;
}
return Object.assign({}, styles.defaultButtonTextStyle, incomingStyles);
};
this.state = {
connected: true,
modalVisible: true,
message: 'No Connection',
buttonText: 'RETRY',
onRetry: null,
positionValue: new react_native_1.Animated.Value(-100),
};
}
componentDidMount() {
this.unsubscribeNetworkListener = netinfo_1.default.addEventListener((state) => {
this.setState({ connected: state.isConnected });
if (!state.isConnected) {
this._showToast();
}
});
}
componentWillUnmount() {
this.unsubscribeNetworkListener && this.unsubscribeNetworkListener();
}
renderToastMessage() {
return (<react_native_1.Animated.View style={this._getContainerStyle()}>
<react_native_1.View style={this._getToastStyles()}>
<react_native_1.Text numberOfLines={1} style={this._getMessageTextStyles()}>
{this._getMessageText()}
</react_native_1.Text>
<react_native_1.TouchableOpacity onPress={this._handleRetryButton}>
<react_native_1.View style={this._getButtonStyles()}>
<react_native_1.Text style={this._getButtonTextStyles()}>
{this._getButtonText()}
</react_native_1.Text>
</react_native_1.View>
</react_native_1.TouchableOpacity>
</react_native_1.View>
</react_native_1.Animated.View>);
}
render() {
const { connected, modalVisible } = this.state;
const mergedProps = Object.assign({}, this.props, { connected, setupNetworkRetry: this._setOnRetryBtn, hideNetworkToast: this._hideToast });
return (<react_native_1.View style={styles.root}>
<WrappedComponent {...mergedProps}/>
{!modalVisible ? null : this.renderToastMessage()}
</react_native_1.View>);
}
};
const styles = react_native_1.StyleSheet.create({
root: {
flex: 1,
flexDirection: 'column',
},
defaultContainerStyle: {
position: 'absolute',
opacity: 1,
width: '100%',
elevation: 0,
paddingHorizontal: react_native_1.Platform.OS === 'ios' ? 20 : 0,
},
defaultToastStyle: {
backgroundColor: '#333',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
minHeight: 50,
},
defaultButtonStyle: {
backgroundColor: 'rgba(50, 50, 50, 0.001)',
padding: 10,
},
messageText: {
flex: 1,
fontSize: 16,
color: '#ffffff',
},
defaultButtonTextStyle: {
color: '#FF0000',
fontSize: 18,
fontWeight: 'bold',
},
});
//# sourceMappingURL=index.js.map