@bikdotai/bik-component-library 0.0.853 → 0.0.854
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/toaster/Toaster.js +1 -1
- package/dist/cjs/components/toaster/Toaster.js.map +1 -1
- package/dist/cjs/components/toaster/Toaster.styled.js +7 -7
- package/dist/cjs/components/toaster/Toaster.styled.js.map +1 -1
- package/dist/esm/components/toaster/Toaster.js +30 -25
- package/dist/esm/components/toaster/Toaster.js.map +1 -1
- package/dist/esm/components/toaster/Toaster.styled.js +5 -5
- package/dist/esm/components/toaster/Toaster.styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../assets/icons/alert_triangle.svg.js"),w=require("../../assets/icons/check.svg.js"),S=require("../../assets/icons/cross.svg.js"),j=require("../../assets/icons/errorInfo.svg.js"),O=require("../../assets/icons/info.svg.js"),c=require("react"),k=require("react-dom"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../assets/icons/alert_triangle.svg.js"),w=require("../../assets/icons/check.svg.js"),S=require("../../assets/icons/cross.svg.js"),j=require("../../assets/icons/errorInfo.svg.js"),O=require("../../assets/icons/info.svg.js"),c=require("react"),k=require("react-dom"),s=require("react-toastify"),m=require("./Toaster.styled.js"),x=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),h=require("../button/Button.js"),b=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},I=b(c),R=b(k),v=t=>e.jsxs(x.BodySecondary,{color:"#9E9E9E",customStyles:{fontWeight:600,fontSize:14,width:25},children:[t.duration,"s"]}),y=t=>{const o=t.type==="default"?n.COLORS.content.primary:t.type==="success"?n.COLORS.content.positive:t.type==="error"?n.COLORS.content.negative:t.type==="warning"?n.COLORS.content.warning:n.COLORS.content.brand,[i,u]=c.useState(t.duration||-1);c.useEffect(()=>{if(!t.duration||t.duration<=0){u(-1);return}u(t.duration);const a=setInterval(()=>{u(B=>{const f=B-1;return f<=0?(clearInterval(a),-1):f})},1e3);return()=>clearInterval(a)},[t.duration]);const l=t.blocking&&i===-1?!1:t.blocking&&i>0,d=()=>{!l&&t.closeToast&&t.closeToast()},r=a=>{a.key==="Enter"&&!l&&t.closeToast&&t.closeToast()};return e.jsx("div",{tabIndex:l?-1:0,role:"button",style:{width:i>0?25:20,display:"flex",cursor:l?"not-allowed":"pointer",alignSelf:`${t.alignTop?"flex-start":"center"}`,opacity:l?.5:1,marginLeft:"auto",flexShrink:0},onClick:d,onKeyDown:r,children:i>0?e.jsx(v,{duration:i}):e.jsx(S.default,{height:20,width:20,color:o})})},T=t=>{const o=n.COLORS.content.placeholder,{toasterText:i}=c.useContext(g);return e.jsx(e.Fragment,{children:e.jsxs("div",{style:{display:"flex",flexGrow:1,maxWidth:"100%"},children:[e.jsx("div",{style:{flexGrow:1,marginRight:16,display:"flex",alignItems:"center",minWidth:0,overflow:"hidden"},children:e.jsxs("div",{style:{width:"100%",minWidth:0,wordBreak:"break-word",overflowWrap:"break-word"},children:[t.subText?e.jsx(x.TitleSmall,{color:"inherit",children:t.toastText??i}):e.jsx(x.BodySecondary,{color:"inherit",children:t.toastText??i}),t.subText&&e.jsx("div",{style:{marginTop:2},children:e.jsx(x.BodyCaption,{color:n.COLORS.content.secondary,children:t.subText})})]})}),t.showButton&&e.jsx("div",{style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 0px",minWidth:t.subText?"fit-content":"auto",marginRight:t.showSecondButton?4:0},children:e.jsx(h.Button,{buttonText:t.buttonText,buttonType:"tertiaryGray",color:n.COLORS.content.secondary,onClick:t.onButtonClick})}),t.showSecondButton&&e.jsx("div",{style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 0px",minWidth:t.subText?"fit-content":"auto"},children:e.jsx(h.Button,{buttonText:t.secondButtonText,buttonType:"tertiaryGray",color:n.COLORS.content.secondary,onClick:t.onSecondButtonClick})}),t.showButton||t.showSecondButton?e.jsx("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${o}`,borderRadius:1}}):null]})})},P=t=>{const o=c.useRef(t.toastId||"default-toast"),[i,u]=c.useState(t.text),l=s.cssTransition({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),d=t.type==="default"?null:t.type==="success"?e.jsx(w.default,{width:20,height:20,color:n.COLORS.content.positive}):t.type==="error"?e.jsx(j.default,{width:20,height:20,color:n.COLORS.content.negative}):t.type==="warning"?e.jsx(C.default,{width:20,height:20,color:n.COLORS.content.warning}):e.jsx(O.default,{width:20,height:20,color:n.COLORS.content.brand});c.useEffect(()=>{o.current&&o.current===t.toastId?(u(t.text),s.toast.update(o.current,{autoClose:t.autoClose})):o.current&&o.current!==t.toastId&&r(t.text)},[t.toastId,t.text]);const r=a=>{t.hideLeftIcon!==void 0||t.leftIcon?s.toast(e.jsx(T,{toastText:a,type:t.type||"info",buttonText:t.buttonProps?.buttonText,secondButtonText:t.secondButtonProps?.buttonText,showButton:t.buttonProps?.showButton,showSecondButton:t.secondButtonProps?.showButton,onButtonClick:t.buttonProps?.onButtonClick,onSecondButtonClick:t.secondButtonProps?.onButtonClick,subText:t.subText}),{onClose:t.onCloseToast?t.onCloseToast:()=>({}),icon:t.hideLeftIcon===!0?!1:t.leftIcon?t.leftIcon:t.type==="default"?!1:e.jsx("div",{style:{display:"flex",alignItems:"flex-start"},children:d}),type:t.type,closeButton:t.hideCloseButton?!1:e.jsx(y,{type:t.type||"default",alignTop:!!(t.subText&&!(t.buttonProps?.showButton||t.secondButtonProps?.showButton)),blocking:t.blocking,duration:t.duration}),toastId:t.toastId||"default-toast",transition:l}):o.current=s.toast(e.jsx(T,{toastText:a,type:t.type||"info",buttonText:t.buttonProps?.buttonText,secondButtonText:t.secondButtonProps?.buttonText,showButton:t.buttonProps?.showButton,showSecondButton:t.secondButtonProps?.showButton,onButtonClick:t.buttonProps?.onButtonClick,onSecondButtonClick:t.secondButtonProps?.onButtonClick,subText:t.subText}),{onClose:t.onCloseToast?t.onCloseToast:()=>({}),type:t.type,icon:t.type==="default"?!1:e.jsx("div",{style:{display:"flex",alignItems:"flex-start"},children:d}),closeButton:t.hideCloseButton?!1:e.jsx(y,{type:t.type||"default",alignTop:!!(t.subText&&!(t.buttonProps?.showButton||t.secondButtonProps?.showButton)),blocking:t.blocking,duration:t.duration}),toastId:t.toastId||"default-toast",transition:l})};return c.useEffect(()=>{r()},[]),R.default.createPortal(e.jsx(m.ToasterStyled,{width:t.width,height:t.height,zIndex:t.zIndex,isSubTextIncluded:!!t.subText,type:t.type,children:e.jsx(g.Provider,{value:{toasterText:i},children:e.jsx(s.ToastContainer,{position:t.position||"top-right",closeOnClick:t.closeOnClick||!1,hideProgressBar:t.hideProgressBar||!1,draggable:!1,autoClose:t.autoClose||!1,theme:"colored"})})}),document.body)},g=I.default.createContext({toasterText:""});exports.Toaster=P;
|
|
2
2
|
//# sourceMappingURL=Toaster.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.js","sources":["../../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import AlertTriangle from '@src/assets/icons/alert_triangle.svg';\nimport Check from '@src/assets/icons/check.svg';\nimport Cross from '@src/assets/icons/cross.svg';\nimport Error from '@src/assets/icons/errorInfo.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport React, {\n\tFunctionComponent,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tcssTransition,\n\tId,\n\ttoast,\n\tToastContainer,\n\tToastPosition,\n\tTypeOptions,\n} from 'react-toastify';\nimport { IconProps } from 'react-toastify/dist/components';\nimport { Button } from '@src/components/button';\nimport { ToasterStyled } from '@src/components/toaster/Toaster.styled';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type ToasterButtonProps = {\n\tshowButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n};\nexport type ToasterProps = {\n\ttext: string;\n\tsubText?: string;\n\tposition?: ToastPosition;\n\ttype?: 'info' | 'success' | 'error' | 'default' | 'warning';\n\tduration?: number;\n\tblocking?: boolean;\n\tcloseOnClick?: boolean;\n\thideProgressBar?: boolean;\n\tautoClose?: number | false | undefined;\n\tleftIcon?: React.ReactElement<IconProps>;\n\thideLeftIcon?: boolean;\n\tbuttonProps?: ToasterButtonProps;\n\tsecondButtonProps?: ToasterButtonProps;\n\tonCloseToast?: <T>(props: T) => void;\n\twidth?: string;\n\theight?: string;\n\thideCloseButton?: boolean;\n\tzIndex?: number;\n\ttoastId?: string;\n};\n\nconst CountDownBar: React.FC<{ duration: number }> = (props) => {\n\treturn (\n\t\t<BodySecondary\n\t\t\tcolor={`#9E9E9E`}\n\t\t\tcustomStyles={{\n\t\t\t\tfontWeight: 600,\n\t\t\t\tfontSize: 14,\n\t\t\t\twidth: 25,\n\t\t\t}}\n\t\t>\n\t\t\t{props.duration}s\n\t\t</BodySecondary>\n\t);\n};\n\nconst CloseButton: React.FC<{\n\ttype: string;\n\tcloseToast?: () => Record<string, never>;\n\talignTop?: boolean;\n\tblocking?: boolean;\n\tduration?: number;\n}> = (props) => {\n\tconst iconColor =\n\t\tprops.type === 'default'\n\t\t\t? COLORS.content.primary\n\t\t\t: props.type === 'success'\n\t\t\t? COLORS.content.positive\n\t\t\t: props.type === 'error'\n\t\t\t? COLORS.content.negative\n\t\t\t: props.type === 'warning'\n\t\t\t? COLORS.content.warning\n\t\t\t: COLORS.content.brand;\n\n\t// Each CloseButton has its own independent timer\n\tconst [timerValue, setTimerValue] = useState<number>(props.duration || -1);\n\n\tuseEffect(() => {\n\t\tif (!props.duration || props.duration <= 0) {\n\t\t\tsetTimerValue(-1);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimerValue(props.duration);\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetTimerValue((prev) => {\n\t\t\t\tconst next = prev - 1;\n\t\t\t\tif (next <= 0) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t}, [props.duration]);\n\n\t// Enable button when timerValue is -1, otherwise check blocking and timer\n\tconst isDisabled =\n\t\tprops.blocking && timerValue === -1\n\t\t\t? false\n\t\t\t: props.blocking && timerValue > 0;\n\n\tconst handleClick = () => {\n\t\tif (!isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' && !isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\trole={'button'}\n\t\t\tstyle={{\n\t\t\t\twidth: timerValue > 0 ? 25 : 20,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tcursor: isDisabled ? 'not-allowed' : 'pointer',\n\t\t\t\talignSelf: `${props.alignTop ? 'flex-start' : 'center'}`,\n\t\t\t\topacity: isDisabled ? 0.5 : 1,\n\t\t\t}}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{timerValue > 0 ? (\n\t\t\t\t<CountDownBar duration={timerValue} />\n\t\t\t) : (\n\t\t\t\t<Cross height={20} width={20} color={iconColor} />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst RenderContent: React.FC<{\n\ttoastText?: string;\n\ttype: TypeOptions;\n\tshowButton?: boolean;\n\tshowSecondButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tonSecondButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n\tsecondButtonText?: string;\n\tsubText?: string;\n}> = (props) => {\n\tconst strokeColor = COLORS.content.placeholder;\n\n\tconst { toasterText: toasterTextContext } = useContext(ToastContext);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\tmarginRight: 16,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\toverflowWrap: 'break-word',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.subText ? (\n\t\t\t\t\t\t\t<TitleSmall color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<BodySecondary color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subText && (\n\t\t\t\t\t\t\t<div style={{ marginTop: 2 }}>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{props.subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{props.showButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t\tmarginRight: props.showSecondButton ? 4 : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.buttonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props.showSecondButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.secondButtonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onSecondButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!(props.showButton || props.showSecondButton) ? null : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\tborderRight: `1px solid ${strokeColor}`,\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\ntype Props = ToasterProps;\n\nexport const Toaster: FunctionComponent<Props> = (props) => {\n\tconst toastId = useRef<Id>(props.toastId || 'default-toast');\n\tconst [toastLocal, setToastLocal] = useState(props.text);\n\tconst bounce = cssTransition({\n\t\tenter: 'Toastify__slide-enter',\n\t\texit: 'Toastify__slide-exit',\n\t});\n\n\tconst leftIcon =\n\t\tprops.type === 'default' ? null : props.type === 'success' ? (\n\t\t\t<Check width={20} height={20} color={COLORS.content.positive} />\n\t\t) : props.type === 'error' ? (\n\t\t\t<Error width={20} height={20} color={COLORS.content.negative} />\n\t\t) : props.type === 'warning' ? (\n\t\t\t<AlertTriangle width={20} height={20} color={COLORS.content.warning} />\n\t\t) : (\n\t\t\t<Info width={20} height={20} color={COLORS.content.brand} />\n\t\t);\n\n\tuseEffect(() => {\n\t\t// When toast id is same but text needed to change, we change the text in context and let the toast re-render on its own.\n\t\tif (toastId.current && toastId.current === props.toastId) {\n\t\t\tsetToastLocal(props.text);\n\t\t\ttoast.update(toastId.current, {\n\t\t\t\tautoClose: props.autoClose,\n\t\t\t});\n\t\t\t// If toast ids are different, we call notify again which will stack the toasts up\n\t\t} else if (toastId.current && toastId.current !== props.toastId) {\n\t\t\tnotify(props.text);\n\t\t}\n\t}, [props.toastId, props.text]);\n\n\tconst notify = (toastText?: string) => {\n\t\tif (props.hideLeftIcon !== undefined || props.leftIcon) {\n\t\t\ttoast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.hideLeftIcon === true ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : props.leftIcon ? (\n\t\t\t\t\t\t\tprops.leftIcon\n\t\t\t\t\t\t) : props.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\tcloseButton: (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t} else {\n\t\t\ttoastId.current = toast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\tcloseButton: (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tnotify();\n\t}, []);\n\n\treturn ReactDOM.createPortal(\n\t\t<ToasterStyled\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tzIndex={props.zIndex}\n\t\t\tisSubTextIncluded={!!props.subText}\n\t\t\ttype={props.type}\n\t\t>\n\t\t\t<ToastContext.Provider value={{ toasterText: toastLocal }}>\n\t\t\t\t<ToastContainer\n\t\t\t\t\tposition={props.position || 'top-right'}\n\t\t\t\t\tcloseOnClick={props.closeOnClick || false}\n\t\t\t\t\thideProgressBar={props.hideProgressBar || false}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tautoClose={props.autoClose || false}\n\t\t\t\t\ttheme={'colored'}\n\t\t\t\t/>\n\t\t\t</ToastContext.Provider>\n\t\t</ToasterStyled>,\n\t\tdocument.body,\n\t);\n};\n\nconst ToastContext = React.createContext({\n\ttoasterText: '',\n});\n"],"names":["CountDownBar","props","jsxs","BodySecondary","CloseButton","iconColor","COLORS","timerValue","setTimerValue","useState","useEffect","interval","prev","next","isDisabled","handleClick","handleKeyDown","e","jsx","Cross","RenderContent","strokeColor","toasterTextContext","useContext","ToastContext","Fragment","TitleSmall","BodyCaption","Button","Toaster","toastId","useRef","toastLocal","setToastLocal","bounce","cssTransition","leftIcon","Check","Error","AlertTriangle","Info","toast","notify","toastText","ReactDOM","ToasterStyled","ToastContainer","React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Toaster.js","sources":["../../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import AlertTriangle from '@src/assets/icons/alert_triangle.svg';\nimport Check from '@src/assets/icons/check.svg';\nimport Cross from '@src/assets/icons/cross.svg';\nimport Error from '@src/assets/icons/errorInfo.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport React, {\n\tFunctionComponent,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tcssTransition,\n\tId,\n\ttoast,\n\tToastContainer,\n\tToastPosition,\n\tTypeOptions,\n} from 'react-toastify';\nimport { IconProps } from 'react-toastify/dist/components';\nimport { Button } from '@src/components/button';\nimport { ToasterStyled } from '@src/components/toaster/Toaster.styled';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type ToasterButtonProps = {\n\tshowButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n};\nexport type ToasterProps = {\n\ttext: string;\n\tsubText?: string;\n\tposition?: ToastPosition;\n\ttype?: 'info' | 'success' | 'error' | 'default' | 'warning';\n\tduration?: number;\n\tblocking?: boolean;\n\tcloseOnClick?: boolean;\n\thideProgressBar?: boolean;\n\tautoClose?: number | false | undefined;\n\tleftIcon?: React.ReactElement<IconProps>;\n\thideLeftIcon?: boolean;\n\tbuttonProps?: ToasterButtonProps;\n\tsecondButtonProps?: ToasterButtonProps;\n\tonCloseToast?: <T>(props: T) => void;\n\twidth?: string;\n\theight?: string;\n\thideCloseButton?: boolean;\n\tzIndex?: number;\n\ttoastId?: string;\n};\n\nconst CountDownBar: React.FC<{ duration: number }> = (props) => {\n\treturn (\n\t\t<BodySecondary\n\t\t\tcolor={`#9E9E9E`}\n\t\t\tcustomStyles={{\n\t\t\t\tfontWeight: 600,\n\t\t\t\tfontSize: 14,\n\t\t\t\twidth: 25,\n\t\t\t}}\n\t\t>\n\t\t\t{props.duration}s\n\t\t</BodySecondary>\n\t);\n};\n\nconst CloseButton: React.FC<{\n\ttype: string;\n\tcloseToast?: () => Record<string, never>;\n\talignTop?: boolean;\n\tblocking?: boolean;\n\tduration?: number;\n}> = (props) => {\n\tconst iconColor =\n\t\tprops.type === 'default'\n\t\t\t? COLORS.content.primary\n\t\t\t: props.type === 'success'\n\t\t\t? COLORS.content.positive\n\t\t\t: props.type === 'error'\n\t\t\t? COLORS.content.negative\n\t\t\t: props.type === 'warning'\n\t\t\t? COLORS.content.warning\n\t\t\t: COLORS.content.brand;\n\n\t// Each CloseButton has its own independent timer\n\tconst [timerValue, setTimerValue] = useState<number>(props.duration || -1);\n\n\tuseEffect(() => {\n\t\tif (!props.duration || props.duration <= 0) {\n\t\t\tsetTimerValue(-1);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimerValue(props.duration);\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetTimerValue((prev) => {\n\t\t\t\tconst next = prev - 1;\n\t\t\t\tif (next <= 0) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t}, [props.duration]);\n\n\t// Enable button when timerValue is -1, otherwise check blocking and timer\n\tconst isDisabled =\n\t\tprops.blocking && timerValue === -1\n\t\t\t? false\n\t\t\t: props.blocking && timerValue > 0;\n\n\tconst handleClick = () => {\n\t\tif (!isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' && !isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\trole={'button'}\n\t\t\tstyle={{\n\t\t\t\twidth: timerValue > 0 ? 25 : 20,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tcursor: isDisabled ? 'not-allowed' : 'pointer',\n\t\t\t\talignSelf: `${props.alignTop ? 'flex-start' : 'center'}`,\n\t\t\t\topacity: isDisabled ? 0.5 : 1,\n\t\t\t\t// Pin to the toast's right edge. react-toastify clones this element\n\t\t\t\t// without adding the `Toastify__close-button` class, so the toast's\n\t\t\t\t// own stylesheet cannot position it.\n\t\t\t\tmarginLeft: 'auto',\n\t\t\t\tflexShrink: 0,\n\t\t\t}}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{timerValue > 0 ? (\n\t\t\t\t<CountDownBar duration={timerValue} />\n\t\t\t) : (\n\t\t\t\t<Cross height={20} width={20} color={iconColor} />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst RenderContent: React.FC<{\n\ttoastText?: string;\n\ttype: TypeOptions;\n\tshowButton?: boolean;\n\tshowSecondButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tonSecondButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n\tsecondButtonText?: string;\n\tsubText?: string;\n}> = (props) => {\n\tconst strokeColor = COLORS.content.placeholder;\n\n\tconst { toasterText: toasterTextContext } = useContext(ToastContext);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\tmarginRight: 16,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\toverflowWrap: 'break-word',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.subText ? (\n\t\t\t\t\t\t\t<TitleSmall color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<BodySecondary color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subText && (\n\t\t\t\t\t\t\t<div style={{ marginTop: 2 }}>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{props.subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{props.showButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t\tmarginRight: props.showSecondButton ? 4 : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.buttonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props.showSecondButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.secondButtonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onSecondButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!(props.showButton || props.showSecondButton) ? null : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\tborderRight: `1px solid ${strokeColor}`,\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\ntype Props = ToasterProps;\n\nexport const Toaster: FunctionComponent<Props> = (props) => {\n\tconst toastId = useRef<Id>(props.toastId || 'default-toast');\n\tconst [toastLocal, setToastLocal] = useState(props.text);\n\tconst bounce = cssTransition({\n\t\tenter: 'Toastify__slide-enter',\n\t\texit: 'Toastify__slide-exit',\n\t});\n\n\tconst leftIcon =\n\t\tprops.type === 'default' ? null : props.type === 'success' ? (\n\t\t\t<Check width={20} height={20} color={COLORS.content.positive} />\n\t\t) : props.type === 'error' ? (\n\t\t\t<Error width={20} height={20} color={COLORS.content.negative} />\n\t\t) : props.type === 'warning' ? (\n\t\t\t<AlertTriangle width={20} height={20} color={COLORS.content.warning} />\n\t\t) : (\n\t\t\t<Info width={20} height={20} color={COLORS.content.brand} />\n\t\t);\n\n\tuseEffect(() => {\n\t\t// When toast id is same but text needed to change, we change the text in context and let the toast re-render on its own.\n\t\tif (toastId.current && toastId.current === props.toastId) {\n\t\t\tsetToastLocal(props.text);\n\t\t\ttoast.update(toastId.current, {\n\t\t\t\tautoClose: props.autoClose,\n\t\t\t});\n\t\t\t// If toast ids are different, we call notify again which will stack the toasts up\n\t\t} else if (toastId.current && toastId.current !== props.toastId) {\n\t\t\tnotify(props.text);\n\t\t}\n\t}, [props.toastId, props.text]);\n\n\tconst notify = (toastText?: string) => {\n\t\tif (props.hideLeftIcon !== undefined || props.leftIcon) {\n\t\t\ttoast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.hideLeftIcon === true ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : props.leftIcon ? (\n\t\t\t\t\t\t\tprops.leftIcon\n\t\t\t\t\t\t) : props.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\tcloseButton: props.hideCloseButton ? (\n\t\t\t\t\t\tfalse\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t} else {\n\t\t\ttoastId.current = toast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\tcloseButton: props.hideCloseButton ? (\n\t\t\t\t\t\tfalse\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tnotify();\n\t}, []);\n\n\treturn ReactDOM.createPortal(\n\t\t<ToasterStyled\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tzIndex={props.zIndex}\n\t\t\tisSubTextIncluded={!!props.subText}\n\t\t\ttype={props.type}\n\t\t>\n\t\t\t<ToastContext.Provider value={{ toasterText: toastLocal }}>\n\t\t\t\t<ToastContainer\n\t\t\t\t\tposition={props.position || 'top-right'}\n\t\t\t\t\tcloseOnClick={props.closeOnClick || false}\n\t\t\t\t\thideProgressBar={props.hideProgressBar || false}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tautoClose={props.autoClose || false}\n\t\t\t\t\ttheme={'colored'}\n\t\t\t\t/>\n\t\t\t</ToastContext.Provider>\n\t\t</ToasterStyled>,\n\t\tdocument.body,\n\t);\n};\n\nconst ToastContext = React.createContext({\n\ttoasterText: '',\n});\n"],"names":["CountDownBar","props","jsxs","BodySecondary","CloseButton","iconColor","COLORS","timerValue","setTimerValue","useState","useEffect","interval","prev","next","isDisabled","handleClick","handleKeyDown","e","jsx","Cross","RenderContent","strokeColor","toasterTextContext","useContext","ToastContext","Fragment","TitleSmall","BodyCaption","Button","Toaster","toastId","useRef","toastLocal","setToastLocal","bounce","cssTransition","leftIcon","Check","Error","AlertTriangle","Info","toast","notify","toastText","ReactDOM","ToasterStyled","ToastContainer","React"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("../../constants/Theme.js"),e=require("../../constants/zindex.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=a(i),s=r.default.div`
|
|
2
2
|
--toastify-color-light: #fff;
|
|
3
3
|
--toastify-color-dark: #121212;
|
|
4
4
|
--toastify-text-color-success: ${o.COLORS.content.primary};
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--toastify-toast-min-height: ${t=>t.height||(t.isSubTextIncluded?"70px":"56px")};
|
|
15
15
|
--toastify-toast-max-height: ${t=>t.height||"fit-content"};
|
|
16
16
|
font-family: inherit;
|
|
17
|
-
z-index: ${t=>t.zIndex||
|
|
17
|
+
z-index: ${t=>t.zIndex||e.ComponentZindex.TOASTER};
|
|
18
18
|
|
|
19
19
|
.custom-position {
|
|
20
20
|
position: relative;
|
|
@@ -95,7 +95,8 @@
|
|
|
95
95
|
border-radius: 8px;
|
|
96
96
|
word-wrap: break-word;
|
|
97
97
|
overflow-wrap: break-word;
|
|
98
|
-
|
|
98
|
+
/* Clips the absolutely positioned progress bar to the 8px radius */
|
|
99
|
+
overflow: hidden;
|
|
99
100
|
|
|
100
101
|
@media (max-width: 768px) {
|
|
101
102
|
min-width: 80vw;
|
|
@@ -108,10 +109,9 @@
|
|
|
108
109
|
height: 4px;
|
|
109
110
|
}
|
|
110
111
|
|
|
111
|
-
.Toastify__close-button
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
112
|
+
/* NOTE: no .Toastify__close-button rule here — the close button is always a
|
|
113
|
+
custom element passed via the closeButton option, and react-toastify
|
|
114
|
+
clones it without adding that class. It is positioned inline instead. */
|
|
115
115
|
|
|
116
116
|
.Toastify__toast-icon {
|
|
117
117
|
align-self: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tmargin: 0 32px;\n\t\t}\n\t}\n\n\t/* Mobile positioning - only for top-right (default) */\n\t.Toastify__toast-container--top-right {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 35%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-left */\n\t.Toastify__toast-container--top-left {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for bottom positions */\n\t.Toastify__toast-container--bottom-right,\n\t.Toastify__toast-container--bottom-left,\n\t.Toastify__toast-container--bottom-center {\n\t\t@media (max-width: 768px) {\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-center */\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\toverflow:
|
|
1
|
+
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tmargin: 0 32px;\n\t\t}\n\t}\n\n\t/* Mobile positioning - only for top-right (default) */\n\t.Toastify__toast-container--top-right {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 35%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-left */\n\t.Toastify__toast-container--top-left {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for bottom positions */\n\t.Toastify__toast-container--bottom-right,\n\t.Toastify__toast-container--bottom-left,\n\t.Toastify__toast-container--bottom-center {\n\t\t@media (max-width: 768px) {\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-center */\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\t/* Clips the absolutely positioned progress bar to the 8px radius */\n\t\toverflow: hidden;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmin-width: 80vw;\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.isSubTextIncluded ? '16px 16px' : '12px 16px'};\n\t\t}\n\t}\n\n\t.Toastify__progress-bar {\n\t\theight: 4px;\n\t}\n\n\t/* NOTE: no .Toastify__close-button rule here — the close button is always a\n\t custom element passed via the closeButton option, and react-toastify\n\t clones it without adding that class. It is positioned inline instead. */\n\n\t.Toastify__toast-icon {\n\t\talign-self: center;\n\t\tmargin-inline-end: 12px;\n\t\theight: ${(props) => (props.isSubTextIncluded ? '38px' : '20px')};\n\t}\n\n\t.Toastify__toast-body {\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {\n\t\tbackground: ${COLORS.content.warning};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {\n\t\tbackground: ${COLORS.content.positive};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n\t\tbackground: ${COLORS.content.negative};\n\t}\n\n\t.Toastify__toast-body > div:last-child {\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__slide-enter {\n\t\tanimation: slideIn 1s ease forwards,\n\t\t\tbounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;\n\t}\n\t.Toastify__slide-exit {\n\t\tanimation: slideOut 0.5s ease-in-out forwards;\n\t}\n\t@keyframes bounce {\n\t\t0%,\n\t\t20%,\n\t\t50%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0); /* Start and end at the original position */\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateX(-20px); /* Bouncing up */\n\t\t}\n\t\t60% {\n\t\t\ttransform: translateX(20px); /* Small bounce before settling */\n\t\t}\n\t}\n\t@keyframes slideIn {\n\t\t0% {\n\t\t\ttransform: translateX(-100%); /* Start off-screen to the left */\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0); /* End at the original position */\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes slideOut {\n\t\t0% {\n\t\t\ttransform: translateX(0); /* Start from the original position */\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(100%); /* Slide out to the right */\n\t\t\topacity: 0;\n\t\t}\n\t}\n`;\n"],"names":["ToasterStyled","styled","COLORS","props","ComponentZindex"],"mappings":"iQAKaA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA,kCASFC,EAAAA,OAAO,QAAQ,OAAO;AAAA,gCACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,kCACpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,+BACzBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,0BAC3BA,EAAAA,OAAO,WAAW,UAAU;AAAA,6BACzBA,SAAO,WAAW,SAAS,KAAK;AAAA,2BAClCA,SAAO,WAAW,SAAS,KAAK;AAAA,6BAC9BA,SAAO,WAAW,QAAQ,KAAK;AAAA,gCAC5BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,gCAErBC,GAC/BA,EAAM,SAAWA,EAAM,kBAAoB,OAAS,OAAO;AAAA,gCAC5BA,GAAUA,EAAM,QAAU,aAAa;AAAA;AAAA,YAE3DA,GAAUA,EAAM,QAAUC,EAAAA,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAuDxCF,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAAA,OAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,sBAI3BA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrBA,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,SAAO,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,aAItCC,GAAWA,EAAM,kBAAoB,WAAa,UAAW;AAAA,eAC3DA,GAAUA,EAAM,OAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWjCA,GACXA,EAAM,kBAAoB,YAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe1CA,GAAWA,EAAM,kBAAoB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASlDD,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIvBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
|
|
@@ -4,9 +4,9 @@ import k from "../../assets/icons/check.svg.js";
|
|
|
4
4
|
import v from "../../assets/icons/cross.svg.js";
|
|
5
5
|
import I from "../../assets/icons/errorInfo.svg.js";
|
|
6
6
|
import S from "../../assets/icons/info.svg.js";
|
|
7
|
-
import P, { useRef as R, useState as
|
|
8
|
-
import
|
|
9
|
-
import { cssTransition as
|
|
7
|
+
import P, { useRef as R, useState as T, useEffect as h, useContext as D } from "react";
|
|
8
|
+
import L from "react-dom";
|
|
9
|
+
import { cssTransition as W, toast as r, ToastContainer as E } from "react-toastify";
|
|
10
10
|
import { ToasterStyled as _ } from "./Toaster.styled.js";
|
|
11
11
|
import { TitleSmall as O, BodySecondary as b, BodyCaption as G } from "../TypographyStyle.js";
|
|
12
12
|
import { COLORS as n } from "../../constants/Theme.js";
|
|
@@ -26,25 +26,25 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
26
26
|
]
|
|
27
27
|
}
|
|
28
28
|
), y = (t) => {
|
|
29
|
-
const o = t.type === "default" ? n.content.primary : t.type === "success" ? n.content.positive : t.type === "error" ? n.content.negative : t.type === "warning" ? n.content.warning : n.content.brand, [i,
|
|
29
|
+
const o = t.type === "default" ? n.content.primary : t.type === "success" ? n.content.positive : t.type === "error" ? n.content.negative : t.type === "warning" ? n.content.warning : n.content.brand, [i, c] = T(t.duration || -1);
|
|
30
30
|
h(() => {
|
|
31
31
|
if (!t.duration || t.duration <= 0) {
|
|
32
|
-
|
|
32
|
+
c(-1);
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
|
|
36
|
-
const
|
|
37
|
-
|
|
35
|
+
c(t.duration);
|
|
36
|
+
const a = setInterval(() => {
|
|
37
|
+
c((B) => {
|
|
38
38
|
const f = B - 1;
|
|
39
|
-
return f <= 0 ? (clearInterval(
|
|
39
|
+
return f <= 0 ? (clearInterval(a), -1) : f;
|
|
40
40
|
});
|
|
41
41
|
}, 1e3);
|
|
42
|
-
return () => clearInterval(
|
|
42
|
+
return () => clearInterval(a);
|
|
43
43
|
}, [t.duration]);
|
|
44
44
|
const l = t.blocking && i === -1 ? !1 : t.blocking && i > 0, d = () => {
|
|
45
45
|
!l && t.closeToast && t.closeToast();
|
|
46
|
-
}, u = (
|
|
47
|
-
|
|
46
|
+
}, u = (a) => {
|
|
47
|
+
a.key === "Enter" && !l && t.closeToast && t.closeToast();
|
|
48
48
|
};
|
|
49
49
|
return /* @__PURE__ */ e(
|
|
50
50
|
"div",
|
|
@@ -56,14 +56,19 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
56
56
|
display: "flex",
|
|
57
57
|
cursor: l ? "not-allowed" : "pointer",
|
|
58
58
|
alignSelf: `${t.alignTop ? "flex-start" : "center"}`,
|
|
59
|
-
opacity: l ? 0.5 : 1
|
|
59
|
+
opacity: l ? 0.5 : 1,
|
|
60
|
+
// Pin to the toast's right edge. react-toastify clones this element
|
|
61
|
+
// without adding the `Toastify__close-button` class, so the toast's
|
|
62
|
+
// own stylesheet cannot position it.
|
|
63
|
+
marginLeft: "auto",
|
|
64
|
+
flexShrink: 0
|
|
60
65
|
},
|
|
61
66
|
onClick: d,
|
|
62
67
|
onKeyDown: u,
|
|
63
68
|
children: i > 0 ? /* @__PURE__ */ e(z, { duration: i }) : /* @__PURE__ */ e(v, { height: 20, width: 20, color: o })
|
|
64
69
|
}
|
|
65
70
|
);
|
|
66
|
-
},
|
|
71
|
+
}, g = (t) => {
|
|
67
72
|
const o = n.content.placeholder, { toasterText: i } = D(m);
|
|
68
73
|
return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ s(
|
|
69
74
|
"div",
|
|
@@ -162,21 +167,21 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
162
167
|
}
|
|
163
168
|
) });
|
|
164
169
|
}, X = (t) => {
|
|
165
|
-
const o = R(t.toastId || "default-toast"), [i,
|
|
170
|
+
const o = R(t.toastId || "default-toast"), [i, c] = T(t.text), l = W({
|
|
166
171
|
enter: "Toastify__slide-enter",
|
|
167
172
|
exit: "Toastify__slide-exit"
|
|
168
173
|
}), d = t.type === "default" ? null : t.type === "success" ? /* @__PURE__ */ e(k, { width: 20, height: 20, color: n.content.positive }) : t.type === "error" ? /* @__PURE__ */ e(I, { width: 20, height: 20, color: n.content.negative }) : t.type === "warning" ? /* @__PURE__ */ e(C, { width: 20, height: 20, color: n.content.warning }) : /* @__PURE__ */ e(S, { width: 20, height: 20, color: n.content.brand });
|
|
169
174
|
h(() => {
|
|
170
|
-
o.current && o.current === t.toastId ? (
|
|
175
|
+
o.current && o.current === t.toastId ? (c(t.text), r.update(o.current, {
|
|
171
176
|
autoClose: t.autoClose
|
|
172
177
|
})) : o.current && o.current !== t.toastId && u(t.text);
|
|
173
178
|
}, [t.toastId, t.text]);
|
|
174
|
-
const u = (
|
|
179
|
+
const u = (a) => {
|
|
175
180
|
t.hideLeftIcon !== void 0 || t.leftIcon ? r(
|
|
176
181
|
/* @__PURE__ */ e(
|
|
177
|
-
|
|
182
|
+
g,
|
|
178
183
|
{
|
|
179
|
-
toastText:
|
|
184
|
+
toastText: a,
|
|
180
185
|
type: t.type || "info",
|
|
181
186
|
buttonText: t.buttonProps?.buttonText,
|
|
182
187
|
secondButtonText: t.secondButtonProps?.buttonText,
|
|
@@ -191,7 +196,7 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
191
196
|
onClose: t.onCloseToast ? t.onCloseToast : () => ({}),
|
|
192
197
|
icon: t.hideLeftIcon === !0 ? !1 : t.leftIcon ? t.leftIcon : t.type === "default" ? !1 : /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "flex-start" }, children: d }),
|
|
193
198
|
type: t.type,
|
|
194
|
-
closeButton: /* @__PURE__ */ e(
|
|
199
|
+
closeButton: t.hideCloseButton ? !1 : /* @__PURE__ */ e(
|
|
195
200
|
y,
|
|
196
201
|
{
|
|
197
202
|
type: t.type || "default",
|
|
@@ -205,9 +210,9 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
205
210
|
}
|
|
206
211
|
) : o.current = r(
|
|
207
212
|
/* @__PURE__ */ e(
|
|
208
|
-
|
|
213
|
+
g,
|
|
209
214
|
{
|
|
210
|
-
toastText:
|
|
215
|
+
toastText: a,
|
|
211
216
|
type: t.type || "info",
|
|
212
217
|
buttonText: t.buttonProps?.buttonText,
|
|
213
218
|
secondButtonText: t.secondButtonProps?.buttonText,
|
|
@@ -222,7 +227,7 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
222
227
|
onClose: t.onCloseToast ? t.onCloseToast : () => ({}),
|
|
223
228
|
type: t.type,
|
|
224
229
|
icon: t.type === "default" ? !1 : /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "flex-start" }, children: d }),
|
|
225
|
-
closeButton: /* @__PURE__ */ e(
|
|
230
|
+
closeButton: t.hideCloseButton ? !1 : /* @__PURE__ */ e(
|
|
226
231
|
y,
|
|
227
232
|
{
|
|
228
233
|
type: t.type || "default",
|
|
@@ -238,7 +243,7 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
238
243
|
};
|
|
239
244
|
return h(() => {
|
|
240
245
|
u();
|
|
241
|
-
}, []),
|
|
246
|
+
}, []), L.createPortal(
|
|
242
247
|
/* @__PURE__ */ e(
|
|
243
248
|
_,
|
|
244
249
|
{
|
|
@@ -248,7 +253,7 @@ const z = (t) => /* @__PURE__ */ s(
|
|
|
248
253
|
isSubTextIncluded: !!t.subText,
|
|
249
254
|
type: t.type,
|
|
250
255
|
children: /* @__PURE__ */ e(m.Provider, { value: { toasterText: i }, children: /* @__PURE__ */ e(
|
|
251
|
-
|
|
256
|
+
E,
|
|
252
257
|
{
|
|
253
258
|
position: t.position || "top-right",
|
|
254
259
|
closeOnClick: t.closeOnClick || !1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.js","sources":["../../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import AlertTriangle from '@src/assets/icons/alert_triangle.svg';\nimport Check from '@src/assets/icons/check.svg';\nimport Cross from '@src/assets/icons/cross.svg';\nimport Error from '@src/assets/icons/errorInfo.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport React, {\n\tFunctionComponent,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tcssTransition,\n\tId,\n\ttoast,\n\tToastContainer,\n\tToastPosition,\n\tTypeOptions,\n} from 'react-toastify';\nimport { IconProps } from 'react-toastify/dist/components';\nimport { Button } from '@src/components/button';\nimport { ToasterStyled } from '@src/components/toaster/Toaster.styled';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type ToasterButtonProps = {\n\tshowButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n};\nexport type ToasterProps = {\n\ttext: string;\n\tsubText?: string;\n\tposition?: ToastPosition;\n\ttype?: 'info' | 'success' | 'error' | 'default' | 'warning';\n\tduration?: number;\n\tblocking?: boolean;\n\tcloseOnClick?: boolean;\n\thideProgressBar?: boolean;\n\tautoClose?: number | false | undefined;\n\tleftIcon?: React.ReactElement<IconProps>;\n\thideLeftIcon?: boolean;\n\tbuttonProps?: ToasterButtonProps;\n\tsecondButtonProps?: ToasterButtonProps;\n\tonCloseToast?: <T>(props: T) => void;\n\twidth?: string;\n\theight?: string;\n\thideCloseButton?: boolean;\n\tzIndex?: number;\n\ttoastId?: string;\n};\n\nconst CountDownBar: React.FC<{ duration: number }> = (props) => {\n\treturn (\n\t\t<BodySecondary\n\t\t\tcolor={`#9E9E9E`}\n\t\t\tcustomStyles={{\n\t\t\t\tfontWeight: 600,\n\t\t\t\tfontSize: 14,\n\t\t\t\twidth: 25,\n\t\t\t}}\n\t\t>\n\t\t\t{props.duration}s\n\t\t</BodySecondary>\n\t);\n};\n\nconst CloseButton: React.FC<{\n\ttype: string;\n\tcloseToast?: () => Record<string, never>;\n\talignTop?: boolean;\n\tblocking?: boolean;\n\tduration?: number;\n}> = (props) => {\n\tconst iconColor =\n\t\tprops.type === 'default'\n\t\t\t? COLORS.content.primary\n\t\t\t: props.type === 'success'\n\t\t\t? COLORS.content.positive\n\t\t\t: props.type === 'error'\n\t\t\t? COLORS.content.negative\n\t\t\t: props.type === 'warning'\n\t\t\t? COLORS.content.warning\n\t\t\t: COLORS.content.brand;\n\n\t// Each CloseButton has its own independent timer\n\tconst [timerValue, setTimerValue] = useState<number>(props.duration || -1);\n\n\tuseEffect(() => {\n\t\tif (!props.duration || props.duration <= 0) {\n\t\t\tsetTimerValue(-1);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimerValue(props.duration);\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetTimerValue((prev) => {\n\t\t\t\tconst next = prev - 1;\n\t\t\t\tif (next <= 0) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t}, [props.duration]);\n\n\t// Enable button when timerValue is -1, otherwise check blocking and timer\n\tconst isDisabled =\n\t\tprops.blocking && timerValue === -1\n\t\t\t? false\n\t\t\t: props.blocking && timerValue > 0;\n\n\tconst handleClick = () => {\n\t\tif (!isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' && !isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\trole={'button'}\n\t\t\tstyle={{\n\t\t\t\twidth: timerValue > 0 ? 25 : 20,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tcursor: isDisabled ? 'not-allowed' : 'pointer',\n\t\t\t\talignSelf: `${props.alignTop ? 'flex-start' : 'center'}`,\n\t\t\t\topacity: isDisabled ? 0.5 : 1,\n\t\t\t}}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{timerValue > 0 ? (\n\t\t\t\t<CountDownBar duration={timerValue} />\n\t\t\t) : (\n\t\t\t\t<Cross height={20} width={20} color={iconColor} />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst RenderContent: React.FC<{\n\ttoastText?: string;\n\ttype: TypeOptions;\n\tshowButton?: boolean;\n\tshowSecondButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tonSecondButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n\tsecondButtonText?: string;\n\tsubText?: string;\n}> = (props) => {\n\tconst strokeColor = COLORS.content.placeholder;\n\n\tconst { toasterText: toasterTextContext } = useContext(ToastContext);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\tmarginRight: 16,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\toverflowWrap: 'break-word',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.subText ? (\n\t\t\t\t\t\t\t<TitleSmall color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<BodySecondary color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subText && (\n\t\t\t\t\t\t\t<div style={{ marginTop: 2 }}>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{props.subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{props.showButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t\tmarginRight: props.showSecondButton ? 4 : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.buttonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props.showSecondButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.secondButtonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onSecondButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!(props.showButton || props.showSecondButton) ? null : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\tborderRight: `1px solid ${strokeColor}`,\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\ntype Props = ToasterProps;\n\nexport const Toaster: FunctionComponent<Props> = (props) => {\n\tconst toastId = useRef<Id>(props.toastId || 'default-toast');\n\tconst [toastLocal, setToastLocal] = useState(props.text);\n\tconst bounce = cssTransition({\n\t\tenter: 'Toastify__slide-enter',\n\t\texit: 'Toastify__slide-exit',\n\t});\n\n\tconst leftIcon =\n\t\tprops.type === 'default' ? null : props.type === 'success' ? (\n\t\t\t<Check width={20} height={20} color={COLORS.content.positive} />\n\t\t) : props.type === 'error' ? (\n\t\t\t<Error width={20} height={20} color={COLORS.content.negative} />\n\t\t) : props.type === 'warning' ? (\n\t\t\t<AlertTriangle width={20} height={20} color={COLORS.content.warning} />\n\t\t) : (\n\t\t\t<Info width={20} height={20} color={COLORS.content.brand} />\n\t\t);\n\n\tuseEffect(() => {\n\t\t// When toast id is same but text needed to change, we change the text in context and let the toast re-render on its own.\n\t\tif (toastId.current && toastId.current === props.toastId) {\n\t\t\tsetToastLocal(props.text);\n\t\t\ttoast.update(toastId.current, {\n\t\t\t\tautoClose: props.autoClose,\n\t\t\t});\n\t\t\t// If toast ids are different, we call notify again which will stack the toasts up\n\t\t} else if (toastId.current && toastId.current !== props.toastId) {\n\t\t\tnotify(props.text);\n\t\t}\n\t}, [props.toastId, props.text]);\n\n\tconst notify = (toastText?: string) => {\n\t\tif (props.hideLeftIcon !== undefined || props.leftIcon) {\n\t\t\ttoast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.hideLeftIcon === true ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : props.leftIcon ? (\n\t\t\t\t\t\t\tprops.leftIcon\n\t\t\t\t\t\t) : props.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\tcloseButton: (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t} else {\n\t\t\ttoastId.current = toast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\tcloseButton: (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tnotify();\n\t}, []);\n\n\treturn ReactDOM.createPortal(\n\t\t<ToasterStyled\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tzIndex={props.zIndex}\n\t\t\tisSubTextIncluded={!!props.subText}\n\t\t\ttype={props.type}\n\t\t>\n\t\t\t<ToastContext.Provider value={{ toasterText: toastLocal }}>\n\t\t\t\t<ToastContainer\n\t\t\t\t\tposition={props.position || 'top-right'}\n\t\t\t\t\tcloseOnClick={props.closeOnClick || false}\n\t\t\t\t\thideProgressBar={props.hideProgressBar || false}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tautoClose={props.autoClose || false}\n\t\t\t\t\ttheme={'colored'}\n\t\t\t\t/>\n\t\t\t</ToastContext.Provider>\n\t\t</ToasterStyled>,\n\t\tdocument.body,\n\t);\n};\n\nconst ToastContext = React.createContext({\n\ttoasterText: '',\n});\n"],"names":["CountDownBar","props","jsxs","BodySecondary","CloseButton","iconColor","COLORS","timerValue","setTimerValue","useState","useEffect","interval","prev","next","isDisabled","handleClick","handleKeyDown","e","jsx","Cross","RenderContent","strokeColor","toasterTextContext","useContext","ToastContext","Fragment","TitleSmall","BodyCaption","Button","Toaster","toastId","useRef","toastLocal","setToastLocal","bounce","cssTransition","leftIcon","Check","Error","AlertTriangle","Info","toast","notify","toastText","ReactDOM","ToasterStyled","ToastContainer","React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Toaster.js","sources":["../../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import AlertTriangle from '@src/assets/icons/alert_triangle.svg';\nimport Check from '@src/assets/icons/check.svg';\nimport Cross from '@src/assets/icons/cross.svg';\nimport Error from '@src/assets/icons/errorInfo.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport React, {\n\tFunctionComponent,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n\tcssTransition,\n\tId,\n\ttoast,\n\tToastContainer,\n\tToastPosition,\n\tTypeOptions,\n} from 'react-toastify';\nimport { IconProps } from 'react-toastify/dist/components';\nimport { Button } from '@src/components/button';\nimport { ToasterStyled } from '@src/components/toaster/Toaster.styled';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type ToasterButtonProps = {\n\tshowButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n};\nexport type ToasterProps = {\n\ttext: string;\n\tsubText?: string;\n\tposition?: ToastPosition;\n\ttype?: 'info' | 'success' | 'error' | 'default' | 'warning';\n\tduration?: number;\n\tblocking?: boolean;\n\tcloseOnClick?: boolean;\n\thideProgressBar?: boolean;\n\tautoClose?: number | false | undefined;\n\tleftIcon?: React.ReactElement<IconProps>;\n\thideLeftIcon?: boolean;\n\tbuttonProps?: ToasterButtonProps;\n\tsecondButtonProps?: ToasterButtonProps;\n\tonCloseToast?: <T>(props: T) => void;\n\twidth?: string;\n\theight?: string;\n\thideCloseButton?: boolean;\n\tzIndex?: number;\n\ttoastId?: string;\n};\n\nconst CountDownBar: React.FC<{ duration: number }> = (props) => {\n\treturn (\n\t\t<BodySecondary\n\t\t\tcolor={`#9E9E9E`}\n\t\t\tcustomStyles={{\n\t\t\t\tfontWeight: 600,\n\t\t\t\tfontSize: 14,\n\t\t\t\twidth: 25,\n\t\t\t}}\n\t\t>\n\t\t\t{props.duration}s\n\t\t</BodySecondary>\n\t);\n};\n\nconst CloseButton: React.FC<{\n\ttype: string;\n\tcloseToast?: () => Record<string, never>;\n\talignTop?: boolean;\n\tblocking?: boolean;\n\tduration?: number;\n}> = (props) => {\n\tconst iconColor =\n\t\tprops.type === 'default'\n\t\t\t? COLORS.content.primary\n\t\t\t: props.type === 'success'\n\t\t\t? COLORS.content.positive\n\t\t\t: props.type === 'error'\n\t\t\t? COLORS.content.negative\n\t\t\t: props.type === 'warning'\n\t\t\t? COLORS.content.warning\n\t\t\t: COLORS.content.brand;\n\n\t// Each CloseButton has its own independent timer\n\tconst [timerValue, setTimerValue] = useState<number>(props.duration || -1);\n\n\tuseEffect(() => {\n\t\tif (!props.duration || props.duration <= 0) {\n\t\t\tsetTimerValue(-1);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimerValue(props.duration);\n\n\t\tconst interval = setInterval(() => {\n\t\t\tsetTimerValue((prev) => {\n\t\t\t\tconst next = prev - 1;\n\t\t\t\tif (next <= 0) {\n\t\t\t\t\tclearInterval(interval);\n\t\t\t\t\treturn -1;\n\t\t\t\t}\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t}, [props.duration]);\n\n\t// Enable button when timerValue is -1, otherwise check blocking and timer\n\tconst isDisabled =\n\t\tprops.blocking && timerValue === -1\n\t\t\t? false\n\t\t\t: props.blocking && timerValue > 0;\n\n\tconst handleClick = () => {\n\t\tif (!isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' && !isDisabled && props.closeToast) {\n\t\t\tprops.closeToast();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\trole={'button'}\n\t\t\tstyle={{\n\t\t\t\twidth: timerValue > 0 ? 25 : 20,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tcursor: isDisabled ? 'not-allowed' : 'pointer',\n\t\t\t\talignSelf: `${props.alignTop ? 'flex-start' : 'center'}`,\n\t\t\t\topacity: isDisabled ? 0.5 : 1,\n\t\t\t\t// Pin to the toast's right edge. react-toastify clones this element\n\t\t\t\t// without adding the `Toastify__close-button` class, so the toast's\n\t\t\t\t// own stylesheet cannot position it.\n\t\t\t\tmarginLeft: 'auto',\n\t\t\t\tflexShrink: 0,\n\t\t\t}}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{timerValue > 0 ? (\n\t\t\t\t<CountDownBar duration={timerValue} />\n\t\t\t) : (\n\t\t\t\t<Cross height={20} width={20} color={iconColor} />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nconst RenderContent: React.FC<{\n\ttoastText?: string;\n\ttype: TypeOptions;\n\tshowButton?: boolean;\n\tshowSecondButton?: boolean;\n\tonButtonClick?: () => Record<string, never>;\n\tonSecondButtonClick?: () => Record<string, never>;\n\tbuttonText?: string;\n\tsecondButtonText?: string;\n\tsubText?: string;\n}> = (props) => {\n\tconst strokeColor = COLORS.content.placeholder;\n\n\tconst { toasterText: toasterTextContext } = useContext(ToastContext);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\tmarginRight: 16,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\toverflowWrap: 'break-word',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.subText ? (\n\t\t\t\t\t\t\t<TitleSmall color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<BodySecondary color={'inherit'}>\n\t\t\t\t\t\t\t\t{/* In normal scenarios, we use the text from prop. As a special case, when we need to change the text in already rendered toast, we change the text in context and let this component render on its own */}\n\t\t\t\t\t\t\t\t{props.toastText ?? toasterTextContext}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subText && (\n\t\t\t\t\t\t\t<div style={{ marginTop: 2 }}>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{props.subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{props.showButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t\tmarginRight: props.showSecondButton ? 4 : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.buttonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props.showSecondButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tpadding: '6px 0px',\n\t\t\t\t\t\t\tminWidth: props.subText ? 'fit-content' : 'auto',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={props.secondButtonText}\n\t\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tonClick={props.onSecondButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!(props.showButton || props.showSecondButton) ? null : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\tborderRight: `1px solid ${strokeColor}`,\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\ntype Props = ToasterProps;\n\nexport const Toaster: FunctionComponent<Props> = (props) => {\n\tconst toastId = useRef<Id>(props.toastId || 'default-toast');\n\tconst [toastLocal, setToastLocal] = useState(props.text);\n\tconst bounce = cssTransition({\n\t\tenter: 'Toastify__slide-enter',\n\t\texit: 'Toastify__slide-exit',\n\t});\n\n\tconst leftIcon =\n\t\tprops.type === 'default' ? null : props.type === 'success' ? (\n\t\t\t<Check width={20} height={20} color={COLORS.content.positive} />\n\t\t) : props.type === 'error' ? (\n\t\t\t<Error width={20} height={20} color={COLORS.content.negative} />\n\t\t) : props.type === 'warning' ? (\n\t\t\t<AlertTriangle width={20} height={20} color={COLORS.content.warning} />\n\t\t) : (\n\t\t\t<Info width={20} height={20} color={COLORS.content.brand} />\n\t\t);\n\n\tuseEffect(() => {\n\t\t// When toast id is same but text needed to change, we change the text in context and let the toast re-render on its own.\n\t\tif (toastId.current && toastId.current === props.toastId) {\n\t\t\tsetToastLocal(props.text);\n\t\t\ttoast.update(toastId.current, {\n\t\t\t\tautoClose: props.autoClose,\n\t\t\t});\n\t\t\t// If toast ids are different, we call notify again which will stack the toasts up\n\t\t} else if (toastId.current && toastId.current !== props.toastId) {\n\t\t\tnotify(props.text);\n\t\t}\n\t}, [props.toastId, props.text]);\n\n\tconst notify = (toastText?: string) => {\n\t\tif (props.hideLeftIcon !== undefined || props.leftIcon) {\n\t\t\ttoast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.hideLeftIcon === true ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : props.leftIcon ? (\n\t\t\t\t\t\t\tprops.leftIcon\n\t\t\t\t\t\t) : props.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\tcloseButton: props.hideCloseButton ? (\n\t\t\t\t\t\tfalse\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t} else {\n\t\t\ttoastId.current = toast(\n\t\t\t\t<RenderContent\n\t\t\t\t\ttoastText={toastText}\n\t\t\t\t\ttype={props.type || 'info'}\n\t\t\t\t\tbuttonText={props.buttonProps?.buttonText}\n\t\t\t\t\tsecondButtonText={props.secondButtonProps?.buttonText}\n\t\t\t\t\tshowButton={props.buttonProps?.showButton}\n\t\t\t\t\tshowSecondButton={props.secondButtonProps?.showButton}\n\t\t\t\t\tonButtonClick={props.buttonProps?.onButtonClick}\n\t\t\t\t\tonSecondButtonClick={props.secondButtonProps?.onButtonClick}\n\t\t\t\t\tsubText={props.subText}\n\t\t\t\t/>,\n\t\t\t\t{\n\t\t\t\t\tonClose: props.onCloseToast ? props.onCloseToast : () => ({}),\n\t\t\t\t\ttype: props.type,\n\t\t\t\t\ticon:\n\t\t\t\t\t\tprops.type === 'default' ? (\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'flex-start' }}>\n\t\t\t\t\t\t\t\t{leftIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\tcloseButton: props.hideCloseButton ? (\n\t\t\t\t\t\tfalse\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\ttype={props.type || 'default'}\n\t\t\t\t\t\t\talignTop={\n\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\tprops.subText &&\n\t\t\t\t\t\t\t\t\t!(\n\t\t\t\t\t\t\t\t\t\tprops.buttonProps?.showButton ||\n\t\t\t\t\t\t\t\t\t\tprops.secondButtonProps?.showButton\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblocking={props.blocking}\n\t\t\t\t\t\t\tduration={props.duration}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\ttoastId: props.toastId || 'default-toast',\n\t\t\t\t\ttransition: bounce,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tnotify();\n\t}, []);\n\n\treturn ReactDOM.createPortal(\n\t\t<ToasterStyled\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tzIndex={props.zIndex}\n\t\t\tisSubTextIncluded={!!props.subText}\n\t\t\ttype={props.type}\n\t\t>\n\t\t\t<ToastContext.Provider value={{ toasterText: toastLocal }}>\n\t\t\t\t<ToastContainer\n\t\t\t\t\tposition={props.position || 'top-right'}\n\t\t\t\t\tcloseOnClick={props.closeOnClick || false}\n\t\t\t\t\thideProgressBar={props.hideProgressBar || false}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tautoClose={props.autoClose || false}\n\t\t\t\t\ttheme={'colored'}\n\t\t\t\t/>\n\t\t\t</ToastContext.Provider>\n\t\t</ToasterStyled>,\n\t\tdocument.body,\n\t);\n};\n\nconst ToastContext = React.createContext({\n\ttoasterText: '',\n});\n"],"names":["CountDownBar","props","jsxs","BodySecondary","CloseButton","iconColor","COLORS","timerValue","setTimerValue","useState","useEffect","interval","prev","next","isDisabled","handleClick","handleKeyDown","e","jsx","Cross","RenderContent","strokeColor","toasterTextContext","useContext","ToastContext","Fragment","TitleSmall","BodyCaption","Button","Toaster","toastId","useRef","toastLocal","setToastLocal","bounce","cssTransition","leftIcon","Check","Error","AlertTriangle","Info","toast","notify","toastText","ReactDOM","ToasterStyled","ToastContainer","React"],"mappings":"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"}
|
|
@@ -98,7 +98,8 @@ const n = i.div`
|
|
|
98
98
|
border-radius: 8px;
|
|
99
99
|
word-wrap: break-word;
|
|
100
100
|
overflow-wrap: break-word;
|
|
101
|
-
|
|
101
|
+
/* Clips the absolutely positioned progress bar to the 8px radius */
|
|
102
|
+
overflow: hidden;
|
|
102
103
|
|
|
103
104
|
@media (max-width: 768px) {
|
|
104
105
|
min-width: 80vw;
|
|
@@ -111,10 +112,9 @@ const n = i.div`
|
|
|
111
112
|
height: 4px;
|
|
112
113
|
}
|
|
113
114
|
|
|
114
|
-
.Toastify__close-button
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}
|
|
115
|
+
/* NOTE: no .Toastify__close-button rule here — the close button is always a
|
|
116
|
+
custom element passed via the closeButton option, and react-toastify
|
|
117
|
+
clones it without adding that class. It is positioned inline instead. */
|
|
118
118
|
|
|
119
119
|
.Toastify__toast-icon {
|
|
120
120
|
align-self: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tmargin: 0 32px;\n\t\t}\n\t}\n\n\t/* Mobile positioning - only for top-right (default) */\n\t.Toastify__toast-container--top-right {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 35%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-left */\n\t.Toastify__toast-container--top-left {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for bottom positions */\n\t.Toastify__toast-container--bottom-right,\n\t.Toastify__toast-container--bottom-left,\n\t.Toastify__toast-container--bottom-center {\n\t\t@media (max-width: 768px) {\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-center */\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\toverflow:
|
|
1
|
+
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tmargin: 0 32px;\n\t\t}\n\t}\n\n\t/* Mobile positioning - only for top-right (default) */\n\t.Toastify__toast-container--top-right {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 35%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-left */\n\t.Toastify__toast-container--top-left {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for bottom positions */\n\t.Toastify__toast-container--bottom-right,\n\t.Toastify__toast-container--bottom-left,\n\t.Toastify__toast-container--bottom-center {\n\t\t@media (max-width: 768px) {\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t/* Mobile positioning - for top-center */\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\t/* Clips the absolutely positioned progress bar to the 8px radius */\n\t\toverflow: hidden;\n\n\t\t@media (max-width: 768px) {\n\t\t\tmin-width: 80vw;\n\t\t\tmax-width: calc(100vw - 64px);\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.isSubTextIncluded ? '16px 16px' : '12px 16px'};\n\t\t}\n\t}\n\n\t.Toastify__progress-bar {\n\t\theight: 4px;\n\t}\n\n\t/* NOTE: no .Toastify__close-button rule here — the close button is always a\n\t custom element passed via the closeButton option, and react-toastify\n\t clones it without adding that class. It is positioned inline instead. */\n\n\t.Toastify__toast-icon {\n\t\talign-self: center;\n\t\tmargin-inline-end: 12px;\n\t\theight: ${(props) => (props.isSubTextIncluded ? '38px' : '20px')};\n\t}\n\n\t.Toastify__toast-body {\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {\n\t\tbackground: ${COLORS.content.warning};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {\n\t\tbackground: ${COLORS.content.positive};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n\t\tbackground: ${COLORS.content.negative};\n\t}\n\n\t.Toastify__toast-body > div:last-child {\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__slide-enter {\n\t\tanimation: slideIn 1s ease forwards,\n\t\t\tbounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;\n\t}\n\t.Toastify__slide-exit {\n\t\tanimation: slideOut 0.5s ease-in-out forwards;\n\t}\n\t@keyframes bounce {\n\t\t0%,\n\t\t20%,\n\t\t50%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0); /* Start and end at the original position */\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateX(-20px); /* Bouncing up */\n\t\t}\n\t\t60% {\n\t\t\ttransform: translateX(20px); /* Small bounce before settling */\n\t\t}\n\t}\n\t@keyframes slideIn {\n\t\t0% {\n\t\t\ttransform: translateX(-100%); /* Start off-screen to the left */\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0); /* End at the original position */\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes slideOut {\n\t\t0% {\n\t\t\ttransform: translateX(0); /* Start from the original position */\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(100%); /* Slide out to the right */\n\t\t\topacity: 0;\n\t\t}\n\t}\n`;\n"],"names":["ToasterStyled","styled","COLORS","props","ComponentZindex"],"mappings":";;;AAKO,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA,kCASFC,EAAO,QAAQ,OAAO;AAAA,gCACxBA,EAAO,QAAQ,OAAO;AAAA,kCACpBA,EAAO,QAAQ,OAAO;AAAA,+BACzBA,EAAO,QAAQ,OAAO;AAAA,0BAC3BA,EAAO,WAAW,UAAU;AAAA,6BACzBA,EAAO,WAAW,SAAS,KAAK;AAAA,2BAClCA,EAAO,WAAW,SAAS,KAAK;AAAA,6BAC9BA,EAAO,WAAW,QAAQ,KAAK;AAAA,gCAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA,gCAEtB,CAACC,MAC/BA,EAAM,WAAWA,EAAM,oBAAoB,SAAS,OAAO;AAAA,gCAC7B,CAACA,MAAUA,EAAM,UAAU,aAAa;AAAA;AAAA,YAE5D,CAACA,MAAUA,EAAM,UAAUC,EAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAuDxCF,EAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,sBAI3BA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrBA,EAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAO,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,aAIvC,CAACC,MAAWA,EAAM,oBAAoB,aAAa,UAAW;AAAA,eAC5D,CAACA,MAAUA,EAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWlC,CAACA,MACXA,EAAM,oBAAoB,cAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe3C,CAACA,MAAWA,EAAM,oBAAoB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASlDD,EAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIvBA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|