react-native-alert-notification
Version:
Toast notification and dialog box notification for react native
282 lines (241 loc) • 9.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToastRender = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _service = require("../service");
var _config = require("../config");
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
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 ToastRender extends React.Component {
constructor(props) {
super(props);
_defineProperty(this, "_heightContainer", void 0);
_defineProperty(this, "_positionToast", void 0);
_defineProperty(this, "_pressStart", void 0);
_defineProperty(this, "_countdown", void 0);
_defineProperty(this, "componentDidUpdate", async (prevProps, prevState) => {
if (!prevState.isInit && this.state.isInit) {
await new Promise(resolve => this._animatedTiming(0).start(resolve));
this._autoCloseHandler();
}
if (prevProps.isDark !== this.props.isDark) {
this.setState({ ...prevState,
styles: __styles(this.props.isDark)
});
}
});
_defineProperty(this, "componentWillUnmount", () => {
var _this$_countdown;
(_this$_countdown = this._countdown) === null || _this$_countdown === void 0 ? void 0 : _this$_countdown.call(this);
});
_defineProperty(this, "_animatedTiming", toValue => {
return _reactNative.Animated.timing(this._positionToast, {
toValue,
duration: 250,
useNativeDriver: true
});
});
_defineProperty(this, "_autoCloseHandler", () => {
var _this$_countdown2;
(_this$_countdown2 = this._countdown) === null || _this$_countdown2 === void 0 ? void 0 : _this$_countdown2.call(this);
if (this.props.timeout) {
this._countdown = (() => {
const _timeout = setTimeout(() => this._animatedTiming(-this._heightContainer).start(this.props.onClose), this.props.timeout);
return () => clearTimeout(_timeout);
})();
}
});
_defineProperty(this, "_layoutHandler", event => {
if (this.state.isInit) {
return;
}
const {
height
} = event.nativeEvent.layout;
this._heightContainer = height;
this._positionToast.setValue(-height);
this.setState(prevState => ({ ...prevState,
isInit: true
}));
});
_defineProperty(this, "_panResponder", _reactNative.PanResponder.create({
onStartShouldSetPanResponder: () => true,
onStartShouldSetPanResponderCapture: () => false,
onMoveShouldSetPanResponder: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: (_, _ref) => {
let {
dy
} = _ref;
if (dy < 0) {
this._positionToast.setValue(dy);
}
},
onPanResponderTerminationRequest: () => true,
onPanResponderStart: (_, _ref2) => {
var _this$_countdown3;
let {
dy: startY
} = _ref2;
this._pressStart = {
startY,
startAt: Date.now()
};
(_this$_countdown3 = this._countdown) === null || _this$_countdown3 === void 0 ? void 0 : _this$_countdown3.call(this);
},
onPanResponderEnd: async (_, _ref3) => {
let {
dy
} = _ref3;
let heightContainer = this._heightContainer;
const {
startY,
startAt
} = this._pressStart;
this._pressStart = null;
if (startAt + 500 >= Date.now() && Math.abs(dy - startY) < 7) {
var _this$props, _this$props$onPress;
(_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$onPress = _this$props.onPress) === null || _this$props$onPress === void 0 ? void 0 : _this$props$onPress.call(_this$props);
this._autoCloseHandler();
} else if (dy < -(heightContainer / 3)) {
this._animatedTiming(-heightContainer).start(this.props.onClose);
} else {
this._animatedTiming(0).start(this._autoCloseHandler);
}
}
}));
_defineProperty(this, "_ModelRender", () => {
const {
type,
title,
description,
titleStyle,
textBodyStyle
} = this.props;
const {
styles
} = this.state; // if (model) {
// return model({ isDark, type, title, description });
// }
return /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.cardContainer
}, type && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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.labelContainer
}, title && /*#__PURE__*/React.createElement(_reactNative.Text, {
style: _reactNative.StyleSheet.flatten([styles.titleLabel, titleStyle])
}, title), description && /*#__PURE__*/React.createElement(_reactNative.Text, {
style: _reactNative.StyleSheet.flatten([styles.descLabel, textBodyStyle])
}, description)));
});
this._heightContainer = 0;
this._pressStart = null;
this._positionToast = new _reactNative.Animated.Value(0);
this._countdown = null;
this.state = {
isInit: false,
styles: __styles(props.isDark)
};
}
render() {
const paddingTop = this.props.paddingTop || 0;
const {
isInit,
styles
} = this.state;
const {
_ModelRender
} = this;
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({
collapsable: false,
onLayout: this._layoutHandler
}, this._panResponder.panHandlers, {
style: _reactNative.StyleSheet.flatten([styles.container, {
paddingTop,
transform: [{
translateY: this._positionToast
}]
}])
}), /*#__PURE__*/React.createElement(_reactNative.View, {
style: {
zIndex: isInit ? 99999 : -1
}
}, /*#__PURE__*/React.createElement(_ModelRender, null)));
}
}
exports.ToastRender = ToastRender;
const __styles = isDark => _reactNative.StyleSheet.create({
container: {
position: 'absolute',
left: 0,
right: 0
},
cardContainer: {
flexDirection: 'row',
paddingHorizontal: 12,
paddingTop: 12,
paddingBottom: 12,
backgroundColor: _service.Color.get('card', isDark),
..._reactNative.Platform.select({
ios: {
borderRadius: 12,
marginHorizontal: 12
},
android: {
marginTop: 6,
marginHorizontal: 6,
borderRadius: 6
}
})
},
labelContainer: {
overflow: 'hidden',
flex: 1
},
titleLabel: {
fontWeight: 'bold',
fontSize: 18,
color: _service.Color.get('label', isDark)
},
descLabel: {
color: _service.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
},
[`${_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=ToastRender.js.map