@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
40 lines (39 loc) • 2.87 kB
JavaScript
import { __assign, __rest } from "tslib";
import classnames from 'classnames';
import React, { useMemo } from 'react';
import { getStringId } from '../../utils';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { IconButton } from '../IconButton';
import { Spinner } from '../Spinner';
export var Toast = function (_a) {
var heading = _a.heading, children = _a.children, _b = _a.message, message = _b === void 0 ? 'info' : _b, onClose = _a.onClose, _c = _a.closeLabel, closeLabel = _c === void 0 ? 'Close' : _c, action = _a.action, className = _a.className, _d = _a.role, role = _d === void 0 ? 'status' : _d, _e = _a["aria-live"], ariaLive = _e === void 0 ? 'polite' : _e, _f = _a["aria-atomic"], ariaAtomic = _f === void 0 ? true : _f, props = __rest(_a, ["heading", "children", "message", "onClose", "closeLabel", "action", "className", "role", 'aria-live', 'aria-atomic']);
var headingId = useMemo(function () { return getStringId('toast_heading'); }, []);
var bodyId = useMemo(function () { return getStringId('toast_body'); }, []);
var icon = useMemo(function () {
switch (message) {
case 'info':
return 'Info';
case 'success':
return 'Success';
case 'warning':
return 'Warning';
case 'error':
return 'Error';
case 'loading':
return undefined;
}
}, [message]);
var toastClass = classnames('ui__base ui__toast', "ui__toast--message-" + message, className);
return (React.createElement("div", __assign({ "aria-labelledby": heading ? headingId : undefined, "aria-describedby": children ? bodyId : undefined }, props, { className: toastClass, role: role, "aria-live": ariaLive, "aria-atomic": ariaAtomic }),
React.createElement("div", { className: "ui__toast__border" }),
icon ? React.createElement(Icon, { icon: icon, className: "ui__toast__icon" }) : React.createElement(Spinner, { className: "ui__toast__spinner" }),
React.createElement("div", { className: "ui__toast__copy" },
heading ? (React.createElement("div", { className: "ui__toast__copy__heading", id: headingId }, heading)) : undefined,
children ? (React.createElement("div", { className: "ui__toast__copy__body", id: bodyId }, children)) : undefined),
action ? (React.createElement("div", { className: "ui__toast__action" },
React.createElement(Button, { className: "ui__toast__button", onClick: action.onClick, buttonStyle: "borderless" }, action.text))) : undefined,
onClose ? (React.createElement("div", { className: "ui__toast__action" },
React.createElement(IconButton, { onClick: onClose, "aria-label": closeLabel },
React.createElement(Icon, { icon: "Close" })))) : undefined));
};