react-imodal - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

es/index.js

@@ -8,43 +8,170 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import React, { Component } from 'react';
-import IModal from './IModal/IModal.js';
+import PropTypes from 'prop-types';
 
-var _default = function (_Component) {
-  _inherits(_default, _Component);
+import './IModal.css';
 
-  function _default() {
-    _classCallCheck(this, _default);
+var IModal = function (_Component) {
+    _inherits(IModal, _Component);
 
-    var _this = _possibleConstructorReturn(this, _Component.call(this));
+    function IModal() {
+        var _temp, _this, _ret;
 
-    _this.state = {
-      open: false
-    };
-    return _this;
-  }
+        _classCallCheck(this, IModal);
 
-  _default.prototype.render = function render() {
-    var _this2 = this;
-
-    return React.createElement(
-      'div',
-      null,
-      React.createElement(
-        'h2',
-        { onClick: function onClick() {
-            return _this2.setState({ open: true });
-          } },
-        'Welcome to React components'
-      ),
-      React.createElement(IModal, {
-        open: this.state.open,
-        onClose: function onClose() {
-          return _this2.setState({ open: false });
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
         }
-      })
-    );
-  };
 
-  return _default;
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.confirmButton = function (onConfirm) {
+            return _this.closeModal(onConfirm);
+        }, _this.declineButton = function (onDecline) {
+            return _this.closeModal(onDecline);
+        }, _this.closeModal = function (actionBtn) {
+            var modalNode = _this.modal; //dom node .app-modal
+
+            modalNode.classList.remove('active');
+            modalNode.classList.add('leaving');
+
+            setTimeout(function () {
+                // trigger the action after submit button
+                actionBtn();
+
+                // call callback applied to the props            
+                _this.props.onClose();
+            }, 200);
+        }, _this.overlayClick = function (e) {
+            e.stopPropagation();
+
+            if (!e.target.classList.contains('app-modal-overlay')) return;
+
+            _this.declineButton(_this.props.onDecline);
+        }, _this.draggable = function (parent) {
+            var parentNode = parent.childNodes[0]; // .app-modal
+            var modal = parent.childNodes[0].childNodes[0]; // .app-modal-body
+            var modalHeader = parent.childNodes[0].childNodes[0].childNodes[0]; // .app-modal-header
+
+            var mouseUp = function mouseUp() {
+                document.removeEventListener("mousemove", positions);
+                document.removeEventListener("mouseup", mouseUp);
+            };
+
+            var positions = function positions(ev) {
+                var pX = ev.x - parentNode.offsetWidth / 2;
+                // position of modal's header
+                var pY = ev.y - parentNode.offsetHeight / 2 + modalHeader.offsetHeight * 2;
+
+                modal.style.left = pX + "px";
+                modal.style.top = pY + "px";
+
+                document.addEventListener('mouseup', mouseUp);
+            };
+
+            // when mouse down over the header of 400ms...
+            modalHeader.addEventListener('mousedown', function (e) {
+                document.addEventListener('mousemove', positions);
+            });
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    IModal.prototype.render = function render() {
+        var _this2 = this;
+
+        var _props = this.props,
+            title = _props.title,
+            content = _props.content,
+            confirmText = _props.confirmText,
+            declineText = _props.declineText,
+            onConfirm = _props.onConfirm,
+            onDecline = _props.onDecline,
+            open = _props.open,
+            alertMode = _props.alertMode;
+
+
+        if (!open) return null;
+
+        return React.createElement(
+            'div',
+            { className: 'app-modal', ref: function ref(modal) {
+                    if (modal == null) return;
+
+                    // add class with smoothness
+                    setTimeout(function () {
+                        return modal.classList.add('active');
+                    }, 0);
+
+                    // enable this feature only on desktop
+                    window.innerWidth > 1023 && _this2.draggable(modal);
+
+                    return _this2.modal = modal;
+                } },
+            React.createElement(
+                'div',
+                { className: 'app-modal-overlay', onClick: this.overlayClick },
+                React.createElement(
+                    'div',
+                    { className: 'app-modal-body' },
+                    React.createElement(
+                        'div',
+                        { className: 'app-modal-header' },
+                        title
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: 'app-modal-content' },
+                        content
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: 'app-modal-footer' },
+                        React.createElement(
+                            'div',
+                            { className: 'button confirm', onClick: function onClick() {
+                                    return _this2.confirmButton(onConfirm);
+                                } },
+                            confirmText
+                        ),
+                        !alertMode && React.createElement(
+                            'div',
+                            { className: 'button cancel', onClick: function onClick() {
+                                    return _this2.declineButton(onDecline);
+                                } },
+                            declineText
+                        )
+                    )
+                )
+            )
+        );
+    };
+
+    return IModal;
 }(Component);
 
-export { _default as default };
+export { IModal as default };
+
+
+IModal.propTypes = process.env.NODE_ENV !== "production" ? {
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onDecline: PropTypes.func,
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired,
+    confirmText: PropTypes.string,
+    declineText: PropTypes.string,
+    alertMode: PropTypes.bool
+} : {};
+
+IModal.defaultProps = {
+    title: 'Title',
+    content: React.createElement(
+        'p',
+        null,
+        'Default content'
+    ),
+    confirmText: 'Confirm',
+    declineText: 'Cancel',
+    alertMode: false,
+    onConfirm: function onConfirm() {},
+    onDecline: function onDecline() {},
+    onClose: function onClose() {}
+};

lib/index.js

@@ -10,6 +10,8 @@ 'use strict';
 
-var _IModal = require('./IModal/IModal.js');
+var _propTypes = require('prop-types');
 
-var _IModal2 = _interopRequireDefault(_IModal);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
+require('./IModal.css');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,42 +25,167 @@
 
-var _default = function (_Component) {
-  _inherits(_default, _Component);
+var IModal = function (_Component) {
+    _inherits(IModal, _Component);
 
-  function _default() {
-    _classCallCheck(this, _default);
+    function IModal() {
+        var _temp, _this, _ret;
 
-    var _this = _possibleConstructorReturn(this, _Component.call(this));
+        _classCallCheck(this, IModal);
 
-    _this.state = {
-      open: false
-    };
-    return _this;
-  }
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
 
-  _default.prototype.render = function render() {
-    var _this2 = this;
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.confirmButton = function (onConfirm) {
+            return _this.closeModal(onConfirm);
+        }, _this.declineButton = function (onDecline) {
+            return _this.closeModal(onDecline);
+        }, _this.closeModal = function (actionBtn) {
+            var modalNode = _this.modal; //dom node .app-modal
 
-    return _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(
-        'h2',
-        { onClick: function onClick() {
-            return _this2.setState({ open: true });
-          } },
-        'Welcome to React components'
-      ),
-      _react2.default.createElement(_IModal2.default, {
-        open: this.state.open,
-        onClose: function onClose() {
-          return _this2.setState({ open: false });
-        }
-      })
-    );
-  };
+            modalNode.classList.remove('active');
+            modalNode.classList.add('leaving');
 
-  return _default;
+            setTimeout(function () {
+                // trigger the action after submit button
+                actionBtn();
+
+                // call callback applied to the props            
+                _this.props.onClose();
+            }, 200);
+        }, _this.overlayClick = function (e) {
+            e.stopPropagation();
+
+            if (!e.target.classList.contains('app-modal-overlay')) return;
+
+            _this.declineButton(_this.props.onDecline);
+        }, _this.draggable = function (parent) {
+            var parentNode = parent.childNodes[0]; // .app-modal
+            var modal = parent.childNodes[0].childNodes[0]; // .app-modal-body
+            var modalHeader = parent.childNodes[0].childNodes[0].childNodes[0]; // .app-modal-header
+
+            var mouseUp = function mouseUp() {
+                document.removeEventListener("mousemove", positions);
+                document.removeEventListener("mouseup", mouseUp);
+            };
+
+            var positions = function positions(ev) {
+                var pX = ev.x - parentNode.offsetWidth / 2;
+                // position of modal's header
+                var pY = ev.y - parentNode.offsetHeight / 2 + modalHeader.offsetHeight * 2;
+
+                modal.style.left = pX + "px";
+                modal.style.top = pY + "px";
+
+                document.addEventListener('mouseup', mouseUp);
+            };
+
+            // when mouse down over the header of 400ms...
+            modalHeader.addEventListener('mousedown', function (e) {
+                document.addEventListener('mousemove', positions);
+            });
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    IModal.prototype.render = function render() {
+        var _this2 = this;
+
+        var _props = this.props,
+            title = _props.title,
+            content = _props.content,
+            confirmText = _props.confirmText,
+            declineText = _props.declineText,
+            onConfirm = _props.onConfirm,
+            onDecline = _props.onDecline,
+            open = _props.open,
+            alertMode = _props.alertMode;
+
+
+        if (!open) return null;
+
+        return _react2.default.createElement(
+            'div',
+            { className: 'app-modal', ref: function ref(modal) {
+                    if (modal == null) return;
+
+                    // add class with smoothness
+                    setTimeout(function () {
+                        return modal.classList.add('active');
+                    }, 0);
+
+                    // enable this feature only on desktop
+                    window.innerWidth > 1023 && _this2.draggable(modal);
+
+                    return _this2.modal = modal;
+                } },
+            _react2.default.createElement(
+                'div',
+                { className: 'app-modal-overlay', onClick: this.overlayClick },
+                _react2.default.createElement(
+                    'div',
+                    { className: 'app-modal-body' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'app-modal-header' },
+                        title
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'app-modal-content' },
+                        content
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'app-modal-footer' },
+                        _react2.default.createElement(
+                            'div',
+                            { className: 'button confirm', onClick: function onClick() {
+                                    return _this2.confirmButton(onConfirm);
+                                } },
+                            confirmText
+                        ),
+                        !alertMode && _react2.default.createElement(
+                            'div',
+                            { className: 'button cancel', onClick: function onClick() {
+                                    return _this2.declineButton(onDecline);
+                                } },
+                            declineText
+                        )
+                    )
+                )
+            )
+        );
+    };
+
+    return IModal;
 }(_react.Component);
 
-exports.default = _default;
+exports.default = IModal;
+
+
+IModal.propTypes = process.env.NODE_ENV !== "production" ? {
+    open: _propTypes2.default.bool,
+    onClose: _propTypes2.default.func,
+    onConfirm: _propTypes2.default.func,
+    onDecline: _propTypes2.default.func,
+    title: _propTypes2.default.string.isRequired,
+    content: _propTypes2.default.node.isRequired,
+    confirmText: _propTypes2.default.string,
+    declineText: _propTypes2.default.string,
+    alertMode: _propTypes2.default.bool
+} : {};
+
+IModal.defaultProps = {
+    title: 'Title',
+    content: _react2.default.createElement(
+        'p',
+        null,
+        'Default content'
+    ),
+    confirmText: 'Confirm',
+    declineText: 'Cancel',
+    alertMode: false,
+    onConfirm: function onConfirm() {},
+    onDecline: function onDecline() {},
+    onClose: function onClose() {}
+};
 module.exports = exports['default'];

package.json

 {
   "name": "react-imodal",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "react-imodal React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

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

Worsened metrics

Total package byte prevSize

21443

decreased by-15.75%

Number of package files

7

decreased by-22.22%

Lines of code

499

decreased by-14.26%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes