UNPKG

primereact

Version:

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

2 lines (1 loc) 11.5 kB
import*as e from"react";import{TransitionGroup as t}from"react-transition-group";import n,{ariaLabel as o,PrimeReactContext as r}from"primereact/api";import{ComponentBase as a,useHandleStyle as s}from"primereact/componentbase";import{CSSTransition as i}from"primereact/csstransition";import{useMergeProps as c,useTimeout as l,useUpdateEffect as m,useUnmountEffect as p}from"primereact/hooks";import{Portal as u}from"primereact/portal";import{classNames as f,DomHandler as y,IconUtils as d,ObjectUtils as g,ZIndexUtils as b}from"primereact/utils";import{CheckIcon as v}from"primereact/icons/check";import{ExclamationTriangleIcon as h}from"primereact/icons/exclamationtriangle";import{InfoCircleIcon as x}from"primereact/icons/infocircle";import{TimesIcon as E}from"primereact/icons/times";import{TimesCircleIcon as N}from"primereact/icons/timescircle";import{Ripple as w}from"primereact/ripple";function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},S.apply(null,arguments)}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n<t;n++)o[n]=e[n];return o}function I(e){if(Array.isArray(e))return O(e)}function j(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function k(e,t){if(e){if("string"==typeof e)return O(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?O(e,t):void 0}}function C(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function P(e){return I(e)||j(e)||k(e)||C()}function M(e){if(Array.isArray(e))return e}function A(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,r,a,s,i=[],c=!0,l=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(o=a.call(n)).done)&&(i.push(o.value),i.length!==t);c=!0);}catch(e){l=!0,r=e}finally{try{if(!c&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(l)throw r}}return i}}function T(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _(e,t){return M(e)||A(e,t)||k(e,t)||T()}function R(e){return R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},R(e)}function D(e,t){if("object"!=R(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=R(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function L(e){var t=D(e,"string");return"symbol"==R(t)?t:t+""}function X(e,t,n){return(t=L(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Z=a.extend({defaultProps:{__TYPE:"Toast",id:null,className:null,content:null,style:null,baseZIndex:0,position:"top-right",transitionOptions:null,appendTo:"self",onClick:null,onRemove:null,onShow:null,onHide:null,onMouseEnter:null,onMouseLeave:null,children:void 0},css:{classes:{root:function(e){var t=e.props,o=e.context;return f("p-toast p-component p-toast-"+t.position,t.className,{"p-input-filled":o&&"filled"===o.inputStyle||"filled"===n.inputStyle,"p-ripple-disabled":o&&!1===o.ripple||!1===n.ripple})},message:{message:function(e){var t=e.severity;return f("p-toast-message",X({},"p-toast-message-".concat(t),t))},content:"p-toast-message-content",buttonicon:"p-toast-icon-close-icon",closeButton:"p-toast-icon-close p-link",icon:"p-toast-message-icon",text:"p-toast-message-text",summary:"p-toast-summary",detail:"p-toast-detail"},transition:"p-toast-message"},styles:"\n@layer primereact {\n .p-toast {\n width: calc(100% - var(--toast-indent, 0px));\n max-width: 25rem;\n }\n \n .p-toast-message-icon {\n flex-shrink: 0;\n }\n \n .p-toast-message-content {\n display: flex;\n align-items: flex-start;\n }\n \n .p-toast-message-text {\n flex: 1 1 auto;\n }\n \n .p-toast-summary {\n overflow-wrap: anywhere;\n }\n \n .p-toast-detail {\n overflow-wrap: anywhere;\n }\n \n .p-toast-top-center {\n transform: translateX(-50%);\n }\n \n .p-toast-bottom-center {\n transform: translateX(-50%);\n }\n \n .p-toast-center {\n min-width: 20vw;\n transform: translate(-50%, -50%);\n }\n \n .p-toast-icon-close {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-toast-icon-close.p-link {\n cursor: pointer;\n }\n \n /* Animations */\n .p-toast-message-enter {\n opacity: 0;\n transform: translateY(50%);\n }\n \n .p-toast-message-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: transform 0.3s, opacity 0.3s;\n }\n \n .p-toast-message-enter-done {\n transform: none;\n }\n \n .p-toast-message-exit {\n opacity: 1;\n max-height: 1000px;\n }\n \n .p-toast .p-toast-message.p-toast-message-exit-active {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n overflow: hidden;\n transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n }\n}\n",inlineStyles:{root:function(e){var t=e.props;return{position:"fixed",top:"top-right"===t.position||"top-left"===t.position||"top-center"===t.position?"20px":"center"===t.position?"50%":null,right:("top-right"===t.position||"bottom-right"===t.position)&&"20px",bottom:("bottom-left"===t.position||"bottom-right"===t.position||"bottom-center"===t.position)&&"20px",left:"top-left"===t.position||"bottom-left"===t.position?"20px":"center"===t.position||"top-center"===t.position||"bottom-center"===t.position?"50%":null}}}}});function B(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function H(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?B(Object(n),!0).forEach((function(t){X(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):B(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var J=e.memo(e.forwardRef((function(t,n){var r=c(),a=t.messageInfo,s=t.ptCallbacks,i=s.ptm,m=s.ptmo,p=s.cx,u=a.message,b=u.severity,S=u.content,O=u.summary,I=u.detail,j=u.closable,k=u.life,C=u.sticky,P=u.className,M=u.style,A=u.contentClassName,T=u.contentStyle,R=u.icon,D=u.closeIcon,L=u.pt,X={index:t.index},Z=H(H({},t.metaData),X),B=_(e.useState(!1),2),J=B[1],z=_(l((function(){U()}),k||3e3,!C&&!B[0]),1)[0],Y=function(e,n){return i(e,H({hostName:t.hostName},n))},U=function(){z(),t.onClose&&t.onClose(a)},q=function(e){!t.onClick||y.hasClass(e.target,"p-toast-icon-close")||y.hasClass(e.target,"p-toast-icon-close-icon")||t.onClick(a.message)},F=function(){if(a){var n=g.getJSXElement(S,{message:a.message,onClick:q,onClose:U}),o=r({className:p("message.icon")},Y("icon",Z),m(L,"icon",H(H({},X),{},{hostName:t.hostName}))),s=R;if(!R)switch(b){case"info":s=e.createElement(x,o);break;case"warn":s=e.createElement(h,o);break;case"error":s=e.createElement(N,o);break;case"success":s=e.createElement(v,o)}var i=d.getJSXIcon(s,H({},o),{props:t}),c=r({className:p("message.text")},Y("text",Z),m(L,"text",H(H({},X),{},{hostName:t.hostName}))),l=r({className:p("message.summary")},Y("summary",Z),m(L,"summary",H(H({},X),{},{hostName:t.hostName}))),u=r({className:p("message.detail")},Y("detail",Z),m(L,"detail",H(H({},X),{},{hostName:t.hostName})));return n||e.createElement(e.Fragment,null,i,e.createElement("div",c,e.createElement("span",l,O),I&&e.createElement("div",u,I)))}return null}(),$=function(){var n=r({className:p("message.buttonicon")},Y("buttonicon",Z),m(L,"buttonicon",H(H({},X),{},{hostName:t.hostName}))),a=d.getJSXIcon(D||e.createElement(E,n),H({},n),{props:t}),s=r({type:"button",className:p("message.closeButton"),onClick:U,"aria-label":t.ariaCloseLabel||o("close")},Y("closeButton",Z),m(L,"closeButton",H(H({},X),{},{hostName:t.hostName})));return!1!==j?e.createElement("div",null,e.createElement("button",s,a,e.createElement(w,null))):null}(),G=r({ref:n,className:f(P,p("message.message",{severity:b})),style:M,role:"alert","aria-live":"assertive","aria-atomic":"true",onClick:q,onMouseEnter:function(e){t.onMouseEnter&&t.onMouseEnter(e),e.defaultPrevented||C||(z(),J(!0))},onMouseLeave:function(e){t.onMouseLeave&&t.onMouseLeave(e),e.defaultPrevented||C||J(!1)}},Y("message",Z),m(L,"root",H(H({},X),{},{hostName:t.hostName}))),K=r({className:f(A,p("message.content")),style:T},Y("content",Z),m(L,"content",H(H({},X),{},{hostName:t.hostName})));return e.createElement("div",G,e.createElement("div",K,F,$))})));J.displayName="ToastMessage";var z=0,Y=e.memo(e.forwardRef((function(o,a){var l=c(),f=e.useContext(r),y=Z.getProps(o,f),d=_(e.useState([]),2),v=d[0],h=d[1],x=e.useRef(null),E={props:y,state:{messages:v}},N=Z.setMetaData(E);s(Z.css.styles,N.isUnstyled,{name:"toast"});var w=function(e){e&&h((function(t){return O(t,e,!0)}))},O=function(e,t,n){var o;if(Array.isArray(t)){var r=t.reduce((function(e,t){return e.push({_pId:z++,message:t}),e}),[]);o=n&&e?[].concat(P(e),P(r)):r}else{var a={_pId:z++,message:t};o=n&&e?[].concat(P(e),[a]):[a]}return o},I=function(){b.clear(x.current),h([])},j=function(e){h((function(t){return O(t,e,!1)}))},k=function(e){var t=g.isNotEmpty(e._pId)?e._pId:e.message||e;h((function(n){return n.filter((function(n){return n._pId!==e._pId&&!g.deepEquals(n.message,t)}))})),y.onRemove&&y.onRemove(e.message||t)},C=function(e){k(e)},M=function(){y.onShow&&y.onShow()},A=function(){1===v.length&&b.clear(x.current),y.onHide&&y.onHide()};m((function(){b.set("toast",x.current,f&&f.autoZIndex||n.autoZIndex,y.baseZIndex||f&&f.zIndex.toast||n.zIndex.toast)}),[v,y.baseZIndex]),p((function(){b.clear(x.current)})),e.useImperativeHandle(a,(function(){return{props:y,show:w,replace:j,remove:k,clear:I,getElement:function(){return x.current}}}));var T,R,D=(T=l({ref:x,id:y.id,className:N.cx("root",{context:f}),style:N.sx("root")},Z.getOtherProps(y),N.ptm("root")),R=l({classNames:N.cx("transition"),timeout:{enter:300,exit:300},options:y.transitionOptions,unmountOnExit:!0,onEntered:M,onExited:A},N.ptm("transition")),e.createElement("div",T,e.createElement(t,null,v&&v.map((function(t,n){var r=e.createRef();return e.createElement(i,S({nodeRef:r,key:t._pId},R),o.content?g.getJSXElement(o.content,{message:t.message}):e.createElement(J,{hostName:"Toast",ref:r,messageInfo:t,index:n,onClick:y.onClick,onClose:C,onMouseEnter:y.onMouseEnter,onMouseLeave:y.onMouseLeave,closeIcon:y.closeIcon,ptCallbacks:N,metaData:E}))})))));return e.createElement(u,{element:D,appendTo:y.appendTo})})));Y.displayName="Toast";export{Y as Toast};