@wordpress/components
Version:
UI components for WordPress.
120 lines (119 loc) • 3.62 kB
JavaScript
// packages/components/src/notice/index.tsx
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import { RawHTML, useEffect, renderToString } from "@wordpress/element";
import { speak } from "@wordpress/a11y";
import { close } from "@wordpress/icons";
import Button from "../button";
import { VisuallyHidden } from "../visually-hidden";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var noop = () => {
};
function useSpokenMessage(message, politeness) {
const spokenMessage = typeof message === "string" ? message : renderToString(message);
useEffect(() => {
if (spokenMessage) {
speak(spokenMessage, politeness);
}
}, [spokenMessage, politeness]);
}
function getDefaultPoliteness(status) {
switch (status) {
case "success":
case "warning":
case "info":
return "polite";
// The default will also catch the 'error' status.
default:
return "assertive";
}
}
function getStatusLabel(status) {
switch (status) {
case "warning":
return __("Warning notice");
case "info":
return __("Information notice");
case "error":
return __("Error notice");
// The default will also catch the 'success' status.
default:
return __("Notice");
}
}
function Notice({
className,
status = "info",
children,
spokenMessage = children,
onRemove = noop,
isDismissible = true,
actions = [],
politeness = getDefaultPoliteness(status),
__unstableHTML,
// onDismiss is a callback executed when the notice is dismissed.
// It is distinct from onRemove, which _looks_ like a callback but is
// actually the function to call to remove the notice from the UI.
onDismiss = noop
}) {
useSpokenMessage(spokenMessage, politeness);
const classes = clsx(className, "components-notice", "is-" + status, {
"is-dismissible": isDismissible
});
if (__unstableHTML && typeof children === "string") {
children = /* @__PURE__ */ _jsx(RawHTML, {
children
});
}
const onDismissNotice = () => {
onDismiss();
onRemove();
};
return /* @__PURE__ */ _jsxs("div", {
className: classes,
children: [/* @__PURE__ */ _jsx(VisuallyHidden, {
children: getStatusLabel(status)
}), /* @__PURE__ */ _jsxs("div", {
className: "components-notice__content",
children: [children, actions.length > 0 && /* @__PURE__ */ _jsx("div", {
className: "components-notice__actions",
children: actions.map(({
className: buttonCustomClasses,
label,
isPrimary,
variant,
noDefaultClasses = false,
onClick,
url
}, index) => {
let computedVariant = variant;
if (variant !== "primary" && !noDefaultClasses) {
computedVariant = !url ? "secondary" : "link";
}
if (typeof computedVariant === "undefined" && isPrimary) {
computedVariant = "primary";
}
return /* @__PURE__ */ _jsx(Button, {
__next40pxDefaultSize: true,
href: url,
variant: computedVariant,
onClick: url ? void 0 : onClick,
className: clsx("components-notice__action", buttonCustomClasses),
children: label
}, index);
})
})]
}), isDismissible && /* @__PURE__ */ _jsx(Button, {
size: "small",
className: "components-notice__dismiss",
icon: close,
label: __("Close"),
onClick: onDismissNotice
})]
});
}
var notice_default = Notice;
export {
notice_default as default
};
//# sourceMappingURL=index.js.map