react-native-styled-toast
Version:
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
89 lines • 4.23 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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
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 Toast_1 = __importDefault(require("../Toast"));
var Utils_1 = require("../Utils");
exports.ToastContext = React.createContext({
toast: function () { return null; }
});
exports.useToast = function () { return React.useContext(exports.ToastContext); };
var originalOffset = react_native_status_bar_height_1.getStatusBarHeight();
react_native_1.UIManager && react_native_1.UIManager.setLayoutAnimationEnabledExperimental && react_native_1.UIManager.setLayoutAnimationEnabledExperimental(true);
var CustomLayoutConfig = {
duration: 300,
create: {
type: react_native_1.LayoutAnimation.Types.easeInEaseOut,
property: react_native_1.LayoutAnimation.Properties.opacity
},
update: {
type: react_native_1.LayoutAnimation.Types.easeInEaseOut
},
delete: {
type: react_native_1.LayoutAnimation.Types.easeInEaseOut,
property: react_native_1.LayoutAnimation.Properties.opacity
}
};
var ToastProvider = function (_a) {
var children = _a.children, position = _a.position, offsetProp = _a.offset, maxToasts = _a.maxToasts;
var _b = React.useState([]), toasts = _b[0], setToasts = _b[1];
var toast = React.useCallback(function (newToast) {
react_native_1.LayoutAnimation.configureNext(CustomLayoutConfig);
setToasts(function (prevToasts) {
var toasts = position === 'BOTTOM'
? __spreadArrays(prevToasts, [__assign({ index: prevToasts.length, id: Utils_1.uuid() }, newToast)]) : __spreadArrays([__assign({ index: prevToasts.length, id: Utils_1.uuid() }, newToast)], prevToasts);
if (maxToasts && prevToasts.length === maxToasts) {
position === 'BOTTOM' ? toasts.shift() : toasts.pop();
return toasts;
}
else {
return toasts;
}
});
}, [maxToasts]);
var hideToast = function (id) {
react_native_1.LayoutAnimation.configureNext(CustomLayoutConfig);
setToasts(function (prevToasts) { return prevToasts.filter(function (el) { return el.id !== id; }); });
};
var offset = offsetProp ? offsetProp + originalOffset : originalOffset;
return (<exports.ToastContext.Provider value={{ toast: toast }}>
{children}
<Box_1.default px={4} left={0} right={0} position="absolute" pointerEvents="box-none" pt={position === 'BOTTOM' ? 0 : offset} pb={position === 'BOTTOM' ? offset : 0} style={position === 'BOTTOM' ? { bottom: 0 } : { top: 0 }}>
{toasts.map(function (config) {
return <Toast_1.default position={position} key={config.id} onClose={function (id) { return hideToast(id); }} {...config}/>;
})}
</Box_1.default>
</exports.ToastContext.Provider>);
};
exports.default = ToastProvider;
//# sourceMappingURL=index.js.map