@steambrew/client
Version:
A support library for creating plugins with Millennium.
59 lines (58 loc) • 4.45 kB
JavaScript
import { memo } from 'react';
import Logger from '../logger';
import { joinClassNames } from '../utils';
import { findClassModule } from '../class-mapper';
import { Focusable } from './Focusable';
import { Navigation } from '../modules/Router';
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 (window.SP_REACT.createElement("div", { style: { '--toast-duration': `${toast.duration}ms` }, onClick: toast.onClick, className: joinClassNames(templateClasses.ShortTemplate, toast.className || '', 'MillenniumGamepadUIPopupToast') },
toast.logo && window.SP_REACT.createElement("div", { className: templateClasses.StandardLogoDimensions }, toast.logo),
window.SP_REACT.createElement("div", { className: joinClassNames(templateClasses.Content, toast.contentClassName || '') },
window.SP_REACT.createElement("div", { className: templateClasses.Header },
toast.icon && window.SP_REACT.createElement("div", { className: templateClasses.Icon }, toast.icon),
window.SP_REACT.createElement("div", { className: templateClasses.Title }, toast.title)),
window.SP_REACT.createElement("div", { className: templateClasses.Body }, toast.body))));
});
const GamepadUIQAMToast = memo(({ toast, newIndicator }) => {
// The fields aren't mismatched, the logic for these is just a bit weird.
return (window.SP_REACT.createElement(Focusable, { onActivate: () => {
toast.onClick?.();
Navigation.CloseSideMenus();
}, className: joinClassNames(templateClasses.StandardTemplateContainer, toast.className || '', 'MillenniumGamepadUIQAMToast') },
window.SP_REACT.createElement("div", { className: templateClasses.StandardTemplate },
toast.logo && window.SP_REACT.createElement("div", { className: templateClasses.StandardLogoDimensions }, toast.logo),
window.SP_REACT.createElement("div", { className: joinClassNames(templateClasses.Content, toast.contentClassName || '') },
window.SP_REACT.createElement("div", { className: templateClasses.Header },
toast.icon && window.SP_REACT.createElement("div", { className: templateClasses.Icon }, toast.icon),
toast.title && window.SP_REACT.createElement("div", { className: templateClasses.Title }, toast.title),
toast.timestamp && window.SP_REACT.createElement("div", { className: templateClasses.Timestamp }, toast.timestamp.toLocaleTimeString(undefined, { timeStyle: 'short' }))),
toast.body && window.SP_REACT.createElement("div", { className: templateClasses.StandardNotificationDescription }, toast.body),
toast.subtext && window.SP_REACT.createElement("div", { className: templateClasses.StandardNotificationSubText }, toast.subtext)),
newIndicator && (window.SP_REACT.createElement("div", { className: templateClasses.NewIndicator },
window.SP_REACT.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "50", viewBox: "0 0 50 50", fill: "none" },
window.SP_REACT.createElement("circle", { fill: "currentColor", cx: "25", cy: "25", r: "25" })))))));
});
/** @hide 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 window.SP_REACT.createElement(GamepadUIQAMToast, { toast: toast, newIndicator: false });
case ToastLocation.GAMEPADUI_POPUP:
return window.SP_REACT.createElement(GamepadUIPopupToast, { toast: toast });
case ToastLocation.GAMEPADUI_QAM:
return window.SP_REACT.createElement(GamepadUIQAMToast, { toast: toast, newIndicator: newIndicator });
}
});
export default ToastRenderer;