sweetalert2-react - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

lib/SweetAlert.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.withSwalInstance = undefined;
 
@@ -65,203 +66,206 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var SweetAlert = function (_Component) {
-  _inherits(SweetAlert, _Component);
+var withSwalInstance = exports.withSwalInstance = function withSwalInstance(swalInstance) {
+  var _class, _temp;
 
-  /* eslint-disable react/no-unused-prop-types */
-  function SweetAlert(props, context) {
-    _classCallCheck(this, SweetAlert);
+  return _temp = _class = function (_Component) {
+    _inherits(SweetAlert, _Component);
 
-    var _this = _possibleConstructorReturn(this, (SweetAlert.__proto__ || Object.getPrototypeOf(SweetAlert)).call(this, props, context));
+    /* eslint-disable react/no-unused-prop-types */
+    function SweetAlert(props, context) {
+      _classCallCheck(this, SweetAlert);
 
-    _this._show = false;
-    return _this;
-  }
-  /* eslint-enable react/no-unused-prop-types */
+      var _this = _possibleConstructorReturn(this, (SweetAlert.__proto__ || Object.getPrototypeOf(SweetAlert)).call(this, props, context));
 
-  _createClass(SweetAlert, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.setupWithProps(this.props);
+      _this._show = false;
+      _this._swal = swalInstance;
+      return _this;
+    }
+    /* eslint-enable react/no-unused-prop-types */
 
-      if (this.props.onOutsideClick) {
-        this.registerOutsideClickHandler(this.props.onOutsideClick);
+    _createClass(SweetAlert, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.setupWithProps(this.props);
+
+        if (this.props.onOutsideClick) {
+          this.registerOutsideClickHandler(this.props.onOutsideClick);
+        }
       }
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(props) {
-      this.setupWithProps(props);
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(props) {
+        this.setupWithProps(props);
 
-      var oldOutsideClickHandler = this.props.onOutsideClick;
-      var newOutsideClickHandler = props.onOutsideClick;
+        var oldOutsideClickHandler = this.props.onOutsideClick;
+        var newOutsideClickHandler = props.onOutsideClick;
 
-      if (oldOutsideClickHandler !== newOutsideClickHandler) {
-        if (oldOutsideClickHandler && newOutsideClickHandler) {
-          this.unregisterOutsideClickHandler();
-          this.registerOutsideClickHandler(newOutsideClickHandler);
-        } else if (oldOutsideClickHandler && !newOutsideClickHandler) {
-          this.unregisterOutsideClickHandler();
-        } else if (!oldOutsideClickHandler && newOutsideClickHandler) {
-          this.registerOutsideClickHandler(newOutsideClickHandler);
+        if (oldOutsideClickHandler !== newOutsideClickHandler) {
+          if (oldOutsideClickHandler && newOutsideClickHandler) {
+            this.unregisterOutsideClickHandler();
+            this.registerOutsideClickHandler(newOutsideClickHandler);
+          } else if (oldOutsideClickHandler && !newOutsideClickHandler) {
+            this.unregisterOutsideClickHandler();
+          } else if (!oldOutsideClickHandler && newOutsideClickHandler) {
+            this.registerOutsideClickHandler(newOutsideClickHandler);
+          }
         }
       }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unregisterOutsideClickHandler();
-      this.unbindEscapeKey();
-    }
-  }, {
-    key: 'setupWithProps',
-    value: function setupWithProps(props) {
-      var _this2 = this;
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        this.unregisterOutsideClickHandler();
+        this.unbindEscapeKey();
+      }
+    }, {
+      key: 'setupWithProps',
+      value: function setupWithProps(props) {
+        var _this2 = this;
 
-      warningRemoved(props);
-      var show = props.show,
-          onConfirm = props.onConfirm,
-          onCancel = props.onCancel,
-          onClose = props.onClose,
-          onEscapeKey = props.onEscapeKey;
+        warningRemoved(props);
+        var show = props.show,
+            onConfirm = props.onConfirm,
+            onCancel = props.onCancel,
+            onClose = props.onClose,
+            onEscapeKey = props.onEscapeKey;
 
-      if (show) {
-        (0, _sweetalert2.default)(_extends({}, (0, _lodash2.default)(props, ALLOWS_KEYS), OVERWRITE_PROPS)).then(function () {
-          _this2.handleClickConfirm(onConfirm);
-        }, function (dismiss) {
-          _this2.handleClickCancel(onCancel, dismiss);
-        });
-        this._show = true;
-        if (onEscapeKey) this.bindEscapeKey(onEscapeKey);
-      } else {
-        this.handleClose(onClose);
+        if (show) {
+          this._swal(_extends({}, (0, _lodash2.default)(props, ALLOWS_KEYS), OVERWRITE_PROPS)).then(function () {
+            _this2.handleClickConfirm(onConfirm);
+          }, function (dismiss) {
+            _this2.handleClickCancel(onCancel, dismiss);
+          });
+          this._show = true;
+          if (onEscapeKey) this.bindEscapeKey(onEscapeKey);
+        } else {
+          this.handleClose(onClose);
+        }
       }
-    }
-  }, {
-    key: 'registerOutsideClickHandler',
-    value: function registerOutsideClickHandler(handler) {
-      this._outsideClickHandler = (0, _outsideTargetHandlerFactory2.default)(document.getElementsByClassName('sweet-alert')[0], handler);
-      this.enableOutsideClick();
-    }
-  }, {
-    key: 'unregisterOutsideClickHandler',
-    value: function unregisterOutsideClickHandler() {
-      this.disableOutsideClick();
-      this._outsideClickHandler = null;
-    }
-  }, {
-    key: 'enableOutsideClick',
-    value: function enableOutsideClick() {
-      var fn = this._outsideClickHandler;
-      if (fn) {
-        document.addEventListener('mousedown', fn);
-        document.addEventListener('touchstart', fn);
+    }, {
+      key: 'registerOutsideClickHandler',
+      value: function registerOutsideClickHandler(handler) {
+        this._outsideClickHandler = (0, _outsideTargetHandlerFactory2.default)(document.getElementsByClassName('sweet-alert')[0], handler);
+        this.enableOutsideClick();
       }
-    }
-  }, {
-    key: 'disableOutsideClick',
-    value: function disableOutsideClick() {
-      var fn = this._outsideClickHandler;
-      if (fn) {
-        document.removeEventListener('mousedown', fn);
-        document.removeEventListener('touchstart', fn);
+    }, {
+      key: 'unregisterOutsideClickHandler',
+      value: function unregisterOutsideClickHandler() {
+        this.disableOutsideClick();
+        this._outsideClickHandler = null;
       }
-    }
-  }, {
-    key: 'bindEscapeKey',
-    value: function bindEscapeKey(onEscapeKey) {
-      _mousetrap2.default.bind('esc', onEscapeKey);
-    }
-  }, {
-    key: 'unbindEscapeKey',
-    value: function unbindEscapeKey() {
-      _mousetrap2.default.unbind('esc');
-    }
-  }, {
-    key: 'handleClickConfirm',
-    value: function handleClickConfirm(onConfirm) {
-      if (onConfirm) {
-        onConfirm();
+    }, {
+      key: 'enableOutsideClick',
+      value: function enableOutsideClick() {
+        var fn = this._outsideClickHandler;
+        if (fn) {
+          document.addEventListener('mousedown', fn);
+          document.addEventListener('touchstart', fn);
+        }
       }
-    }
-  }, {
-    key: 'handleClickCancel',
-    value: function handleClickCancel(onCancel) {
-      if (onCancel) {
-        onCancel();
+    }, {
+      key: 'disableOutsideClick',
+      value: function disableOutsideClick() {
+        var fn = this._outsideClickHandler;
+        if (fn) {
+          document.removeEventListener('mousedown', fn);
+          document.removeEventListener('touchstart', fn);
+        }
       }
-    }
-  }, {
-    key: 'handleClose',
-    value: function handleClose(onClose) {
-      if (this._show) {
-        _sweetalert2.default.close();
-        this.unbindEscapeKey();
-        if (onClose) onClose();
-        this._show = false;
+    }, {
+      key: 'bindEscapeKey',
+      value: function bindEscapeKey(onEscapeKey) {
+        _mousetrap2.default.bind('esc', onEscapeKey);
       }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return null;
-    }
-  }]);
+    }, {
+      key: 'unbindEscapeKey',
+      value: function unbindEscapeKey() {
+        _mousetrap2.default.unbind('esc');
+      }
+    }, {
+      key: 'handleClickConfirm',
+      value: function handleClickConfirm(onConfirm) {
+        if (onConfirm) {
+          onConfirm();
+        }
+      }
+    }, {
+      key: 'handleClickCancel',
+      value: function handleClickCancel(onCancel) {
+        if (onCancel) {
+          onCancel();
+        }
+      }
+    }, {
+      key: 'handleClose',
+      value: function handleClose(onClose) {
+        if (this._show) {
+          this._swal.close();
+          this.unbindEscapeKey();
+          if (onClose) onClose();
+          this._show = false;
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return null;
+      }
+    }]);
 
-  return SweetAlert;
-}(_react.Component);
+    return SweetAlert;
+  }(_react.Component), _class.propTypes = {
+    // sweetalert option
+    title: _propTypes2.default.string.isRequired,
+    text: _propTypes2.default.string,
+    type: _propTypes2.default.oneOf(['warning', 'error', 'success', 'info', 'input']),
+    customClass: _propTypes2.default.string,
+    showCancelButton: _propTypes2.default.bool,
+    showConfirmButton: _propTypes2.default.bool,
+    confirmButtonText: _propTypes2.default.string,
+    confirmButtonColor: _propTypes2.default.string,
+    confirmButtonClass: _propTypes2.default.string,
+    cancelButtonText: _propTypes2.default.string,
+    cancelButtonClass: _propTypes2.default.string,
+    reverseButtons: _propTypes2.default.bool,
+    buttonsStyling: _propTypes2.default.bool,
+    imageUrl: _propTypes2.default.string,
+    html: _propTypes2.default.bool,
+    animation: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(['pop', 'slide-from-top', 'slide-from-bottom'])]),
+    // inputType: PropTypes.oneOf(ALLOWS_INPUT_TYPES),
+    inputPlaceholder: _propTypes2.default.string,
+    inputValue: _propTypes2.default.string,
+    showLoaderOnConfirm: _propTypes2.default.bool,
 
-SweetAlert.propTypes = {
-  // sweetalert option
-  title: _propTypes2.default.string.isRequired,
-  text: _propTypes2.default.string,
-  type: _propTypes2.default.oneOf(['warning', 'error', 'success', 'info', 'input']),
-  customClass: _propTypes2.default.string,
-  showCancelButton: _propTypes2.default.bool,
-  showConfirmButton: _propTypes2.default.bool,
-  confirmButtonText: _propTypes2.default.string,
-  confirmButtonColor: _propTypes2.default.string,
-  confirmButtonClass: _propTypes2.default.string,
-  cancelButtonText: _propTypes2.default.string,
-  cancelButtonClass: _propTypes2.default.string,
-  reverseButtons: _propTypes2.default.bool,
-  buttonsStyling: _propTypes2.default.bool,
-  imageUrl: _propTypes2.default.string,
-  html: _propTypes2.default.bool,
-  animation: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(['pop', 'slide-from-top', 'slide-from-bottom'])]),
-  // inputType: PropTypes.oneOf(ALLOWS_INPUT_TYPES),
-  inputPlaceholder: _propTypes2.default.string,
-  inputValue: _propTypes2.default.string,
-  showLoaderOnConfirm: _propTypes2.default.bool,
+    // custom option
+    show: _propTypes2.default.bool,
+    onConfirm: _propTypes2.default.func,
+    onCancel: _propTypes2.default.func,
+    onClose: _propTypes2.default.func,
+    onEscapeKey: _propTypes2.default.func,
+    onOutsideClick: _propTypes2.default.func }, _class.defaultProps = {
+    // sweetalert option
+    text: null,
+    type: null,
+    customClass: null,
+    showCancelButton: false,
+    showConfirmButton: true,
+    confirmButtonText: 'OK',
+    confirmButtonColor: '#aedef4',
+    cancelButtonText: 'Cancel',
+    cancelButtonClass: null,
+    confirmButtonClass: null,
+    buttonsStyling: true,
+    reverseButtons: false,
+    imageUrl: null,
+    html: false,
+    animation: true,
+    // inputType: 'text',
+    inputPlaceholder: null,
+    inputValue: null,
+    showLoaderOnConfirm: false,
 
-  // custom option
-  show: _propTypes2.default.bool,
-  onConfirm: _propTypes2.default.func,
-  onCancel: _propTypes2.default.func,
-  onClose: _propTypes2.default.func,
-  onEscapeKey: _propTypes2.default.func,
-  onOutsideClick: _propTypes2.default.func };
-SweetAlert.defaultProps = {
-  // sweetalert option
-  text: null,
-  type: null,
-  customClass: null,
-  showCancelButton: false,
-  showConfirmButton: true,
-  confirmButtonText: 'OK',
-  confirmButtonColor: '#aedef4',
-  cancelButtonText: 'Cancel',
-  cancelButtonClass: null,
-  confirmButtonClass: null,
-  buttonsStyling: true,
-  reverseButtons: false,
-  imageUrl: null,
-  html: false,
-  animation: true,
-  // inputType: 'text',
-  inputPlaceholder: null,
-  inputValue: null,
-  showLoaderOnConfirm: false,
+    // custom option
+    show: false
+  }, _temp;
+};
 
-  // custom option
-  show: false
-};
-exports.default = SweetAlert;
+exports.default = withSwalInstance(_sweetalert2.default);

package.json

 {
   "name": "sweetalert2-react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Declarative SweetAlert 2 in React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -10,3 +10,3 @@ # sweetalert2-react
 
-This package is forked from https://github.com/chentsulin/sweetalert-react and adopted for https://github.com/limonte/sweetalert2
+This is a React SweetAlert wrapper for https://github.com/limonte/sweetalert2
 
@@ -42,4 +42,30 @@ ## Install
 
-You should import `sweetalert2.css` from 'sweetalert2-react/src/sweetalert2.css'.
+Since 0.6, you can wrap your own swal instance:
 
+```js
+import React, { Component } from 'react';
+import { withSwalInstance } from 'sweetalert2-react';
+import swal from 'sweetalert2';
+
+const SweetAlert = withSwalInstance(swal);
+
+// ...
+
+render() {
+  return (
+    <div>
+      <button onClick={() => this.setState({ show: true })}>Alert</button>
+      <SweetAlert
+        show={this.state.show}
+        title="Demo"
+        text="SweetAlert in React"
+        onConfirm={() => this.setState({ show: false })}
+      />
+    </div>
+  );
+}
+```
+
+You should import `sweetalert2.css` from 'sweetalert2' package.
+
 Checkout full examples https://github.com/chentsulin/sweetalert-react
@@ -46,0 +72,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18482

5.94%

Lines of code

279

1.09%

Number of lines in readme file

87

42.62%

No dependency changes