react-aria-modal - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

 # Changelog
 
+## 2.0.1
+
+- Change vertical centering method to avoid occasional blurriness caused by translate.
+
 ## 2.0.0
@@ -4,0 +8,0 @@

demo/js/demo-three.jsx

@@ -52,2 +52,11 @@ var React = require('react');
             </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
           </div>
@@ -54,0 +63,0 @@ <footer className='modal-footer'>

lib/Modal.js

@@ -62,4 +62,5 @@ var React = require('react');
   render: function() {
+    var props = this.props;
     var underlayProps = {
-      className: this.props.underlayClass,
+      className: props.underlayClass,
       style: {
@@ -69,4 +70,4 @@ position: 'fixed',
         left: 0,
-        bottom: 0,
-        right: 0,
+        width: '100%',
+        height: '100%',
         zIndex: 1050,
@@ -76,10 +77,9 @@ overflowX: 'hidden',
         WebkitOverflowScrolling: 'touch',
+        textAlign: 'center',
       },
     };
-
-    if (this.props.underlayColor) {
-      underlayProps.style.background = this.props.underlayColor;
+    if (props.underlayColor) {
+      underlayProps.style.background = props.underlayColor;
     }
-
-    if (this.props.underlayClickExits) {
+    if (props.underlayClickExits) {
       underlayProps.style.cursor = 'pointer';
@@ -89,33 +89,36 @@ underlayProps.onClick = this.checkClick;
 
-    var transformValue = (this.props.verticallyCenter)
-      ? 'translate(-50%, -50%)'
-      : 'translateX(-50%)';
-    var topValue = (this.props.verticallyCenter)
-      ? '50%'
-      : '0';
-
-    var dialogProps = {
-      ref: 'dialog',
-      role: (this.props.alert) ? 'alertdialog' : 'dialog',
-      id: this.props.dialogId,
-      className: this.props.dialogClass,
+    var verticalCenterHelperProps = {
+      key: 'a',
       style: {
-        position: 'absolute',
-        left: '50%',
-        top: topValue,
-        margin: 'auto',
-        maxWidth: '100%',
-        WebkitTransform: transformValue,
-        transform: transformValue,
-        cursor: 'default',
+        display: 'inline-block',
+        height: '100%',
+        verticalAlign: 'middle',
       },
     };
 
-    if (this.props.titleId) {
-      dialogProps['aria-labelledby'] = this.props.titleId;
-    } else if (this.props.titleText) {
-      dialogProps['aria-label'] = this.props.titleText;
+    var dialogStyle = {
+      display: 'inline-block',
+      textAlign: 'left',
+      top: (props.verticallyCenter) ? '50%' : '0',
+      maxWidth: '100%',
+      cursor: 'default',
+    };
+    if (props.verticallyCenter) {
+      dialogStyle.verticalAlign = 'middle';
     }
 
-    if (this.props.focusDialog) {
+    var dialogProps = {
+      key: 'b',
+      ref: 'dialog',
+      role: (props.alert) ? 'alertdialog' : 'dialog',
+      id: props.dialogId,
+      className: props.dialogClass,
+      style: dialogStyle,
+    };
+    if (props.titleId) {
+      dialogProps['aria-labelledby'] = props.titleId;
+    } else if (props.titleText) {
+      dialogProps['aria-label'] = props.titleText;
+    }
+    if (props.focusDialog) {
       dialogProps.tabIndex = '-1';
@@ -125,12 +128,17 @@ dialogProps.style.outline = 0;
 
+    var childrenArray = [
+      React.DOM.div(dialogProps, props.children),
+    ];
+    if (props.verticallyCenter) {
+      childrenArray.unshift(React.DOM.div(verticalCenterHelperProps));
+    }
+
     return focusTrapFactory(
       {
-        initialFocus: (this.props.focusDialog)
+        initialFocus: (props.focusDialog)
           ? '#react-aria-modal-dialog'
-          : this.props.initialFocus,
+          : props.initialFocus,
         onDeactivate: this.deactivate,
       },
-      React.DOM.div(underlayProps,
-        React.DOM.div(dialogProps, this.props.children)
-      )
+      React.DOM.div(underlayProps, childrenArray)
     );
@@ -137,0 +145,0 @@ },

package.json

 {
   "name": "react-aria-modal",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -297,1 +297,9 @@ # react-aria-modal
 ```
+
+## Contributing & Development
+
+Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
+
+Lint with `npm run lint`.
+
+Test with `npm run test-dev`, which will open your browser. Look at the console log for TAP output.

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

38368

increased by11.81%

Number of package files

21

increased by5%

Lines of code

551

increased by4.16%

Number of lines in readme file

305

increased by2.69%

No dependency changes