@redocly/theme
Version:
Shared UI components lib
156 lines (155 loc) • 6.29 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToastProvider = ToastProvider;
const styled_components_1 = __importDefault(require("styled-components"));
const react_1 = __importStar(require("react"));
const Portal_1 = require("../../../components/Portal/Portal");
const Toast_1 = require("../../../components/Toast/Toast");
const ToastContext_1 = require("../../../core/contexts/Toast/ToastContext");
const toast_1 = require("../../../core/constants/toast");
function toastReducer(state, action) {
switch (action.type) {
case 'add':
return [action.payload, ...state];
case 'startExit':
return state.map((toast) => toast.id === action.payload.id ? Object.assign(Object.assign({}, toast), { isExiting: true }) : toast);
case 'remove':
return state.filter((toast) => toast.id !== action.payload.id);
case 'update':
return state.map((toast) => {
var _a;
return toast.id === action.payload.id
? Object.assign(Object.assign(Object.assign({}, toast), action.payload.updates), { type: (_a = action.payload.updates.type) !== null && _a !== void 0 ? _a : toast.type }) : toast;
});
default:
return state;
}
}
function getToastType(type) {
return type !== null && type !== void 0 ? type : 'info';
}
function createToastId() {
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
return crypto.randomUUID();
}
return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
}
function ToastProvider({ children, mountId }) {
const [toasts, dispatch] = (0, react_1.useReducer)(toastReducer, []);
const toastsRef = (0, react_1.useRef)([]);
const removeTimeoutsRef = (0, react_1.useRef)(new Map());
(0, react_1.useEffect)(() => {
toastsRef.current = toasts;
}, [toasts]);
(0, react_1.useEffect)(() => {
const timeoutsMap = removeTimeoutsRef.current;
return () => {
timeoutsMap.forEach((timeoutId) => {
clearTimeout(timeoutId);
});
timeoutsMap.clear();
};
}, []);
const dismissToast = (0, react_1.useCallback)((id) => {
var _a;
const currentToast = toastsRef.current.find((toast) => toast.id === id);
if (!currentToast || currentToast.isExiting) {
return;
}
(_a = currentToast.onClose) === null || _a === void 0 ? void 0 : _a.call(currentToast);
dispatch({ type: 'startExit', payload: { id } });
const existingTimeout = removeTimeoutsRef.current.get(id);
if (existingTimeout) {
clearTimeout(existingTimeout);
}
const timeoutId = setTimeout(() => {
dispatch({ type: 'remove', payload: { id } });
removeTimeoutsRef.current.delete(id);
}, toast_1.TOAST_SLIDE_DURATION_MS);
removeTimeoutsRef.current.set(id, timeoutId);
}, []);
const showToast = (0, react_1.useCallback)((options) => {
const id = createToastId();
dispatch({
type: 'add',
payload: Object.assign(Object.assign({}, options), { id, type: getToastType(options.type), isExiting: false }),
});
return id;
}, []);
const updateToast = (0, react_1.useCallback)((id, updates) => {
dispatch({
type: 'update',
payload: {
id,
updates,
},
});
}, []);
const contextValue = (0, react_1.useMemo)(() => ({
showToast,
dismissToast,
updateToast,
}), [dismissToast, showToast, updateToast]);
return (react_1.default.createElement(ToastContext_1.ToastContext.Provider, { value: contextValue },
children,
toasts.length > 0 ? (react_1.default.createElement(Portal_1.Portal, { mountId: mountId },
react_1.default.createElement(ToastViewport, { "aria-label": "Notifications" }, toasts.map((toast, index) => (react_1.default.createElement(Toast_1.Toast, { key: toast.id, stackIndex: index, stackZIndex: toasts.length - index, toast: toast, onDismiss: dismissToast })))))) : null));
}
const ToastViewport = styled_components_1.default.div `
position: fixed;
right: var(--spacing-md);
bottom: var(--spacing-md);
z-index: 1100;
display: flex;
flex-direction: column-reverse;
gap: var(--spacing-sm);
width: 320px;
min-width: 240px;
max-width: 360px;
pointer-events: none;
@media (max-width: 480px) {
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100vw - var(--spacing-md) * 2);
min-width: 0;
max-width: none;
}
`;
//# sourceMappingURL=ToastProvider.js.map