replace react-toastr with react-s-alert

Author: AllenFang

src/BootstrapTable.js

@@ -12,6 +12,7 @@ import { TableDataStore } from './store/TableDataStore';
 import Util from './util';
 import exportCSVUtil from './csv_export_util';
 import { Filter } from './Filter';
+import Alert from 'react-s-alert';
 
 class BootstrapTable extends Component {
 
@@ -417,6 +418,7 @@ class BootstrapTable extends Component {
         </div>
         { tableFilter }
         { showPaginationOnBottom ? pagination : null }
+        <Alert stack={ { limit: 3 } } />
       </div>
     );
   }

src/Const.js

@@ -46,7 +46,6 @@ const CONST_VAR = {
   FILTER_COND_LIKE: 'like',
   EXPAND_BY_ROW: 'row',
   EXPAND_BY_COL: 'column',
-  CANCEL_TOASTR: 'Pressed ESC can cancel',
   REMOTE_SORT: 'sort',
   REMOTE_PAGE: 'pagination',
   REMOTE_CELL_EDIT: 'cellEdit',

src/Notification.js

@@ -1,31 +1,18 @@
-import React, { Component } from 'react';
+import Alert from 'react-s-alert';
 
-import { ToastContainer, ToastMessage } from '@allenfang/react-toastr';
+const notice = (type, msg, title) => {
+  const titleHTML = title ? `<h4><strong>${ title }</strong></h4>` : '';
 
+  const bodyHTML = `
+    ${ titleHTML }
+    <span>${ msg }</span>
+  `;
 
-const ToastrMessageFactory = React.createFactory(ToastMessage.animation);
+  Alert.error(bodyHTML, {
+    position: 'top-right',
+    timeout: 3500,
+    html: true
+  });
+};
 
-class Notification extends Component {
-  // allow type is success,info,warning,error
-  notice(type, msg, title) {
-    this.refs.toastr[type](
-      msg, title, {
-        mode: 'single',
-        timeOut: 5000,
-        extendedTimeOut: 1000,
-        showAnimation: 'animated  bounceIn',
-        hideAnimation: 'animated bounceOut'
-      });
-  }
-
-  render() {
-    return (
-      <ToastContainer ref='toastr'
-        toastMessageFactory={ ToastrMessageFactory }
-        id='toast-container'
-        className='toast-top-right'/>
-    );
-  }
-}
-
-export default Notification;
+export { notice };

src/TableEditColumn.js

@@ -1,9 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import editor from './Editor';
-import Notifier from './Notification.js';
+import { notice } from './Notification.js';
 import classSet from 'classnames';
-import Const from './Const';
 
 class TableEditColumn extends Component {
   constructor(props) {
@@ -73,7 +72,7 @@ class TableEditColumn extends Component {
       const responseType = typeof checkVal;
       if (responseType !== 'object' && checkVal !== true) {
         valid = false;
-        this.notifyToastr('error', checkVal, Const.CANCEL_TOASTR);
+        this.notifyToastr('error', checkVal, '');
       } else if (responseType === 'object' && checkVal.isValid !== true) {
         valid = false;
         this.notifyToastr(checkVal.notification.type,
@@ -106,7 +105,7 @@ class TableEditColumn extends Component {
       toastr = beforeShowError(type, message, title);
     }
     if (toastr) {
-      this.refs.notifier.notice(type, message, title);
+      notice(type, message, title);
     }
   }
 
@@ -201,7 +200,6 @@ class TableEditColumn extends Component {
         className={ className }
         onClick={ this.handleClick }>
         { cellEditor }
-        <Notifier ref='notifier'/>
       </td>
     );
   }

src/toolbar/ToolBar.js

@@ -5,7 +5,7 @@ import Modal from 'react-modal';
 // import classSet from 'classnames';
 import Const from '../Const';
 // import editor from '../Editor';
-import Notifier from '../Notification.js';
+import { notice } from '../Notification.js';
 import InsertModal from './InsertModal';
 import InsertButton from './InsertButton';
 import DeleteButton from './DeleteButton';
@@ -65,10 +65,10 @@ class ToolBar extends Component {
   }
 
   displayCommonMessage = () => {
-    this.refs.notifier.notice(
+    notice(
       'error',
       'Form validate errors, please checking!',
-      'Pressed ESC can cancel');
+      '');
   }
 
   validateNewRow(newRow) {
@@ -93,10 +93,10 @@ class ToolBar extends Component {
           isValid = false;
           validateState[column.field] = tempMsg;
         } else if (responseType === 'object' && tempMsg.isValid !== true) {
-          this.refs.notifier.notice(
-              tempMsg.notification.type,
-              tempMsg.notification.msg,
-              tempMsg.notification.title);
+          notice(
+            tempMsg.notification.type,
+            tempMsg.notification.msg,
+            tempMsg.notification.title);
           isValid = false;
           validateState[column.field] = tempMsg.notification.msg;
         }
@@ -122,7 +122,7 @@ class ToolBar extends Component {
     }
     const msg = this.props.onAddRow(newRow);
     if (msg) {
-      this.refs.notifier.notice('error', msg, 'Pressed ESC can cancel');
+      notice('error', msg, '');
       this.clearTimeout();
       // shake form and hack prevent modal hide
       this.setState({
@@ -321,7 +321,6 @@ class ToolBar extends Component {
     return (
       <div className='row'>
         { toolbar }
-        <Notifier ref='notifier' />
         { modal }
       </div>
     );