react-slide-out - npm Package Compare versions

Comparing version 0.0.8 to 0.1.0

lib/index.jsx

@@ -7,2 +7,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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -35,3 +37,3 @@
         _this.onAnimationEnd = function (e) {
-            if (e.animationName === 'slideOut') {
+            if (e.animationName === 'slideOut--right' || e.animationName === 'slideOut--left') {
                 _this.setState({ isOpen: false });
@@ -43,3 +45,3 @@ }
             var className = e.target.className;
-            if (className.includes('js-slideWrapper') && _this.props.onOutsideClick) {
+            if (className.includes('js-slideWrapper') && _this.props.onOutsideClick && !_this.props.foldMode) {
                 _this.props.onOutsideClick();
@@ -52,2 +54,3 @@ }
         var verticalOffset = offset ? (offset.top ? offset.top : 0) + (offset.bottom ? offset.bottom : 0) : 0;
+
         if (!_this.props.footer && !_this.props.title && !_this.props.header) {
@@ -60,4 +63,5 @@ contentStyle = { height: 'calc(100vh - ' + verticalOffset + 'px)' };
         }
+
         _this.state = {
-            isOpen: !!props.isOpen,
+            isOpen: _this.props.foldMode ? true : !!props.isOpen,
             wrapperClass: 'SlideWrapper--open',
@@ -108,3 +112,20 @@ sliderClass: 'SlideModal--open',
         value: function render() {
-            return this.state.isOpen ? _react2.default.createElement(
+            var offsetStyle = this.props.verticalOffset ? {
+                top: this.props.verticalOffset.top,
+                bottom: this.props.verticalOffset.bottom
+            } : {};
+
+            var foldStyle = this.props.foldMode && this.props.isFolded ? {
+                width: this.props.foldWidth,
+                minWidth: "auto"
+            } : {};
+
+            var foldOverlayStyles = this.props.foldMode ? {
+                zIndex: "0",
+                position: "static"
+            } : {};
+
+            var sliderDirectionClassName = this.props.leftToRight ? "SlideModal SlideModal--left " : "SlideModal SlideModal--right ";
+
+            return this.state.isOpen || this.props.foldMode ? _react2.default.createElement(
                 'div',
@@ -115,14 +136,8 @@ {
                     onClick: this.onWrapperClick,
-                    style: this.props.verticalOffset ? {
-                        top: this.props.verticalOffset.top,
-                        bottom: this.props.verticalOffset.bottom
-                    } : {}
+                    style: _extends({}, offsetStyle, foldOverlayStyles)
                 },
                 _react2.default.createElement(
                     'div',
-                    { className: 'SlideModal ' + this.state.sliderClass,
-                        style: this.props.verticalOffset ? {
-                            top: this.props.verticalOffset.top,
-                            bottom: this.props.verticalOffset.bottom
-                        } : {} },
+                    { className: sliderDirectionClassName + this.state.sliderClass,
+                        style: _extends({}, offsetStyle, foldStyle) },
                     _react2.default.createElement(
@@ -171,4 +186,10 @@ 'div',
         bottom: _propTypes2.default.number
-    })
+    }),
+    foldWidth: _propTypes2.default.string,
+    foldMode: _propTypes2.default.bool,
+    leftToRight: _propTypes2.default.bool
 };
+SlideModal.defaultProps = {
+    foldWidth: '140px'
+};
 exports.default = SlideModal;

package.json

 {
   "name": "react-slide-out",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "keywords": [
@@ -5,0 +5,0 @@ "react",

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

16045

increased by10.51%

Lines of code

295

increased by19.43%

No dependency changes