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

Comparing version 1.0.0 to 1.1.0

lib/OffCanvas.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _dom = require('@fenderdigital/dom');
+
+var _dom2 = _interopRequireDefault(_dom);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +34,9 @@
 
+    _this.getPlacement = function (placement) {
+      if (placement === 'right') {
+        return '100%';
+      }
+      return '-100%';
+    };
+
     _this.handleClick = function () {
@@ -75,2 +86,6 @@ _this.toggleState();
     if (isVisible !== prevIsVisible) this.toggleState();
+    if ((0, _dom2.default)()) {
+      var body = document.querySelector('html');
+      body.className = isVisible ? 'overflow-hidden' : '';
+    }
   };
@@ -93,2 +108,3 @@
   OffCanvas.prototype.render = function render() {
+    var placement = this.props.placement;
     var isVisible = this.state.isVisible;
@@ -101,3 +117,3 @@
       {
-        className: 'off-canvas ' + style,
+        className: 'off-canvas ' + style + ' ' + (placement === 'right' ? 'flex-ns justify-end-ns' : ''),
         'data-id': 'off-canvas',
@@ -107,3 +123,3 @@ style: {
           transition: transition,
-          transform: 'translate3D(' + (isVisible ? '0' : '-100%') + ', 0, 0)',
+          transform: 'translate3D(' + (isVisible ? '0' : this.getPlacement(placement)) + ', 0, 0)',
           WebkitOverflowScrolling: 'touch'
@@ -123,2 +139,3 @@ }
   isVisible: _propTypes2.default.bool,
+  placement: _propTypes2.default.string,
   onCallback: _propTypes2.default.func,
@@ -131,2 +148,3 @@ opacity: _propTypes2.default.number
   isVisible: false,
+  placement: 'left',
   onCallback: function onCallback() {},
@@ -133,0 +151,0 @@ opacity: 40

package.json

@@ -30,4 +30,6 @@ {
   },
-  "version": "1.0.0",
-  "dependencies": {}
+  "version": "1.1.0",
+  "dependencies": {
+    "@fenderdigital/dom": "^1.0.6"
+  }
 }

src/__tests__/OffCanvas.test.js

@@ -29,2 +29,18 @@ import React from 'react';
   });
+  describe('getPlacement', () => {
+    it('should return the x position when placement is right', () => {
+      expect(
+        component()
+          .instance()
+          .getPlacement('right'),
+      ).toEqual('100%');
+    });
+    it('should return the x position when placement is left', () => {
+      expect(
+        component()
+          .instance()
+          .getPlacement('left'),
+      ).toEqual('-100%');
+    });
+  });
   describe('handleClick', () => {
@@ -31,0 +47,0 @@ it('should call toggle state on click', () => {

src/OffCanvas.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import isDomUsuable from '@fenderdigital/dom';
 
@@ -14,3 +15,13 @@ class OffCanvas extends React.Component {
     if (isVisible !== prevIsVisible) this.toggleState();
+    if (isDomUsuable()) {
+      const body = document.querySelector('html');
+      body.className = isVisible ? 'overflow-hidden' : '';
+    }
   }
+  getPlacement = placement => {
+    if (placement === 'right') {
+      return '100%';
+    }
+    return '-100%';
+  };
   handleClick = () => {
@@ -57,2 +68,3 @@ this.toggleState();
   render() {
+    const { placement } = this.props;
     const { isVisible } = this.state;
@@ -63,3 +75,5 @@ const style = 'fixed top-0 left-0 z-999 w-100 h-100 overflow-hidden';
       <div
-        className={`off-canvas ${style}`}
+        className={`off-canvas ${style} ${
+          placement === 'right' ? 'flex-ns justify-end-ns' : ''
+        }`}
         data-id="off-canvas"
@@ -69,3 +83,5 @@ style={{
           transition,
-          transform: `translate3D(${isVisible ? '0' : '-100%'}, 0, 0)`,
+          transform: `translate3D(${
+            isVisible ? '0' : this.getPlacement(placement)
+          }, 0, 0)`,
           WebkitOverflowScrolling: 'touch',
@@ -84,2 +100,3 @@ }}
   isVisible: PropTypes.bool,
+  placement: PropTypes.string,
   onCallback: PropTypes.func,
@@ -92,2 +109,3 @@ opacity: PropTypes.number,
   isVisible: false,
+  placement: 'left',
   onCallback: () => {},
@@ -94,0 +112,0 @@ opacity: 40,

No alert changes

Improved metrics

Total package byte prevSize

163464

3.38%

Lines of code

293

20.08%

Worsened metrics

Dependency count

5

25%

Dependency changes

• + Added

  @fenderdigital/dom@^1.0.6

• + Added

  @fenderdigital/dom@1.0.7
  (transitive)