@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
109 lines (108 loc) • 5.66 kB
JavaScript
import { __assign, __rest, __spreadArrays } from "tslib";
import classnames from 'classnames';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { ToastContext, useCurrentRef } from '../../hooks';
import { Overlay } from '../Overlay';
import { Toast } from '../Toast';
var toastIdSequence = 1;
export var ToastProvider = function (_a) {
var defaultTimeout = _a.defaultTimeout, noTimeout = _a.noTimeout, _b = _a.position, position = _b === void 0 ? 'top-right' : _b, customPadding = _a.customPadding, className = _a.className, children = _a.children;
var _c = useState([]), toasts = _c[0], setToasts = _c[1];
var _d = useState(false), closing = _d[0], setClosing = _d[1];
var _e = useState(false), hovered = _e[0], setHovered = _e[1];
var onHover = useCallback(function () { return setHovered(true); }, []);
var onBlur = useCallback(function () { return setHovered(false); }, []);
var _pop = useCallback(function () { return setClosing(true); }, []);
var toastsRef = useCurrentRef(toasts);
var closingRef = useCurrentRef(closing);
useEffect(function () {
if (closing) {
var timeoutId_1 = window.setTimeout(function () {
setToasts(function (prev) { return prev.slice(1); });
setClosing(false);
}, 250);
return function () {
window.clearTimeout(timeoutId_1);
};
}
return;
}, [closing]);
var _f = toasts[0] || {}, toastId = _f.toastId, _g = _f.closable, closable = _g === void 0 ? true : _g, timeout = _f.timeout, toastProps = __rest(_f, ["toastId", "closable", "timeout"]);
var noTimeoutTypes = useCurrentRef(noTimeout);
var timeoutValue = useMemo(function () {
var timeoutNum = timeout !== null && timeout !== void 0 ? timeout : defaultTimeout;
if (!noTimeoutTypes.current)
return timeoutNum;
if (Array.isArray(noTimeoutTypes.current)) {
if (!noTimeoutTypes.current.length)
return timeoutNum;
if (!noTimeoutTypes.current.includes(toastProps.message))
return timeoutNum;
return 0;
}
else {
if (noTimeoutTypes.current !== toastProps.message)
return timeoutNum;
return 0;
}
}, [defaultTimeout, noTimeoutTypes, timeout, toastProps.message]);
useEffect(function () {
// toastId and toastProps.message are included to reset timer when message
// changes.
if (!hovered && toastId && timeoutValue && toastProps.message) {
var timeoutId_2 = window.setTimeout(_pop, timeoutValue);
return function () { return window.clearTimeout(timeoutId_2); };
}
return;
}, [_pop, hovered, timeoutValue, toastId, toastProps.message]);
var add = useCallback(function (toast) {
var toastId = toastIdSequence++;
setToasts(function (prev) { return __spreadArrays(prev, [__assign(__assign({}, toast), { toastId: toastId })]); });
return toastId;
}, []);
var remove = useCallback(function (toastId) {
if (!toastsRef.current.length)
return;
var index = toastId === undefined ? 0 : toastsRef.current.findIndex(function (toast) { return toast.toastId === toastId; });
if (index === -1)
return;
if (index === 0)
return _pop();
setToasts(function (prev) { return __spreadArrays(prev.slice(0, index), prev.slice(index + 1)); });
}, [_pop, toastsRef]);
var modify = useCallback(function (id, update) {
setToasts(function (prev) {
var index = prev.findIndex(function (t) { return t.toastId === id; });
if (index === -1)
return prev;
return __spreadArrays(prev.slice(0, index), [__assign(__assign({}, prev[index]), update)], prev.slice(index + 1));
});
}, []);
var exists = useCallback(function (id) {
var index = toastsRef.current.findIndex(function (t) { return t.toastId === id; });
if (index === -1)
return false;
if (closingRef.current && index === 0)
return false;
return true;
}, [closingRef, toastsRef]);
var value = useMemo(function () { return ({ add: add, remove: remove, modify: modify, exists: exists }); }, [add, remove, modify, exists]);
var padding = useMemo(function () {
if (customPadding === undefined)
return undefined;
var isTop = ['top-left', 'top', 'top-right'].includes(position);
return customPadding !== undefined
? {
paddingTop: isTop ? customPadding : undefined,
paddingBottom: isTop ? undefined : customPadding,
}
: undefined;
}, [customPadding, position]);
var toastProviderClass = classnames('ui__toastProvider', { 'ui__toastProvider--closing': closing });
var toastClass = classnames('ui__toastProvider__toast', "ui__toastProvider__toast--position-" + position, className);
return (React.createElement(ToastContext.Provider, { value: value },
toastId && (React.createElement(Overlay, null,
React.createElement("div", { className: toastClass, key: toastId, style: padding },
React.createElement(Toast, __assign({}, toastProps, { role: toastProps.message === 'error' ? 'alert' : 'status', "aria-live": toastProps.message === 'error' ? 'assertive' : 'polite', onMouseEnter: onHover, onMouseLeave: onBlur, className: toastProviderClass, onClose: closable ? _pop : undefined }))))),
children));
};