@trendmicro/react-modal - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-modal v0.5.1 | (c) 2016 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-modal */
+/*! react-modal v0.6.0 | (c) 2016 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-modal */
 module.exports =
@@ -55,15 +55,23 @@ /******/ (function(modules) { // webpackBootstrap
 	
-	var _ModalHeader = __webpack_require__(9);
+	var _ModalOverlay = __webpack_require__(3);
 	
+	var _ModalOverlay2 = _interopRequireDefault(_ModalOverlay);
+	
+	var _ModalContent = __webpack_require__(5);
+	
+	var _ModalContent2 = _interopRequireDefault(_ModalContent);
+	
+	var _ModalHeader = __webpack_require__(11);
+	
 	var _ModalHeader2 = _interopRequireDefault(_ModalHeader);
 	
-	var _ModalTitle = __webpack_require__(10);
+	var _ModalTitle = __webpack_require__(12);
 	
 	var _ModalTitle2 = _interopRequireDefault(_ModalTitle);
 	
-	var _ModalBody = __webpack_require__(11);
+	var _ModalBody = __webpack_require__(13);
 	
 	var _ModalBody2 = _interopRequireDefault(_ModalBody);
 	
-	var _ModalFooter = __webpack_require__(12);
+	var _ModalFooter = __webpack_require__(14);
 	
@@ -74,5 +82,7 @@ var _ModalFooter2 = _interopRequireDefault(_ModalFooter);
 	
-	_Modal2.default.Body = _ModalBody2.default;
+	_Modal2.default.Overlay = _ModalOverlay2.default;
+	_Modal2.default.Content = _ModalContent2.default;
 	_Modal2.default.Header = _ModalHeader2.default;
 	_Modal2.default.Title = _ModalTitle2.default;
+	_Modal2.default.Body = _ModalBody2.default;
 	_Modal2.default.Footer = _ModalFooter2.default;
@@ -99,15 +109,15 @@
 	
-	var _classnames = __webpack_require__(2);
+	var _react = __webpack_require__(2);
 	
-	var _classnames2 = _interopRequireDefault(_classnames);
+	var _react2 = _interopRequireDefault(_react);
 	
-	var _react = __webpack_require__(3);
+	var _ModalOverlay = __webpack_require__(3);
 	
-	var _react2 = _interopRequireDefault(_react);
+	var _ModalOverlay2 = _interopRequireDefault(_ModalOverlay);
 	
-	var _reactModal = __webpack_require__(4);
+	var _ModalContent = __webpack_require__(5);
 	
-	var _reactModal2 = _interopRequireDefault(_reactModal);
+	var _ModalContent2 = _interopRequireDefault(_ModalContent);
 	
-	var _index = __webpack_require__(5);
+	var _index = __webpack_require__(7);
 	
@@ -126,2 +136,137 @@ var _index2 = _interopRequireDefault(_index);
 	
+	var _default = (_temp2 = _class = function (_Component) {
+	    _inherits(_default, _Component);
+	
+	    function _default() {
+	        var _ref;
+	
+	        var _temp, _this, _ret;
+	
+	        _classCallCheck(this, _default);
+	
+	        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	            args[_key] = arguments[_key];
+	        }
+	
+	        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _default.__proto__ || Object.getPrototypeOf(_default)).call.apply(_ref, [this].concat(args))), _this), _this.actions = {
+	            onClose: function onClose(event) {
+	                _this.props.onClose && _this.props.onClose(event);
+	            }
+	        }, _temp), _possibleConstructorReturn(_this, _ret);
+	    }
+	
+	    _createClass(_default, [{
+	        key: 'renderCloseButton',
+	        value: function renderCloseButton() {
+	            return _react2.default.createElement(
+	                'button',
+	                {
+	                    type: 'button',
+	                    className: _index2.default.close,
+	                    onClick: this.actions.onClose
+	                },
+	                '\xD7'
+	            );
+	        }
+	    }, {
+	        key: 'render',
+	        value: function render() {
+	            var _props = this.props,
+	                children = _props.children,
+	                show = _props.show,
+	                closeOnOverlayClick = _props.closeOnOverlayClick,
+	                onOpen = _props.onOpen,
+	                onClose = _props.onClose,
+	                size = _props.size,
+	                showOverlay = _props.showOverlay,
+	                showCloseButton = _props.showCloseButton,
+	                props = _objectWithoutProperties(_props, ['children', 'show', 'closeOnOverlayClick', 'onOpen', 'onClose', 'size', 'showOverlay', 'showCloseButton']);
+	
+	            if (!showOverlay) {
+	                return _react2.default.createElement(
+	                    _ModalContent2.default,
+	                    _extends({}, props, {
+	                        size: size,
+	                        style: { display: show ? 'block' : 'none' }
+	                    }),
+	                    children,
+	                    showCloseButton && this.renderCloseButton()
+	                );
+	            }
+	
+	            return _react2.default.createElement(
+	                _ModalOverlay2.default,
+	                {
+	                    show: show,
+	                    closeOnOverlayClick: closeOnOverlayClick,
+	                    onOpen: onOpen,
+	                    onClose: onClose
+	                },
+	                _react2.default.createElement(
+	                    _ModalContent2.default,
+	                    _extends({}, props, {
+	                        size: size,
+	                        style: { // border and boxShadow properties are specified in ModalOverlay
+	                            border: 'none',
+	                            boxShadow: 'none'
+	                        }
+	                    }),
+	                    children,
+	                    showCloseButton && this.renderCloseButton()
+	                )
+	            );
+	        }
+	    }]);
+	
+	    return _default;
+	}(_react.Component), _class.propTypes = _extends({}, _ModalOverlay2.default.propTypes, _ModalContent2.default.propTypes, {
+	    // Specify whether to show the modal.
+	    show: _react.PropTypes.bool,
+	    // Pass 'showOverlay' prop with 'true' value to add an overlay to the background, and 'false' otherwise.
+	    showOverlay: _react.PropTypes.bool,
+	    // Specify whether the modal should contain a close button (x).
+	    showCloseButton: _react.PropTypes.bool
+	}), _class.defaultProps = _extends({}, _ModalOverlay2.default.defaultProps, _ModalContent2.default.defaultProps, {
+	    showOverlay: true,
+	    showCloseButton: true
+	}), _temp2);
+
+	exports.default = _default;
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	module.exports = require("react");
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+	
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	
+	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; }; }();
+	
+	var _class, _temp;
+	
+	var _react = __webpack_require__(2);
+	
+	var _react2 = _interopRequireDefault(_react);
+	
+	var _reactModal = __webpack_require__(4);
+	
+	var _reactModal2 = _interopRequireDefault(_reactModal);
+	
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+	
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+	
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+	
 	var noop = function noop() {};
@@ -151,3 +296,3 @@
 	        padding: 0,
-	        msTransform: 'translate(-50%, -50%)', /* IE 9 */
+	        msTransform: 'translate(-50%, -50%)', // IE9
 	        transform: 'translate(-50%, -50%)'
@@ -157,24 +302,12 @@ }
 	
-	var _default = (_temp2 = _class = function (_Component) {
-	    _inherits(_default, _Component);
+	var ModalOverlay = (_temp = _class = function (_Component) {
+	    _inherits(ModalOverlay, _Component);
 	
-	    function _default() {
-	        var _ref;
+	    function ModalOverlay() {
+	        _classCallCheck(this, ModalOverlay);
 	
-	        var _temp, _this, _ret;
-	
-	        _classCallCheck(this, _default);
-	
-	        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-	            args[_key] = arguments[_key];
-	        }
-	
-	        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _default.__proto__ || Object.getPrototypeOf(_default)).call.apply(_ref, [this].concat(args))), _this), _this.actions = {
-	            onClose: function onClose(event) {
-	                _this.props.onClose && _this.props.onClose(event);
-	            }
-	        }, _temp), _possibleConstructorReturn(_this, _ret);
+	        return _possibleConstructorReturn(this, (ModalOverlay.__proto__ || Object.getPrototypeOf(ModalOverlay)).apply(this, arguments));
 	    }
 	
-	    _createClass(_default, [{
+	    _createClass(ModalOverlay, [{
 	        key: 'render',
@@ -184,36 +317,19 @@ value: function render() {
 	                children = _props.children,
-	                size = _props.size,
 	                show = _props.show,
-	                backdrop = _props.backdrop,
-	                closeButton = _props.closeButton,
+	                closeOnOverlayClick = _props.closeOnOverlayClick,
 	                onOpen = _props.onOpen,
-	                onClose = _props.onClose,
-	                props = _objectWithoutProperties(_props, ['children', 'size', 'show', 'backdrop', 'closeButton', 'onOpen', 'onClose']);
+	                onClose = _props.onClose;
 	
+	
 	            return _react2.default.createElement(
 	                _reactModal2.default,
-	                _extends({}, props, {
+	                {
 	                    isOpen: show,
 	                    onAfterOpen: onOpen,
 	                    onRequestClose: onClose,
-	                    shouldCloseOnOverlayClick: backdrop === true,
+	                    shouldCloseOnOverlayClick: closeOnOverlayClick,
 	                    style: customStyles,
 	                    contentLabel: 'Modal'
-	                }),
-	                _react2.default.createElement(
-	                    'div',
-	                    {
-	                        className: (0, _classnames2.default)(_index2.default.modal, _index2.default[size])
-	                    },
-	                    children,
-	                    closeButton && _react2.default.createElement(
-	                        'button',
-	                        {
-	                            type: 'button',
-	                            className: _index2.default.close,
-	                            onClick: this.actions.onClose
-	                        },
-	                        '\xD7'
-	                    )
-	                )
+	                },
+	                children
 	            );
@@ -223,61 +339,99 @@ }
 	
-	    return _default;
+	    return ModalOverlay;
 	}(_react.Component), _class.propTypes = {
-	    size: _react.PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-	
-	    // When 'true' the modal will show itself.
+	    // Specify whether to show the modal.
 	    show: _react.PropTypes.bool,
 	
-	    // Specify 'static' for a backdrop that doesn't trigger an "onClose" when clicked.
-	    backdrop: _react.PropTypes.oneOf(['static', true, false]),
+	    // By default the modal is closed when clicking the overlay area. You can pass 'closeOnOverlayClick' prop with 'false' value if you want to prevent this behavior.
+	    closeOnOverlayClick: _react.PropTypes.bool,
 	
-	    // Specify whether the Component should contain a close button.
-	    closeButton: _react.PropTypes.bool,
-	
 	    // A callback fired after opening a modal.
 	    onOpen: _react.PropTypes.func,
 	
-	    // A callback fired when the header closeButton or non-static backdrop is clicked.
+	    // A callback fired when clicking the close button (x) or the overlay area.
 	    onClose: _react.PropTypes.func
 	}, _class.defaultProps = {
-	    size: 'xs',
 	    show: true,
-	    backdrop: 'static',
-	    closeButton: true,
+	    closeOnOverlayClick: true,
 	    onOpen: noop,
 	    onClose: noop
-	}, _temp2);
-	
-	exports.default = _default;
+	}, _temp);
+	exports.default = ModalOverlay;
 
 /***/ },
-/* 2 */
+/* 4 */
 /***/ function(module, exports) {
 
-	module.exports = require("classnames");
+	module.exports = require("react-modal");
 
 /***/ },
-/* 3 */
-/***/ function(module, exports) {
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
 
-	module.exports = require("react");
+	'use strict';
+	
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	
+	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 _classnames = __webpack_require__(6);
+	
+	var _classnames2 = _interopRequireDefault(_classnames);
+	
+	var _react = __webpack_require__(2);
+	
+	var _react2 = _interopRequireDefault(_react);
+	
+	var _index = __webpack_require__(7);
+	
+	var _index2 = _interopRequireDefault(_index);
+	
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	
+	function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+	
+	var ModalContent = function ModalContent(props) {
+	    var className = props.className,
+	        size = props.size,
+	        others = _objectWithoutProperties(props, ['className', 'size']);
+	
+	    return _react2.default.createElement('div', _extends({}, others, {
+	        className: (0, _classnames2.default)(className, _index2.default.modalContent, _index2.default[size])
+	    }));
+	};
+	
+	ModalContent.propTypes = {
+	    // Extra Small: W400 x H240 px (minimum height)
+	    // Small:       W544 x H304 px (minimum height)
+	    // Medium:      W688 x H304 px (minimum height)
+	    // Large:       W928 x H304 px (minimum height)
+	    size: _react.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'large', 'medium', 'small', 'extra-small'])
+	};
+	
+	ModalContent.defaultProps = {
+	    size: 'xs'
+	};
+	
+	exports.default = ModalContent;
 
 /***/ },
-/* 4 */
+/* 6 */
 /***/ function(module, exports) {
 
-	module.exports = require("react-modal");
+	module.exports = require("classnames");
 
 /***/ },
-/* 5 */
+/* 7 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
-	module.exports = {"modal":"modal---modal---373iC","xs":"modal---xs---1z3ff","modal-body":"modal---modal-body---2HFnG","modalBody":"modal---modal-body---2HFnG","modal-header":"modal---modal-header---2YL1L","modalHeader":"modal---modal-header---2YL1L","sm":"modal---sm---20_2_","md":"modal---md---2-zYL","lg":"modal---lg---Hdvxb","close":"modal---close---28rLZ","padding":"modal---padding---2ENnv","modal-title":"modal---modal-title---2JFyt","modalTitle":"modal---modal-title---2JFyt","modal-footer":"modal---modal-footer---20LPi","modalFooter":"modal---modal-footer---20LPi"};
+	module.exports = {"modal-content":"modal---modal-content---3pwnC","modalContent":"modal---modal-content---3pwnC","xs":"modal---xs---1z3ff","modal-body":"modal---modal-body---2HFnG","modalBody":"modal---modal-body---2HFnG","modal-header":"modal---modal-header---2YL1L","modalHeader":"modal---modal-header---2YL1L","sm":"modal---sm---20_2_","md":"modal---md---2-zYL","lg":"modal---lg---Hdvxb","close":"modal---close---28rLZ","padding":"modal---padding---2ENnv","modal-title":"modal---modal-title---2JFyt","modalTitle":"modal---modal-title---2JFyt","modal-footer":"modal---modal-footer---20LPi","modalFooter":"modal---modal-footer---20LPi"};
 
 /***/ },
-/* 6 */,
-/* 7 */,
 /* 8 */,
-/* 9 */
+/* 9 */,
+/* 10 */,
+/* 11 */
 /***/ function(module, exports, __webpack_require__) {
@@ -297,11 +451,11 @@
 	
-	var _classnames = __webpack_require__(2);
+	var _classnames = __webpack_require__(6);
 	
 	var _classnames2 = _interopRequireDefault(_classnames);
 	
-	var _react = __webpack_require__(3);
+	var _react = __webpack_require__(2);
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _index = __webpack_require__(5);
+	var _index = __webpack_require__(7);
 	
@@ -360,3 +514,3 @@ var _index2 = _interopRequireDefault(_index);
 /***/ },
-/* 10 */
+/* 12 */
 /***/ function(module, exports, __webpack_require__) {
@@ -372,7 +526,7 @@
 	
-	var _react = __webpack_require__(3);
+	var _react = __webpack_require__(2);
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _index = __webpack_require__(5);
+	var _index = __webpack_require__(7);
 	
@@ -392,3 +546,3 @@ var _index2 = _interopRequireDefault(_index);
 /***/ },
-/* 11 */
+/* 13 */
 /***/ function(module, exports, __webpack_require__) {
@@ -408,11 +562,11 @@
 	
-	var _classnames = __webpack_require__(2);
+	var _classnames = __webpack_require__(6);
 	
 	var _classnames2 = _interopRequireDefault(_classnames);
 	
-	var _react = __webpack_require__(3);
+	var _react = __webpack_require__(2);
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _index = __webpack_require__(5);
+	var _index = __webpack_require__(7);
 	
@@ -471,3 +625,3 @@ var _index2 = _interopRequireDefault(_index);
 /***/ },
-/* 12 */
+/* 14 */
 /***/ function(module, exports, __webpack_require__) {
@@ -487,11 +641,11 @@
 	
-	var _classnames = __webpack_require__(2);
+	var _classnames = __webpack_require__(6);
 	
 	var _classnames2 = _interopRequireDefault(_classnames);
 	
-	var _react = __webpack_require__(3);
+	var _react = __webpack_require__(2);
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _index = __webpack_require__(5);
+	var _index = __webpack_require__(7);
 	
@@ -498,0 +652,0 @@ var _index2 = _interopRequireDefault(_index);

package.json

 {
   "name": "@trendmicro/react-modal",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Trend Micro Components: React Modal",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
     "coveralls": "./babel-tap --coverage --coverage-report=text-lcov test/*.js | node_modules/.bin/coveralls",
-    "webpack-dev-server": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000"
+    "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000"
   },
@@ -25,0 +25,0 @@ "repository": {

README.md

@@ -45,5 +45,2 @@ # react-modal [![build status](https://travis-ci.org/trendmicro-frontend/react-modal.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-modal) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-modal/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-modal?branch=master)
                 show={state.showModal}
-                size="sm"
-                backdrop
-                closeButton
                 onClose={actions.closeModal}
@@ -56,3 +53,3 @@ >
                 </Modal.Header>
-                <Modal.Body padding>
+                <Modal.Body padding={true}>
                     Modal Body
@@ -92,38 +89,51 @@ </Modal.Body>
   </thead>
-  <tbody>
+  <tbody>    
     <tr>
-      <td>size</td>
-      <td>String</td>
-      <td>'xs'</td>
-      <td>'xs', 'sm', 'md', or 'lg'</td>
+      <td>closeOnOverlayClick</td>
+      <td>Boolean</td>
+      <td>true</td>
+      <td>By default the modal is closed when clicking the overlay area. You can pass 'closeOnOverlayClick' prop with 'false' value if you want to prevent this behavior.</td>
     </tr>
     <tr>
-      <td>show</td>
-      <td>Boolean</td>
-      <td>true</td>
+      <td>onClose</td>
+      <td>Function</td>
       <td></td>
+      <td>A callback fired when clicking the close button (x&times;) or the overlay area.</td>
     </tr>
     <tr>
-      <td>backdrop</td>
-      <td>String|Boolean</td>
-      <td>'static'</td>
-      <td>'static', true, or false</td>
+      <td>onOpen</td>
+      <td>Function</td>
+      <td></td>
+      <td>A callback fired after opening a modal.</td>
     </tr>
     <tr>
-      <td>closeButton</td>
+      <td>show</td>
       <td>Boolean</td>
       <td>true</td>
-      <td></td>
+      <td>Specify whether to show the modal.</td>
     </tr>
     <tr>
-      <td>onOpen</td>
-      <td>Function</td>
-      <td></td>
-      <td></td>
+      <td>showCloseButton</td>
+      <td>Boolean</td>
+      <td>true</td>
+      <td>Specify whether the modal should contain a close button (x).</td>
+    </tr>    
+    <tr>
+      <td>showOverlay</td>
+      <td>Boolean</td>
+      <td>true</td>
+      <td>Pass 'showOverlay' prop with 'true' value to add an overlay to the background, and 'false' otherwise.</td>
     </tr>
     <tr>
-      <td>onClose</td>
-      <td>Function</td>
-      <td></td>
-      <td></td>
+      <td>size</td>
+      <td>String</td>
+      <td>'xs'</td>
+      <td>
+          <ul>
+              <li>Extra Small (400px x 240px): 'xs' or 'extra-small'</li>
+              <li>Small (544px x 304px): 'sm' or 'small'</li>
+              <li>Medium (688px x 304px): 'md' or 'medium'</li>
+              <li>Large (928px x 304px): 'lg' or 'large'</li>
+          </ul>
+      </td>
     </tr>
@@ -130,0 +140,0 @@ </tbody>

No alert changes

Improved metrics

Total package byte prevSize

62310

increased by25%

Lines of code

624

increased by23.81%

Number of lines in readme file

143

increased by7.52%

No dependency changes