react-custom-toast - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

build/dev.js

@@ -10,45 +10,61 @@ const webpack = require('webpack')
 
-module.exports = {
-  entry: reslove('example/index.js'),
-  output: {
-    publicPath: '/',
-    filename: 'bundle.js'
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(jsx|tsx|ts|js)$/,
-        use: ['babel-loader']
-      },
-      {
-        test: /\.(styl|css)$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          {
-            loader: 'postcss-loader',
-            options: {
-              ident: 'postcss',
-              plugins: () => [
-                postcssPresetEnv({
-                  autoprefixer: { grid: true }
-                })
-              ]
-            }
-          },
-          'stylus-loader'
-        ]
+module.exports = (env, argv) => {
+  const isDev = argv.mode === 'development'
+  return {
+    entry: reslove('example/index.js'),
+    output: {
+      path: reslove('docs'),
+      publicPath: isDev ? '/' : './',
+      filename: 'bundle.js'
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+      alias: {
+        styles: reslove('example/styles')
       }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(jsx|tsx|ts|js)$/,
+          use: ['babel-loader']
+        },
+        {
+          test: /\.(styl|css)$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                ident: 'postcss',
+                plugins: () => [
+                  postcssPresetEnv({
+                    autoprefixer: { grid: true }
+                  })
+                ]
+              }
+            },
+            'stylus-loader'
+          ]
+        },
+        {
+          test: /\.(svg|png|ttf|woff|eot)$/,
+          use: 'url-loader'
+        }
+      ]
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: reslove('public/index.html')
+      }),
+      new webpack.HotModuleReplacementPlugin()
     ]
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: reslove('public/index.html')
-    }),
-    new webpack.HotModuleReplacementPlugin()
-  ]
+  }
 }

example/App.jsx

 import React, { Component } from 'react'
-import { Placement } from '../src/type'
-import { Toast, ToastContainer } from '../src/index'
 import ReactMarkdown from 'react-markdown'
 import hljs from 'highlight.js'
 
+import Nav from './container/nav'
+
+import { Placement } from '../src/type'
+import { Toast, ToastContainer } from '../src/index'
+
 import 'highlight.js/styles/github.css'
 import './App.styl'
 
-interface State {
-  code: string
-  text: string
-  placement: Placement;
-  delay: number;
-  duration: number;
-  anim: string;
-}
-
-class App extends Component<State> {
-  state: Readonly<State> = {
-    code: '',
+class App extends Component {
+  state = {
+    type: 'default',
     text: 'hello,world!',
-    anim: 'slideX',
+    anim: 'slideY',
     placement: 'topLeft',
     duration: 2000,
+    animDuration: 300,
     delay: 0
@@ -62,68 +57,86 @@ }
   }
+  renderToastMethods = () => {
+    const handleSelect = (type) => this.setState({ type })
+    const methods = ['default', 'info', 'success', 'warning', 'error']
+    return methods.map((m) => (
+      <Radio
+        key={m}
+        value={m}
+        text={m}
+        checked={this.state.type === m}
+        onChange={handleSelect}
+      />
+    ))
+  }
   componentDidMount() {
     this.bindHighlight()
-    this.setState({
-      code: this.getCode()
-    })
   }
   componentDidUpdate(_, preStates) {
     this.bindHighlight()
-    const code = this.getCode()
-    if (preStates.code !== code) {
-      this.setState({ code })
-    }
   }
   render() {
     return (
-      <div className='App'>
-        <div className='flex-col'>
-          <input type="text" defaultValue={this.state.text} onChange={this.updateText}/>
+      <div className='container'>
+        <Nav />
+        <div className='title'>
+          <h1>⚠️ react-custom-toast (提示)</h1>
+          <span>基于 react 的提示组件。支持自定义提示样式及丰富的配置</span>
         </div>
-        <div className='flex-col'>
-          <h4>chose placement</h4>
-          {this.renderPlacement()}
-        </div>
-        <div>
-          <button className='btn' onClick={this.openToast('')}>
-            default toast
-          </button>
-          <button className='btn info' onClick={this.openToast('info')}>
-            info toast
-          </button>
-          <button className='btn error' onClick={this.openToast('error')}>
-            error toast
-          </button>
-          <button className='btn warning' onClick={this.openToast('warning')}>
-            warning toast
-          </button>
-          <button className='btn success' onClick={this.openToast('success')}>
-            success toast
-          </button>
-        </div>
-        <div className='flex-col'>
-          <label className='flex-row'>
-            持续时间: {this.state.duration}ms
+        <div className='content'>
+          <h4>配置项</h4>
+          <div className='form-item'>
+            <span>文本:</span>
             <input
+              type='text'
+              defaultValue={this.state.text}
+              onChange={this.updateText}
+            />
+          </div>
+          <div className='form-item'>
+            <span>选择方向:</span>
+            <div className='flex-row'>{this.renderPlacement()}</div>
+          </div>
+          <div className='form-item'>
+            <span>持续时间: {this.state.duration}ms</span>
+            <input
               type='number'
               defaultValue={this.state.duration / 1000}
-              onChange={this.setDuration}
+              onChange={this.updateState('duration')}
             />
-          </label>
-          <label className='flex-row'>
-            延迟: {this.state.delay}ms
+          </div>
+          <div className='form-item'>
+            <span>延迟: {this.state.delay}ms</span>
             <input
               type='number'
               defaultValue={this.state.delay / 1000}
-              onChange={this.setDelay}
+              onChange={this.updateState('delay')}
             />
-          </label>
+          </div>
+          <div className='form-item'>
+            <span>选择动画:</span>
+            <div className='flex-row'>{this.renderAnim()}</div>
+          </div>
+          <div className='form-item'>
+            <span>动画持续时间: {this.state.animDuration}ms</span>
+            <input
+              type='number'
+              defaultValue={this.state.animDuration / 1000}
+              onChange={this.updateState('animDuration')}
+            />
+          </div>
+          <div className='form-item'>
+            <span>选择提示类型: </span>
+            <div className='flex-row'>{this.renderToastMethods()}</div>
+          </div>
+          <div className='flex-center'>
+            <button
+              onClick={this.openToast}
+              className={`btn btn-toast ${this.state.type}`}
+            >
+              显示提示
+            </button>
+          </div>
+          <h4>代码</h4>
+          <ReactMarkdown key={this.code} source={this.code} />
         </div>
-        <div className='flex-col'>
-          <h4>chose animate</h4>
-          {this.renderAnim()}
-        </div>
-        <div>
-          <h4>code: </h4>
-          <ReactMarkdown source={this.state.code} />
-        </div>
         <ToastContainer />
@@ -134,13 +147,7 @@ </div>
 
-  updateText = (event) => {
-    const text = event.target.value
-    this.setState({
-      text
-    })
-  }
-
-  getCode() {
-    const { placement, duration, delay, anim, text } = this.state
+  get code() {
+    const { placement, duration, delay, anim, text, type, animDuration } = this.state
     const options = {
       animateName: anim,
+      animateDuration: animDuration,
       delay,
@@ -150,31 +157,50 @@ placement,
     }
+    const currentType = type === 'default' ? 'open' : type
+    
     const optionStr = Object.entries(options).reduce((code, [key, value]) => {
-      return `${code}  ${key}: '${value}'\n`
+      const currentValue = typeof value === 'number' ? value : `'${value}'`
+      return `${code}  ${key}: ${currentValue}\n`
     }, '')
-    return `\`\`\` js\nToast.info('${this.state.text}', {\n${optionStr}})\n\`\`\``
+    return `\`\`\` js\nToast.${currentType}('${
+      this.state.text
+    }', {\n${optionStr}})\n\`\`\``
   }
 
-  openToast = (type: string) => () => {
-    const { placement, duration, delay, anim } = this.state
-    Toast(this.state.text, {
-      animateName: anim,
-      delay,
-      placement,
-      type,
-      duration
-    })
+  openToast = () => {
+    const { placement, duration, delay, anim, type, animDuration, text } = this.state
+    const currentType = type === 'default' ? 'open' : type
+    // Toast(this.state.text, {
+    //   animateName: anim,
+    //   animateDuration: animDuration,
+    //   delay,
+    //   placement,
+    //   type,
+    //   duration
+    // })
+    console.log(Toast[currentType], currentType)
+    const fn = Toast[currentType]
+    if (fn) {
+      fn(text, {
+        animateName: anim,
+        animateDuration: animDuration,
+        delay,
+        placement,
+        duration
+      })
+    }
   }
 
-  setDelay = (e: React.SyntheticEvent) => {
-    this.setState({ delay: Number(e.target.value) * 1000 })
+  updateText = (event) => {
+    const text = event.target.value
+    this.setState({ text })
   }
 
-  setDuration = (e: React.SyntheticEvent) => {
-    this.setState({ duration: Number(e.target.value) * 1000 })
+  updateState = (field) => (e) => {
+    this.setState({ [field]: Number(e.target.value) * 1000 })
   }
 
   bindHighlight() {
-    const elems = document.querySelectorAll('pre');
-    Array.prototype.forEach.call(elems, elem => {
-      hljs.highlightBlock(elem);
+    const elems = document.querySelectorAll('pre')
+    Array.prototype.forEach.call(elems, (elem) => {
+      hljs.highlightBlock(elem)
     })
@@ -193,3 +219,3 @@ }
   return (
-    <label className='flex-row'>
+    <label className='flex-row radio'>
       <input
@@ -196,0 +222,0 @@ onChange={handleChange}

example/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
+
 import './index.styl'
+import './assets/fonts/iconfont.css'
 
 ReactDOM.render(<App />, document.getElementById('root'))

lib/index.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["react-custom-toast"]=e():t["react-custom-toast"]=e()}(global,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},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=7)}([function(t,e){t.exports=require("react")},function(t,e){t.exports=require("react-transition-group")},function(t,e,n){var r=n(3);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};n(5)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){(t.exports=n(4)(!1)).push([t.i,".toast-container {\n  position: fixed;\n}\n.toast-container .toast-wrapper {\n  position: fixed;\n}\n.toast-container .toast-wrapper.topRight {\n  right: 0;\n  top: 60px;\n}\n.toast-container .toast-wrapper.topLeft {\n  left: 0;\n  top: 60px;\n}\n.toast-container .toast-wrapper.topCenter {\n  top: 60px;\n  left: 50%;\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n}\n.toast-container .toast-wrapper.bottomLeft {\n  left: 0;\n  bottom: 60px;\n}\n.toast-container .toast-wrapper.bottomRight {\n  right: 0;\n  bottom: 60px;\n}\n.toast-container .toast-wrapper.bottomCenter {\n  bottom: 60px;\n  left: 50%;\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n}\n.toast-message {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 232px;\n  border-bottom: 4px solid #fff;\n  background-color: #fff;\n  box-shadow: 0 7px 14px rgba(0,0,0,0.2);\n  margin: 16px;\n  padding: 16px;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.toast-message span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.toast-message button {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #fff;\n  padding: 4px 8px;\n  margin-left: 16px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.toast-message.info {\n  border-color: #00b4ff;\n}\n.toast-message.info button:hover {\n  border-color: #00b4ff;\n  color: #00b4ff;\n}\n.toast-message.success {\n  border-color: #59cc00;\n}\n.toast-message.success button:hover {\n  border-color: #59cc00;\n  color: #59cc00;\n}\n.toast-message.error {\n  border-color: #ff1d23;\n}\n.toast-message.error button:hover {\n  border-color: #ff1d23;\n  color: #ff1d23;\n}\n.toast-message.warning {\n  border-color: #fcca46;\n}\n.toast-message.warning button:hover {\n  border-color: #fcca46;\n  color: #fcca46;\n}\n.extend-enter-active {\n  -webkit-animation: extendHeight 0.2s ease 1;\n          animation: extendHeight 0.2s ease 1;\n}\n@-webkit-keyframes extendHeight {\n  from {\n    -webkit-transform: translateY(-80px);\n            transform: translateY(-80px);\n  }\n  to {\n    -webkit-transform: translateY(0);\n            transform: translateY(0);\n  }\n}\n@keyframes extendHeight {\n  from {\n    -webkit-transform: translateY(-80px);\n            transform: translateY(-80px);\n  }\n  to {\n    -webkit-transform: translateY(0);\n            transform: translateY(0);\n  }\n}\n",""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(i).concat([o]).join("\n")}var a;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];null!=i&&(r[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];null!=a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){var r,o,i={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),s=function(t){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=function(t,e){return e?e.querySelector(t):document.querySelector(t)}.call(this,t,n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}}(),c=null,u=0,f=[],l=n(6);function p(t,e){for(var n=0;n<t.length;n++){var r=t[n],o=i[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(v(r.parts[a],e))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(v(r.parts[a],e));i[r.id]={id:r.id,refs:1,parts:s}}}}function d(t,e){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],a=e.base?i[0]+e.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):n.push(r[a]={id:a,parts:[s]})}return n}function m(t,e){var n=s(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=f[f.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),f.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=s(t.insertAt.before,n);n.insertBefore(e,o)}}function h(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=f.indexOf(t);e>=0&&f.splice(e,1)}function b(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return y(e,t.attrs),m(t,e),e}function y(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function v(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var a=u++;n=c||(c=b(e)),r=x.bind(null,n,a,!1),o=x.bind(null,n,a,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",y(e,t.attrs),m(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=l(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([r],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,n,e),o=function(){h(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){h(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=a()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=d(t,e);return p(n,e),function(t){for(var r=[],o=0;o<n.length;o++){var a=n[o];(s=i[a.id]).refs--,r.push(s)}t&&p(d(t,e),e);for(o=0;o<r.length;o++){var s;if(0===(s=r[o]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete i[s.id]}}}};var g,w=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function x(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var o,i=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?t:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(t,e,n){"use strict";n.r(e);var r=n(0),o=n.n(r),i=n(1);function a(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function s(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var c=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),s(this,"queue",[]),s(this,"trigger",function(){}),this.queue=[]}var e,n,r;return e=t,(n=[{key:"add",value:function(t){var e=this;setTimeout(function(){e.emit(t)},t.delay||0)}},{key:"emit",value:function(t){var e=this;t.id||(t.id=Date.now()),this.queue.push(t),this.trigger(this.queue),t.duration&&setTimeout(function(){e.remove(t.id)},t.duration)}},{key:"remove",value:function(t){var e=this.queue.findIndex(function(e){return e.id===t});e>=0&&(this.queue.splice(e,1),this.trigger(this.queue))}},{key:"on",value:function(t){this.trigger=t}}])&&a(e.prototype,n),r&&a(e,r),t}());n(2);function u(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){f(t,e,n[e])})}return t}function f(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var l={id:"",message:"",type:"info",placement:"topLeft",duration:2e3},p=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({type:"info"},e,{message:t}))},d=Object.assign(p,{open:p,info:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"info"}))},success:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"success"}))},warning:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"warning"}))},error:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"error"}))},remove:function(t){c.remove(t)}}),m=function(t){var e=t.id,n=t.type,r=t.message;return o.a.createElement("div",{className:"toast-message ".concat(n)},o.a.createElement("span",null,r),o.a.createElement("button",{onClick:function(){d.remove(e)}},"get"))};function h(t){return(h="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 b(t,e){return!e||"object"!==h(e)&&"function"!=typeof e?w(t):e}function y(t){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function v(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&&g(t,e)}function g(t,e){return(g=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function w(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function x(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function O(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function j(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var k=function(){function t(e,n){x(this,t),j(this,"duration",300),j(this,"placement","topLeft"),n&&(this.duration=n),this.placement=e}var e,n,r;return e=t,(n=[{key:"calcPx",value:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return e.reduce(function(t,e){return t+(e?Number(e.replace("px","")):0)},0)}},{key:"hasPlacement",value:function(t){return this.placement.toLocaleLowerCase().includes(t.toLocaleLowerCase())}},{key:"getStyle",value:function(t){return window.getComputedStyle(t.children[0],null)}},{key:"setNodeHeight",value:function(t){var e=this.getStyle(t),n=e.height,r=e.marginTop,o=e.marginBottom,i=this.calcPx(n,r,o);return t.dataset.height="".concat(i),i}},{key:"setNodeWidth",value:function(t){var e=this.getStyle(t),n=e.width,r=e.marginLeft,o=e.marginRight,i=this.calcPx(n,r,o);return t.dataset.width=String(i),i}},{key:"transition",get:function(){return"all ".concat(this.duration,"ms ease")}}])&&O(e.prototype,n),r&&O(e,r),t}(),E=function(t){function e(){var t,n;x(this,e);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return j(w(w(n=b(this,(t=y(e)).call.apply(t,[this].concat(o))))),"onEnter",function(t){var e=n.setNodeHeight(t),r=n.hasPlacement("top")?"-":"";t.style.transform="translateY(".concat(r).concat(e+60,"px)"),t.style.height="0",t.style.overflow="hidden"}),j(w(w(n)),"onEntering",function(t){var e=Number(t.dataset.height)||0;t.style.transition=n.transition,t.style.transform="translateY(0)",t.style.height="".concat(e,"px"),t.style.overflow="auto"}),j(w(w(n)),"onExit",function(t){var e=Number(t.dataset.height)||0;t.style.overflow="hidden",t.style.height="".concat(e,"px")}),j(w(w(n)),"onExiting",function(t){t.style.transition=n.transition,t.style.height="0"}),n}return v(e,k),e}(),S=function(t){function e(){var t,n;x(this,e);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return j(w(w(n=b(this,(t=y(e)).call.apply(t,[this].concat(o))))),"onEnter",function(t){if(!n.hasPlacement("center")){var e=n.hasPlacement("left")?"-":"",r=n.setNodeWidth(t);t.style.transform="translateX(".concat(e).concat(r,"px)")}}),j(w(w(n)),"onEntering",function(t){n.hasPlacement("center")||(t.style.transition=n.transition,t.style.transform="translateX(0)")}),j(w(w(n)),"onExit",function(t){t.style.transform="translateX(0)"}),j(w(w(n)),"onExiting",function(t){if(!n.hasPlacement("center")){var e=Number(t.dataset.width)||0,r=n.hasPlacement("left")?"-":"";t.style.transition=n.transition,t.style.transform="translateX(".concat(r).concat(e,"px)")}}),n}return v(e,k),e}();function P(t){return(P="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 C(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function L(t){return(L=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function T(t,e){return(T=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function R(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var N=function(t){function e(){var t,n,r,o;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var i=arguments.length,a=new Array(i),s=0;s<i;s++)a[s]=arguments[s];return r=this,o=(t=L(e)).call.apply(t,[this].concat(a)),n=!o||"object"!==P(o)&&"function"!=typeof o?R(r):o,_(R(R(n)),"state",{placement:"topLeft",toasts:[]}),_(R(R(n)),"handleClick",function(t){return function(){n.props.clickClose&&c.remove(t.id)}}),n}var n,r,a;return 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&&T(t,e)}(e,o.a.Component),n=e,(r=[{key:"componentDidMount",value:function(){var t=this;c.on(function(e){t.setState({toasts:e})})}},{key:"render",value:function(){return o.a.createElement("div",{className:"toast-container"},this.renderPlacement())}},{key:"getPlacementToasts",value:function(){var t=["topLeft","topRight","topCenter","bottomLeft","bottomRight","bottomCenter"].reduce(function(t,e){return t[e]=[],t},{});return this.state.toasts.forEach(function(e){var n=e.placement;t[n].push(e)}),t}},{key:"renderPlacement",value:function(){var t=this,e=this.getPlacementToasts();return Object.keys(e).map(function(n){return o.a.createElement(i.TransitionGroup,{className:"toast-wrapper ".concat(n),key:n},t.renderToasts(e[n],n))})}},{key:"renderToasts",value:function(t,e){var n=this,r=this.props.component||m;return e.includes("top")&&t.reverse(),t.map(function(t){var e=n.getAnimateClass(t);return o.a.createElement(i.CSSTransition,{key:t.id,onEnter:e.onEnter,onEntering:e.onEntering,onExit:e.onExit,onExiting:e.onExiting,timeout:e.duration,classNames:"none",onClick:n.handleClick(t)},o.a.createElement("div",null,o.a.createElement(r,t)))})}},{key:"getAnimateClass",value:function(t){return new({slideX:S,slideY:E}[t.animateName]||S)(t.placement,t.animateDuration)}}])&&C(n.prototype,r),a&&C(n,a),e}();n.d(e,"ToastContainer",function(){return N}),n.d(e,"Toast",function(){return d})}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["react-custom-toast"]=e():t["react-custom-toast"]=e()}(global,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},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=7)}([function(t,e){t.exports=require("react")},function(t,e){t.exports=require("react-transition-group")},function(t,e,n){var r=n(3);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};n(5)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){(t.exports=n(4)(!1)).push([t.i,".toast-container {\n  position: fixed;\n}\n.toast-container .toast-wrapper {\n  position: fixed;\n}\n.toast-container .toast-wrapper.topRight {\n  right: 0;\n  top: 60px;\n}\n.toast-container .toast-wrapper.topLeft {\n  left: 0;\n  top: 60px;\n}\n.toast-container .toast-wrapper.topCenter {\n  top: 60px;\n  left: 50%;\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n}\n.toast-container .toast-wrapper.bottomLeft {\n  left: 0;\n  bottom: 60px;\n}\n.toast-container .toast-wrapper.bottomRight {\n  right: 0;\n  bottom: 60px;\n}\n.toast-container .toast-wrapper.bottomCenter {\n  bottom: 60px;\n  left: 50%;\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n}\n.toast-message {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 232px;\n  border-bottom: 4px solid #fff;\n  background-color: #fff;\n  box-shadow: 0 7px 14px rgba(0,0,0,0.2);\n  margin: 16px;\n  padding: 16px;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.toast-message span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.toast-message button {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #fff;\n  padding: 4px 8px;\n  margin-left: 16px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.toast-message.info {\n  border-color: #00b4ff;\n}\n.toast-message.info button:hover {\n  border-color: #00b4ff;\n  color: #00b4ff;\n}\n.toast-message.success {\n  border-color: #59cc00;\n}\n.toast-message.success button:hover {\n  border-color: #59cc00;\n  color: #59cc00;\n}\n.toast-message.error {\n  border-color: #ff1d23;\n}\n.toast-message.error button:hover {\n  border-color: #ff1d23;\n  color: #ff1d23;\n}\n.toast-message.warning {\n  border-color: #fcca46;\n}\n.toast-message.warning button:hover {\n  border-color: #fcca46;\n  color: #fcca46;\n}\n.extend-enter-active {\n  -webkit-animation: extendHeight 0.2s ease 1;\n          animation: extendHeight 0.2s ease 1;\n}\n@-webkit-keyframes extendHeight {\n  from {\n    -webkit-transform: translateY(-80px);\n            transform: translateY(-80px);\n  }\n  to {\n    -webkit-transform: translateY(0);\n            transform: translateY(0);\n  }\n}\n@keyframes extendHeight {\n  from {\n    -webkit-transform: translateY(-80px);\n            transform: translateY(-80px);\n  }\n  to {\n    -webkit-transform: translateY(0);\n            transform: translateY(0);\n  }\n}\n",""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(i=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),a=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(a).concat([o]).join("\n")}var i;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var a=this[o][0];null!=a&&(r[a]=!0)}for(o=0;o<t.length;o++){var i=t[o];null!=i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),e.push(i))}},e}},function(t,e,n){var r,o,a={},i=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),s=function(t){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=function(t,e){return e?e.querySelector(t):document.querySelector(t)}.call(this,t,n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}}(),c=null,u=0,f=[],l=n(6);function p(t,e){for(var n=0;n<t.length;n++){var r=t[n],o=a[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(v(r.parts[i],e))}else{var s=[];for(i=0;i<r.parts.length;i++)s.push(v(r.parts[i],e));a[r.id]={id:r.id,refs:1,parts:s}}}}function d(t,e){for(var n=[],r={},o=0;o<t.length;o++){var a=t[o],i=e.base?a[0]+e.base:a[0],s={css:a[1],media:a[2],sourceMap:a[3]};r[i]?r[i].parts.push(s):n.push(r[i]={id:i,parts:[s]})}return n}function m(t,e){var n=s(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=f[f.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),f.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=s(t.insertAt.before,n);n.insertBefore(e,o)}}function h(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=f.indexOf(t);e>=0&&f.splice(e,1)}function b(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return y(e,t.attrs),m(t,e),e}function y(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function v(t,e){var n,r,o,a;if(e.transform&&t.css){if(!(a="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=a}if(e.singleton){var i=u++;n=c||(c=b(e)),r=x.bind(null,n,i,!1),o=x.bind(null,n,i,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",y(e,t.attrs),m(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,a=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||a)&&(r=l(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var i=new Blob([r],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(i),s&&URL.revokeObjectURL(s)}.bind(null,n,e),o=function(){h(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){h(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=i()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=d(t,e);return p(n,e),function(t){for(var r=[],o=0;o<n.length;o++){var i=n[o];(s=a[i.id]).refs--,r.push(s)}t&&p(d(t,e),e);for(o=0;o<r.length;o++){var s;if(0===(s=r[o]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete a[s.id]}}}};var g,w=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function x(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(e,o);else{var a=document.createTextNode(o),i=t.childNodes;i[e]&&t.removeChild(i[e]),i.length?t.insertBefore(a,i[e]):t.appendChild(a)}}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var o,a=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(a)?t:(o=0===a.indexOf("//")?a:0===a.indexOf("/")?n+a:r+a.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(t,e,n){"use strict";n.r(e);var r=n(0),o=n.n(r),a=n(1);function i(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function s(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var c=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),s(this,"queue",[]),s(this,"trigger",function(){}),this.queue=[]}var e,n,r;return e=t,(n=[{key:"add",value:function(t){var e=this;setTimeout(function(){e.emit(t)},t.delay||0)}},{key:"emit",value:function(t){var e=this;t.id||(t.id=Date.now()),this.queue.push(t),this.trigger(this.queue),t.duration&&setTimeout(function(){e.remove(t.id)},t.duration)}},{key:"remove",value:function(t){var e=this.queue.findIndex(function(e){return e.id===t});e>=0&&(this.queue.splice(e,1),this.trigger(this.queue))}},{key:"on",value:function(t){this.trigger=t}}])&&i(e.prototype,n),r&&i(e,r),t}());n(2);function u(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){f(t,e,n[e])})}return t}function f(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var l={id:"",message:"",type:"default",placement:"topLeft",duration:2e3},p=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({type:"default"},e,{message:t}))},d=Object.assign(p,{open:p,info:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"info"}))},success:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"success"}))},warning:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"warning"}))},error:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l;c.add(u({},e,{message:t,type:"error"}))},remove:function(t){c.remove(t)}}),m=function(t){var e=t.id,n=t.type,r=t.message;return o.a.createElement("div",{className:"toast-message ".concat(n)},o.a.createElement("span",null,r),o.a.createElement("button",{onClick:function(){d.remove(e)}},"get"))};function h(t){return(h="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 b(t,e){return!e||"object"!==h(e)&&"function"!=typeof e?w(t):e}function y(t){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function v(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&&g(t,e)}function g(t,e){return(g=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function w(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function x(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function O(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function j(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var k=function(){function t(e,n){x(this,t),j(this,"duration",300),j(this,"placement","topLeft"),n&&(this.duration=n),this.placement=e}var e,n,r;return e=t,(n=[{key:"calcPx",value:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return e.reduce(function(t,e){return t+(e?Number(e.replace("px","")):0)},0)}},{key:"hasPlacement",value:function(t){return this.placement.toLocaleLowerCase().includes(t.toLocaleLowerCase())}},{key:"getStyle",value:function(t){return window.getComputedStyle(t.children[0],null)}},{key:"setNodeHeight",value:function(t){var e=this.getStyle(t),n=e.height,r=e.marginTop,o=e.marginBottom,a=this.calcPx(n,r,o);return t.dataset.height="".concat(a),a}},{key:"setNodeWidth",value:function(t){var e=this.getStyle(t),n=e.width,r=e.marginLeft,o=e.marginRight,a=this.calcPx(n,r,o);return t.dataset.width=String(a),a}},{key:"transition",get:function(){return"all ".concat(this.duration,"ms ease")}}])&&O(e.prototype,n),r&&O(e,r),t}(),E=function(t){function e(){var t,n;x(this,e);for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return j(w(w(n=b(this,(t=y(e)).call.apply(t,[this].concat(o))))),"onEnter",function(t){var e=n.setNodeHeight(t),r=n.hasPlacement("top")?"-":"";t.style.transform="translateY(".concat(r).concat(e+60,"px)"),t.style.height="0",t.style.overflow="hidden"}),j(w(w(n)),"onEntering",function(t){var e=Number(t.dataset.height)||0;t.style.transition=n.transition,t.style.transform="translateY(0)",t.style.height="".concat(e,"px"),t.style.overflow="auto"}),j(w(w(n)),"onExit",function(t){var e=Number(t.dataset.height)||0;t.style.overflow="hidden",t.style.height="".concat(e,"px")}),j(w(w(n)),"onExiting",function(t){t.style.transition=n.transition,t.style.height="0"}),n}return v(e,k),e}(),S=function(t){function e(){var t,n;x(this,e);for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return j(w(w(n=b(this,(t=y(e)).call.apply(t,[this].concat(o))))),"onEnter",function(t){if(!n.hasPlacement("center")){var e=n.hasPlacement("left")?"-":"",r=n.setNodeWidth(t);t.style.transform="translateX(".concat(e).concat(r,"px)")}}),j(w(w(n)),"onEntering",function(t){n.hasPlacement("center")||(t.style.transition=n.transition,t.style.transform="translateX(0)")}),j(w(w(n)),"onExit",function(t){t.style.transform="translateX(0)"}),j(w(w(n)),"onExiting",function(t){if(!n.hasPlacement("center")){var e=Number(t.dataset.width)||0,r=n.hasPlacement("left")?"-":"";t.style.transition=n.transition,t.style.transform="translateX(".concat(r).concat(e,"px)")}}),n}return v(e,k),e}();function P(t){return(P="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 C(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function L(t){return(L=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function T(t,e){return(T=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function R(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var N=function(t){function e(){var t,n,r,o;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var a=arguments.length,i=new Array(a),s=0;s<a;s++)i[s]=arguments[s];return r=this,o=(t=L(e)).call.apply(t,[this].concat(i)),n=!o||"object"!==P(o)&&"function"!=typeof o?R(r):o,_(R(R(n)),"state",{placement:"topLeft",toasts:[]}),_(R(R(n)),"handleClick",function(t){return function(){n.props.clickClose&&c.remove(t.id)}}),n}var n,r,i;return 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&&T(t,e)}(e,o.a.Component),n=e,(r=[{key:"componentDidMount",value:function(){var t=this;c.on(function(e){t.setState({toasts:e})})}},{key:"render",value:function(){return o.a.createElement("div",{className:"toast-container"},this.renderPlacement())}},{key:"getPlacementToasts",value:function(){var t=["topLeft","topRight","topCenter","bottomLeft","bottomRight","bottomCenter"].reduce(function(t,e){return t[e]=[],t},{});return this.state.toasts.forEach(function(e){var n=e.placement;t[n].push(e)}),t}},{key:"renderPlacement",value:function(){var t=this,e=this.getPlacementToasts();return Object.keys(e).map(function(n){return o.a.createElement(a.TransitionGroup,{className:"toast-wrapper ".concat(n),key:n},t.renderToasts(e[n],n))})}},{key:"renderToasts",value:function(t,e){var n=this,r=this.props.component||m;return e.includes("top")&&t.reverse(),t.map(function(t){var e=n.getAnimateClass(t);return o.a.createElement(a.CSSTransition,{key:t.id,onEnter:e.onEnter,onEntering:e.onEntering,onExit:e.onExit,onExiting:e.onExiting,timeout:e.duration,classNames:"none",onClick:n.handleClick(t)},o.a.createElement("div",null,o.a.createElement(r,t)))})}},{key:"getAnimateClass",value:function(t){return new({slideX:S,slideY:E}[t.animateName]||S)(t.placement,t.animateDuration)}}])&&C(n.prototype,r),i&&C(n,i),e}();n.d(e,"ToastContainer",function(){return N}),n.d(e,"Toast",function(){return d})}])});

lib/type.d.ts

@@ -15,4 +15,4 @@ export interface ToastOption {
 declare type Animate = 'slideX' | 'slideY';
-declare type ToastType = 'info' | 'success' | 'error' | 'warning';
+declare type ToastType = 'default' | 'info' | 'success' | 'error' | 'warning';
 export declare type Placement = 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter';
 export {};

package.json

 {
   "name": "react-custom-toast",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "lib/index.umd.js",
@@ -25,2 +25,3 @@ "types": "lib/index.d.ts",
     "dev": "webpack-dev-server --mode=development --config build/dev.js --port 3010 --open",
+    "build:exp": "webpack --mode=production --config build/dev.js",
     "build": "npm run clean && npm run build:lib && npm run build:types",
@@ -56,2 +57,3 @@ "build:lib": "webpack --mode=production --config build/package.umd.js",
     "typescript": "^3.2.2",
+    "url-loader": "^1.1.2",
     "webpack": "^4.28.3",
@@ -58,0 +60,0 @@ "webpack-cli": "^3.2.0",

README.md

 # react-custom-toast
-基于 react 的 toast 组件。可以完全的自定义样式。并提供了内置动画与控制方法
 
+基于 react 的 toast 组件。可以完全的自定义样式。并提供了内置动画与控制方法[demo](https://zhzxang.github.io/demo/react-custom-toast)
+
+![react-custom-toast demo](static/react-toast-demo.gif)
+
 ### Feature
 
-* 添加测试
-* 上线 demo 网站
-* 更多的内置动画效果
+- [ ] 添加测试
+- [x] 上线 demo 网站
+- [ ] 更多的内置动画效果
 
@@ -13,2 +16,3 @@ ### 安装
 > 使用 npm 安装
+
 ```
@@ -28,3 +32,3 @@ npm install react-custom-toast --save
 
-``` js
+```js
 import { ToastContainer } from 'react-custom-toast'
@@ -37,3 +41,3 @@
 
-``` js
+```js
 import { Toast } from 'react-custom-toast'
@@ -48,6 +52,6 @@
 
-| 参数 | 类型 | 默认值 | 描述 |
-| -- | -- | -- | -- |
-| component | `JSX.FunctionComponent` | `undefinded` | 自定义组件 |
-| clickClose | `boolean` | `false` | 点击 toast 即关闭 |
+| 参数       | 类型                    | 默认值       | 描述              |
+| ---------- | ----------------------- | ------------ | ----------------- |
+| component  | `JSX.FunctionComponent` | `undefinded` | 自定义组件        |
+| clickClose | `boolean`               | `false`      | 点击 toast 即关闭 |
 
@@ -58,30 +62,30 @@ #### Toast
 
-`Toast(msg: string, opt: ToastOption)`          // 打开`默认`提示
+`Toast(msg: string, opt: ToastOption)` // 打开`默认`提示
 
-`Toast.open(msg: string, opt: ToastOption)`     // 打开无状态提示
+`Toast.open(msg: string, opt: ToastOption)` // 打开无状态提示
 
-`Toast.info(msg: string, opt: ToastOption)`     // 打开提示
+`Toast.info(msg: string, opt: ToastOption)` // 打开提示
 
-`Toast.info(msg: string, opt: ToastOption)`     // 打开`成功`提示
+`Toast.info(msg: string, opt: ToastOption)` // 打开`成功`提示
 
-`Toast.error(msg: string, opt: ToastOption)`    // 打开`错误`提示
+`Toast.error(msg: string, opt: ToastOption)` // 打开`错误`提示
 
-`Toast.warning(msg: string, opt: ToastOption)`  // 打开`警告`提示
+`Toast.warning(msg: string, opt: ToastOption)` // 打开`警告`提示
 
-`Toast.remove(id: ToastId)`                     // 移除某个toast
+`Toast.remove(id: ToastId)` // 移除某个 toast
 
 #### ToastOption
 
-| 参数 | 类型 | 默认值 | 描述 |
-| -- | -- | -- | -- |
-| id | string\|number | 随机 | 设置 toast id |
-| type | `string` | '' | 提示类型('info' \| 'success' \| 'error' \| 'warning') |
-| placement | `string` | `topLeft` | toast 方位（'topLeft' \| 'topRight' \| 'topCenter' \| 'bottomLeft' \| 'bottomRight' \| 'bottomCenter'） |
-| duration | `number` | 2000 | 提示持续时间 |
-| delay | `number` | 0 | 提示出现延时 |
-| animateDuration | `number` | 300 | 提示动画时间 |
-| animateName | `string` | `slideX` | 提示动画效果('slideX' \| 'slideY') |
+| 参数            | 类型           | 默认值    | 描述                                                                                                    |
+| --------------- | -------------- | --------- | ------------------------------------------------------------------------------------------------------- |
+| id              | string\|number | 随机      | 设置 toast id                                                                                           |
+| type            | `string`       | ''        | 提示类型('info' \| 'success' \| 'error' \| 'warning')                                                   |
+| placement       | `string`       | `topLeft` | toast 方位（'topLeft' \| 'topRight' \| 'topCenter' \| 'bottomLeft' \| 'bottomRight' \| 'bottomCenter'） |
+| duration        | `number`       | 2000      | 提示持续时间                                                                                            |
+| delay           | `number`       | 0         | 提示出现延时                                                                                            |
+| animateDuration | `number`       | 300       | 提示动画时间                                                                                            |
+| animateName     | `string`       | `slideX`  | 提示动画效果('slideX' \| 'slideY')                                                                      |
 
 ### License
- 
+
 MIT

src/toast.ts

@@ -7,3 +7,3 @@ import event from './event'
   message: '',
-  type: 'info',
+  type: 'default',
   placement: 'topLeft',
@@ -15,3 +15,3 @@ duration: 2000
   event.add({
-    type: 'info',
+    type: 'default',
     ...option,
@@ -18,0 +18,0 @@ message,

src/type.ts

@@ -17,3 +17,3 @@ export interface ToastOption {
 type Animate = 'slideX' | 'slideY'
-type ToastType = 'info' | 'success' | 'error' | 'warning'
+type ToastType = 'default' | 'info' | 'success' | 'error' | 'warning'
 export type Placement = 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 4 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1994595

increased by665.55%

Number of package files

46

increased by58.62%

Lines of code

2082

increased by163.54%

Number of lines in readme file

87

increased by4.82%

Worsened metrics

Dev dependency count

28

increased by3.7%

Number of medium supply chain risk alerts

5

increased byInfinity%

No dependency changes