@fenderdigital/react-off-canvas - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

lib/OffCanvas.js

@@ -5,2 +5,4 @@ 'use strict';
 
+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 _class, _temp, _initialiseProps;
@@ -28,3 +30,3 @@
 
-var DELAY = '.25s';
+var fixedStyles = 'fixed top-0 left-0 w-100 vh-100';
 
@@ -73,17 +75,11 @@ var OffCanvas = (_temp = _class = function (_React$Component) {
   OffCanvas.prototype.render = function render() {
-    var placement = this.props.placement;
-    var isVisible = this.state.isVisible;
-
-    var style = 'fixed top-0 left-0 z-999 w-100 h-100 overflow-hidden';
-    var transition = 'transform .25s ease ' + (!isVisible ? DELAY : '');
+    var style = 'fixed top-0 left-0';
     return _react2.default.createElement(
       'div',
       {
-        className: 'off-canvas ' + style + ' ' + (placement === 'right' ? 'flex-ns justify-end-ns' : ''),
+        className: 'off-canvas ' + style,
         'data-id': 'off-canvas',
         style: {
-          backfaceVisibility: 'hidden',
-          transition: transition,
-          transform: 'translate3D(' + (isVisible ? '0' : this.getPlacement(placement)) + ', 0, 0)',
-          WebkitOverflowScrolling: 'touch'
+          height: 0,
+          width: 0
         }
@@ -107,2 +103,18 @@ },
 
+  this.getInlineStyles = function (property) {
+    return {
+      transition: property ? property + ' .25s ease' : null,
+      backfaceVisibility: 'hidden',
+      transform: _this3.setTranslate(),
+      WebkitOverflowScrolling: 'touch'
+    };
+  };
+
+  this.setTranslate = function () {
+    var isVisible = _this3.state.isVisible;
+    var placement = _this3.props.placement;
+
+    return 'translate3D(' + (isVisible ? '0' : _this3.getPlacement(placement)) + ', 0, 0)';
+  };
+
   this.handleClick = function () {
@@ -116,4 +128,4 @@ _this3.toggleState();
 
-    var style = 'absolute top-0 left-0 z-0 w-100 vh-100 pointer bg-black-' + opacity;
-    var transition = 'opacity .25s ease ' + (isVisible ? DELAY : '');
+    var inlineStyles = _this3.getInlineStyles('opacity');
+    var style = fixedStyles + ' dn db-ns pointer bg-black-' + opacity;
     return _react2.default.createElement('div', {
@@ -124,3 +136,5 @@ className: (isVisible ? 'o-100' : 'o-0') + ' ' + style,
       role: 'dialog',
-      style: { transition: transition }
+      style: _extends({}, inlineStyles, {
+        zIndex: '998'
+      })
     });
@@ -130,4 +144,8 @@ };
   this.renderContent = function () {
-    var children = _this3.props.children;
+    var _props = _this3.props,
+        children = _props.children,
+        placement = _props.placement;
 
+    var inlineStyles = _this3.getInlineStyles('transform');
+    var style = fixedStyles + ' z-999 overflow-hidden';
     if (!children) return null;
@@ -137,9 +155,13 @@ return _react2.default.createElement(
       {
-        className: 'inline-flex-ns flex relative z-1 overflow-auto h-100',
-        'data-id': 'off-canvas-content',
-        style: {
-          WebkitOverflowScrolling: 'touch'
-        }
+        className: style + ' ' + (placement === 'right' ? 'flex-ns justify-end-ns' : '')
       },
-      children
+      _react2.default.createElement(
+        'div',
+        {
+          className: 'inline-flex-ns flex relative z-1 overflow-auto h-100',
+          'data-id': 'off-canvas-content',
+          style: _extends({}, inlineStyles)
+        },
+        children
+      )
     );
@@ -146,0 +168,0 @@ };

package.json

@@ -30,3 +30,3 @@ {
   },
-  "version": "1.3.1",
+  "version": "1.4.0",
   "dependencies": {
@@ -33,0 +33,0 @@ "@fenderdigital/dom": "^1.0.6"

src/__tests__/OffCanvas.test.js

@@ -45,2 +45,25 @@ import React from 'react';
   });
+  describe('getInlineStyles', () => {
+    it('should return an inline styles object', () => {
+      expect(
+        component()
+          .instance()
+          .getInlineStyles('opacity'),
+      ).toEqual({
+        transition: 'opacity .25s ease',
+        backfaceVisibility: 'hidden',
+        transform: 'translate3D(0, 0, 0)',
+        WebkitOverflowScrolling: 'touch',
+      });
+    });
+  });
+  describe('setTranslate', () => {
+    it('should set the xPos for translate3D', () => {
+      expect(
+        component('child', true)
+          .instance()
+          .setTranslate(),
+      ).toEqual('translate3D(0, 0, 0)');
+    });
+  });
   describe('handleClick', () => {
@@ -47,0 +70,0 @@ it('should call toggle state on click', () => {

src/OffCanvas.js

@@ -5,3 +5,3 @@ import React from 'react';
 
-const DELAY = '.25s';
+const fixedStyles = 'fixed top-0 left-0 w-100 vh-100';
 
@@ -25,2 +25,17 @@ class OffCanvas extends React.Component {
   };
+  getInlineStyles = property => {
+    return {
+      transition: property ? `${property} .25s ease` : null,
+      backfaceVisibility: 'hidden',
+      transform: this.setTranslate(),
+      WebkitOverflowScrolling: 'touch',
+    };
+  };
+  setTranslate = () => {
+    const { isVisible } = this.state;
+    const { placement } = this.props;
+    return `translate3D(${
+      isVisible ? '0' : this.getPlacement(placement)
+    }, 0, 0)`;
+  };
   handleClick = () => {
@@ -32,4 +47,4 @@ this.toggleState();
     const { opacity } = this.props;
-    const style = `absolute top-0 left-0 z-0 w-100 vh-100 pointer bg-black-${opacity}`;
-    const transition = `opacity .25s ease ${isVisible ? DELAY : ''}`;
+    const inlineStyles = this.getInlineStyles('opacity');
+    const style = `${fixedStyles} dn db-ns pointer bg-black-${opacity}`;
     return (
@@ -41,3 +56,6 @@ <div
         role="dialog"
-        style={{ transition }}
+        style={{
+          ...inlineStyles,
+          zIndex: '998',
+        }}
       />
@@ -47,13 +65,21 @@ );
   renderContent = () => {
-    const { children } = this.props;
+    const { children, placement } = this.props;
+    const inlineStyles = this.getInlineStyles('transform');
+    const style = `${fixedStyles} z-999 overflow-hidden`;
     if (!children) return null;
     return (
       <div
-        className="inline-flex-ns flex relative z-1 overflow-auto h-100"
-        data-id="off-canvas-content"
-        style={{
-          WebkitOverflowScrolling: 'touch',
-        }}
+        className={`${style} ${
+          placement === 'right' ? 'flex-ns justify-end-ns' : ''
+        }`}
       >
-        {children}
+        <div
+          className="inline-flex-ns flex relative z-1 overflow-auto h-100"
+          data-id="off-canvas-content"
+          style={{
+            ...inlineStyles,
+          }}
+        >
+          {children}
+        </div>
       </div>
@@ -77,19 +103,10 @@ );
   render() {
-    const { placement } = this.props;
-    const { isVisible } = this.state;
-    const style = 'fixed top-0 left-0 z-999 w-100 h-100 overflow-hidden';
-    const transition = `transform .25s ease ${!isVisible ? DELAY : ''}`;
+    const style = 'fixed top-0 left-0';
     return (
       <div
-        className={`off-canvas ${style} ${
-          placement === 'right' ? 'flex-ns justify-end-ns' : ''
-        }`}
+        className={`off-canvas ${style}`}
         data-id="off-canvas"
         style={{
-          backfaceVisibility: 'hidden',
-          transition,
-          transform: `translate3D(${
-            isVisible ? '0' : this.getPlacement(placement)
-          }, 0, 0)`,
-          WebkitOverflowScrolling: 'touch',
+          height: 0,
+          width: 0,
         }}
@@ -96,0 +113,0 @@ >

No alert changes

Improved metrics

Total package byte prevSize

202386

increased by20.93%

Lines of code

364

increased by19.34%

No dependency changes