@choi-ui/react-toast/dist/index.js

This package provides easy access to toast messages in React applications.

"use strict";var Y=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var Z=(t,o)=>{for(var r in o)d(t,r,{get:o[r],enumerable:!0})},C=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of z(o))!F.call(t,a)&&a!==r&&d(t,a,{get:()=>o[a],enumerable:!(n=_(o,a))||n.enumerable});return t};var c=(t,o,r)=>(r=t!=null?Y(W(t)):{},C(o||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),q=t=>C(d({},"__esModule",{value:!0}),t);var ot={};Z(ot,{default:()=>G,onToast:()=>V});module.exports=q(ot);var $=c(require("react")),D=c(require("react-dom"));var y=require("react"),T=[],h=()=>{},H=(t,o)=>{switch(o.type){case"ADD_TOAST":return[...t,{...o.payload}];case"REMOVE_TOAST":return t.filter(r=>r.id!==o.payload);default:return t}},v=t=>{T=H(T,t),h(T)},k=()=>{let[t,o]=(0,y.useState)(T);return(0,y.useEffect)(()=>(h=o,()=>{h=()=>{}}),[]),t};var e=require("@emotion/react"),l=c(require("@emotion/styled"));var m=require("react/jsx-runtime"),J=t=>(0,m.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",...t,children:[(0,m.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.421 7.42167C7.69437 7.1483 8.13758 7.1483 8.41095 7.42167L16.5776 15.5883C16.851 15.8617 16.851 16.3049 16.5776 16.5783C16.3042 16.8517 15.861 16.8517 15.5877 16.5783L7.421 8.41162C7.14763 8.13825 7.14763 7.69504 7.421 7.42167Z",fill:"white"}),(0,m.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.5776 7.42167C16.851 7.69504 16.851 8.13825 16.5776 8.41162L8.41095 16.5783C8.13758 16.8517 7.69437 16.8517 7.421 16.5783C7.14763 16.3049 7.14763 15.8617 7.421 15.5883L15.5877 7.42167C15.861 7.1483 16.3042 7.1483 16.5776 7.42167Z",fill:"white"})]}),w=J;var K=(0,e.keyframes)({"0%":{transform:"translateY(-120%)"},"100%":{transform:"translateY(0)"}}),A=(0,e.keyframes)({"0%":{transform:"translateX(-120%)"},"100%":{transform:"translateX(0)"}}),R=(0,e.keyframes)({"0%":{transform:"translateX(120%)"},"100%":{transform:"translateX(0)"}}),N=(0,e.keyframes)({"0%":{transform:"translateY(120%)"},"100%":{transform:"translateY(0)"}}),Q={top:K,"top-left":A,"top-right":R,bottom:N,"bottom-left":A,"bottom-right":R},P={type:{success:e.css`
      --main-color: #ffffff;
      --main-background: #55a0ee;
    `,warn:e.css`
      --main-color: #ffffff;
      --main-background: #f1ad0f;
    `,error:e.css`
      --main-color: #ffffff;
      --main-background: #c9162b;
    `,default:e.css`
      --main-color: #ffffff;
      --main-background: #343a40;
    `},variants:{filled:e.css`
      color: var(--main-color);
      background: var(--main-background);
    `,outlined:e.css`
      color: var(--main-background);
      background: #fff;
      border: 1px solid var(--main-background);
    `}},E=l.default.div`
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;

  box-sizing: content-box;
  min-width: 320px;
  max-width: 640px;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 16px;

  border-radius: 8px;

  ${({type:t})=>t&&P.type[t]}
  ${({variants:t})=>t&&P.variants[t]}
  ${({position:t})=>t&&e.css`
      animation: ${Q[t]} 0.3s forwards;
    `}
`,I=l.default.button`
  height: 24px;
  padding: 0;
  background: none;
  border: none;
`,O=(0,l.default)(w)`
  ${({variant:t})=>t==="outlined"?e.css`
          > path {
            fill: var(--main-background);
          }
        `:e.css`
          > path {
            fill: var(--main-color);
          }
        `}
`,U={top:e.css`
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  `,"top-left":e.css`
    top: 20px;
    left: 20px;
  `,"top-right":e.css`
    top: 20px;
    right: 20px;
  `,bottom:e.css`
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  `,"bottom-left":e.css`
    bottom: 20px;
    left: 20px;
  `,"bottom-right":e.css`
    right: 20px;
    bottom: 20px;
  `},M=l.default.div`
  position: fixed;
  z-index: 10000;
  overflow: hidden;
  box-sizing: border-box;

  ${({position:t})=>U[t]};
`;var u=c(require("react"));var B=require("uuid");var V=t=>{let o=(0,B.v4)();v({type:"ADD_TOAST",payload:{...t,id:o}})},S=t=>{v({type:"REMOVE_TOAST",payload:t})};var s=require("react/jsx-runtime"),j=({id:t,message:o,duration:r,isClosable:n,type:a,custom:g,variants:f,position:b})=>((0,u.useEffect)(()=>{let i=setTimeout(()=>{S(String(t))},r);return()=>clearTimeout(i)},[t,r]),(0,s.jsxs)(E,{type:a,variants:f,position:b,children:[g?.()??(0,s.jsx)("span",{children:o?.split(`
`).map((i,x)=>(0,s.jsxs)(u.default.Fragment,{children:[i,(0,s.jsx)("br",{})]},x))}),n&&(0,s.jsx)(I,{onClick:()=>S(String(t)),children:(0,s.jsx)(O,{variant:f})})]})),X=j;var p=require("react/jsx-runtime"),tt=()=>{let o=k().reduce((r,n)=>{let a=n.position??"bottom";return(r[a]??=[]).push(n),r},{});return D.default.createPortal((0,p.jsx)(p.Fragment,{children:Object.keys(o).map(r=>(0,p.jsx)(M,{position:r,children:o[r].map(({id:n,message:a="",type:g="default",isClosable:f=!0,duration:b=3e3,variants:i="filled",position:x="bottom",...L})=>$.default.cloneElement((0,p.jsx)(X,{}),{id:n,message:a,type:g,isClosable:f,duration:b,variants:i,position:x,key:n,...L}))},r))}),document.body)},G=tt;0&&(module.exports={onToast});
//# sourceMappingURL=index.js.map