UNPKG

koval-ui

Version:

React components collection with minimalistic design. Supports theming, layout, and input validation.

3 lines (2 loc) 2.33 kB
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),w=require("classnames"),m=require("css-vars-hook"),A=require("../../internal/Portal/Portal.cjs"),B=require("../../internal/Icons/IconError.cjs"),b=require("../../internal/Icons/IconClose.cjs"),p=require("../../internal/Icons/IconWarning.cjs"),y=require("../../internal/Icons/IconSuccess.cjs"),C=require("../../internal/Icons/IconNotification.cjs"),k=require("../../internal/hooks/useInterval.cjs"),E=require("../../internal/hooks/useInternalRef.cjs"),P=require("../../internal/Transitions/SlideBottom.cjs"),L=require("../../internal/Actions/ActionButton.cjs"),O=require("../../internal/Actions/ActionsTree.cjs"),W=require("./useToastState.cjs"),e=require("./Toast.module.css.cjs"),h=f.forwardRef(({children:H,className:q,actions:j=[],icon:c,variant:t="default",title:N,body:n,onToggle:r=()=>{},id:a,autoClose:l=null,closeLabel:x="Close",...I},T)=>{const{isOpen:o,closeToast:i}=W.useToastState(a),{LocalRoot:v}=m.useLocalTheme(),{getTheme:R}=m.useRootTheme(),S=c||{default:C.IconNotification,error:B.IconError,success:y.IconSuccess,warning:p.IconWarning}[t];f.useEffect(()=>{r(o)},[o,r]);const u=typeof l=="number",g=u?l*1e3:null;k.useInterval({callback:i,interval:g,condition:u});const d=E.useInternalRef(T);return s.jsx(A.Portal,{children:s.jsx(P.SlideBottom,{show:o,nodeRef:d,children:s.jsx(v,{className:e.default.provider,theme:R(),children:s.jsxs("div",{...I,className:w(e.default.toast,{[e.default.success]:t==="success",[e.default.warning]:t==="warning",[e.default.error]:t==="error"},q),ref:d,children:[s.jsxs("div",{className:e.default.content,children:[s.jsx("div",{className:e.default.left,children:s.jsx(S,{className:e.default.icon})}),s.jsxs("div",{className:e.default.right,children:[s.jsx("div",{className:e.default.title,children:N}),n&&s.jsx("div",{className:e.default.body,children:n})]})]}),s.jsxs("footer",{className:e.default.actions,children:[s.jsx(O.ActionsTree,{actions:j,classNameAction:e.default.actionButton}),s.jsx("div",{className:e.default.row,children:s.jsx(L.ActionButton,{className:e.default.actionButton,onClick:i,icon:b.IconClose,title:x})},`${a}-close`)]})]})})})})});h.displayName="Toast";exports.Toast=h; //# sourceMappingURL=Toast.cjs.map