UNPKG

@steambrew/client

Version:
42 lines (41 loc) 3.89 kB
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { memo } from 'react'; import { findClassModule } from '../class-mapper'; import Logger from '../logger'; import { Navigation } from '../modules/Router'; import { joinClassNames } from '../utils'; import { Focusable } from './Focusable'; const logger = new Logger('ToastRenderer'); // TODO there are more of these export var ToastLocation; (function (ToastLocation) { /** Big Picture popup toasts */ ToastLocation[ToastLocation["GAMEPADUI_POPUP"] = 1] = "GAMEPADUI_POPUP"; /** QAM Notifications tab */ ToastLocation[ToastLocation["GAMEPADUI_QAM"] = 3] = "GAMEPADUI_QAM"; })(ToastLocation || (ToastLocation = {})); const templateClasses = findClassModule((m) => m.ShortTemplate) || {}; // These are memoized as they like to randomly rerender const GamepadUIPopupToast = memo(({ toast }) => { return (_jsxs("div", { style: { '--toast-duration': `${toast.duration}ms` }, onClick: toast.onClick, className: joinClassNames(templateClasses.ShortTemplate, toast.className || '', 'MillenniumGamepadUIPopupToast'), children: [toast.logo && _jsx("div", { className: templateClasses.StandardLogoDimensions, children: toast.logo }), _jsxs("div", { className: joinClassNames(templateClasses.Content, toast.contentClassName || ''), children: [_jsxs("div", { className: templateClasses.Header, children: [toast.icon && _jsx("div", { className: templateClasses.Icon, children: toast.icon }), _jsx("div", { className: templateClasses.Title, children: toast.title })] }), _jsx("div", { className: templateClasses.Body, children: toast.body })] })] })); }); const GamepadUIQAMToast = memo(({ toast, newIndicator }) => { // The fields aren't mismatched, the logic for these is just a bit weird. return (_jsx(Focusable, { onActivate: () => { toast.onClick?.(); Navigation.CloseSideMenus(); }, className: joinClassNames(templateClasses.StandardTemplateContainer, toast.className || '', 'MillenniumGamepadUIQAMToast'), children: _jsxs("div", { className: templateClasses.StandardTemplate, children: [toast.logo && _jsx("div", { className: templateClasses.StandardLogoDimensions, children: toast.logo }), _jsxs("div", { className: joinClassNames(templateClasses.Content, toast.contentClassName || ''), children: [_jsxs("div", { className: templateClasses.Header, children: [toast.icon && _jsx("div", { className: templateClasses.Icon, children: toast.icon }), toast.title && _jsx("div", { className: templateClasses.Title, children: toast.title }), toast.timestamp && _jsx("div", { className: templateClasses.Timestamp, children: toast.timestamp.toLocaleTimeString(undefined, { timeStyle: 'short' }) })] }), toast.body && _jsx("div", { className: templateClasses.StandardNotificationDescription, children: toast.body }), toast.subtext && _jsx("div", { className: templateClasses.StandardNotificationSubText, children: toast.subtext })] }), newIndicator && (_jsx("div", { className: templateClasses.NewIndicator, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "50", viewBox: "0 0 50 50", fill: "none", children: _jsx("circle", { fill: "currentColor", cx: "25", cy: "25", r: "25" }) }) }))] }) })); }); /** @hide @internal This is not meant for external use */ export const ToastRenderer = memo(({ toast, location, newIndicator }) => { switch (location) { default: logger.warn(`Toast UI not implemented for location ${location}! Falling back to GamepadUIQAMToast.`); return _jsx(GamepadUIQAMToast, { toast: toast, newIndicator: false }); case ToastLocation.GAMEPADUI_POPUP: return _jsx(GamepadUIPopupToast, { toast: toast }); case ToastLocation.GAMEPADUI_QAM: return _jsx(GamepadUIQAMToast, { toast: toast, newIndicator: newIndicator }); } }); export default ToastRenderer;