@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
104 lines (100 loc) • 4.62 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_alert = require('../alert/alert.cjs');
const require_close_button = require('../close-button/close-button.cjs');
const require_notice_style = require('./notice.style.cjs');
const require_notice_provider = require('./notice-provider.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let sonner = require("sonner");
sonner = require_rolldown_runtime.__toESM(sonner);
//#region src/components/notice/notice.tsx
const PLACEMENT_MAP = {
end: "bottom-center",
"end-center": "bottom-center",
"end-end": "bottom-right",
"end-start": "bottom-left",
start: "top-center",
"start-center": "top-center",
"start-end": "top-right",
"start-start": "top-left"
};
const { PropsContext: NoticePropsContext, usePropsContext: useNoticePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("notice", require_notice_style.noticeStyle);
const NoticeRoot = withProvider(({ ref, expand, limit, placement,...rest }) => {
const { getId } = require_notice_provider.useNoticeContext();
const position = (0, react.useMemo)(() => PLACEMENT_MAP[placement], [placement]);
const [updatedLimit, setUpdatedLimit] = (0, react.useState)(limit);
const getLimit = (0, react.useCallback)((target) => {
if (target === placement && updatedLimit !== limit) return updatedLimit;
else return limit;
}, [
placement,
limit,
updatedLimit
]);
const updateLimit = (0, react.useCallback)(({ limit: limit$1, placement: target }) => {
if (target === placement) setUpdatedLimit(limit$1);
}, [placement]);
require_ref.assignRef(ref.current.updateLimit, updateLimit);
require_ref.assignRef(ref.current.getLimit, getLimit);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, {
id: getId(placement),
containerAriaLabel: "",
expand,
gap: 16,
hotkey: [""],
mobileOffset: "var(--mobile-offset)",
offset: "var(--offset)",
position,
visibleToasts: updatedLimit
})
});
}, "root")();
const NoticeItem = withContext(({ id, variant = "plain", closable, closeStrategies = ["click", "drag"], description, loadingScheme, status, title, withIcon = true, closeButtonProps, contentProps, descriptionProps, iconProps, loadingProps, titleProps, onClick,...rest }) => {
const onClose = (0, react.useCallback)(() => sonner.toast.dismiss(id), [id]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_alert.AlertRoot, {
variant,
status,
...rest,
onClick: (0, require_utils_index.utils_exports.handlerAll)(onClick, closable && closeStrategies.includes("click") ? onClose : require_utils_index.utils_exports.noop),
children: [
withIcon ? loadingScheme ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertLoading, {
loadingScheme,
...loadingProps
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertIcon, { ...iconProps }) : null,
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NoticeContent, {
"data-close-button": (0, require_utils_index.utils_exports.dataAttr)(closable && closeStrategies.includes("button")),
...contentProps,
children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertTitle, {
me: "0",
...titleProps,
children: title
}) : null, description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertDescription, {
lineClamp: 2,
...descriptionProps,
children: description
}) : null]
}),
closable && closeStrategies.includes("button") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoticeCloseButton, {
"data-variant": variant,
...closeButtonProps,
onClick: (0, require_utils_index.utils_exports.handlerAll)(closeButtonProps?.onClick, onClose)
}) : null
]
});
}, "item")();
const NoticeContent = withContext("div", "content")();
const NoticeCloseButton = withContext(require_close_button.CloseButton, "closeButton")();
//#endregion
exports.NoticeItem = NoticeItem;
exports.NoticeRoot = NoticeRoot;
exports.PLACEMENT_MAP = PLACEMENT_MAP;
//# sourceMappingURL=notice.cjs.map