@edinelsonslima/toast-notification 0.1.48 → 0.2.1
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/README.md +3 -6
- package/index.es.d.ts +10 -0
- package/index.es.js +1 -1
- package/package.json +37 -23
- package/.editorconfig +0 -12
- package/.eslintrc.cjs +0 -18
- package/index.html +0 -12
- package/minify.mjs +0 -24
- package/publish.sh +0 -37
- package/src/@types/index.ts +0 -80
- package/src/app/index.tsx +0 -18
- package/src/components/Toast/toast-container.component.tsx +0 -68
- package/src/components/Toast/toast-message.component.tsx +0 -74
- package/src/components/Toast/toast.styles.module.css +0 -178
- package/src/helpers/get-custom-css.helpers.ts +0 -9
- package/src/helpers/toast-content-sanitize.helpers.ts +0 -15
- package/src/helpers/toast-type.helpers.ts +0 -15
- package/src/helpers/toast.helper.ts +0 -41
- package/src/index.ts +0 -10
- package/src/services/event-manager.service.ts +0 -42
- package/src/vite-env.d.ts +0 -1
- package/tsconfig.json +0 -26
- package/tsconfig.node.json +0 -10
- package/vite.config.ts +0 -33
package/README.md
CHANGED
|
@@ -20,11 +20,11 @@ npm install @edinelsonslima/toast-notification
|
|
|
20
20
|
|
|
21
21
|
## 👨🏻💻 Modo de usar
|
|
22
22
|
- Adicione o componente `<ToastContainer/>` em algum lugar da sua aplicação;
|
|
23
|
-
- Importe os estilos css de `import '@edinelsonslima/toast-notification/
|
|
23
|
+
- Importe os estilos css de `import '@edinelsonslima/toast-notification/style.css'`;
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
26
|
import { ToastContainer } from '@edinelsonslima/toast-notification';
|
|
27
|
-
import '@edinelsonslima/toast-notification/
|
|
27
|
+
import '@edinelsonslima/toast-notification/style.css';
|
|
28
28
|
|
|
29
29
|
export default function App(){
|
|
30
30
|
//seu código
|
|
@@ -63,7 +63,7 @@ export default function MyComponent(){
|
|
|
63
63
|
|--------------------|------------------------------------------------------------|
|
|
64
64
|
| ToastContainer | `classNames` `position` `defaultDuration` |
|
|
65
65
|
| toast | `content` `type` `duration` |
|
|
66
|
-
| style | `/
|
|
66
|
+
| style | `/style.css` |
|
|
67
67
|
|
|
68
68
|
#### As propriedades da função toast
|
|
69
69
|
|propriedade | toast |
|
|
@@ -110,6 +110,3 @@ toast.info(<strong>mensagem exemplo</strong>)
|
|
|
110
110
|
```tsx
|
|
111
111
|
toast.info(<MeuComponente>mensagem exemplo</MeuComponente>)
|
|
112
112
|
```
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
package/index.es.d.ts
CHANGED
|
@@ -79,3 +79,13 @@ export declare namespace toast {
|
|
|
79
79
|
export declare function ToastContainer({ classNames, defaultDuration, position, }: IToastContainerProps): JSX_2.Element;
|
|
80
80
|
|
|
81
81
|
export { }
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
declare namespace toast {
|
|
85
|
+
var error: (data: import("../@types").IReactNode | import("../@types").IToastWithoutType) => void;
|
|
86
|
+
var success: (data: import("../@types").IReactNode | import("../@types").IToastWithoutType) => void;
|
|
87
|
+
var warn: (data: import("../@types").IReactNode | import("../@types").IToastWithoutType) => void;
|
|
88
|
+
var info: (data: import("../@types").IReactNode | import("../@types").IToastWithoutType) => void;
|
|
89
|
+
var ghost: (data: import("../@types").IReactNode | import("../@types").IToastWithoutType) => void;
|
|
90
|
+
}
|
|
91
|
+
|
package/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var hr=Object.defineProperty,br=(e,t,r)=>t in e?hr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,Ie=(e,t,r)=>(br(e,"symbol"!=typeof t?t+"":t,r),r);import $e,{isValidElement as We,useState as Me,useCallback as Le,useEffect as Ue}from"react";class yr{constructor(){Ie(this,"listeners",new Map([]))}on(e,t){var r;this.listeners.has(e)||this.listeners.set(e,[]),null==(r=this.listeners.get(e))||r.push(t)}emit(e,t){var r;this.listeners.has(e)&&(null==(r=this.listeners.get(e))||r.forEach((e=>e(t))))}removeListener(e,t){const r=this.listeners.get(e);if(!r)return;const n=r.filter((e=>e!==t));this.listeners.set(e,n)}}function G(e){return function(t){if(We(t))return I({content:t,type:e});const{content:r,duration:n}=t;return I({content:r,duration:n,type:e})}}function Er(e){if(e)return We(e)||"object"!=typeof e||Array.isArray(e)?e:JSON.stringify(e)}const ie=new yr;function I({duration:e,content:t,type:r}){t=Er(t),ie.emit("add-toast",{content:t,duration:e,type:r})}I.error=G("error"),I.success=G("success"),I.warn=G("warn"),I.info=G("info"),I.ghost=G("ghost");var De,se={exports:{}},Y={};function Rr(){return De||(De=1,"production"!==process.env.NODE_ENV&&function(){var e=$e,t=Symbol.for("react.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),l=Symbol.for("react.suspense_list"),f=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),y=Symbol.iterator,d="@@iterator";var _=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function g(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];!function(e,t,r){var n=_.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(t+="%s",r=r.concat([o]));var a=r.map((function(e){return String(e)}));a.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,a)}("error",e,r)}var v,h=!1,b=!1,j=!1,w=!1,k=!1;function O(e){return e.displayName||"Context"}function S(e){if(null==e)return null;if("number"==typeof e.tag&&g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case n:return"Fragment";case r:return"Portal";case a:return"Profiler";case o:return"StrictMode";case u:return"Suspense";case l:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case s:return O(e)+".Consumer";case i:return O(e._context)+".Provider";case c:return function(e,t,r){var n=e.displayName;if(n)return n;var o=t.displayName||t.name||"";return""!==o?r+"("+o+")":r}(e,e.render,"ForwardRef");case f:var t=e.displayName||null;return null!==t?t:S(e.type)||"Memo";case p:var m=e,y=m._payload,d=m._init;try{return S(d(y))}catch{return null}}return null}v=Symbol.for("react.module.reference");var R,E,$,I,P,T,x,C=Object.assign,N=0;function D(){}D.__reactDisabledLog=!0;var F,A=_.ReactCurrentDispatcher;function L(e,t,r){if(void 0===F)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);F=n&&n[1]||""}return"\n"+F+e}var U,M=!1,W="function"==typeof WeakMap?WeakMap:Map;function V(e,t){if(!e||M)return"";var r,n=U.get(e);if(void 0!==n)return n;M=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=A.current,A.current=null,function(){if(0===N){R=console.log,E=console.info,$=console.warn,I=console.error,P=console.group,T=console.groupCollapsed,x=console.groupEnd;var e={configurable:!0,enumerable:!0,value:D,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}N++}();try{if(t){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){r=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){r=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&"string"==typeof t.stack){for(var s=t.stack.split("\n"),c=r.stack.split("\n"),u=s.length-1,l=c.length-1;u>=1&&l>=0&&s[u]!==c[l];)l--;for(;u>=1&&l>=0;u--,l--)if(s[u]!==c[l]){if(1!==u||1!==l)do{if(u--,--l<0||s[u]!==c[l]){var f="\n"+s[u].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&U.set(e,f),f}}while(u>=1&&l>=0);break}}}finally{M=!1,A.current=o,function(){if(0==--N){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:C({},e,{value:R}),info:C({},e,{value:E}),warn:C({},e,{value:$}),error:C({},e,{value:I}),group:C({},e,{value:P}),groupCollapsed:C({},e,{value:T}),groupEnd:C({},e,{value:x})})}N<0&&g("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var p=e?e.displayName||e.name:"",m=p?L(p):"";return"function"==typeof e&&U.set(e,m),m}function z(e,t,r){if(null==e)return"";if("function"==typeof e)return V(e,function(e){var t=e.prototype;return!(!t||!t.isReactComponent)}(e));if("string"==typeof e)return L(e);switch(e){case u:return L("Suspense");case l:return L("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case c:return function(e,t,r){return V(e,!1)}(e.render);case f:return z(e.type,t,r);case p:var n=e,o=n._payload,a=n._init;try{return z(a(o),t,r)}catch{}}return""}U=new W;var G=Object.prototype.hasOwnProperty,H={},X=_.ReactDebugCurrentFrame;function B(e){if(e){var t=e._owner,r=z(e.type,e._source,t?t.type:null);X.setExtraStackFrame(r)}else X.setExtraStackFrame(null)}var q=Array.isArray;function J(e){return q(e)}function K(e){return""+e}function Q(e){if(function(e){try{return K(e),!1}catch{return!0}}(e))return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),K(e)}var Z,ee,te,re=_.ReactCurrentOwner,ne={key:!0,ref:!0,__self:!0,__source:!0};te={};var oe=function(e,r,n,o,a,i,s){var c={$$typeof:t,type:e,key:r,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function ae(e,t,r,n,o){var a,i={},s=null,c=null;for(a in void 0!==r&&(Q(r),s=""+r),function(e){if(G.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(t)&&(Q(t.key),s=""+t.key),function(e){if(G.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(t)&&(c=t.ref,function(e,t){if("string"==typeof e.ref&&re.current&&t&&re.current.stateNode!==t){var r=S(re.current.type);te[r]||(g('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',S(re.current.type),e.ref),te[r]=!0)}}(t,o)),t)G.call(t,a)&&!ne.hasOwnProperty(a)&&(i[a]=t[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===i[a]&&(i[a]=u[a])}if(s||c){var l="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,t){var r=function(){Z||(Z=!0,g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(i,l),c&&function(e,t){var r=function(){ee||(ee=!0,g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}(i,l)}return oe(e,s,c,o,n,re.current,i)}var ie,se=_.ReactCurrentOwner,ce=_.ReactDebugCurrentFrame;function ue(e){if(e){var t=e._owner,r=z(e.type,e._source,t?t.type:null);ce.setExtraStackFrame(r)}else ce.setExtraStackFrame(null)}function le(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function fe(){if(se.current){var e=S(se.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}ie=!1;var pe={};function me(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=fe();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!pe[r]){pe[r]=!0;var n="";e&&e._owner&&e._owner!==se.current&&(n=" It was passed a child from "+S(e._owner.type)+"."),ue(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,n),ue(null)}}}function ye(e,t){if("object"==typeof e)if(J(e))for(var r=0;r<e.length;r++){var n=e[r];le(n)&&me(n,t)}else if(le(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var t=y&&e[y]||e[d];return"function"==typeof t?t:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)le(a.value)&&me(a.value,t)}}function de(e){var t,r=e.type;if(null!=r&&"string"!=typeof r){if("function"==typeof r)t=r.propTypes;else{if("object"!=typeof r||r.$$typeof!==c&&r.$$typeof!==f)return;t=r.propTypes}if(t){var n=S(r);!function(e,t,r,n,o){var a=Function.call.bind(G);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+r+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](t,i,n,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){s=e}s&&!(s instanceof Error)&&(B(o),g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",r,i,typeof s),B(null)),s instanceof Error&&!(s.message in H)&&(H[s.message]=!0,B(o),g("Failed %s type: %s",r,s.message),B(null))}}(t,e.props,"prop",n,e)}else if(void 0!==r.PropTypes&&!ie){ie=!0,g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",S(r)||"Unknown")}"function"==typeof r.getDefaultProps&&!r.getDefaultProps.isReactClassApproved&&g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function _e(e,r,y,d,_,O){var R=function(e){return!!("string"==typeof e||"function"==typeof e||e===n||e===a||k||e===o||e===u||e===l||w||e===m||h||b||j||"object"==typeof e&&null!==e&&(e.$$typeof===p||e.$$typeof===f||e.$$typeof===i||e.$$typeof===s||e.$$typeof===c||e.$$typeof===v||void 0!==e.getModuleId))}(e);if(!R){var E="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(E+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var $,I=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(_);E+=I||fe(),null===e?$="null":J(e)?$="array":void 0!==e&&e.$$typeof===t?($="<"+(S(e.type)||"Unknown")+" />",E=" Did you accidentally export a JSX literal instead of a component?"):$=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",$,E)}var P=ae(e,r,y,_,O);if(null==P)return P;if(R){var T=r.children;if(void 0!==T)if(d)if(J(T)){for(var x=0;x<T.length;x++)ye(T[x],e);Object.freeze&&Object.freeze(T)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else ye(T,e)}return e===n?function(e){for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){ue(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),ue(null);break}}null!==e.ref&&(ue(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),ue(null))}(P):de(P),P}var ge=function(e,t,r){return _e(e,t,r,!1)},ve=function(e,t,r){return _e(e,t,r,!0)};Y.Fragment=n,Y.jsx=ge,Y.jsxs=ve}()),Y}var Fe,V={};function jr(){if(Fe)return V;Fe=1;var e=$e,t=Symbol.for("react.element"),r=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,o=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,i){var s,c={},u=null,l=null;for(s in void 0!==i&&(u=""+i),void 0!==r.key&&(u=""+r.key),void 0!==r.ref&&(l=r.ref),r)n.call(r,s)&&!a.hasOwnProperty(s)&&(c[s]=r[s]);if(e&&e.defaultProps)for(s in r=e.defaultProps)void 0===c[s]&&(c[s]=r[s]);return{$$typeof:t,type:e,key:u,ref:l,props:c,_owner:o.current}}return V.Fragment=r,V.jsx=i,V.jsxs=i,V}"production"===process.env.NODE_ENV?se.exports=jr():se.exports=Rr();var ue=se.exports;function H(e){if(e&&"object"==typeof e)return e}function X(e){return e&&"string"==typeof e?e:""}const Cr="_screenRightIn_1ojrm_1",Tr="_screenCenterIn_1ojrm_1",Sr="_screenLeftIn_1ojrm_1",Or="_success_1ojrm_114",wr="_info_1ojrm_118",Pr="_warn_1ojrm_123",xr="_error_1ojrm_127",kr="_ghost_1ojrm_132",Ar="_screenOut_1ojrm_1",A={"toast-container":"_toast-container_1ojrm_1","animation-message-right-top":"_animation-message-right-top_1ojrm_9","animation-message-right-center":"_animation-message-right-center_1ojrm_10","animation-message-right-bottom":"_animation-message-right-bottom_1ojrm_11",screenRightIn:Cr,"right-top":"_right-top_1ojrm_15","right-center":"_right-center_1ojrm_16","right-bottom":"_right-bottom_1ojrm_17","animation-message-center-top":"_animation-message-center-top_1ojrm_37","animation-message-center-bottom":"_animation-message-center-bottom_1ojrm_38","animation-message-center-center":"_animation-message-center-center_1ojrm_39",screenCenterIn:Tr,"center-top":"_center-top_1ojrm_43","center-center":"_center-center_1ojrm_44","center-bottom":"_center-bottom_1ojrm_45","animation-message-left-top":"_animation-message-left-top_1ojrm_64","animation-message-left-center":"_animation-message-left-center_1ojrm_65","animation-message-left-bottom":"_animation-message-left-bottom_1ojrm_66",screenLeftIn:Sr,"left-top":"_left-top_1ojrm_70","left-center":"_left-center_1ojrm_71","left-bottom":"_left-bottom_1ojrm_72","toast-message":"_toast-message_1ojrm_90",success:Or,info:wr,warn:Pr,error:xr,ghost:kr,"animation-unmount":"_animation-unmount_1ojrm_136",screenOut:Ar};function Ir({message:{duration:e=7e3,id:t,content:r,type:n},onRemoveMessage:o,classNames:a}){var i,s;const c=null==(i=null==a?void 0:a.toastMessages)?void 0:i["*"],u=null==(s=null==a?void 0:a.toastMessages)?void 0:s[n],[l,f]=Me(void 0);function p(){return l?A[l]?A[l]:l:""}const m=Le((()=>{f((null==a?void 0:a.animationUnmount)||"animation-unmount")}),[null==a?void 0:a.animationUnmount]);return Ue((()=>{const t=setTimeout((()=>m()),e);return()=>clearTimeout(t)}),[o,t,e,m]),ue.jsx("span",{tabIndex:0,onAnimationEnd:function(e){var r;const n=p();null!=(r=e.currentTarget.classList)&&r.contains(n)&&o(t)},onClick:m,style:{...H(c),...H(u)},className:function(){const e=X(c),t=X(u),r=p(),o=A[`animation-message-${null==a?void 0:a.toastPosition}`];return`${A["toast-message"]} ${A[n]} ${o} ${r} ${t} ${e}`.trim()}(),children:r})}function $r({classNames:e,defaultDuration:t,position:r="right-top"}){var n,o;const a=null==(n=null==e?void 0:e.toastContainer)?void 0:n["*"],i=null==(o=null==e?void 0:e.toastContainer)?void 0:o[r],[s,c]=Me([]);const u=Le((e=>{c((t=>t.filter((t=>t.id!==e))))}),[]);return Ue((()=>{function e(e){const{content:r,type:n,duration:o=t}=e;c((e=>[...e,{id:crypto.randomUUID(),content:r,duration:o,type:n}]))}return ie.on("add-toast",e),()=>{ie.removeListener("add-toast",e)}}),[t]),ue.jsx("div",{style:{...H(a),...H(i)},className:function(){const e=X(a),t=X(i);return`${A["toast-container"]} ${A[r]} ${t} ${e}`.trim()}(),children:s.map((t=>ue.jsx(Ir,{message:t,onRemoveMessage:u,classNames:{toastPosition:r,toastMessages:null==e?void 0:e.toastMessages,animationUnmount:null==e?void 0:e.animationUnmount}},t.id)))})}export{$r as ToastContainer,I as toast};
|
|
1
|
+
var hr=Object.defineProperty,br=(e,t,r)=>t in e?hr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,Ie=(e,t,r)=>(br(e,"symbol"!=typeof t?t+"":t,r),r);import $e,{isValidElement as Me,useState as We,useCallback as Le,useEffect as Ue}from"react";class yr{constructor(){Ie(this,"listeners",new Map([]))}on(e,t){var r;this.listeners.has(e)||this.listeners.set(e,[]),null==(r=this.listeners.get(e))||r.push(t)}emit(e,t){var r;this.listeners.has(e)&&(null==(r=this.listeners.get(e))||r.forEach((e=>e(t))))}removeListener(e,t){const r=this.listeners.get(e);if(!r)return;const n=r.filter((e=>e!==t));this.listeners.set(e,n)}}function G(e){return function(t){if(Me(t))return I({content:t,type:e});const{content:r,duration:n}=t;return I({content:r,duration:n,type:e})}}function Er(e){if(e)return Me(e)||"object"!=typeof e||Array.isArray(e)?e:JSON.stringify(e)}const ie=new yr;function I({duration:e,content:t,type:r}){t=Er(t),ie.emit("add-toast",{content:t,duration:e,type:r})}I.error=G("error"),I.success=G("success"),I.warn=G("warn"),I.info=G("info"),I.ghost=G("ghost");var De,se={exports:{}},Y={};function Rr(){if(De)return Y;De=1;var e=$e,t=Symbol.for("react.element"),r=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,o=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,i){var s,c={},u=null,l=null;for(s in void 0!==i&&(u=""+i),void 0!==r.key&&(u=""+r.key),void 0!==r.ref&&(l=r.ref),r)n.call(r,s)&&!a.hasOwnProperty(s)&&(c[s]=r[s]);if(e&&e.defaultProps)for(s in r=e.defaultProps)void 0===c[s]&&(c[s]=r[s]);return{$$typeof:t,type:e,key:u,ref:l,props:c,_owner:o.current}}return Y.Fragment=r,Y.jsx=i,Y.jsxs=i,Y}var Fe,V={};function jr(){return Fe||(Fe=1,"production"!==process.env.NODE_ENV&&function(){var e=$e,t=Symbol.for("react.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),l=Symbol.for("react.suspense_list"),f=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),y=Symbol.iterator,d="@@iterator";var _=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function g(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];!function(e,t,r){var n=_.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(t+="%s",r=r.concat([o]));var a=r.map((function(e){return String(e)}));a.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,a)}("error",e,r)}var v,h=!1,b=!1,j=!1,w=!1,k=!1;function O(e){return e.displayName||"Context"}function S(e){if(null==e)return null;if("number"==typeof e.tag&&g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case n:return"Fragment";case r:return"Portal";case a:return"Profiler";case o:return"StrictMode";case u:return"Suspense";case l:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case s:return O(e)+".Consumer";case i:return O(e._context)+".Provider";case c:return function(e,t,r){var n=e.displayName;if(n)return n;var o=t.displayName||t.name||"";return""!==o?r+"("+o+")":r}(e,e.render,"ForwardRef");case f:var t=e.displayName||null;return null!==t?t:S(e.type)||"Memo";case p:var m=e,y=m._payload,d=m._init;try{return S(d(y))}catch{return null}}return null}v=Symbol.for("react.module.reference");var R,E,$,I,P,T,x,C=Object.assign,N=0;function D(){}D.__reactDisabledLog=!0;var F,A=_.ReactCurrentDispatcher;function L(e,t,r){if(void 0===F)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);F=n&&n[1]||""}return"\n"+F+e}var U,M=!1,W="function"==typeof WeakMap?WeakMap:Map;function Y(e,t){if(!e||M)return"";var r,n=U.get(e);if(void 0!==n)return n;M=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=A.current,A.current=null,function(){if(0===N){R=console.log,E=console.info,$=console.warn,I=console.error,P=console.group,T=console.groupCollapsed,x=console.groupEnd;var e={configurable:!0,enumerable:!0,value:D,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}N++}();try{if(t){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){r=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){r=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&"string"==typeof t.stack){for(var s=t.stack.split("\n"),c=r.stack.split("\n"),u=s.length-1,l=c.length-1;u>=1&&l>=0&&s[u]!==c[l];)l--;for(;u>=1&&l>=0;u--,l--)if(s[u]!==c[l]){if(1!==u||1!==l)do{if(u--,--l<0||s[u]!==c[l]){var f="\n"+s[u].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&U.set(e,f),f}}while(u>=1&&l>=0);break}}}finally{M=!1,A.current=o,function(){if(0==--N){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:C({},e,{value:R}),info:C({},e,{value:E}),warn:C({},e,{value:$}),error:C({},e,{value:I}),group:C({},e,{value:P}),groupCollapsed:C({},e,{value:T}),groupEnd:C({},e,{value:x})})}N<0&&g("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var p=e?e.displayName||e.name:"",m=p?L(p):"";return"function"==typeof e&&U.set(e,m),m}function z(e,t,r){if(null==e)return"";if("function"==typeof e)return Y(e,function(e){var t=e.prototype;return!(!t||!t.isReactComponent)}(e));if("string"==typeof e)return L(e);switch(e){case u:return L("Suspense");case l:return L("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case c:return function(e,t,r){return Y(e,!1)}(e.render);case f:return z(e.type,t,r);case p:var n=e,o=n._payload,a=n._init;try{return z(a(o),t,r)}catch{}}return""}U=new W;var G=Object.prototype.hasOwnProperty,H={},X=_.ReactDebugCurrentFrame;function B(e){if(e){var t=e._owner,r=z(e.type,e._source,t?t.type:null);X.setExtraStackFrame(r)}else X.setExtraStackFrame(null)}var q=Array.isArray;function J(e){return q(e)}function K(e){return""+e}function Q(e){if(function(e){try{return K(e),!1}catch{return!0}}(e))return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),K(e)}var Z,ee,te,re=_.ReactCurrentOwner,ne={key:!0,ref:!0,__self:!0,__source:!0};te={};var oe=function(e,r,n,o,a,i,s){var c={$$typeof:t,type:e,key:r,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function ae(e,t,r,n,o){var a,i={},s=null,c=null;for(a in void 0!==r&&(Q(r),s=""+r),function(e){if(G.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(t)&&(Q(t.key),s=""+t.key),function(e){if(G.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(t)&&(c=t.ref,function(e,t){if("string"==typeof e.ref&&re.current&&t&&re.current.stateNode!==t){var r=S(re.current.type);te[r]||(g('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',S(re.current.type),e.ref),te[r]=!0)}}(t,o)),t)G.call(t,a)&&!ne.hasOwnProperty(a)&&(i[a]=t[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===i[a]&&(i[a]=u[a])}if(s||c){var l="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,t){var r=function(){Z||(Z=!0,g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(i,l),c&&function(e,t){var r=function(){ee||(ee=!0,g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}(i,l)}return oe(e,s,c,o,n,re.current,i)}var ie,se=_.ReactCurrentOwner,ce=_.ReactDebugCurrentFrame;function ue(e){if(e){var t=e._owner,r=z(e.type,e._source,t?t.type:null);ce.setExtraStackFrame(r)}else ce.setExtraStackFrame(null)}function le(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function fe(){if(se.current){var e=S(se.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}ie=!1;var pe={};function me(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=fe();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!pe[r]){pe[r]=!0;var n="";e&&e._owner&&e._owner!==se.current&&(n=" It was passed a child from "+S(e._owner.type)+"."),ue(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,n),ue(null)}}}function ye(e,t){if("object"==typeof e)if(J(e))for(var r=0;r<e.length;r++){var n=e[r];le(n)&&me(n,t)}else if(le(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var t=y&&e[y]||e[d];return"function"==typeof t?t:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)le(a.value)&&me(a.value,t)}}function de(e){var t,r=e.type;if(null!=r&&"string"!=typeof r){if("function"==typeof r)t=r.propTypes;else{if("object"!=typeof r||r.$$typeof!==c&&r.$$typeof!==f)return;t=r.propTypes}if(t){var n=S(r);!function(e,t,r,n,o){var a=Function.call.bind(G);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+r+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](t,i,n,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){s=e}s&&!(s instanceof Error)&&(B(o),g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",r,i,typeof s),B(null)),s instanceof Error&&!(s.message in H)&&(H[s.message]=!0,B(o),g("Failed %s type: %s",r,s.message),B(null))}}(t,e.props,"prop",n,e)}else if(void 0!==r.PropTypes&&!ie){ie=!0,g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",S(r)||"Unknown")}"function"==typeof r.getDefaultProps&&!r.getDefaultProps.isReactClassApproved&&g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function _e(e,r,y,d,_,O){var R=function(e){return!!("string"==typeof e||"function"==typeof e||e===n||e===a||k||e===o||e===u||e===l||w||e===m||h||b||j||"object"==typeof e&&null!==e&&(e.$$typeof===p||e.$$typeof===f||e.$$typeof===i||e.$$typeof===s||e.$$typeof===c||e.$$typeof===v||void 0!==e.getModuleId))}(e);if(!R){var E="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(E+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var $,I=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(_);E+=I||fe(),null===e?$="null":J(e)?$="array":void 0!==e&&e.$$typeof===t?($="<"+(S(e.type)||"Unknown")+" />",E=" Did you accidentally export a JSX literal instead of a component?"):$=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",$,E)}var P=ae(e,r,y,_,O);if(null==P)return P;if(R){var T=r.children;if(void 0!==T)if(d)if(J(T)){for(var x=0;x<T.length;x++)ye(T[x],e);Object.freeze&&Object.freeze(T)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else ye(T,e)}return e===n?function(e){for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){ue(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),ue(null);break}}null!==e.ref&&(ue(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),ue(null))}(P):de(P),P}var ge=function(e,t,r){return _e(e,t,r,!1)},ve=function(e,t,r){return _e(e,t,r,!0)};V.Fragment=n,V.jsx=ge,V.jsxs=ve}()),V}"production"===process.env.NODE_ENV?se.exports=Rr():se.exports=jr();var ue=se.exports;function H(e){if(e&&"object"==typeof e)return e}function X(e){return e&&"string"==typeof e?e:""}const Cr="_screenRightIn_1ojrm_1",Tr="_screenCenterIn_1ojrm_1",Sr="_screenLeftIn_1ojrm_1",Or="_success_1ojrm_114",wr="_info_1ojrm_118",Pr="_warn_1ojrm_123",xr="_error_1ojrm_127",kr="_ghost_1ojrm_132",Ar="_screenOut_1ojrm_1",A={"toast-container":"_toast-container_1ojrm_1","animation-message-right-top":"_animation-message-right-top_1ojrm_9","animation-message-right-center":"_animation-message-right-center_1ojrm_10","animation-message-right-bottom":"_animation-message-right-bottom_1ojrm_11",screenRightIn:Cr,"right-top":"_right-top_1ojrm_15","right-center":"_right-center_1ojrm_16","right-bottom":"_right-bottom_1ojrm_17","animation-message-center-top":"_animation-message-center-top_1ojrm_37","animation-message-center-bottom":"_animation-message-center-bottom_1ojrm_38","animation-message-center-center":"_animation-message-center-center_1ojrm_39",screenCenterIn:Tr,"center-top":"_center-top_1ojrm_43","center-center":"_center-center_1ojrm_44","center-bottom":"_center-bottom_1ojrm_45","animation-message-left-top":"_animation-message-left-top_1ojrm_64","animation-message-left-center":"_animation-message-left-center_1ojrm_65","animation-message-left-bottom":"_animation-message-left-bottom_1ojrm_66",screenLeftIn:Sr,"left-top":"_left-top_1ojrm_70","left-center":"_left-center_1ojrm_71","left-bottom":"_left-bottom_1ojrm_72","toast-message":"_toast-message_1ojrm_90",success:Or,info:wr,warn:Pr,error:xr,ghost:kr,"animation-unmount":"_animation-unmount_1ojrm_136",screenOut:Ar};function Ir({message:{duration:e=7e3,id:t,content:r,type:n},onRemoveMessage:o,classNames:a}){var i,s;const c=null==(i=null==a?void 0:a.toastMessages)?void 0:i["*"],u=null==(s=null==a?void 0:a.toastMessages)?void 0:s[n],[l,f]=We(void 0);function p(){return l?A[l]?A[l]:l:""}const m=Le((()=>{f((null==a?void 0:a.animationUnmount)||"animation-unmount")}),[null==a?void 0:a.animationUnmount]);return Ue((()=>{const t=setTimeout((()=>m()),e);return()=>clearTimeout(t)}),[e,m]),ue.jsx("span",{tabIndex:0,onAnimationEnd:function(e){var r;const n=p();null!=(r=e.currentTarget.classList)&&r.contains(n)&&o(t)},onClick:m,style:{...H(c),...H(u)},className:function(){const e=X(c),t=X(u),r=p(),o=A[`animation-message-${null==a?void 0:a.toastPosition}`];return`${A["toast-message"]} ${A[n]} ${o} ${r} ${t} ${e}`.trim()}(),children:r})}function $r({classNames:e,defaultDuration:t,position:r="right-top"}){var n,o;const a=null==(n=null==e?void 0:e.toastContainer)?void 0:n["*"],i=null==(o=null==e?void 0:e.toastContainer)?void 0:o[r],[s,c]=We([]);const u=Le((e=>{c((t=>t.filter((t=>t.id!==e))))}),[]);return Ue((()=>{function e(e){const{content:r,type:n,duration:o=t}=e;c((e=>[...e,{id:crypto.randomUUID(),content:r,duration:o,type:n}]))}return ie.on("add-toast",e),()=>{ie.removeListener("add-toast",e)}}),[t]),ue.jsx("div",{style:{...H(a),...H(i)},className:function(){const e=X(a),t=X(i);return`${A["toast-container"]} ${A[r]} ${t} ${e}`.trim()}(),children:s.map((t=>ue.jsx(Ir,{message:t,onRemoveMessage:u,classNames:{toastPosition:r,toastMessages:null==e?void 0:e.toastMessages,animationUnmount:null==e?void 0:e.animationUnmount}},t.id)))})}export{$r as ToastContainer,I as toast};
|
package/package.json
CHANGED
|
@@ -1,32 +1,46 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edinelsonslima/toast-notification",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"author": "@edinelsonslima",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
11
|
-
"preview": "vite preview"
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/edinelsonslima/toast-notification.git"
|
|
12
10
|
},
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"react-dom": "^18.2.0",
|
|
16
|
-
"terser": "^5.30.0"
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/edinelsonslima/toast-notification/issues"
|
|
17
13
|
},
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"
|
|
14
|
+
"homepage": "https://github.com/edinelsonslima/toast-notification#readme",
|
|
15
|
+
"main": "index.es.js",
|
|
16
|
+
"module": "index.es.js",
|
|
17
|
+
"browser": "index.es.js",
|
|
18
|
+
"types": "index.es.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./index.es.d.ts",
|
|
22
|
+
"import": "./index.es.js",
|
|
23
|
+
"require": "./index.es.js",
|
|
24
|
+
"browser": "./index.es.js"
|
|
25
|
+
},
|
|
26
|
+
"./style.css": {
|
|
27
|
+
"import": "./style.css",
|
|
28
|
+
"require": "./style.css"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"index.es.d.ts",
|
|
33
|
+
"index.es.js",
|
|
34
|
+
"style.css"
|
|
35
|
+
],
|
|
36
|
+
"keywords": [
|
|
37
|
+
"toast",
|
|
38
|
+
"notification",
|
|
39
|
+
"react",
|
|
40
|
+
"vite"
|
|
41
|
+
],
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"access": "public",
|
|
44
|
+
"registry": "https://registry.npmjs.org"
|
|
31
45
|
}
|
|
32
46
|
}
|
package/.editorconfig
DELETED
package/.eslintrc.cjs
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
root: true,
|
|
3
|
-
env: { browser: true, es2020: true },
|
|
4
|
-
extends: [
|
|
5
|
-
'eslint:recommended',
|
|
6
|
-
'plugin:@typescript-eslint/recommended',
|
|
7
|
-
'plugin:react-hooks/recommended',
|
|
8
|
-
],
|
|
9
|
-
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
|
10
|
-
parser: '@typescript-eslint/parser',
|
|
11
|
-
plugins: ['react-refresh'],
|
|
12
|
-
rules: {
|
|
13
|
-
'react-refresh/only-export-components': [
|
|
14
|
-
'warn',
|
|
15
|
-
{ allowConstantExport: true },
|
|
16
|
-
],
|
|
17
|
-
},
|
|
18
|
-
}
|
package/index.html
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="pt-br">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width='device-width', initial-scale=1.0" />
|
|
6
|
-
<title>Toast Notification</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div id="root"></div>
|
|
10
|
-
<script defer type="module" src="./src/app/index.tsx"></script>
|
|
11
|
-
</body>
|
|
12
|
-
</html>
|
package/minify.mjs
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { readFile, writeFile } from "fs/promises";
|
|
2
|
-
import path from "path";
|
|
3
|
-
import { minify } from 'terser';
|
|
4
|
-
|
|
5
|
-
async function minifyBuildedFileJs() {
|
|
6
|
-
const filePath = path.resolve(import.meta.dirname, "dist/index.es.js")
|
|
7
|
-
|
|
8
|
-
const content = await readFile(filePath, "utf8");
|
|
9
|
-
|
|
10
|
-
const minifiedContent = await minify(content, {
|
|
11
|
-
compress: true,
|
|
12
|
-
format: {
|
|
13
|
-
comments: false,
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
if (minifiedContent.error) return console.error(minifiedContent.error);
|
|
18
|
-
|
|
19
|
-
await writeFile(filePath, minifiedContent.code);
|
|
20
|
-
|
|
21
|
-
return console.log("File minified successfully");
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
minifyBuildedFileJs();
|
package/publish.sh
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
#!/bin/bash
|
|
2
|
-
|
|
3
|
-
echo "Passo 1: Executando o build..."
|
|
4
|
-
npm run build
|
|
5
|
-
|
|
6
|
-
echo "Passo 2: Minificando o javascript..."
|
|
7
|
-
node minify.mjs
|
|
8
|
-
|
|
9
|
-
echo "Passo 3: Trocando para branch 'dist'..."
|
|
10
|
-
git checkout dist
|
|
11
|
-
|
|
12
|
-
echo "Passo 4: Movendo arquivos do build para o root ..."
|
|
13
|
-
mv dist/* ./
|
|
14
|
-
|
|
15
|
-
echo "Passo 5: Apagando a pasta dist vazia ..."
|
|
16
|
-
rm -r dist
|
|
17
|
-
|
|
18
|
-
echo "Passo 6: Adicionando em staging"
|
|
19
|
-
git add .
|
|
20
|
-
|
|
21
|
-
echo "Passo 7: Commitando novo builder na brach"
|
|
22
|
-
git commit -m "updated build files by script automation"
|
|
23
|
-
|
|
24
|
-
echo "Passo 8: Subindo alterações para o repositório online"
|
|
25
|
-
git push origin dist
|
|
26
|
-
|
|
27
|
-
echo "Passo 9: publicando nova versão ..."
|
|
28
|
-
yarn publish
|
|
29
|
-
|
|
30
|
-
echo "Passo 10: Atualizar versão ..."
|
|
31
|
-
git push origin dist
|
|
32
|
-
|
|
33
|
-
echo "Passo 11: Voltando pra brach main ..."
|
|
34
|
-
git checkout main
|
|
35
|
-
|
|
36
|
-
echo "Finalizado 👨🏻💻🚀"
|
|
37
|
-
|
package/src/@types/index.ts
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { CSSProperties, ReactNode } from "react";
|
|
2
|
-
|
|
3
|
-
export type IReactNode = Omit<ReactNode, "object"> | undefined;
|
|
4
|
-
|
|
5
|
-
export interface IToastWithoutType {
|
|
6
|
-
content: IReactNode;
|
|
7
|
-
duration?: number;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export interface IToast extends IToastWithoutType {
|
|
11
|
-
type: "success" | "info" | "warn" | "error" | "ghost";
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface IToastData extends IToast {
|
|
15
|
-
id: string;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export type IPositions =
|
|
19
|
-
| "right-top"
|
|
20
|
-
| "right-center"
|
|
21
|
-
| "right-bottom"
|
|
22
|
-
| "center-top"
|
|
23
|
-
| "center-center"
|
|
24
|
-
| "center-bottom"
|
|
25
|
-
| "left-top"
|
|
26
|
-
| "left-center"
|
|
27
|
-
| "left-bottom";
|
|
28
|
-
|
|
29
|
-
export type IClassNamesAnimations = HTMLSpanElement["className"] | undefined;
|
|
30
|
-
export type IClassNames = IClassNamesAnimations | CSSProperties;
|
|
31
|
-
type IToastMessageClassNames = { [type in IToast["type"] | "*"]?: IClassNames };
|
|
32
|
-
type IToastContainerClassNames = {
|
|
33
|
-
[position in IPositions | "*"]?: IClassNames;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export interface IToastContainerProps {
|
|
37
|
-
/**
|
|
38
|
-
* @description define default duration in screen for all toast messages
|
|
39
|
-
* @type number
|
|
40
|
-
* @default undefined
|
|
41
|
-
*/
|
|
42
|
-
defaultDuration?: number;
|
|
43
|
-
/**
|
|
44
|
-
* @description define position in screen for all toast messages
|
|
45
|
-
* @type IPositions
|
|
46
|
-
* @default 'right-top'
|
|
47
|
-
*/
|
|
48
|
-
position?: IPositions;
|
|
49
|
-
/**
|
|
50
|
-
* @description define styles for toast
|
|
51
|
-
* @default undefined
|
|
52
|
-
*/
|
|
53
|
-
classNames?: {
|
|
54
|
-
/**
|
|
55
|
-
* @description change default animation screen out of the all toasts
|
|
56
|
-
* @default undefined
|
|
57
|
-
*/
|
|
58
|
-
animationUnmount?: IClassNamesAnimations;
|
|
59
|
-
/**
|
|
60
|
-
* @description change default position style in screen of the all toasts
|
|
61
|
-
* @default undefined
|
|
62
|
-
*/
|
|
63
|
-
toastContainer?: IToastContainerClassNames;
|
|
64
|
-
/**
|
|
65
|
-
* @description change default style of the all toasts
|
|
66
|
-
* @default undefined
|
|
67
|
-
*/
|
|
68
|
-
toastMessages?: IToastMessageClassNames;
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export interface IToastMessageProps {
|
|
73
|
-
message: IToastData;
|
|
74
|
-
onRemoveMessage(id: IToastData["id"]): void;
|
|
75
|
-
classNames?: {
|
|
76
|
-
toastPosition: IPositions;
|
|
77
|
-
animationUnmount?: IClassNamesAnimations;
|
|
78
|
-
toastMessages?: IToastMessageClassNames;
|
|
79
|
-
};
|
|
80
|
-
}
|
package/src/app/index.tsx
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import ReactDOM from "react-dom/client";
|
|
3
|
-
import { ToastContainer, toast } from "..";
|
|
4
|
-
|
|
5
|
-
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
6
|
-
<React.StrictMode>
|
|
7
|
-
<ToastContainer />
|
|
8
|
-
<button onClick={() => toast.warn({ content: "WARNING" })}>WARNING</button>
|
|
9
|
-
|
|
10
|
-
<button onClick={() => toast.error({ content: "ERROR" })}>ERROR</button>
|
|
11
|
-
|
|
12
|
-
<button onClick={() => toast.info({ content: "INFORMATION" })}>
|
|
13
|
-
INFORMATION
|
|
14
|
-
</button>
|
|
15
|
-
|
|
16
|
-
<button onClick={() => toast.ghost({ content: "GHOST" })}>GHOST</button>
|
|
17
|
-
</React.StrictMode>
|
|
18
|
-
);
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useState } from "react";
|
|
2
|
-
import { toastEventManager } from "../../helpers/toast.helper";
|
|
3
|
-
import ToastMessage from "./toast-message.component";
|
|
4
|
-
|
|
5
|
-
import { IToast, IToastData, IToastContainerProps } from "../../@types";
|
|
6
|
-
|
|
7
|
-
import s from "./toast.styles.module.css";
|
|
8
|
-
import { getClassName, getStyle } from "../../helpers/get-custom-css.helpers";
|
|
9
|
-
|
|
10
|
-
export function ToastContainer({
|
|
11
|
-
classNames,
|
|
12
|
-
defaultDuration,
|
|
13
|
-
position = "right-top",
|
|
14
|
-
}: IToastContainerProps) {
|
|
15
|
-
const customCSSWildcard = classNames?.toastContainer?.["*"];
|
|
16
|
-
const customCSS = classNames?.toastContainer?.[position];
|
|
17
|
-
|
|
18
|
-
const [messages, setMessages] = useState<IToastData[]>([]);
|
|
19
|
-
|
|
20
|
-
function handleGetClassNames() {
|
|
21
|
-
const customClassNamesWildcard = getClassName(customCSSWildcard);
|
|
22
|
-
const customClassNames = getClassName(customCSS);
|
|
23
|
-
return `${s["toast-container"]} ${s[position]} ${customClassNames} ${customClassNamesWildcard}`.trim();
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function handleGetStyles() {
|
|
27
|
-
return { ...getStyle(customCSSWildcard), ...getStyle(customCSS) };
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const handleRemoveToastMessage = useCallback((id: IToastData["id"]) => {
|
|
31
|
-
setMessages((prevMessages) =>
|
|
32
|
-
prevMessages.filter((message) => message.id !== id)
|
|
33
|
-
);
|
|
34
|
-
}, []);
|
|
35
|
-
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
function handleAddToast(data: IToast) {
|
|
38
|
-
const { content, type, duration = defaultDuration } = data;
|
|
39
|
-
setMessages((prevMessages) => [
|
|
40
|
-
...prevMessages,
|
|
41
|
-
{ id: crypto.randomUUID(), content, duration, type },
|
|
42
|
-
]);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
toastEventManager.on("add-toast", handleAddToast);
|
|
46
|
-
|
|
47
|
-
return () => {
|
|
48
|
-
toastEventManager.removeListener("add-toast", handleAddToast);
|
|
49
|
-
};
|
|
50
|
-
}, [defaultDuration]);
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
<div style={handleGetStyles()} className={handleGetClassNames()}>
|
|
54
|
-
{messages.map((message) => (
|
|
55
|
-
<ToastMessage
|
|
56
|
-
key={message.id}
|
|
57
|
-
message={message}
|
|
58
|
-
onRemoveMessage={handleRemoveToastMessage}
|
|
59
|
-
classNames={{
|
|
60
|
-
toastPosition: position,
|
|
61
|
-
toastMessages: classNames?.toastMessages,
|
|
62
|
-
animationUnmount: classNames?.animationUnmount,
|
|
63
|
-
}}
|
|
64
|
-
/>
|
|
65
|
-
))}
|
|
66
|
-
</div>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ReactNode,
|
|
3
|
-
AnimationEvent,
|
|
4
|
-
useCallback,
|
|
5
|
-
useEffect,
|
|
6
|
-
useState,
|
|
7
|
-
} from "react";
|
|
8
|
-
import { getClassName, getStyle } from "../../helpers/get-custom-css.helpers";
|
|
9
|
-
|
|
10
|
-
import { IClassNamesAnimations, IToastMessageProps } from "../../@types";
|
|
11
|
-
|
|
12
|
-
import s from "./toast.styles.module.css";
|
|
13
|
-
|
|
14
|
-
export default function ToastMessage({
|
|
15
|
-
message: { duration = 1000 * 7, id, content, type },
|
|
16
|
-
onRemoveMessage,
|
|
17
|
-
classNames,
|
|
18
|
-
}: IToastMessageProps) {
|
|
19
|
-
const customCSSWildcard = classNames?.toastMessages?.["*"];
|
|
20
|
-
const customCSS = classNames?.toastMessages?.[type];
|
|
21
|
-
|
|
22
|
-
const [animationUnmount, setAnimationUnmount] =
|
|
23
|
-
useState<IClassNamesAnimations>(undefined);
|
|
24
|
-
|
|
25
|
-
function handleGetCustomAnimation() {
|
|
26
|
-
return animationUnmount
|
|
27
|
-
? s[animationUnmount]
|
|
28
|
-
? s[animationUnmount]
|
|
29
|
-
: animationUnmount
|
|
30
|
-
: "";
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function handleRemoveMessage(event: AnimationEvent<HTMLSpanElement>) {
|
|
34
|
-
const unmount = handleGetCustomAnimation();
|
|
35
|
-
if (!event.currentTarget.classList?.contains(unmount!)) return;
|
|
36
|
-
onRemoveMessage(id);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function handleGetClassNames() {
|
|
40
|
-
const customClassNamesWildcard = getClassName(customCSSWildcard);
|
|
41
|
-
const customClassNames = getClassName(customCSS);
|
|
42
|
-
const unmount = handleGetCustomAnimation();
|
|
43
|
-
const messagePosition = s[`animation-message-${classNames?.toastPosition}`];
|
|
44
|
-
return `${s["toast-message"]} ${s[type]} ${messagePosition} ${unmount} ${customClassNames} ${customClassNamesWildcard}`.trim();
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function handleGetStyles() {
|
|
48
|
-
return { ...getStyle(customCSSWildcard), ...getStyle(customCSS) };
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const handleActiveAnimationUnmount = useCallback(() => {
|
|
52
|
-
setAnimationUnmount(classNames?.animationUnmount || "animation-unmount");
|
|
53
|
-
}, [classNames?.animationUnmount]);
|
|
54
|
-
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
const timeoutId = setTimeout(() => {
|
|
57
|
-
return handleActiveAnimationUnmount();
|
|
58
|
-
}, duration);
|
|
59
|
-
|
|
60
|
-
return () => clearTimeout(timeoutId);
|
|
61
|
-
}, [onRemoveMessage, id, duration, handleActiveAnimationUnmount]);
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<span
|
|
65
|
-
tabIndex={0}
|
|
66
|
-
onAnimationEnd={handleRemoveMessage}
|
|
67
|
-
onClick={handleActiveAnimationUnmount}
|
|
68
|
-
style={handleGetStyles()}
|
|
69
|
-
className={handleGetClassNames()}
|
|
70
|
-
>
|
|
71
|
-
{content as ReactNode}
|
|
72
|
-
</span>
|
|
73
|
-
);
|
|
74
|
-
}
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
.toast-container {
|
|
2
|
-
position: fixed;
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column-reverse;
|
|
5
|
-
gap: 1rem;
|
|
6
|
-
z-index: 999;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.animation-message-right-top,
|
|
10
|
-
.animation-message-right-center,
|
|
11
|
-
.animation-message-right-bottom {
|
|
12
|
-
animation: screenRightIn 0.5s ease-in-out;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.right-top,
|
|
16
|
-
.right-center,
|
|
17
|
-
.right-bottom {
|
|
18
|
-
align-items: end;
|
|
19
|
-
right: 1rem;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.right-top {
|
|
23
|
-
top: 1rem;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.right-center {
|
|
27
|
-
align-items: end;
|
|
28
|
-
top: 50%;
|
|
29
|
-
transform: translateY(-50%);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.right-bottom {
|
|
33
|
-
align-items: end;
|
|
34
|
-
bottom: 1rem;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.animation-message-center-top,
|
|
38
|
-
.animation-message-center-bottom,
|
|
39
|
-
.animation-message-center-center {
|
|
40
|
-
animation: screenCenterIn 0.5s ease-in-out;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.center-top,
|
|
44
|
-
.center-center,
|
|
45
|
-
.center-bottom {
|
|
46
|
-
left: 50%;
|
|
47
|
-
align-items: center;
|
|
48
|
-
transform: translateX(-50%);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.center-top {
|
|
52
|
-
top: 1rem;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.center-center {
|
|
56
|
-
top: 50%;
|
|
57
|
-
transform: translate(-50%, -50%);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.center-bottom {
|
|
61
|
-
bottom: 1rem;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.animation-message-left-top,
|
|
65
|
-
.animation-message-left-center,
|
|
66
|
-
.animation-message-left-bottom {
|
|
67
|
-
animation: screenLeftIn 0.5s ease-in-out;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.left-top,
|
|
71
|
-
.left-center,
|
|
72
|
-
.left-bottom {
|
|
73
|
-
align-items: start;
|
|
74
|
-
left: 1rem;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.left-top {
|
|
78
|
-
top: 1rem;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.left-center {
|
|
82
|
-
top: 50%;
|
|
83
|
-
transform: translateY(-50%);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.left-bottom {
|
|
87
|
-
bottom: 1rem;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.toast-message {
|
|
91
|
-
display: flex;
|
|
92
|
-
gap: 0.5rem;
|
|
93
|
-
align-items: center;
|
|
94
|
-
justify-content: center;
|
|
95
|
-
border-radius: 0.2rem;
|
|
96
|
-
padding: 0.5rem;
|
|
97
|
-
background: #c2c2c2;
|
|
98
|
-
box-shadow: 0 3px 10px #0000001a;
|
|
99
|
-
border: none;
|
|
100
|
-
outline: none;
|
|
101
|
-
cursor: pointer;
|
|
102
|
-
transition: all 0.5s ease-in-out;
|
|
103
|
-
font-size: 0.875rem;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.toast-message:hover {
|
|
107
|
-
filter: brightness(0.9);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.toast-message:active {
|
|
111
|
-
filter: brightness(1.1);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.success {
|
|
115
|
-
background: #61d345;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.info {
|
|
119
|
-
background: #4b8aff;
|
|
120
|
-
color: #fff;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.warn {
|
|
124
|
-
background: #fc0;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.error {
|
|
128
|
-
background: #ff4b4b;
|
|
129
|
-
color: #fff;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.ghost {
|
|
133
|
-
background: #fff;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.animation-unmount {
|
|
137
|
-
animation: screenOut 0.5s ease-in-out forwards;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
@keyframes screenRightIn {
|
|
141
|
-
from {
|
|
142
|
-
transform: translateX(150%);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
to {
|
|
146
|
-
transform: translateX(0);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
@keyframes screenLeftIn {
|
|
151
|
-
from {
|
|
152
|
-
transform: translateX(-150%);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
to {
|
|
156
|
-
transform: translateX(0);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
@keyframes screenCenterIn {
|
|
161
|
-
from {
|
|
162
|
-
transform: translateY(-150%);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
to {
|
|
166
|
-
transform: translateX(0);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
@keyframes screenOut {
|
|
171
|
-
from {
|
|
172
|
-
opacity: 1;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
to {
|
|
176
|
-
opacity: 0;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { isValidElement } from "react";
|
|
2
|
-
|
|
3
|
-
import { IReactNode } from "../@types";
|
|
4
|
-
|
|
5
|
-
export function toastContentSanitize(content?: IReactNode): IReactNode {
|
|
6
|
-
if (!content) return;
|
|
7
|
-
|
|
8
|
-
if (isValidElement(content)) {
|
|
9
|
-
return content;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
return !(typeof content === "object") || Array.isArray(content)
|
|
13
|
-
? content
|
|
14
|
-
: JSON.stringify(content);
|
|
15
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { isValidElement } from "react";
|
|
2
|
-
import { toast } from "..";
|
|
3
|
-
|
|
4
|
-
import { IToast, IToastWithoutType, IReactNode } from "../@types";
|
|
5
|
-
|
|
6
|
-
export function toastType(type: IToast["type"]) {
|
|
7
|
-
return function (data: IToastWithoutType | IReactNode) {
|
|
8
|
-
if (isValidElement(data)) {
|
|
9
|
-
return toast({ content: data, type: type });
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const { content, duration } = data as IToastWithoutType;
|
|
13
|
-
return toast({ content, duration, type });
|
|
14
|
-
};
|
|
15
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import EventManager from "../services/event-manager.service";
|
|
2
|
-
import { toastType } from "./toast-type.helpers";
|
|
3
|
-
import { toastContentSanitize } from "./toast-content-sanitize.helpers";
|
|
4
|
-
import { IToast } from "../@types";
|
|
5
|
-
|
|
6
|
-
export const toastEventManager = new EventManager<{ "add-toast": IToast }>();
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* @param {object} { duration, content, type }
|
|
10
|
-
*/
|
|
11
|
-
function toast({ duration, content, type }: IToast) {
|
|
12
|
-
content = toastContentSanitize(content);
|
|
13
|
-
toastEventManager.emit("add-toast", { content, duration, type });
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* @param {object} { duration, content }
|
|
17
|
-
* @param {ReactNode} ReactNode ReactElement | string | number | Iterable<ReactNode> | ReactPortal | boolean | null | undefined
|
|
18
|
-
*/
|
|
19
|
-
toast.error = toastType("error");
|
|
20
|
-
/**
|
|
21
|
-
* @param {object} { duration, content }
|
|
22
|
-
* @param {ReactNode} ReactNode ReactElement | string | number | Iterable<ReactNode> | ReactPortal | boolean | null | undefined
|
|
23
|
-
*/
|
|
24
|
-
toast.success = toastType("success");
|
|
25
|
-
/**
|
|
26
|
-
* @param {object} { duration, content }
|
|
27
|
-
* @param {ReactNode} ReactNode ReactElement | string | number | Iterable<ReactNode> | ReactPortal | boolean | null | undefined
|
|
28
|
-
*/
|
|
29
|
-
toast.warn = toastType("warn");
|
|
30
|
-
/**
|
|
31
|
-
* @param {object} { duration, content }
|
|
32
|
-
* @param {ReactNode} ReactNode ReactElement | string | number | Iterable<ReactNode> | ReactPortal | boolean | null | undefined
|
|
33
|
-
*/
|
|
34
|
-
toast.info = toastType("info");
|
|
35
|
-
/**
|
|
36
|
-
* @param {object} { duration, content }
|
|
37
|
-
* @param {ReactNode} ReactNode ReactElement | string | number | Iterable<ReactNode> | ReactPortal | boolean | null | undefined
|
|
38
|
-
*/
|
|
39
|
-
toast.ghost = toastType("ghost");
|
|
40
|
-
|
|
41
|
-
export { toast };
|
package/src/index.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export { toast } from "./helpers/toast.helper";
|
|
2
|
-
export { ToastContainer } from "./components/Toast/toast-container.component";
|
|
3
|
-
export {
|
|
4
|
-
type IToastContainerProps,
|
|
5
|
-
type IToast,
|
|
6
|
-
type IPositions,
|
|
7
|
-
type IClassNames,
|
|
8
|
-
type IClassNamesAnimations,
|
|
9
|
-
type IReactNode,
|
|
10
|
-
} from "./@types";
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export default class EventManager<
|
|
2
|
-
TEvents extends Record<keyof TEvents, TEvents[keyof TEvents]>
|
|
3
|
-
> {
|
|
4
|
-
private listeners = new Map<
|
|
5
|
-
keyof TEvents,
|
|
6
|
-
((parameters: TEvents[keyof TEvents]) => void)[]
|
|
7
|
-
>([]);
|
|
8
|
-
|
|
9
|
-
on<TKey extends keyof TEvents>(
|
|
10
|
-
event: TKey,
|
|
11
|
-
listener: (parameters: TEvents[TKey]) => void
|
|
12
|
-
) {
|
|
13
|
-
if (!this.listeners.has(event)) {
|
|
14
|
-
this.listeners.set(event, []);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
this.listeners
|
|
18
|
-
.get(event)
|
|
19
|
-
?.push(listener as (parameters: TEvents[keyof TEvents]) => void);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
emit<TKey extends keyof TEvents>(event: TKey, payload: TEvents[TKey]) {
|
|
23
|
-
if (!this.listeners.has(event)) return;
|
|
24
|
-
|
|
25
|
-
this.listeners.get(event)?.forEach((listener) => listener(payload));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
removeListener<TKey extends keyof TEvents>(
|
|
29
|
-
event: TKey,
|
|
30
|
-
listenerToRemove: (parameters: TEvents[TKey]) => void
|
|
31
|
-
) {
|
|
32
|
-
const listeners = this.listeners.get(event);
|
|
33
|
-
|
|
34
|
-
if (!listeners) return;
|
|
35
|
-
|
|
36
|
-
const filteredListeners = listeners.filter(
|
|
37
|
-
(listener) => listener !== listenerToRemove
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
this.listeners.set(event, filteredListeners);
|
|
41
|
-
}
|
|
42
|
-
}
|
package/src/vite-env.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
package/tsconfig.json
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2020",
|
|
4
|
-
"useDefineForClassFields": true,
|
|
5
|
-
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
-
"module": "ESNext",
|
|
7
|
-
"skipLibCheck": true,
|
|
8
|
-
|
|
9
|
-
/* Bundler mode */
|
|
10
|
-
"moduleResolution": "bundler",
|
|
11
|
-
"allowImportingTsExtensions": true,
|
|
12
|
-
"resolveJsonModule": true,
|
|
13
|
-
"isolatedModules": true,
|
|
14
|
-
"noEmit": true,
|
|
15
|
-
"jsx": "react-jsx",
|
|
16
|
-
|
|
17
|
-
/* Linting */
|
|
18
|
-
"strict": true,
|
|
19
|
-
"noUnusedLocals": true,
|
|
20
|
-
"noUnusedParameters": true,
|
|
21
|
-
"noFallthroughCasesInSwitch": true
|
|
22
|
-
},
|
|
23
|
-
"include": ["src"],
|
|
24
|
-
"exclude": ["node_modules"],
|
|
25
|
-
"references": [{ "path": "./tsconfig.node.json" }]
|
|
26
|
-
}
|
package/tsconfig.node.json
DELETED
package/vite.config.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import react from "@vitejs/plugin-react-swc";
|
|
2
|
-
import path from "path";
|
|
3
|
-
import { defineConfig } from "vite";
|
|
4
|
-
import dts from "vite-plugin-dts";
|
|
5
|
-
|
|
6
|
-
// https://vitejs.dev/config/
|
|
7
|
-
export default defineConfig({
|
|
8
|
-
plugins: [
|
|
9
|
-
react(),
|
|
10
|
-
dts({
|
|
11
|
-
rollupTypes: true,
|
|
12
|
-
insertTypesEntry: true,
|
|
13
|
-
exclude: ["src/app"],
|
|
14
|
-
}),
|
|
15
|
-
],
|
|
16
|
-
build: {
|
|
17
|
-
lib: {
|
|
18
|
-
entry: path.resolve("src", "index.ts"),
|
|
19
|
-
name: "toast.notification",
|
|
20
|
-
formats: ["es", ],
|
|
21
|
-
fileName: (format) => `index.${format}.js`,
|
|
22
|
-
},
|
|
23
|
-
rollupOptions: {
|
|
24
|
-
external: ["react", "react-dom"],
|
|
25
|
-
output: {
|
|
26
|
-
globals: {
|
|
27
|
-
react: "React",
|
|
28
|
-
"react-dom": "ReactDOM",
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
});
|