@hixme/modal - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

lib/components/MrModal.js

@@ -54,5 +54,3 @@ 'use strict';
       contentCenter = _ref.contentCenter,
-      contentStart = _ref.contentStart,
       contentEnd = _ref.contentEnd,
-      top = _ref.top,
       middle = _ref.middle,
@@ -65,7 +63,11 @@ bottom = _ref.bottom,
       cancelLabel = _ref.cancelLabel,
+      cancelProcessing = _ref.cancelProcessing,
+      cancelSubmittingText = _ref.cancelSubmittingText,
       confirmHandler = _ref.confirmHandler,
       confirmLabel = _ref.confirmLabel,
+      confirmProcessing = _ref.confirmProcessing,
+      confirmSubmittingText = _ref.confirmSubmittingText,
       dialog = _ref.dialog,
       errorDialog = _ref.errorDialog,
-      restProps = (0, _objectWithoutProperties3.default)(_ref, ['backgroundColor', 'children', 'hideCloseButton', 'isOpen', 'defaultClose', 'style', 'title', 'zIndex', 'transparent', 'contentCenter', 'contentStart', 'contentEnd', 'top', 'middle', 'bottom', 'small', 'medium', 'large', 'cancelHandler', 'cancelLabel', 'confirmHandler', 'confirmLabel', 'dialog', 'errorDialog']);
+      restProps = (0, _objectWithoutProperties3.default)(_ref, ['backgroundColor', 'children', 'hideCloseButton', 'isOpen', 'defaultClose', 'style', 'title', 'zIndex', 'transparent', 'contentCenter', 'contentEnd', 'middle', 'bottom', 'small', 'medium', 'large', 'cancelHandler', 'cancelLabel', 'cancelProcessing', 'cancelSubmittingText', 'confirmHandler', 'confirmLabel', 'confirmProcessing', 'confirmSubmittingText', 'dialog', 'errorDialog']);
 
@@ -163,3 +165,3 @@ var getButtonGrid = function getButtonGrid() {
   var getAlign = function getAlign() {
-    if (middle) return { middle: 'xs' };else if (bottom) return { bottom: 'xs' };else if (top) return { top: 'xs' };
+    if (middle) return { middle: 'xs' };else if (bottom) return { bottom: 'xs' };
     return { top: 'xs' };
@@ -169,3 +171,3 @@ };
   var getContentAlign = function getContentAlign() {
-    if (contentCenter) return { center: 'xs' };else if (contentEnd) return { end: 'xs' };else if (contentStart) return { start: 'xs' };
+    if (contentCenter) return { center: 'xs' };else if (contentEnd) return { end: 'xs' };
     return { start: 'xs' };
@@ -185,6 +187,6 @@ };
       _reactFlexboxGrid.Grid,
-      { fluid: true, style: { height: '100%', padding: '0' } },
+      { fluid: true, style: { height: '100%', padding: '0', position: 'relative' } },
       !hideCloseButton && _react2.default.createElement(
         _reactFlexboxGrid.Row,
-        { end: 'xs', style: { margin: '0', width: '100%' } },
+        { end: 'xs', style: { margin: '0', width: '100%', position: 'absolute', top: '0', right: '0' } },
         _react2.default.createElement(_CloseButton2.default, { onClick: cancelHandler || defaultClose })
@@ -194,9 +196,9 @@ ),
         _reactFlexboxGrid.Row,
-        (0, _extends3.default)({ center: 'xs' }, getAlign(), { style: { height: '100%', marginTop: middle || bottom ? '-50px' : '0' } }),
+        (0, _extends3.default)({ center: 'xs' }, getAlign(), { style: { height: '100%' } }),
         _react2.default.createElement(
           _reactFlexboxGrid.Col,
-          { xs: 12 },
+          { xs: 12, style: { marginTop: middle || bottom ? '-50px' : '0' } },
           title && _react2.default.createElement(
             _reactFlexboxGrid.Row,
-            { center: 'xs' },
+            { center: 'xs', style: { marginTop: '20px' } },
             _react2.default.createElement(
@@ -229,3 +231,9 @@ _reactFlexboxGrid.Col,
                 _button2.default,
-                { primary: true, block: true, onClick: confirmHandler },
+                {
+                  primary: true,
+                  block: true,
+                  onClick: confirmHandler,
+                  submitting: confirmProcessing,
+                  submittingText: confirmSubmittingText
+                },
                 confirmLabel
@@ -239,3 +247,9 @@ )
                 _button2.default,
-                { secondary: true, block: true, onClick: cancelHandler || defaultClose },
+                {
+                  secondary: true,
+                  block: true,
+                  onClick: cancelHandler || defaultClose,
+                  submitting: cancelProcessing,
+                  submittingText: cancelSubmittingText
+                },
                 cancelLabel
@@ -253,3 +267,9 @@ )
                 _button2.default,
-                { red: true, block: true, onClick: confirmHandler },
+                {
+                  red: true,
+                  block: true,
+                  onClick: confirmHandler,
+                  submitting: confirmProcessing,
+                  submittingText: confirmSubmittingText
+                },
                 confirmLabel
@@ -263,3 +283,9 @@ )
                 _button2.default,
-                { secondary: true, block: true, onClick: cancelHandler || defaultClose },
+                {
+                  secondary: true,
+                  block: true,
+                  onClick: cancelHandler || defaultClose,
+                  submitting: cancelProcessing,
+                  submittingText: cancelSubmittingText
+                },
                 cancelLabel
@@ -292,7 +318,5 @@ )
   contentCenter: _propTypes2.default.bool,
-  contentStart: _propTypes2.default.bool,
   contentEnd: _propTypes2.default.bool,
 
   // Vertical Align
-  top: _propTypes2.default.bool,
   middle: _propTypes2.default.bool,
@@ -307,8 +331,12 @@ bottom: _propTypes2.default.bool,
   // Dialog presets
-  dialog: _propTypes2.default.bool,
-  errorDialog: _propTypes2.default.bool,
+  cancelHandler: _propTypes2.default.func,
+  cancelLabel: _propTypes2.default.string,
+  cancelProcessing: _propTypes2.default.bool,
+  cancelSubmittingText: _propTypes2.default.string,
   confirmHandler: _propTypes2.default.func,
-  cancelHandler: _propTypes2.default.func,
   confirmLabel: _propTypes2.default.string,
-  cancelLabel: _propTypes2.default.string
+  confirmProcessing: _propTypes2.default.bool,
+  confirmSubmittingText: _propTypes2.default.string,
+  dialog: _propTypes2.default.bool,
+  errorDialog: _propTypes2.default.bool
 };
@@ -332,7 +360,5 @@
   contentCenter: false,
-  contentStart: false,
   contentEnd: false,
 
   // Vertical Align
-  top: false,
   middle: false,
@@ -347,10 +373,14 @@ bottom: false,
   // Dialog presets
-  dialog: false,
-  errorDialog: false,
+  cancelHandler: undefined,
+  cancelLabel: 'Cancel',
+  cancelProcessing: false,
+  cancelSubmittingText: null,
   confirmHandler: function confirmHandler() {
     return console.log('Confirm click');
   }, // eslint-disable-line
-  cancelHandler: undefined,
   confirmLabel: 'Ok',
-  cancelLabel: 'Cancel'
+  confirmProcessing: false,
+  confirmSubmittingText: null,
+  dialog: false,
+  errorDialog: false
 };
@@ -357,0 +387,0 @@

package.json

 {
   "name": "@hixme/modal",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Hixme Modal",
@@ -32,3 +32,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@hixme-ui/button": "^1.8.0",
+    "@hixme-ui/button": "^1.9.1",
     "@hixme-ui/container": "^1.8.0",
@@ -35,0 +35,0 @@ "@hixme-ui/title": "^1.8.0",

src/components/MrModal.js

@@ -25,7 +25,5 @@ import React from 'react'
   contentCenter,
-  contentStart,
   contentEnd,
 
   // Vertical align
-  top,
   middle,
@@ -42,4 +40,8 @@ bottom,
   cancelLabel,
+  cancelProcessing,
+  cancelSubmittingText,
   confirmHandler,
   confirmLabel,
+  confirmProcessing,
+  confirmSubmittingText,
   dialog,
@@ -149,3 +151,2 @@ errorDialog,
     else if (bottom) return { bottom: 'xs' }
-    else if (top) return { top: 'xs' }
     return { top: 'xs' }
@@ -157,3 +158,2 @@ }
     else if (contentEnd) return { end: 'xs' }
-    else if (contentStart) return { start: 'xs' }
     return { start: 'xs' }
@@ -171,12 +171,12 @@ }
     >
-      <Grid fluid style={{ height: '100%', padding: '0' }}>
+      <Grid fluid style={{ height: '100%', padding: '0', position: 'relative' }}>
         {!hideCloseButton &&
-          <Row end='xs' style={{ margin: '0', width: '100%' }}>
+          <Row end='xs' style={{ margin: '0', width: '100%', position: 'absolute', top: '0', right: '0' }}>
             <CloseButton onClick={cancelHandler || defaultClose} />
           </Row>
         }
-        <Row center='xs' {...getAlign()} style={{ height: '100%', marginTop: (middle || bottom) ? '-50px' : '0' }}>
-          <Col xs={12}>
+        <Row center='xs' {...getAlign()} style={{ height: '100%' }}>
+          <Col xs={12} style={{ marginTop: (middle || bottom) ? '-50px' : '0' }}>
             {title &&
-              <Row center='xs'>
+              <Row center='xs' style={{ marginTop: '20px' }}>
                 <Col xs>
@@ -195,6 +195,22 @@ <Title small>{title}</Title>
                 <Col {...getButtonGrid()} style={{ marginBottom: '10px' }}>
-                  <Button primary block onClick={confirmHandler}>{confirmLabel}</Button>
+                  <Button
+                    primary
+                    block
+                    onClick={confirmHandler}
+                    submitting={confirmProcessing}
+                    submittingText={confirmSubmittingText}
+                  >
+                    {confirmLabel}
+                  </Button>
                 </Col>
                 <Col {...getButtonGrid()}>
-                  <Button secondary block onClick={cancelHandler || defaultClose}>{cancelLabel}</Button>
+                  <Button
+                    secondary
+                    block
+                    onClick={cancelHandler || defaultClose}
+                    submitting={cancelProcessing}
+                    submittingText={cancelSubmittingText}
+                  >
+                    {cancelLabel}
+                  </Button>
                 </Col>
@@ -206,6 +222,22 @@ </Row>
                 <Col {...getButtonGrid()} style={{ marginBottom: '10px' }}>
-                  <Button red block onClick={confirmHandler}>{confirmLabel}</Button>
+                  <Button
+                    red
+                    block
+                    onClick={confirmHandler}
+                    submitting={confirmProcessing}
+                    submittingText={confirmSubmittingText}
+                  >
+                    {confirmLabel}
+                  </Button>
                 </Col>
                 <Col {...getButtonGrid()}>
-                  <Button secondary block onClick={cancelHandler || defaultClose}>{cancelLabel}</Button>
+                  <Button
+                    secondary
+                    block
+                    onClick={cancelHandler || defaultClose}
+                    submitting={cancelProcessing}
+                    submittingText={cancelSubmittingText}
+                  >
+                    {cancelLabel}
+                  </Button>
                 </Col>
@@ -235,7 +267,5 @@ </Row>
   contentCenter: PropTypes.bool,
-  contentStart: PropTypes.bool,
   contentEnd: PropTypes.bool,
 
   // Vertical Align
-  top: PropTypes.bool,
   middle: PropTypes.bool,
@@ -250,8 +280,12 @@ bottom: PropTypes.bool,
   // Dialog presets
+  cancelHandler: PropTypes.func,
+  cancelLabel: PropTypes.string,
+  cancelProcessing: PropTypes.bool,
+  cancelSubmittingText: PropTypes.string,
+  confirmHandler: PropTypes.func,
+  confirmLabel: PropTypes.string,
+  confirmProcessing: PropTypes.bool,
+  confirmSubmittingText: PropTypes.string,
   dialog: PropTypes.bool,
   errorDialog: PropTypes.bool,
-  confirmHandler: PropTypes.func,
-  cancelHandler: PropTypes.func,
-  confirmLabel: PropTypes.string,
-  cancelLabel: PropTypes.string,
 }
@@ -273,7 +307,5 @@
   contentCenter: false,
-  contentStart: false,
   contentEnd: false,
 
   // Vertical Align
-  top: false,
   middle: false,
@@ -288,8 +320,12 @@ bottom: false,
   // Dialog presets
+  cancelHandler: undefined,
+  cancelLabel: 'Cancel',
+  cancelProcessing: false,
+  cancelSubmittingText: null,
+  confirmHandler: () => console.log('Confirm click'), // eslint-disable-line
+  confirmLabel: 'Ok',
+  confirmProcessing: false,
+  confirmSubmittingText: null,
   dialog: false,
   errorDialog: false,
-  confirmHandler: () => console.log('Confirm click'), // eslint-disable-line
-  cancelHandler: undefined,
-  confirmLabel: 'Ok',
-  cancelLabel: 'Cancel',
 }
@@ -296,0 +332,0 @@

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

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

66398

increased by6.29%

Lines of code

1104

increased by6.36%

Dependency changes

• Updated@hixme-ui/button@^1.9.1