import{r,_ as R,t as W,R as l,T as X,i as u,k as A,P as t,m as Z,at as D,av as q,O as $,j as e,C as _,a as y,n as ee,h as N,l as C,o as x,y as P}from"./index-CkOgjk1L.js";import{C as T}from"./CCardHeader-CVLkbhw7.js";var L=r.createContext({}),d=r.forwardRef(function(s,a){var i=s.children,o=s.animation,n=o===void 0?!0:o,c=s.autohide,U=c===void 0?!0:c,E=s.className,p=s.color,v=s.delay,w=v===void 0?5e3:v,m=s.index,b=s.innerKey,k=s.visible,B=k===void 0?!1:k,H=s.onClose,M=s.onShow,G=R(s,["children","animation","autohide","className","color","delay","index","innerKey","visible","onClose","onShow"]),V=r.useRef(),J=W(a,V),z=r.useState(!1),Y=z[0],K=z[1],S=r.useRef();r.useEffect(function(){K(B)},[B]);var Q={visible:Y,setVisible:K};r.useEffect(function(){return function(){return clearTimeout(S.current)}},[]),r.useEffect(function(){F()},[Y]);var F=function(){U&&(clearTimeout(S.current),S.current=window.setTimeout(function(){K(!1)},w))};return l.createElement(X,{in:Y,nodeRef:V,onEnter:function(){return M&&M(m??null)},onExited:function(){return H&&H(m??null)},timeout:250,unmountOnExit:!0},function(O){var j;return l.createElement(L.Provider,{value:Q},l.createElement("div",u({className:A("toast",(j={fade:n},j["bg-".concat(p)]=p,j["border-0"]=p,j["show showing"]=O==="entering"||O==="exiting",j.show=O==="entered",j),E),"aria-live":"assertive","aria-atomic":"true",role:"alert",onMouseEnter:function(){return clearTimeout(S.current)},onMouseLeave:function(){return F()}},G,{key:b,ref:J}),i))})});d.propTypes={animation:t.bool,autohide:t.bool,children:t.node,className:t.string,color:Z,delay:t.number,index:t.number,innerKey:t.oneOfType([t.number,t.string]),onClose:t.func,onShow:t.func,visible:t.bool};d.displayName="CToast";var h=r.forwardRef(function(s,a){var i=s.children,o=s.className,n=R(s,["children","className"]);return l.createElement("div",u({className:A("toast-body",o)},n,{ref:a}),i)});h.propTypes={children:t.node,className:t.string};h.displayName="CToastBody";var g=r.forwardRef(function(s,a){var i=s.children,o=s.as,n=R(s,["children","as"]),c=r.useContext(L).setVisible;return o?l.createElement(o,u({onClick:function(){return c(!1)}},n,{ref:a}),i):l.createElement(D,u({onClick:function(){return c(!1)}},n,{ref:a}))});g.propTypes=u(u({},D.propTypes),{as:t.elementType});g.displayName="CToastClose";var f=r.forwardRef(function(s,a){var i=s.children,o=s.className,n=s.closeButton,c=R(s,["children","className","closeButton"]);return l.createElement("div",u({className:A("toast-header",o)},c,{ref:a}),i,n&&l.createElement(g,null))});f.propTypes={children:t.node,className:t.string,closeButton:t.bool};f.displayName="CToastHeader";var I=r.forwardRef(function(s,a){var i=s.children,o=s.className,n=s.placement,c=s.push,U=R(s,["children","className","placement","push"]),E=r.useState([]),p=E[0],v=E[1],w=r.useRef(0);r.useEffect(function(){w.current++,c&&m(c)},[c]);var m=function(b){v(function(k){return q(q([],k,!0),[l.cloneElement(b,{index:w.current,innerKey:w.current,onClose:function(B){return v(function(H){return H.filter(function(M){return M.props.index!==B})})}})],!1)})};return l.createElement($,{portal:typeof n=="string"},p.length>0||i?l.createElement("div",u({className:A("toaster toast-container",{"position-fixed":n,"top-0":n&&n.includes("top"),"top-50 translate-middle-y":n&&n.includes("middle"),"bottom-0":n&&n.includes("bottom"),"start-0":n&&n.includes("start"),"start-50 translate-middle-x":n&&n.includes("center"),"end-0":n&&n.includes("end")},o)},U,{ref:a}),i,p.map(function(b){return l.cloneElement(b,{visible:!0})})):null)});I.propTypes={children:t.node,className:t.string,placement:t.oneOfType([t.string,t.oneOf(["top-start","top-center","top-end","middle-start","middle-center","middle-end","bottom-start","bottom-center","bottom-end"])]),push:t.any};I.displayName="CToaster";const se=()=>{const[s,a]=r.useState(0),i=r.useRef(),o=e.jsxs(d,{children:[e.jsxs(f,{closeButton:!0,children:[e.jsx("svg",{className:"rounded me-2",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid slice",focusable:"false",role:"img",children:e.jsx("rect",{width:"100%",height:"100%",fill:"#007aff"})}),e.jsx("strong",{className:"me-auto",children:"CoreUI for React.js"}),e.jsx("small",{children:"7 min ago"})]}),e.jsx(h,{children:"Hello, world! This is a toast message."})]});return e.jsxs(e.Fragment,{children:[e.jsx(P,{color:"primary",onClick:()=>a(o),children:"Send a toast"}),e.jsx(I,{ref:i,push:s,placement:"top-end"})]})},re=()=>e.jsxs(_,{children:[e.jsxs(y,{xs:12,children:[e.jsx(ee,{href:"components/toast/"}),e.jsxs(N,{className:"mb-4",children:[e.jsxs(T,{children:[e.jsx("strong",{children:"React Toast"})," ",e.jsx("small",{children:"Basic"})]}),e.jsxs(C,{children:[e.jsx("p",{className:"text-body-secondary small",children:"Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button."}),e.jsx(x,{href:"components/toast",children:e.jsxs(d,{autohide:!1,visible:!0,children:[e.jsxs(f,{closeButton:!0,children:[e.jsx("svg",{className:"rounded me-2",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid slice",focusable:"false",role:"img",children:e.jsx("rect",{width:"100%",height:"100%",fill:"#007aff"})}),e.jsx("strong",{className:"me-auto",children:"CoreUI for React.js"}),e.jsx("small",{children:"7 min ago"})]}),e.jsx(h,{children:"Hello, world! This is a toast message."})]})}),e.jsx(x,{href:"components/toast",children:se()})]})]})]}),e.jsx(y,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(T,{children:[e.jsx("strong",{children:"React Toast"})," ",e.jsx("small",{children:"Translucent"})]}),e.jsxs(C,{children:[e.jsx("p",{className:"text-body-secondary small",children:"Toasts are slightly translucent to blend in with what's below them."}),e.jsx(x,{href:"components/toast#translucent",tabContentClassName:"bg-dark",children:e.jsxs(d,{autohide:!1,visible:!0,children:[e.jsxs(f,{closeButton:!0,children:[e.jsx("svg",{className:"rounded me-2",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid slice",focusable:"false",role:"img",children:e.jsx("rect",{width:"100%",height:"100%",fill:"#007aff"})}),e.jsx("strong",{className:"me-auto",children:"CoreUI for React.js"}),e.jsx("small",{children:"7 min ago"})]}),e.jsx(h,{children:"Hello, world! This is a toast message."})]})})]})]})}),e.jsx(y,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(T,{children:[e.jsx("strong",{children:"React Toast"})," ",e.jsx("small",{children:"Stacking"})]}),e.jsxs(C,{children:[e.jsx("p",{className:"text-body-secondary small",children:"You can stack toasts by wrapping them in a toast container, which will vertically add some spacing."}),e.jsx(x,{href:"components/toast#stacking",children:e.jsxs(I,{className:"position-static",children:[e.jsxs(d,{autohide:!1,visible:!0,children:[e.jsxs(f,{closeButton:!0,children:[e.jsx("svg",{className:"rounded me-2",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid slice",focusable:"false",role:"img",children:e.jsx("rect",{width:"100%",height:"100%",fill:"#007aff"})}),e.jsx("strong",{className:"me-auto",children:"CoreUI for React.js"}),e.jsx("small",{children:"7 min ago"})]}),e.jsx(h,{children:"Hello, world! This is a toast message."})]}),e.jsxs(d,{autohide:!1,visible:!0,children:[e.jsxs(f,{closeButton:!0,children:[e.jsx("svg",{className:"rounded me-2",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid slice",focusable:"false",role:"img",children:e.jsx("rect",{width:"100%",height:"100%",fill:"#007aff"})}),e.jsx("strong",{className:"me-auto",children:"CoreUI for React.js"}),e.jsx("small",{children:"7 min ago"})]}),e.jsx(h,{children:"Hello, world! This is a toast message."})]})]})})]})]})}),e.jsx(y,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(T,{children:[e.jsx("strong",{children:"React Toast"})," ",e.jsx("small",{children:"Custom content"})]}),e.jsxs(C,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Customize your toasts by removing sub-components, tweaking them with"," ",e.jsx("a",{href:"https://coreui.io/docs/utilities/api",children:"utilities"}),", or by adding your own markup. Here we've created a simpler toast by removing the default"," ",e.jsx("code",{children:"<CToastHeader>"}),", adding a custom hide icon from"," ",e.jsx("a",{href:"https://coreui.io/icons/",children:"CoreUI Icons"}),", and using some"," ",e.jsx("a",{href:"https://coreui.io/docs/utilities/flex",children:"flexbox utilities"})," to adjust the layout."]}),e.jsx(x,{href:"components/toast#custom-content",children:e.jsx(d,{autohide:!1,className:"align-items-center",visible:!0,children:e.jsxs("div",{className:"d-flex",children:[e.jsx(h,{children:"Hello, world! This is a toast message."}),e.jsx(g,{className:"me-2 m-auto"})]})})}),e.jsx("p",{className:"text-body-secondary small",children:"Alternatively, you can also add additional controls and components to toasts."}),e.jsx(x,{href:"components/toast#custom-content",children:e.jsx(d,{autohide:!1,visible:!0,children:e.jsxs(h,{children:["Hello, world! This is a toast message.",e.jsxs("div",{className:"mt-2 pt-2 border-top",children:[e.jsx(P,{type:"button",color:"primary",size:"sm",children:"Take action"}),e.jsx(g,{as:P,color:"secondary",size:"sm",className:"ms-1",children:"Close"})]})]})})})]})]})}),e.jsx(y,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(T,{children:[e.jsx("strong",{children:"React Toast"})," ",e.jsx("small",{children:"Custom content"})]}),e.jsxs(C,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Building on the above example, you can create different toast color schemes with our"," ",e.jsx("a",{href:"https://coreui.io/docs/utilities/colors",children:"color"})," and"," ",e.jsx("a",{href:"https://coreui.io/docs/utilities/background",children:"background"})," utilities. Here we've set ",e.jsx("code",{children:'color="primary"'})," and added ",e.jsx("code",{children:".text-white"})," ","class to the ",e.jsx("code",{children:"<Ctoast>"}),", and then set ",e.jsx("code",{children:"white"})," property to our close button. For a crisp edge, we remove the default border with"," ",e.jsx("code",{children:".border-0"}),"."]}),e.jsx(x,{href:"components/toast#color-schemes",children:e.jsx(d,{autohide:!1,color:"primary",className:"text-white align-items-center",visible:!0,children:e.jsxs("div",{className:"d-flex",children:[e.jsx(h,{children:"Hello, world! This is a toast message."}),e.jsx(g,{className:"me-2 m-auto",white:!0})]})})})]})]})})]});export{re as default};
|