butter-toast
Version:
Smooth toast notifications for react apps
1 lines • 14.5 kB
JavaScript
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","react-dom"],e);else{var n="object"==typeof exports?e(require("react"),require("react-dom")):e(t.React,t.ReactDOM);for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(function(){return 0}.constructor("return this")(),function(t,e){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=19)}([function(t,e){t.exports=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}},function(e,n){e.exports=t},function(t,e,n){"use strict";n.d(e,"e",function(){return o}),n.d(e,"a",function(){return r}),n.d(e,"c",function(){return i}),n.d(e,"d",function(){return s}),n.d(e,"b",function(){return a}),n.d(e,"f",function(){return p});var o="POS_TOP",r="POS_BOTTOM",i="POS_LEFT",s="POS_RIGHT",a="POS_CENTER",u={right:0},c={left:0},f={left:"50%"},l={position:"fixed",zIndex:99999};function p(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(null===t)return{};var n=t.vertical,o=t.horizontal;return Object.assign({},l,n===r?{bottom:"".concat(e,"px")}:{top:"".concat(e,"px")},o===a?f:{},o===i?c:{},o===s?u:{})}},function(t,e){t.exports=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}},function(t,e,n){t.exports=n(22)()},,function(t,e,n){"use strict";function o(t){var e="".concat(Date.now()).slice(-8),n="".concat(Math.random()).slice(2),o=e+n;return t?"".concat(t,"_").concat(o):e+n}var r=n(17),i=n.n(r),s=n(1),a=n.n(s),u=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return a.a.isValidElement(t)?a.a.cloneElement(t,e):"function"==typeof t?t(e):null===t||["undefined","boolean"].includes(i()(t))?null:t};n.d(e,"a",function(){return o}),n.d(e,"b",function(){return u})},function(t,e,n){var o=n(3);t.exports=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),r.forEach(function(e){o(t,e,n[e])})}return t}},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}t.exports=function(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),t}},function(t,e,n){var o=n(17),r=n(0);t.exports=function(t,e){return!e||"object"!==o(e)&&"function"!=typeof e?r(t):e}},function(t,e){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(e)}t.exports=n},function(t,e,n){var o=n(21);t.exports=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}},function(t,e,n){var o=n(24);t.exports=function(t,e){if(null==t)return{};var n,r,i=o(t,e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);for(r=0;r<s.length;r++)n=s[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}},function(t,n){t.exports=e},,,function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=o=function(t){return n(t)}:t.exports=o=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},o(e)}t.exports=o},,function(t,e,n){"use strict";n.r(e);var o=n(7),r=n.n(o),i=n(8),s=n.n(i),a=n(9),u=n.n(a),c=n(10),f=n.n(c),l=n(11),p=n.n(l),d=n(12),m=n.n(d),y=n(0),v=n.n(y),h=n(3),b=n.n(h),O=n(1),g=n.n(O),T=n(14),x=n.n(T),w=n(4),j=n.n(w),S=n(6),E=n(2),_=n(13),P=n.n(_),k={position:"relative",padding:0,margin:0,listStyleType:"none"},R=function(t){var e=t.shown,n=t.removed,o={opacity:0,transition:"opacity .5s"};return e&&Object.assign(o,{opacity:1,transform:"scale(1)"}),n&&Object.assign(o,{transform:"scale(.9)",transition:"opacity .3s, transform .3s"}),o},C=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t.sticky||t.timeout===1/0},N=function(t,e){var n="number"==typeof t?t:e;return n<200?200+n:n},M=function(t){function e(){var t,n;s()(this,e);for(var o=arguments.length,r=new Array(o),i=0;i<o;i++)r[i]=arguments[i];return n=f()(this,(t=p()(e)).call.apply(t,[this].concat(r))),b()(v()(v()(n)),"state",{shown:!1}),b()(v()(v()(n)),"createRef",function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{addEventListener:function(){return null}};n.toastRef=t}),b()(v()(v()(n)),"open",function(){return n.setState({isOpen:!0},n.toastDidOpen)}),b()(v()(v()(n)),"startTimeout",function(){var t=n.props.toast;if(!C(t)){var e=N(n.remaining,t.timeout);n.clearTimeout(),n.timeout=setTimeout(n.close,e),n.ends=Date.now()+e,n.remaining=void 0}}),b()(v()(v()(n)),"clearTimeout",function(){C(n.props.toast)||(n.remaining=n.calcRemaining(),clearTimeout(n.timeout))}),b()(v()(v()(n)),"calcRemaining",function(){return n.ends-Date.now()}),b()(v()(v()(n)),"close",function(){if(!n.state.removed){var t=n.toastRef;n.clearTimeout();n.setState({shown:!1,removed:!0},function(){t.addEventListener("transitionend",function e(o){o.target===t&&(t.removeEventListener(o.type,e),n.setState({isOpen:!1},n.props.remove))})})}}),n}return m()(e,t),u()(e,[{key:"componentDidMount",value:function(){setTimeout(this.open)}},{key:"componentWillUnmount",value:function(){this.clearTimeout()}},{key:"toastDidOpen",value:function(){var t=this,e=this.toastRef,n=this.props,o=n.setHeight,r=n.toast;setTimeout(function(){t.setState({shown:!0},function(){o(r.id,e.clientHeight),t.startTimeout()})})}},{key:"render",value:function(){var t=this,e=this.props,n=e.dismiss,o=e.toast,i=e.pauseOnHover,s=e.position,a=P()(e,["dismiss","toast","pauseOnHover","position"]),u=this.state,c=u.shown,f=u.removed;return g.a.createElement("div",{ref:this.createRef,onMouseEnter:function(){return i&&t.clearTimeout()},onMouseLeave:function(){return i&&t.startTimeout()},style:R({shown:c,removed:f}),className:this.className},Object(S.b)(o.content,r()({toastId:o.id,dismiss:this.dismiss,onClick:o.onClick?function(t){return o.onClick(t,o,n)}:void 0,calcRemaining:this.calcRemaining,trayPosition:s},a)))}},{key:"className",get:function(){var t=this;return["shown","removed"].reduce(function(e,n){return t.state[n]?"".concat(e," ").concat(n):e},"bt-toast")}},{key:"dismiss",get:function(){var t=this.props,e=t.toast,n=t.dismiss;return"function"==typeof e.dismiss?function(t){return e.dismiss(t,e,n)}:n}}]),e}(O.Component),B=M;M.defaultProps={pauseOnHover:!0,toast:{}};var D=function(t){function e(t){var n;return s()(this,e),n=f()(this,p()(e).call(this,t)),b()(v()(v()(n)),"state",{toasts:[]}),b()(v()(v()(n)),"id",Object(S.a)("tray")),b()(v()(v()(n)),"toasts",{}),b()(v()(v()(n)),"createToastRef",function(t,e){t&&(e?n.toasts[t]=e:delete n.toasts[t])}),b()(v()(v()(n)),"push",function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=n.props.timeout;n.setState(function(n){var o=Object.assign({},n);return o.toasts=[r()({timeout:e},t)].concat(o.toasts),o})}),b()(v()(v()(n)),"remove",function(t){n.setState(function(e){var n=Object.assign({},e);return n.toasts=n.toasts.filter(function(e){return e.id!==t}),n})}),b()(v()(v()(n)),"dismiss",function(t){n.toasts[t]&&n.toasts[t].close&&n.toasts[t].close()}),b()(v()(v()(n)),"dismissAll",function(){for(var t in n.toasts)n.dismiss(t)}),b()(v()(v()(n)),"setHeight",function(t,e){n.setState(function(n){var o=Object.assign({},n),r=o.toasts.findIndex(function(e){return e.id===t});return o.toasts[r].height=e,o})}),n.onButterToast=n.onButterToast.bind(v()(v()(n))),n}return m()(e,t),u()(e,[{key:"componentDidMount",value:function(){window.addEventListener(I,this.onButterToast)}},{key:"componentWillUnmount",value:function(){window.removeEventListener(I,this.onButterToast)}},{key:"onButterToast",value:function(){var t=this,e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).detail,n=e.namespace,o=e.dismissBy,r=P()(e,["namespace","dismissBy"]);if(!n||n===this.props.namespace)return o?void("all"===o?this.dismissAll():this.dismiss(o)):setTimeout(function(){return t.push(r)})}},{key:"render",value:function(){var t=this,e=this.state.toasts,n=this.props,o=n.position,r=n.spacing,i=0;return g.a.createElement("ul",{style:k},e.map(function(e,n){if(!e)return null;var s,a=e.height||0;s=i,i+=a+r,o&&o.vertical===E.a&&(s=-s-a);var u=function(t){var e,n=t.position,o=void 0===n?{vertical:E.e,horizontal:E.b}:n,r=t.spacing,i=t.offset,s=t.height,a=t.index,u={position:"absolute",transition:"transform .3s",transitionDelay:"".concat(.02*(void 0===a?0:a),"s")};switch(e=0!==i||s||o.vertical!==E.e?"translateY(".concat(i,"px)"):"translateY(-100%)",o.horizontal){case E.d:u.right="".concat(r,"px"),u.transform=e;break;case E.b:u.transform="translateX(-50%) ".concat(e);break;default:u.left="".concat(r,"px"),u.transform=e}return u}({offset:s,spacing:r,position:o,height:e.height,index:n});return g.a.createElement("li",{key:e.id,style:u},g.a.createElement(B,{dismiss:function(){return t.dismiss(e.id)},remove:function(){return t.remove(e.id)},setHeight:t.setHeight,position:o,ref:function(n){return t.createToastRef(e.id,n)},toast:e}))}))}}]),e}(O.Component);n.d(e,"CUSTOM_EVENT_NAME",function(){return I}),n.d(e,"POS_TOP",function(){return E.e}),n.d(e,"POS_BOTTOM",function(){return E.a}),n.d(e,"POS_LEFT",function(){return E.c}),n.d(e,"POS_RIGHT",function(){return E.d}),n.d(e,"POS_CENTER",function(){return E.b});var I="ButterToast";function A(t){var e,n=Object.assign({namespace:""},t);"function"==typeof window.CustomEvent?e=new CustomEvent(I,{detail:n}):(e=document.createEvent("CustomEvent")).initCustomEvent(I,!1,!1,n),window.dispatchEvent(e)}var H=function(t){function e(){var t,n;s()(this,e);for(var o=arguments.length,i=new Array(o),a=0;a<o;a++)i[a]=arguments[a];return n=f()(this,(t=p()(e)).call.apply(t,[this].concat(i))),b()(v()(v()(n)),"raise",function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=Object(S.a)();return n.tray.push(r()({id:e},t)),e}),b()(v()(v()(n)),"dismiss",function(t){return n.tray.push(t)}),b()(v()(v()(n)),"dismissAll",function(){return n.tray.dismissAll()}),b()(v()(v()(n)),"createTrayRef",function(t){window._btTrays=window._btTrays||{},t&&(n.id=t.id,n.tray=t,window._btTrays[t.id]=t)}),n}return m()(e,t),u()(e,[{key:"componentDidMount",value:function(){if(!this.props.renderInContext){var t=this.props,e=t.position,n=t.timeout,o=t.spacing,r=t.namespace,i=t.style,s=Object(E.f)(e,o);this.root=document.createElement("aside"),this.root.setAttribute("class",this.className),Object.assign(this.root.style,s,i),document.body.appendChild(this.root),x.a.render(g.a.createElement(D,{ref:this.createTrayRef,namespace:r,spacing:o,timeout:n,position:e}),this.root)}}},{key:"componentWillUnmount",value:function(){this.root&&(delete window._btTrays[this.id],x.a.unmountComponentAtNode(this.root),this.root.parentNode.removeChild(this.root),delete this.root)}},{key:"render",value:function(){var t=this.props,e=t.renderInContext,n=t.timeout,o=t.spacing,r=t.namespace,i=t.position,s=t.style;return e?g.a.createElement("aside",{className:this.className,style:s},g.a.createElement(D,{ref:this.createTrayRef,position:i,namespace:r,spacing:o,timeout:n})):null}},{key:"className",get:function(){var t=this.props;return[t.className,t.namespace,"butter-toast"].filter(Boolean).join(" ")}}],[{key:"raise",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=Object(S.a)();return A(r()({id:e},t)),e}},{key:"dismiss",value:function(t){A({dismissBy:t})}},{key:"dismissAll",value:function(t){A({dismissBy:"all"})}}]),e}(O.Component);H.propTypes={renderInContext:j.a.bool,className:j.a.string,namespace:j.a.string,position:j.a.shape({vertical:j.a.oneOf([E.e,E.a]),horizontal:j.a.oneOf([E.c,E.d,E.b])}),timout:j.a.number,spacing:j.a.number},H.defaultProps={className:"",namespace:"",position:{vertical:E.e,horizontal:E.d},timeout:6e3,spacing:10};e.default=H},,function(t,e){function n(e,o){return t.exports=n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},n(e,o)}t.exports=n},function(t,e,n){"use strict";var o=n(23);function r(){}t.exports=function(){function t(t,e,n,r,i,s){if(s!==o){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=r,n.PropTypes=n,n}},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,e){t.exports=function(t,e){if(null==t)return{};var n,o,r={},i=Object.keys(t);for(o=0;o<i.length;o++)n=i[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}}])});