ifo-custom-alert/dist/index.js

A customizable React alert system for displaying success, error, warning, and info messages.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("CustomAlerts",["React"],t):"object"==typeof exports?exports.CustomAlerts=t(require("react")):e.CustomAlerts=t(e.React)}(this,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var l=r[e]={exports:{}};return t[e](l,l.exports,o),l.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{OCAlert:()=>p,OCAlertsProvider:()=>u,useAlert:()=>d});var l=o(156),a=o.n(l);const s=({id:e,type:t,message:r,onClose:o})=>a().createElement("div",{style:{...(()=>{switch(t){case"alertSuccess":return{color:"#28a745"};case"alertError":return{color:"#dc3545"};case"alertWarning":return{color:"#ffc107",color:"black"};default:return{color:"#17a2b8"}}})(),position:"fixed",top:"10%",left:"50%",width:"40%",transform:"translate(-50%, -10%)",zIndex:1e5,boxShadow:"0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",border:"none",borderBottom:"6px solid",fontSize:"110%",background:"#eaeaea",overflow:"hidden",marginBottom:"15px"}},a().createElement("div",{style:{padding:".75rem 1.25rem",borderRadius:".25rem",display:"flex",alignItems:"center",color:"black",justifyContent:"space-between"}},a().createElement("span",null,r),a().createElement("button",{onClick:o,style:{background:"none",border:"none",color:"red",fontSize:"20px",cursor:"pointer",marginLeft:"10px"}},"×"))),i=(0,l.createContext)();class c{static alertContext=null;static setContext(e){this.alertContext=e}static alertSuccess(e,t={},r=null){if(this.alertContext)return this.alertContext.alertSuccess(e,t.timeOut,r);console.alertError("CustomAlert.alertContext is not set.")}static alertError(e,t={},r=null){return this.alertContext.alertError(e,t.timeOut,r)}static alertWarning(e,t={},r=null){return this.alertContext.alertWarning(e,t.timeOut,r)}static alertInfo(e,t={},r=null){return this.alertContext.alertInfo(e,t.timeOut,r)}static closeAlert(e){return this.alertContext.close(e)}static closeAll(){return this.alertContext.closeAll()}}const u=({children:e})=>{const[t,r]=(0,l.useState)([]),o=(0,l.useCallback)(((e,t="alertInfo",o=5e3,l=null)=>{const a=Date.now();r((r=>[...r,{id:a,message:e,type:t}])),o>0&&setTimeout((()=>{n(a),l&&l()}),o)}),[]),n=(0,l.useCallback)((e=>{r((t=>t.filter((t=>t.id!==e))))}),[]),u=(0,l.useCallback)((()=>r([])),[]),d=(0,l.useMemo)((()=>{const e={alertSuccess:(e,t,r)=>o(e,"alertSuccess",t,r),alertError:(e,t,r)=>o(e,"alertError",t,r),alertWarning:(e,t,r)=>o(e,"alertWarning",t,r),alertInfo:(e,t,r)=>o(e,"alertInfo",t,r),close:n,closeAll:u};return c.setContext(e),e}),[o,n,u]);return a().createElement(i.Provider,{value:d},e,t.map((e=>a().createElement(s,{key:e.id,id:e.id,type:e.type,message:e.message,onClose:()=>n(e.id)}))))},d=()=>{const e=(0,l.useContext)(i);if(!e)throw new Error("useAlert must be used within an OCAlertsProvider");return e},p=c;return n})()));