react-native-alert-notification
Version:
Toast notification and dialog box notification for react native
385 lines (331 loc) • 12.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Dialog = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _config = require("../config");
var _service = require("../service");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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; }
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(_config.ACTION.CLOSE, false);
await new Promise(resolve => this.setState(prevState => ({ ...prevState,
config
}), resolve));
await this._startAnimation(_config.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(_config.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(_config.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 : _config.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 === _config.ACTION.OPEN;
let animations = [opacity ? _reactNative.Animated.timing(_this._opacity, {
toValue: action === _config.ACTION.OPEN ? 1 : 0,
duration: 300,
useNativeDriver: false
}) : null, _reactNative.Animated[open ? 'spring' : 'timing'](_this._positionDialog, {
toValue: open ? _config.ENV.WINDOWS.HEIGHT / 2 - _this._popupHeight / 2 : _config.ENV.WINDOWS.HEIGHT + 30,
...(open ? {
bounciness: 12
} : {
duration: 250
}),
useNativeDriver: true
})].filter(Boolean);
if (!open) {
animations = animations.reverse();
}
return new Promise(resolve => {
_reactNative.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(_reactNative.TouchableOpacity, {
style: _reactNative.StyleSheet.flatten([styles.button, styles[type]]),
onPress: onPressButton ?? this._close
}, /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.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(_reactNative.Animated.View, {
onLayout: _ref2 => {
let {
nativeEvent: {
layout: {
height
}
}
} = _ref2;
return this._popupHeight = height;
},
style: _reactNative.StyleSheet.flatten([styles.cardContainer, {
transform: [{
translateY: this._positionDialog
}]
}])
}, /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.backendImage
}), /*#__PURE__*/React.createElement(_reactNative.Image, {
source: (0, _service.getImage)(type),
resizeMode: "contain",
style: _reactNative.StyleSheet.flatten([styles.image, styles[`${type}Image`]])
}), /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.cardBody
}, title && /*#__PURE__*/React.createElement(_reactNative.Text, {
style: styles.titleLabel
}, title), textBody && /*#__PURE__*/React.createElement(_reactNative.Text, {
style: styles.descLabel
}, textBody)), /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.Modal, {
transparent: true,
visible: visible,
animated: false,
onShow: this._showModalHandler
}, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
style: _reactNative.StyleSheet.flatten([styles.backgroundContainer, {
opacity: this._opacity
}])
}), /*#__PURE__*/React.createElement(_OverlayCloseRender, null), /*#__PURE__*/React.createElement(_CardRender, null));
});
this._opacity = new _reactNative.Animated.Value(0);
this._positionDialog = new _reactNative.Animated.Value(_config.ENV.WINDOWS.HEIGHT + 30);
this._popupHeight = 0;
this.state = {
styles: __styles(props.isDark),
visible: false
};
}
/**
* @param {Readonly<IProps>} prevProps
*/
}
exports.Dialog = Dialog;
_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 => _reactNative.StyleSheet.create({
backgroundContainer: { ..._reactNative.StyleSheet.absoluteFillObject,
backgroundColor: '#00000070'
},
cardContainer: {
alignSelf: 'center',
maxWidth: 400,
width: '80%',
minHeight: 250,
borderRadius: 24,
paddingHorizontal: 12,
paddingTop: 50,
paddingBottom: 24,
position: 'absolute',
backgroundColor: _service.Color.get('card', isDark)
},
cardBody: {
flex: 1,
justifyContent: 'space-evenly',
alignItems: 'center',
overflow: 'hidden'
},
cardFooter: {},
titleLabel: {
fontWeight: 'bold',
fontSize: 20,
color: _service.Color.get('label', isDark)
},
descLabel: {
textAlign: 'center',
color: _service.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
},
[_config.ALERT_TYPE.SUCCESS]: {
backgroundColor: _service.Color.get('success', isDark)
},
[_config.ALERT_TYPE.DANGER]: {
backgroundColor: _service.Color.get('danger', isDark)
},
[_config.ALERT_TYPE.WARNING]: {
backgroundColor: _service.Color.get('warning', isDark)
},
[_config.ALERT_TYPE.INFO]: {
backgroundColor: _service.Color.get('info', 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
},
[`${_config.ALERT_TYPE.SUCCESS}Image`]: {
tintColor: _service.Color.get('success', isDark)
},
[`${_config.ALERT_TYPE.DANGER}Image`]: {
tintColor: _service.Color.get('danger', isDark)
},
[`${_config.ALERT_TYPE.WARNING}Image`]: {
tintColor: _service.Color.get('warning', isDark)
},
[`${_config.ALERT_TYPE.INFO}Image`]: {
tintColor: _service.Color.get('info', isDark)
}
});
//# sourceMappingURL=Dialog.js.map