backstage-modal - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/modal.css.js

@@ -8,42 +8,60 @@ 'use strict';
   container: {
-    display: 'inline-block',
-    height: '32px',
-    cursor: 'default'
+    color: '#333',
+    position: 'relative',
+    fontFamily: ['Open Sans', 'sans-serif'],
+    fontSize: '16px'
   },
+  overlay: {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(51, 51, 51, 0.8)',
+    zIndex: '2'
+  },
   modal: {
-    width: '465px',
-    borderRadius: '4px',
+    width: '500px',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    zIndex: '3',
     backgroundColor: '#fff',
-    boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.3)',
-    border: 'solid 1px #ccc',
-    display: 'inline-block',
-    textAlign: 'left',
-    position: 'absolute',
-    zIndex: 1000,
-    marginLeft: '-232px'
+    borderRadius: '4px'
   },
   header: {
-    borderBottom: 'solid 2px #ccc',
-    padding: '24px'
+    padding: '1.5rem 1.5rem',
+    borderBottom: '1px solid #ccc',
+    lineHeight: '1.5rem'
   },
-  body: {
-    padding: '24px'
-  },
   title: {
-    fontFamily: 'Open Sans',
-    fontSize: '20px',
-    letterSpacing: '-0.8px',
-    color: '#333'
+    fontSize: '1.25rem',
+    lineHeight: '1.2',
+    letterSpacing: '-0.05rem'
   },
   close: {
+    float: 'right',
     color: '#999',
-    fontSize: '16px',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    position: 'absolute',
-    right: '20px'
+    cursor: 'pointer',
+    fontSize: '2.125rem',
+    position: 'relative',
+    textDecoration: 'none',
+    transform: 'rotate(45deg)'
   },
-  hidden: {
-    visibility: 'hidden'
+  closeHover: {
+    color: '#333'
+  },
+  body: {
+    padding: '2.5rem 1.5rem',
+    fontSize: '0.875rem',
+    lineHeight: '1.4',
+    letterSpacing: '-0.0125rem',
+    height: '250px',
+    overflowY: 'auto'
+  },
+  footer: {
+    borderTop: '1px solid #ccc',
+    padding: '1.5rem 1.5rem'
   }
 };

dist/modal.js

@@ -6,3 +6,6 @@ 'use strict';
 });
+exports.ModalBody = undefined;
 
+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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -14,2 +17,6 @@
 
+var _reactPortal = require('react-portal');
+
+var _reactPortal2 = _interopRequireDefault(_reactPortal);
+
 var _modal = require('./modal.css');
@@ -19,2 +26,10 @@
 
+var _closeButton = require('./close-button.js');
+
+var _closeButton2 = _interopRequireDefault(_closeButton);
+
+var _modalBody = require('./modal-body.js');
+
+var _modalBody2 = _interopRequireDefault(_modalBody);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,2 +43,4 @@
 
+exports.ModalBody = _modalBody2.default;
+
 var Modal = function (_Component) {
@@ -35,6 +52,7 @@ _inherits(Modal, _Component);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Modal).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props));
 
-    _this.state = { isOpen: _this.props.isOpen };
-    _this.close = _this.close.bind(_this);
+    _this.handleCloseClick = _this.handleCloseClick.bind(_this);
+    _this.handleOverlayClick = _this.handleOverlayClick.bind(_this);
+    _this.handlePortalClose = _this.handlePortalClose.bind(_this);
     return _this;
@@ -44,36 +62,70 @@ }
   _createClass(Modal, [{
-    key: 'close',
-    value: function close() {
-      this.setState({ isOpen: false });
+    key: 'handleCloseClick',
+    value: function handleCloseClick() {
+      this.handleClose();
     }
   }, {
+    key: 'handleOverlayClick',
+    value: function handleOverlayClick(event) {
+      var classNames = event.target.className.split(' ');
+      if (classNames.indexOf('bs-modal__overlay') === -1) {
+        return;
+      }
+      this.handleClose();
+    }
+  }, {
+    key: 'handleClose',
+    value: function handleClose() {
+      if (!this.props.isOpen) {
+        return;
+      }
+      this.props.onCloseRequest();
+    }
+  }, {
+    key: 'handlePortalClose',
+    value: function handlePortalClose() {
+      this.props.onCloseRequest();
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var modalStyle = _modal2.default.modal;
-
-      if (!this.state.isOpen) {
-        modalStyle = Object.assign({}, _modal2.default.modal, _modal2.default.hidden);
+      var modalStyle = _modal2.default.container;
+      if (this.props.width) {
+        modalStyle = _extends({}, modalStyle, { width: this.props.width });
       }
 
+      var classNames = 'bs-modal ' + (this.props.className || '');
+
       return _react2.default.createElement(
-        'div',
-        { className: this.props.className, style: modalStyle },
+        _reactPortal2.default,
+        { isOpened: this.props.isOpen, closeOnEsc: true, onClose: this.handlePortalClose },
         _react2.default.createElement(
           'div',
-          { className: 'modal-header', style: _modal2.default.header },
+          { onKeyDown: this.handleKeyDown, className: classNames, style: modalStyle },
           _react2.default.createElement(
-            'span',
-            { className: 'modal-title', style: _modal2.default.title },
-            this.props.title
-          ),
-          _react2.default.createElement(
-            'span',
-            { className: 'modal-close', onClick: this.close, style: _modal2.default.close },
-            'x'
+            'div',
+            {
+              className: 'bs-modal__overlay',
+              style: _modal2.default.overlay,
+              onClick: this.handleOverlayClick
+            },
+            _react2.default.createElement(
+              'div',
+              { style: _modal2.default.modal },
+              _react2.default.createElement(
+                'div',
+                { className: 'bs-modal__header', style: _modal2.default.header },
+                _react2.default.createElement(_closeButton2.default, { onClick: this.handleCloseClick }),
+                _react2.default.createElement(
+                  'span',
+                  {
+                    className: 'bs-modal__title',
+                    style: _modal2.default.title
+                  },
+                  this.props.title
+                )
+              ),
+              this.props.children
+            )
           )
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: 'modal-body', style: _modal2.default.body },
-          this.props.children
         )
@@ -87,15 +139,15 @@ );
 
-exports.default = Modal;
-
-
 Modal.propTypes = {
   className: _react2.default.PropTypes.string,
   isOpen: _react2.default.PropTypes.bool,
+  width: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
   title: _react2.default.PropTypes.string,
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node), _react2.default.PropTypes.node])
+  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node), _react2.default.PropTypes.node]),
+  onCloseRequest: _react2.default.PropTypes.func
 };
-
 Modal.defaultProps = {
   isOpen: false,
-  title: ''
-};
+  title: '',
+  onCloseRequest: function onCloseRequest() {}
+};
+exports.default = Modal;

package.json

 {
   "name": "backstage-modal",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "backstage modal",
   "main": "dist/modal.js",
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "babel src/ --out-dir dist/ --ignore __tests__,__mocks__",
     "lint": "eslint src",
-    "test": "jest test"
+    "test": "jest test",
+    "test:watch": "jest test --watch"
   },
@@ -18,5 +20,3 @@ "files": [
   },
-  "jest": {
-    "automock": false
-  },
+  "jest": {},
   "author": "",
@@ -36,2 +36,3 @@ "license": "MIT",
     "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.16.0",
     "enzyme": "^2.4.1",
@@ -43,7 +44,12 @@ "eslint": "^3.3.1",
     "eslint-plugin-react": "^6.1.2",
-    "jest": "^14.1.0",
+    "jest": "^16.0.1",
     "react": "^15.3.1",
     "react-addons-test-utils": "^15.3.1",
-    "react-dom": "^15.3.1"
+    "react-dom": "^15.3.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.1"
+  },
+  "dependencies": {
+    "react-portal": "^3.0.0"
   }
 }

README.md

 # backstage-modal
 
-Backstage React modal component
-
 [![Build Status](https://travis-ci.org/backstage-ui/backstage-modal.png?branch=master)](https://travis-ci.org/backstage-ui/backstage-modal)
 
+Backstage Modal React component
+
 ## Installing
 
 ```bash
-$ npm install backstage-modal --save
+npm install backstage-modal --save
 ```
 
+## Components
+
+### `<Modal />`
+
+Main component that includes the overlay, the modal window and its contents.
+
+Use `children` to render the inner content of the modal window.
+
+#### Props
+
+* `isOpen`: flag indicating wether the modal is opened or not (default `false`);
+* `title`: title of the modal window;
+* `width`: CSS width of the modal window (default `500px`);
+* `onCloseRequest`: callback called when the user attempts to close the modal:
+  * by clicking on the close button;
+  * by clicking on the overlay;
+  * by pressing the ESC key.
+
+### `<ModalBody />`
+
+Optional child component to wrap content and get some nice default styles.
+
+### `<ModalFooter />`
+
+Optional child component to wrap content and get some nice default styles along
+with a separator.
+
+
 ## Example
 
 ```js
-import React from 'react';
-import { render } from 'react-dom';
+import React, {Component} from 'react';
+import ReactDOM from "react-dom";
 import Modal from 'backstage-modal';
 
-render(<Modal />, document.getElementById('container'));
+class Example extends Component {
+  constructor(){
+    this.state = {
+      isOpen: true
+    };
+  }
+
+  onCloseRequest(){
+    this.setState({isOpen: false});
+  }
+
+  render(){
+    return (
+      <Modal isOpen={this.state.isOpen} title="Backstage Modal" onCloseRequest={() => this.onCloseRequest}>
+        <ModalBody>
+          <p>Body</p>
+        </ModalBody>
+        <ModalFooter>
+          <button type="button">OK</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ReactDOM.render(<Example />, document.getElementById('container'));
 ```

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

19508

increased by166.18%

Number of package files

8

increased by60%

Lines of code

310

increased by160.5%

Number of lines in readme file

75

increased by240.91%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

20

increased by17.65%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedreact-portal@^3.0.0

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-portal@3.2.0(transitive)