react-native-alert-notification
Version:
Toast notification and dialog box notification for react native
362 lines (317 loc) • 10.5 kB
JavaScript
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import * as React from 'react';
import { Animated, Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ACTION, ALERT_TYPE, ENV } from '../config';
import { Color, getImage } from '../service';
export class Dialog extends React.Component {
/**
* @type {React.RefObject<Dialog>}
*/
/**
* @param {IConfig} args
*/
/**
*
*/
/**
* @type {Animated.Value}
* @private
*/
/**
* @type {Animated.Value}
* @private
*/
/**
* @type {number}
* @private
*/
/**
* @param {IProps} props
*/
constructor(props) {
var _this;
super(props);
_this = this;
_defineProperty(this, "_timeout", void 0);
_defineProperty(this, "_opacity", void 0);
_defineProperty(this, "_positionDialog", void 0);
_defineProperty(this, "_popupHeight", void 0);
_defineProperty(this, "componentDidUpdate", prevProps => {
if (prevProps.isDark !== this.props.isDark) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState(prevState => ({ ...prevState,
styles: __styles(this.props.isDark)
}));
}
});
_defineProperty(this, "_open", async config => {
if (this.state.visible) {
if (this._timeout) {
clearTimeout(this._timeout);
}
await this._startAnimation(ACTION.CLOSE, false);
await new Promise(resolve => this.setState(prevState => ({ ...prevState,
config
}), resolve));
await this._startAnimation(ACTION.OPEN);
return;
}
this.setState(prevState => ({ ...prevState,
visible: true,
config
}));
});
_defineProperty(this, "_close", async () => {
var _this$state$config;
if (!this.state.visible) {
return;
}
if (this._timeout) {
clearTimeout(this._timeout);
}
await this._startAnimation(ACTION.CLOSE);
const onHide = (_this$state$config = this.state.config) === null || _this$state$config === void 0 ? void 0 : _this$state$config.onHide;
await new Promise(resolve => this.setState(prevState => ({ ...prevState,
config: undefined,
visible: false
}), resolve));
onHide === null || onHide === void 0 ? void 0 : onHide();
});
_defineProperty(this, "_showModalHandler", async () => {
var _this$state$config2, _this$state$config3, _this$props$config, _onShow, _ref;
await this._startAnimation(ACTION.OPEN);
const autoClose = ((_this$state$config2 = this.state.config) === null || _this$state$config2 === void 0 ? void 0 : _this$state$config2.autoClose) !== undefined ? (_this$state$config3 = this.state.config) === null || _this$state$config3 === void 0 ? void 0 : _this$state$config3.autoClose : (_this$props$config = this.props.config) === null || _this$props$config === void 0 ? void 0 : _this$props$config.autoClose;
if (autoClose) {
const duration = typeof autoClose === 'number' ? autoClose : ENV.AUTO_CLOSE;
this._timeout = setTimeout(() => {
this._close();
}, duration);
}
(_onShow = (_ref = this.state.config).onShow) === null || _onShow === void 0 ? void 0 : _onShow.call(_ref);
});
_defineProperty(this, "_startAnimation", function (action) {
let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
const open = action === ACTION.OPEN;
let animations = [opacity ? Animated.timing(_this._opacity, {
toValue: action === ACTION.OPEN ? 1 : 0,
duration: 300,
useNativeDriver: false
}) : null, Animated[open ? 'spring' : 'timing'](_this._positionDialog, {
toValue: open ? ENV.WINDOWS.HEIGHT / 2 - _this._popupHeight / 2 : ENV.WINDOWS.HEIGHT + 30,
...(open ? {
bounciness: 12
} : {
duration: 250
}),
useNativeDriver: true
})].filter(Boolean);
if (!open) {
animations = animations.reverse();
}
return new Promise(resolve => {
Animated.sequence(animations).start(() => resolve());
});
});
_defineProperty(this, "_buttonRender", () => {
const {
styles
} = this.state;
const {
type,
onPressButton,
button
} = this.state.config;
if (button) {
return /*#__PURE__*/React.createElement(TouchableOpacity, {
style: StyleSheet.flatten([styles.button, styles[type]]),
onPress: onPressButton ?? this._close
}, /*#__PURE__*/React.createElement(Text, {
style: styles.buttonLabel
}, button));
}
return /*#__PURE__*/React.createElement(React.Fragment, null);
});
_defineProperty(this, "_OverlayCloseRender", () => {
var _this$state$config4, _this$props$config2;
if (((_this$state$config4 = this.state.config) === null || _this$state$config4 === void 0 ? void 0 : _this$state$config4.closeOnOverlayTap) === false ? false : ((_this$props$config2 = this.props.config) === null || _this$props$config2 === void 0 ? void 0 : _this$props$config2.closeOnOverlayTap) !== false) {
// eslint-disable-next-line react-native/no-inline-styles
return /*#__PURE__*/React.createElement(TouchableOpacity, {
onPressIn: this._close,
style: {
flex: 1
}
});
}
return /*#__PURE__*/React.createElement(React.Fragment, null);
});
_defineProperty(this, "_CardRender", () => {
if (!this.state.config) {
return /*#__PURE__*/React.createElement(React.Fragment, null);
}
const {
styles,
config: {
title,
type,
textBody
}
} = this.state;
const {
_buttonRender
} = this;
return /*#__PURE__*/React.createElement(Animated.View, {
onLayout: _ref2 => {
let {
nativeEvent: {
layout: {
height
}
}
} = _ref2;
return this._popupHeight = height;
},
style: StyleSheet.flatten([styles.cardContainer, {
transform: [{
translateY: this._positionDialog
}]
}])
}, /*#__PURE__*/React.createElement(View, {
style: styles.backendImage
}), /*#__PURE__*/React.createElement(Image, {
source: getImage(type),
resizeMode: "contain",
style: StyleSheet.flatten([styles.image, styles[`${type}Image`]])
}), /*#__PURE__*/React.createElement(View, {
style: styles.cardBody
}, title && /*#__PURE__*/React.createElement(Text, {
style: styles.titleLabel
}, title), textBody && /*#__PURE__*/React.createElement(Text, {
style: styles.descLabel
}, textBody)), /*#__PURE__*/React.createElement(View, {
style: styles.cardFooter
}, /*#__PURE__*/React.createElement(_buttonRender, null)));
});
_defineProperty(this, "render", () => {
const {
visible,
styles
} = this.state;
const {
_OverlayCloseRender,
_CardRender
} = this;
return /*#__PURE__*/React.createElement(Modal, {
transparent: true,
visible: visible,
animated: false,
onShow: this._showModalHandler
}, /*#__PURE__*/React.createElement(Animated.View, {
style: StyleSheet.flatten([styles.backgroundContainer, {
opacity: this._opacity
}])
}), /*#__PURE__*/React.createElement(_OverlayCloseRender, null), /*#__PURE__*/React.createElement(_CardRender, null));
});
this._opacity = new Animated.Value(0);
this._positionDialog = new Animated.Value(ENV.WINDOWS.HEIGHT + 30);
this._popupHeight = 0;
this.state = {
styles: __styles(props.isDark),
visible: false
};
}
/**
* @param {Readonly<IProps>} prevProps
*/
}
_defineProperty(Dialog, "instance", /*#__PURE__*/React.createRef());
_defineProperty(Dialog, "show", args => {
var _Dialog$instance$curr;
(_Dialog$instance$curr = Dialog.instance.current) === null || _Dialog$instance$curr === void 0 ? void 0 : _Dialog$instance$curr._open(args);
});
_defineProperty(Dialog, "hide", () => {
var _Dialog$instance$curr2;
(_Dialog$instance$curr2 = Dialog.instance.current) === null || _Dialog$instance$curr2 === void 0 ? void 0 : _Dialog$instance$curr2._close();
});
const __styles = isDark => StyleSheet.create({
backgroundContainer: { ...StyleSheet.absoluteFillObject,
backgroundColor: '#00000070'
},
cardContainer: {
alignSelf: 'center',
maxWidth: 400,
width: '80%',
minHeight: 250,
borderRadius: 24,
paddingHorizontal: 12,
paddingTop: 50,
paddingBottom: 24,
position: 'absolute',
backgroundColor: Color.get('card', isDark)
},
cardBody: {
flex: 1,
justifyContent: 'space-evenly',
alignItems: 'center',
overflow: 'hidden'
},
cardFooter: {},
titleLabel: {
fontWeight: 'bold',
fontSize: 20,
color: Color.get('label', isDark)
},
descLabel: {
textAlign: 'center',
color: Color.get('label', isDark)
},
button: {
borderRadius: 50,
height: 40,
width: 130,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
marginTop: 12
},
buttonLabel: {
color: '#fff',
fontWeight: 'bold',
fontSize: 16
},
[ALERT_TYPE.SUCCESS]: {
backgroundColor: Color.get('success', isDark)
},
[ALERT_TYPE.DANGER]: {
backgroundColor: Color.get('danger', isDark)
},
[ALERT_TYPE.WARNING]: {
backgroundColor: Color.get('warning', isDark)
},
backendImage: {
position: 'absolute',
alignSelf: 'center',
justifyContent: 'center',
height: 50,
width: 50,
backgroundColor: '#FBFBFB',
borderRadius: 100,
marginTop: -10
},
image: {
alignSelf: 'center',
width: 80,
aspectRatio: 1,
position: 'absolute',
top: -30
},
[`${ALERT_TYPE.SUCCESS}Image`]: {
tintColor: Color.get('success', isDark)
},
[`${ALERT_TYPE.DANGER}Image`]: {
tintColor: Color.get('danger', isDark)
},
[`${ALERT_TYPE.WARNING}Image`]: {
tintColor: Color.get('warning', isDark)
}
});
//# sourceMappingURL=Dialog.js.map