react-dialog-modal - npm Package Compare versions

Comparing version 0.3.16 to 0.3.17

dist/DialogBody.js

@@ -50,3 +50,3 @@ "use strict";
                 "div",
-                { className: "ui-dialog-content custom--filters pa2", style: { "overflowY": "auto" } },
+                { className: "ui-dialog-content", style: { "overflowY": "auto" } },
                 this.props.children
@@ -53,0 +53,0 @@ );

dist/DialogTitle.js

@@ -30,3 +30,3 @@ "use strict";
     var minimizeIcon;
-    if (props.hasMinimizeIcon) {
+    if (props.allowMinimize) {
         if (props.isMinimized) {
@@ -48,3 +48,3 @@ minimizeIcon = _react2.default.createElement(
     var maximizeIcon;
-    if (props.hasMaximizeIcon) {
+    if (props.allowMaximize) {
         if (props.isMaximized) {
@@ -86,4 +86,4 @@ maximizeIcon = _react2.default.createElement(
     hasCloseIcon: _propTypes2.default.bool,
-    hasMinimizeIcon: _propTypes2.default.bool,
-    hasMaximizeIcon: _propTypes2.default.bool,
+    allowMinimize: _propTypes2.default.bool,
+    allowMaximize: _propTypes2.default.bool,
     isMinimized: _propTypes2.default.bool,
@@ -90,0 +90,0 @@ isMaximized: _propTypes2.default.bool,

dist/index.js

@@ -115,4 +115,4 @@ "use strict";
                 hasCloseIcon: _this.props.hasCloseIcon,
-                hasMinimizeIcon: _this.props.hasMinimizeIcon,
-                hasMaximizeIcon: _this.props.hasMaximizeIcon,
+                allowMinimize: _this.props.allowMinimize,
+                allowMaximize: _this.props.allowMaximize,
                 isMinimized: _this.state.isMinimized,
@@ -129,3 +129,3 @@ isMaximized: _this.state.isMaximized,
         _this.state = {
-            height: props.height || 300,
+            height: props.height,
             width: props.width || 500,
@@ -158,3 +158,3 @@ isMinimized: false,
 
-            var dialogBody;
+            var dialogBody = void 0;
             if (this.props.children) {
@@ -174,5 +174,5 @@ dialogBody = this.props.children;
 
-            var internalDialog = _react2.default.createElement(
+            var dialog = _react2.default.createElement(
                 "div",
-                { style: { height: this.state.height, width: this.state.width }, className: (0, _classnames2.default)("ui-dialog", { "minimized": this.state.isMinimized, "maximized": this.state.isMaximized }) },
+                { style: { height: this.state.height || "auto", width: this.state.width }, className: (0, _classnames2.default)("ui-dialog", { "minimized": this.state.isMinimized, "maximized": this.state.isMaximized }) },
                 this.getDialogTitle(),
@@ -187,13 +187,18 @@ _react2.default.createElement(
 
-            var renderableDialog;
             if (this.props.isResizable) {
-                renderableDialog = _react2.default.createElement(
+                dialog = _react2.default.createElement(
                     _reactResizable.Resizable,
                     { className: "box", height: this.state.height, width: this.state.width, onResize: this.onResize },
-                    internalDialog
+                    dialog
                 );
-            } else {
-                renderableDialog = internalDialog;
             }
 
+            if (this.props.isDraggable) {
+                dialog = _react2.default.createElement(
+                    _reactDraggable2.default,
+                    { handle: ".ui-dialog-titlebar", bounds: "body" },
+                    dialog
+                );
+            }
+
             return _react2.default.createElement(
@@ -205,9 +210,5 @@ "div",
                     },
-                    className: (0, _classnames2.default)("ui-dialog-container") },
-                _react2.default.createElement(
-                    _reactDraggable2.default,
-                    { handle: ".ui-dialog-titlebar", bounds: "body" },
-                    renderableDialog
-                ),
-                this.props.modal && _react2.default.createElement("div", { className: "ui-dialog-overlay", style: { zIndex: 100 } })
+                    className: (0, _classnames2.default)("ui-dialog-container", { "": this.props.modal }) },
+                dialog,
+                this.props.modal && _react2.default.createElement("div", { className: "ui-dialog-overlay" })
             );
@@ -224,4 +225,4 @@ }
     hasCloseIcon: _propTypes2.default.bool,
-    hasMinimizeIcon: _propTypes2.default.bool,
-    hasMaximizeIcon: _propTypes2.default.bool,
+    allowMinimize: _propTypes2.default.bool,
+    allowMaximize: _propTypes2.default.bool,
     isResizable: _propTypes2.default.bool,
@@ -228,0 +229,0 @@ title: _propTypes2.default.string,

package.json

@@ -6,3 +6,3 @@ {
   "user": "mohitgupta8888",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "scripts": {
@@ -73,9 +73,9 @@ "prepublish": "bash .scripts/prepublish.sh",
     "react",
-    "dialog",
-    "modal",
-    "modal-dialog",
-    "dialog-modal",
-    "popup",
-    "dialog-popup",
-    "react-popup",
+    "datepicker",
+    "calendar",
+    "input-datepicker",
+    "input-calendar",
+    "react-input-calendar",
+    "react-calendar",
+    "react-datepicker",
     "react-component"
@@ -82,0 +82,0 @@ ],

README.md

@@ -18,3 +18,3 @@ # React Dialog
 
-http://mohitgupta8888.github.io/react-dialog-modal
+[http://mohitgupta8888.github.io/react-dialog-modal](https://mohitgupta8888.github.io/react-dialog/?selectedKind=React%20Dialog&selectedStory=basic&full=0&down=0&left=1&panelRight=0)
 
@@ -25,15 +25,38 @@ ## Usage
 import Dialog from 'react-dialog-modal'
-<Dialog
-    title="Dialog Title"
-    modal={true}
-    onClose={this.handleClose}
-    buttons={
-        [{
-            text: "Close",
-            onClick: () => this.handleClose()
-        }]
-    }>
-    <h1>Dialog Content</h1>
-    <p>More Content. Anything goes here</p>
-</Dialog>
+class Example extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            isDialogOpen: false
+        }
+    }
+
+    openDialog = () => this.setState({ isDialogOpen: true })
+
+    handleClose = () => this.setState({ isDialogOpen: false })
+
+    render() {
+        return (
+            <div className="container">
+                <button type="button" onClick={this.openDialog}>Open Dialog</button>
+                {
+                    this.state.isDialogOpen &&
+                    <Dialog
+                        title="Dialog Title"
+                        modal={true}
+                        onClose={this.handleClose}
+                        buttons={
+                            [{
+                                text: "Close",
+                                onClick: () => this.handleClose()
+                            }]
+                        }>
+                        <h1>Dialog Content</h1>
+                        <p>More Content. Anything goes here</p>
+                    </Dialog>
+                }
+            </div>
+        );
+    }
+}
 ```
@@ -43,2 +66,14 @@
 
+#### props.height
+
+ - `Number`
+ - default: "auto"
+ - Whether overlay is added to dialog or not
+
+#### props.width
+
+ - `Number`
+ - default: false
+ - Whether overlay is added to dialog or not
+
 #### props.modal
@@ -50,2 +85,14 @@
 
+#### props.isDraggable
+
+ - `Boolean`
+ - default: false
+ - Whether dialog is draggable
+
+#### props.isResizable
+
+ - `Boolean`
+ - default: false
+ - Whether dialog is resizable
+
 #### props.title
@@ -52,0 +99,0 @@

No alert changes

Improved metrics

Total package byte prevSize

34862

increased by3.91%

Number of lines in readme file

116

increased by68.12%

No dependency changes