react-native-styled-toast
Version:
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
144 lines (143 loc) • 6.4 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_status_bar_height_1 = require("react-native-status-bar-height");
var Box_1 = __importDefault(require("../Box"));
var Icon_1 = __importDefault(require("../Icon"));
var styles_1 = require("./styles");
var statusBarHeight = react_native_status_bar_height_1.getStatusBarHeight();
var offset = statusBarHeight + 16;
var shadow = {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0
},
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 1
};
var DEFAULT_PROPS = {
duration: 3000,
intent: 'SUCCESS',
onPress: function () { return false; },
shouldVibrate: false,
closeIconColor: 'text',
message: 'Toast message!',
messageProps: {},
subMessageProps: {},
hideIcon: false,
animationType: 'slide',
toastStyles: {
borderColor: 'border',
bg: 'background'
},
closeButtonStyles: {
p: 2,
mx: 2,
bg: 'muted',
borderRadius: 4,
alignItems: 'center'
},
hideCloseIcon: false,
allowFontScaling: true
};
exports.Toast = function (_a) {
var accentColor = _a.accentColor, animationType = _a.animationType, closeIconColor = _a.closeIconColor, closeIconFamily = _a.closeIconFamily, closeIconName = _a.closeIconName, closeIconSize = _a.closeIconSize, color = _a.color, duration = _a.duration, hideIcon = _a.hideIcon, iconColor = _a.iconColor, iconFamily = _a.iconFamily, iconName = _a.iconName, id = _a.id, index = _a.index, intent = _a.intent, message = _a.message, messageProps = _a.messageProps, onClose = _a.onClose, onPress = _a.onPress, position = _a.position, shouldVibrate = _a.shouldVibrate, subMessage = _a.subMessage, subMessageProps = _a.subMessageProps, toastStyles = _a.toastStyles, hideAccent = _a.hideAccent, closeButtonStyles = _a.closeButtonStyles, hideCloseIcon = _a.hideCloseIcon, iconSize = _a.iconSize, allowFontScaling = _a.allowFontScaling;
var isSuccess = intent === 'SUCCESS';
var isInfo = intent === 'INFO';
var topOffset = offset + 60 * (index || 0);
var animation = React.useRef(new react_native_1.Animated.Value(0)).current;
React.useEffect(function () {
react_native_1.Animated.timing(animation, {
toValue: 0.5,
duration: 300,
useNativeDriver: true
}).start(function () {
if (duration !== 0) {
var timer_1 = setTimeout(function () {
if (index === 0) {
clearTimeout(timer_1);
}
id && onClose && onClose(id);
}, duration);
}
});
if (shouldVibrate) {
react_native_1.Vibration.vibrate(10);
}
}, []);
var translateY = animation.interpolate({
inputRange: [0, 0.5],
outputRange: [position === 'BOTTOM' ? topOffset : -topOffset, 0]
});
var scale = animation.interpolate({
inputRange: [0, 0.5],
outputRange: [0.8, 1],
extrapolate: 'clamp'
});
var opacity = animation.interpolate({
inputRange: [0, 0.5],
outputRange: [0, 1],
extrapolate: 'clamp'
});
var getStyles = function () {
switch (animationType) {
case 'fade':
return __assign({ opacity: opacity }, shadow);
case 'scale':
return __assign({ transform: [{ scale: scale }], opacity: opacity }, shadow);
default:
return __assign({ transform: [{ translateY: translateY }, { scale: scale }] }, shadow);
}
};
return (<styles_1.StyledToast onPress={function () {
onPress && onPress();
onClose && id && onClose(id);
}} style={getStyles()} {...toastStyles} pr={!!subMessage ? 2 : 0}>
{!hideAccent && (<styles_1.Accent testID="toast-accent" bg={!!accentColor ? accentColor : isSuccess ? 'success' : isInfo ? 'info' : 'error'}/>)}
{!hideIcon && (<styles_1.IconCont px={4}>
<Icon_1.default size={iconSize || 20} family={iconFamily || 'Feather'} color={!!iconColor ? iconColor : isSuccess ? 'success' : isInfo ? 'info' : 'error'} name={!!iconName ? iconName : isSuccess ? 'check-circle' : isInfo ? 'alert-circle' : 'x-circle'}/>
</styles_1.IconCont>)}
<Box_1.default alignItems="flex-start" flex={1} pl={hideIcon ? 4 : 0} pr={!!subMessage ? 2 : 0} py={2}>
<Box_1.default flexDirection="row" flexWrap="wrap" flex={1}>
<styles_1.Heading color={color} {...messageProps} allowFontScaling={allowFontScaling}>
{message}
</styles_1.Heading>
</Box_1.default>
{!!subMessage && (<styles_1.SubText color={color} mt={1} {...subMessageProps} allowFontScaling={allowFontScaling}>
{subMessage}
</styles_1.SubText>)}
</Box_1.default>
{!hideCloseIcon && (<react_native_1.TouchableOpacity onPress={function () { return onClose && id && onClose(id); }}>
<Box_1.default {...Object.assign({}, DEFAULT_PROPS.closeButtonStyles, closeButtonStyles)}>
<Icon_1.default size={closeIconSize || 20} family={closeIconFamily || 'Feather'} name={closeIconName || 'x'} color={closeIconColor}/>
</Box_1.default>
</react_native_1.TouchableOpacity>)}
</styles_1.StyledToast>);
};
exports.default = React.memo(exports.Toast);
exports.Toast.defaultProps = DEFAULT_PROPS;
//# sourceMappingURL=index.js.map