alert-toast-react-native
Version:
## Example Dialog Box
280 lines (238 loc) • 8.26 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, Pressable, StyleSheet, Text, View } from 'react-native';
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
import ENV, { ACTION, ALERT_TYPE } from '../config/ENV';
import { getImage } from '../service';
import Color from '../service/color';
class Toast extends React.Component {
/**
* @type {React.Context<EdgeInsets | null>}
*/
/**
* @type {React.RefObject<Toast>}
*/
/**
* @param {IConfig} args
*/
/**
*
*/
/**
* @type {React.ContextType<typeof SafeAreaInsetsContext>}
*/
/**
* @type {Animated.Value}
* @private
*/
/**
* @type {number}
* @private
*/
/**
* @type {NodeJS.Timeout}
* @private
*/
/**
* @param {IProps} props
* @param {React.ContextType<typeof SafeAreaInsetsContext>} context
*/
constructor(props, context) {
super(props, context);
_defineProperty(this, "context", void 0);
_defineProperty(this, "_positionToast", void 0);
_defineProperty(this, "_cardHeight", void 0);
_defineProperty(this, "_timeout", 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 args => {
var _this$state$config, _this$state$config2, _this$props$config, _this$state$config3, _this$state$config3$o;
if (this.state.visible) {
if (this._timeout) {
clearTimeout(this._timeout);
}
await this._startAnimation(ACTION.CLOSE);
}
this._positionToast = new Animated.Value(-500);
await new Promise(resolve => this.setState(prevState => ({ ...prevState,
visible: true,
config: args
}), resolve));
await this._startAnimation(ACTION.OPEN);
const autoClose = ((_this$state$config = this.state.config) === null || _this$state$config === void 0 ? void 0 : _this$state$config.autoClose) !== undefined ? (_this$state$config2 = this.state.config) === null || _this$state$config2 === void 0 ? void 0 : _this$state$config2.autoClose : (_this$props$config = this.props.config) === null || _this$props$config === void 0 ? void 0 : _this$props$config.autoClose;
if (autoClose || autoClose === undefined) {
const duration = typeof autoClose === 'number' ? autoClose : ENV.AUTO_CLOSE;
this._timeout = setTimeout(() => this._close(), duration);
}
(_this$state$config3 = this.state.config) === null || _this$state$config3 === void 0 ? void 0 : (_this$state$config3$o = _this$state$config3.onShow) === null || _this$state$config3$o === void 0 ? void 0 : _this$state$config3$o.call(_this$state$config3);
});
_defineProperty(this, "_close", async () => {
var _this$state$config4;
await this._startAnimation(ACTION.CLOSE);
const onHide = (_this$state$config4 = this.state.config) === null || _this$state$config4 === void 0 ? void 0 : _this$state$config4.onShow;
await new Promise(resolve => this.setState(prevState => ({ ...prevState,
visible: false,
config: undefined
}), resolve));
onHide === null || onHide === void 0 ? void 0 : onHide();
});
_defineProperty(this, "_startAnimation", action => {
return new Promise(resolve => {
var _this$context$top, _this$context;
Animated.timing(this._positionToast, {
toValue: action === ACTION.OPEN ? (_this$context$top = (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.top) !== null && _this$context$top !== void 0 ? _this$context$top : 0 : -this._cardHeight,
duration: 250,
useNativeDriver: true
}).start(() => resolve());
});
});
_defineProperty(this, "_CardRender", () => {
const {
styles
} = this.state;
if (this.state.config) {
const {
type,
title,
textBody,
onPress,
onLongPress
} = this.state.config;
return /*#__PURE__*/React.createElement(Animated.View, {
onLayout: ({
nativeEvent: {
layout: {
height
}
}
}) => this._cardHeight = height,
style: StyleSheet.flatten([styles.cardRow, {
transform: [{
translateY: this._positionToast
}]
}])
}, /*#__PURE__*/React.createElement(Pressable, {
style: styles.cardContainer,
onPress: onPress,
onLongPress: onLongPress
}, type && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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: {
overflow: 'hidden',
flex: 1
}
}, title && /*#__PURE__*/React.createElement(Text, {
style: styles.titleLabel
}, title), textBody && /*#__PURE__*/React.createElement(Text, {
style: styles.descLabel
}, textBody))));
}
return /*#__PURE__*/React.createElement(React.Fragment, null);
});
_defineProperty(this, "render", () => {
const {
visible
} = this.state;
const {
_CardRender
} = this;
if (!visible) {
return /*#__PURE__*/React.createElement(React.Fragment, null);
}
return /*#__PURE__*/React.createElement(_CardRender, null);
});
this._cardHeight = 0;
this._positionToast = new Animated.Value(-500);
this.state = {
styles: __styles(props.isDark),
visible: false,
cardHeight: 0
};
}
/**
* @param {Readonly<IProps>} prevProps
*/
}
_defineProperty(Toast, "contextType", SafeAreaInsetsContext);
_defineProperty(Toast, "instance", /*#__PURE__*/React.createRef());
_defineProperty(Toast, "show", args => {
var _Toast$instance$curre;
(_Toast$instance$curre = Toast.instance.current) === null || _Toast$instance$curre === void 0 ? void 0 : _Toast$instance$curre._open(args);
});
_defineProperty(Toast, "hide", () => {
var _Toast$instance$curre2;
(_Toast$instance$curre2 = Toast.instance.current) === null || _Toast$instance$curre2 === void 0 ? void 0 : _Toast$instance$curre2._close();
});
const __styles = isDark => StyleSheet.create({
backgroundContainer: { ...StyleSheet.absoluteFillObject,
backgroundColor: '#00000070'
},
container: {
position: 'absolute',
backgroundColor: '#00000030',
top: 0,
left: 0,
right: 0
},
cardRow: {
zIndex: 9999,
position: 'absolute',
left: 0,
right: 0
},
cardContainer: {
flexDirection: 'row',
borderRadius: 12,
paddingHorizontal: 12,
paddingTop: 12,
paddingBottom: 12,
marginHorizontal: 12,
marginBottom: 12,
backgroundColor: Color.get('card', isDark)
},
titleLabel: {
fontWeight: 'bold',
fontSize: 18,
color: Color.get('label', isDark)
},
descLabel: {
color: Color.get('label', isDark)
},
backendImage: {
position: 'absolute',
alignSelf: 'center',
height: 12,
width: 12,
backgroundColor: '#FBFBFB',
borderRadius: 100,
left: 12 + 7
},
image: {
alignSelf: 'center',
width: 25,
aspectRatio: 1,
marginRight: 12
},
[`${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)
}
});
export default Toast;
//# sourceMappingURL=Toast.js.map