react-bootstrap-dialog - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# v0.11.0
+
+- Support react-bootstrap v1.x.x (Bootstrap v4) 🎉
+- Add `defaultButtonClassName` option to `Dialog.options`
+- Use index number for the key in the list of action buttons. See #22
+
 # v0.10.0
@@ -2,0 +8,0 @@

CONTRIBUTING.md

@@ -17,3 +17,3 @@ # Contributing to React Bootstrap Dialog Component
 
-Run `npm run storybook`.
+Run `yarn storybook`.
 
@@ -24,3 +24,3 @@ ## Deploy Storybook
 
-Run `npm run publish-storybook` to deploy storybook on [gh-pages branch](https://pages.github.com/).
+Run `yarn publish-storybook` to deploy storybook on [gh-pages branch](https://pages.github.com/).
 
@@ -34,3 +34,3 @@ ## Publish
 ```sh
-npm publish
+yarn publish
 ```

dist/index.js

 'use strict';
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -33,2 +37,4 @@
 
+var ReactBootstrap = _interopRequireWildcard(_reactBootstrap);
+
 var _Prompts = require('./Prompts');
@@ -40,4 +46,8 @@
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var Modal = ReactBootstrap.Modal;
+
 /**
@@ -49,2 +59,3 @@ * The modal dialog which can be altenative to `window.confirm` and `window.alert`.
  */
+
 var Dialog = function (_React$Component) {
@@ -197,2 +208,7 @@ (0, _inherits3.default)(Dialog, _React$Component);
   }, {
+    key: 'getSize',
+    value: function getSize(defaultSize) {
+      return typeof this.state.bsSize === 'undefined' ? defaultSize : this.state.bsSize === 'medium' ? null : this.state.bsSize;
+    }
+  }, {
     key: 'render',
@@ -202,11 +218,17 @@ value: function render() {
 
-      var size = typeof this.state.bsSize === 'undefined' ? 'small' : this.state.bsSize === 'medium' ? null : this.state.bsSize;
+      // XXX: Check current ReactBootstrap v4, or not.
+      var isLaterV4 = !!ReactBootstrap['Card'];
+      var additionalProps = isLaterV4 ? {
+        size: this.getSize('sm')
+      } : {
+        bsSize: this.getSize('small')
+      };
       return _react2.default.createElement(
-        _reactBootstrap.Modal,
-        { show: this.state.showModal, onHide: this.onHide, bsSize: size },
+        Modal,
+        (0, _extends3.default)({ show: this.state.showModal, onHide: this.onHide }, additionalProps),
         this.state.title && _react2.default.createElement(
-          _reactBootstrap.Modal.Header,
+          Modal.Header,
           null,
           _react2.default.createElement(
-            _reactBootstrap.Modal.Title,
+            Modal.Title,
             null,
@@ -217,3 +239,3 @@ this.state.title
         _react2.default.createElement(
-          _reactBootstrap.Modal.Body,
+          Modal.Body,
           null,
@@ -234,9 +256,9 @@ typeof this.state.body === 'string' ? _react2.default.createElement(
         _react2.default.createElement(
-          _reactBootstrap.Modal.Footer,
+          Modal.Footer,
           null,
-          this.state.actions.map(function (action) {
+          this.state.actions.map(function (action, index) {
             return _react2.default.createElement(
               'button',
               {
-                key: action.label,
+                key: index,
                 type: 'button',
@@ -284,3 +306,3 @@ className: 'btn btn-sm ' + action.className,
     this._func = func;
-    this.className = className || 'btn-default';
+    this.className = className || Dialog.options.defaultButtonClassName;
     this.key = key;
@@ -302,3 +324,4 @@ }
   defaultCancelLabel: 'Cancel',
-  primaryClassName: 'btn-primary'
+  primaryClassName: 'btn-primary',
+  defaultButtonClassName: 'btn-default btn-outline-secondary'
 };
@@ -305,0 +328,0 @@

package.json

 {
   "name": "react-bootstrap-dialog",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "The modal-dialog React component with React Bootstrap, alternates `window.confirm` and `window.alert`.",
@@ -39,9 +39,9 @@ "repository": {
     "babel-cli": "^6.23.0",
-    "babel-core": "^6.23.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.23.0",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.2.1",
     "chai": "^3.5.0",
@@ -52,6 +52,6 @@ "enzyme": "^2.2.0",
     "mocha": "^2.4.5",
-    "react": "^16.2.0",
+    "react": "^16.7.0",
     "react-addons-test-utils": "^15.6.2",
-    "react-bootstrap": "^0.32.1",
-    "react-dom": "^16.2.0",
+    "react-bootstrap": "^1.0.0-beta.5",
+    "react-dom": "^16.7.0",
     "sinon": "^1.17.3",
@@ -58,0 +58,0 @@ "standard": "^8.0.0",

README.md

@@ -6,6 +6,10 @@ # React Bootstrap Dialog
 
-It's a **Modal-dialog React component** based on `<Modal />` in [react-bootstrap](https://react-bootstrap.github.io/), It's configurable and easy to use alternative for `window.alert`, `window.confirm`, or `window.prompt` in your React application.
+The React component library for **alert or dialog** based on **[react-bootstrap](https://react-bootstrap.github.io/)'s `<Modal />`**.
+Configurable and easy to use alternative for `window.alert`, `window.confirm`, or `window.prompt` in your React application.
 
 [![https://gyazo.com/d9c073c6c7d66c05e5398f386345f452](https://i.gyazo.com/d9c073c6c7d66c05e5398f386345f452.gif)](https://gyazo.com/d9c073c6c7d66c05e5398f386345f452)
 
+You can use with react-bootstrap v3 or v4.
+(v4 since react-bootstrap-dialog v0.11.0)
+
 Index:
@@ -90,3 +94,3 @@
         <Button onClick={this.onClick}>Show alert</Button>
-        <Dialog ref={(el) => { this.dialog = el }} />
+        <Dialog ref={(component) => { this.dialog = component }} />
       </div>
@@ -119,3 +123,4 @@ )
   - `primaryClassName`: [String] The class name for primary button. Default is `'btn-primary'`
-
+  - `defaultButtonClassName`: [String] The class name for ordinary button. Default is `'btn-default btn-outline-secondary'`
+    - Notice: The default value includes v3 and v4 classes.
 ##### Example
@@ -127,3 +132,4 @@
   defaultCancelLabel: 'Noooooooo!!',
-  primaryClassName: 'btn-success'
+  primaryClassName: 'btn-success',
+  defaultButtonClassName: 'btn-link'
 })
@@ -153,3 +159,5 @@ ```
    - `actions`: [Array[DialogAction]] The choices for presenting to user. See [DialogAction generators](#dialogaction-generators).
-   - `bsSize`: [String] The width size for dialog. You can choose in [null, 'medium', 'large', 'small'].
+   - `bsSize`: [String] The width size for dialog.
+     - with react-bootstrap v3: You can choose from [null, 'medium', 'large', 'small'].
+     - with react-bootstrap v4: You can choose from [null, 'medium', 'lg', 'sm'].
    - `onHide`: [Function] The method to call when the dialog was closed by clicking background.
@@ -156,0 +164,0 @@ - `prompt`: [DialogPrompt] The prompt to get user input. See [DialogPrompt generators](#dialogprompt-generators).

No alert changes

Improved metrics

Number of package files

26

increased by4%

Lines of code

508

increased by3.46%

Number of lines in readme file

318

increased by2.58%

Worsened metrics

Total package byte prevSize

52663

decreased by-35.5%

No dependency changes