react-native-bottom-snackbar
Version:
snackbar component for react-native (android/ios)
179 lines • 7.43 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/* eslint-disable */
import React, { PureComponent } from 'react';
import { StyleSheet, Text, Animated } from 'react-native';
var COLOR_ERROR = "#B4161B"; // redish
var COLOR_NORMAL = "#242B2E"; // blackish
var COLOR_SUCCESS = "#1FAA59"; // greenish
var COLOR_INFO = "#1B98F5"; // blueish
var COLOR_WARN = "#E07C24"; // orange
var VALUE_Y = 200;
var ANIMATION_DURATION = 400;
var SNACKBAR_DURATION = 3000; // 3 seconds
var SnackbarComponent = /** @class */ (function (_super) {
__extends(SnackbarComponent, _super);
function SnackbarComponent(props) {
var _this = this;
var _a, _b, _c, _d, _e;
_this = _super.call(this, props) || this;
_this.getColor = function (type) {
switch (type) {
case "error":
return _this._colorError;
case "info":
return _this._colorInfo;
case "success":
return _this._colorSuccess;
case "warn":
return _this._colorWarn;
default:
return _this._colorNormal;
}
};
_this.openAnimate = function (cb) {
Animated.parallel([
Animated.timing(_this.state.yValue, {
toValue: 0,
duration: ANIMATION_DURATION,
useNativeDriver: true
}),
Animated.timing(_this.state.opacityValue, {
toValue: 1,
duration: ANIMATION_DURATION,
useNativeDriver: true
})
]).start(cb);
};
_this.closeAnimate = function (cb) {
Animated.parallel([
Animated.timing(_this.state.yValue, {
toValue: VALUE_Y,
duration: ANIMATION_DURATION,
useNativeDriver: true
}),
Animated.timing(_this.state.opacityValue, {
toValue: 0,
duration: ANIMATION_DURATION,
useNativeDriver: true
})
]).start(cb);
};
_this.show = function (option) {
var _a, _b, _c, _d;
if (!_this.state.visible) {
var color = _this.getColor((_a = option.type) !== null && _a !== void 0 ? _a : "normal");
_this.setState({
visible: true,
color: color,
message: option.message
});
// open snackbar
_this.openAnimate(function () {
var _a;
// register a timeout to close the snackbar after the given duration.
_this._timeout = setTimeout(function () {
_this._timeout = undefined;
_this.close(option.onClose);
}, (_a = _this.props.duration) !== null && _a !== void 0 ? _a : SNACKBAR_DURATION);
});
}
else {
// means snackbar is already visible.
// just update the content and reset closing time.
_this._timeout = undefined;
clearTimeout(_this._timeout);
// run callback for previous snackbar message.
(_b = option.onClose) === null || _b === void 0 ? void 0 : _b.call(option);
// update already opened snackbar.
var color = _this.getColor((_c = option.type) !== null && _c !== void 0 ? _c : "normal");
_this.setState({
visible: true,
color: color,
message: option.message
});
// register a timeout to close the snackbar after the given duration.
_this._timeout = setTimeout(function () {
_this._timeout = undefined;
_this.close(option.onClose);
}, (_d = _this.props.duration) !== null && _d !== void 0 ? _d : SNACKBAR_DURATION);
}
};
_this.close = function (cb) {
if (_this.state.visible) {
// make sure to clear timeout if close is not invoked automatically.
if (_this._timeout)
clearTimeout(_this._timeout);
// close snackbar
_this.closeAnimate(function () {
_this.setState({ visible: false, message: "", color: COLOR_NORMAL });
cb === null || cb === void 0 ? void 0 : cb();
});
}
};
_this.state = {
visible: false,
message: "",
color: COLOR_NORMAL,
yValue: new Animated.Value(VALUE_Y),
opacityValue: new Animated.Value(0),
};
_this._colorNormal = (_a = props.colorNormal) !== null && _a !== void 0 ? _a : COLOR_NORMAL;
_this._colorError = (_b = props.colorError) !== null && _b !== void 0 ? _b : COLOR_ERROR;
_this._colorSuccess = (_c = props.colorSuccess) !== null && _c !== void 0 ? _c : COLOR_SUCCESS;
_this._colorInfo = (_d = props.colorInfo) !== null && _d !== void 0 ? _d : COLOR_INFO;
_this._colorWarn = (_e = props.colorWarn) !== null && _e !== void 0 ? _e : COLOR_WARN;
return _this;
}
SnackbarComponent.prototype.render = function () {
var _a;
if (this.state.visible)
return (<Animated.View style={[
styles.container,
this.props.style,
{ backgroundColor: this.state.color },
{
transform: [
{ translateY: this.state.yValue }
],
opacity: this.state.opacityValue
}
]}>
<Text style={[styles.message, this.props.labelStyle]} numberOfLines={(_a = this.props.numberOfLines) !== null && _a !== void 0 ? _a : 2} ellipsizeMode="tail">
{this.state.message}
</Text>
</Animated.View>);
else
return null;
};
return SnackbarComponent;
}(PureComponent));
export { SnackbarComponent };
var styles = StyleSheet.create({
container: {
width: "100%",
paddingVertical: 16,
paddingHorizontal: 20,
position: "absolute",
bottom: 0,
zIndex: 200
},
message: {
color: "#fff",
fontSize: 14,
}
});
//# sourceMappingURL=AlertComponent.js.map