react-slide-out - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/index.jsx

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
@@ -26,139 +26,144 @@
 var SlideModal = function (_Component) {
-	_inherits(SlideModal, _Component);
+    _inherits(SlideModal, _Component);
 
-	function SlideModal(props) {
-		_classCallCheck(this, SlideModal);
+    function SlideModal(props) {
+        _classCallCheck(this, SlideModal);
 
-		var _this = _possibleConstructorReturn(this, (SlideModal.__proto__ || Object.getPrototypeOf(SlideModal)).call(this, props));
+        var _this = _possibleConstructorReturn(this, (SlideModal.__proto__ || Object.getPrototypeOf(SlideModal)).call(this, props));
 
-		_this.onAnimationEnd = function (e) {
-			if (e.animationName === 'slideOut') {
-				_this.setState({ isOpen: false });
-			}
-		};
+        _this.onAnimationEnd = function (e) {
+            if (e.animationName === 'slideOut') {
+                _this.setState({ isOpen: false });
+            }
+        };
 
-		_this.onWrapperClick = function (e) {
-			var className = e.target.className;
-			if (className.includes('js-slideWrapper') && _this.props.onOutsideClick) {
-				_this.props.onOutsideClick();
-			}
-		};
+        _this.onWrapperClick = function (e) {
+            var className = e.target.className;
+            if (className.includes('js-slideWrapper') && _this.props.onOutsideClick) {
+                _this.props.onOutsideClick();
+            }
+        };
 
-		var contentStyle = void 0;
-		var offset = props.verticalOffset;
-		var verticalOffset = offset ? (offset.top ? offset.top : 0) + (offset.bottom ? offset.bottom : 0) : 0;
-		if (!_this.props.footer && !_this.props.title) {
-			contentStyle = { height: 'calc(100vh - ' + verticalOffset + 'px)' };
-		} else if (!_this.props.footer || !_this.props.title) {
-			contentStyle = { height: 'calc(100vh - ' + (55 + verticalOffset) + 'px)' };
-		} else {
-			contentStyle = { height: 'calc(100vh - ' + (110 + verticalOffset) + 'px)' };
-		}
-		_this.state = {
-			isOpen: !!props.isOpen,
-			wrapperClass: 'SlideWrapper--open',
-			sliderClass: 'SlideModal--open',
-			contentStyle: contentStyle
-		};
-		return _this;
-	}
+        var contentStyle = void 0;
+        var offset = props.verticalOffset;
+        var verticalOffset = offset ? (offset.top ? offset.top : 0) + (offset.bottom ? offset.bottom : 0) : 0;
+        console.log(verticalOffset);
+        if (!_this.props.footer && !_this.props.title && !_this.props.header) {
+            contentStyle = { height: 'calc(100vh - ' + verticalOffset + 'px)' };
+        } else if (!_this.props.footer || !_this.props.title && !_this.props.header) {
+            contentStyle = { height: 'calc(100vh - ' + (65 + verticalOffset) + 'px)' };
+        } else {
+            contentStyle = { height: 'calc(100vh - ' + (130 + verticalOffset) + 'px)' };
+        }
+        console.log(contentStyle);
+        _this.state = {
+            isOpen: !!props.isOpen,
+            wrapperClass: 'SlideWrapper--open',
+            sliderClass: 'SlideModal--open',
+            contentStyle: contentStyle
+        };
+        return _this;
+    }
 
-	_createClass(SlideModal, [{
-		key: 'componentWillMount',
-		value: function componentWillMount() {
-			this.bodyElement = document.getElementsByTagName('body')[0];
-		}
-	}, {
-		key: 'componentDidUpdate',
-		value: function componentDidUpdate(prevProps, prevState) {
-			if (!prevState.isOpen && this.state.isOpen) {
-				this.bodyElement.classList.add('h-overflowHidden');
-			} else if (prevState.isOpen && !this.state.isOpen) {
-				this.bodyElement.classList.remove('h-overflowHidden');
-			}
-		}
-	}, {
-		key: 'componentWillReceiveProps',
-		value: function componentWillReceiveProps(nextProps) {
-			if (this.props.isOpen && !nextProps.isOpen) {
-				this.setState({
-					sliderClass: 'SlideModal--close',
-					wrapperClass: 'SlideWrapper--close'
-				});
-			} else if (!this.props.isOpen && nextProps.isOpen) {
-				this.setState({
-					isOpen: true,
-					wrapperClass: 'SlideWrapper--open',
-					sliderClass: 'SlideModal--open'
-				});
-			}
-		}
-	}, {
-		key: 'componentWillUnmount',
-		value: function componentWillUnmount() {
-			this.bodyElement.classList.remove('h-overflowHidden');
-		}
-	}, {
-		key: 'render',
-		value: function render() {
-			return this.state.isOpen ? _react2.default.createElement(
-				'div',
-				{
-					onAnimationEnd: this.onAnimationEnd,
-					className: 'SlideWrapper js-slideWrapper' + ' ' + this.state.wrapperClass,
-					onClick: this.onWrapperClick,
-					style: this.props.verticalOffset ? {
-						top: this.props.verticalOffset.top,
-						bottom: this.props.verticalOffset.bottom
-					} : {}
-				},
-				_react2.default.createElement(
-					'div',
-					{ className: 'SlideModal ' + this.state.sliderClass,
-						style: this.props.verticalOffset ? {
-							top: this.props.verticalOffset.top,
-							bottom: this.props.verticalOffset.bottom
-						} : {} },
-					_react2.default.createElement(
-						'div',
-						{ className: 'h-displayFlex h-flexCol h-flexSpaceBetween' },
-						this.props.title && _react2.default.createElement(
-							'div',
-							{ className: 'SlideModal__header js-slideModalHeader' },
-							_react2.default.createElement(
-								'h4',
-								{ className: 'SlideModal__title' },
-								this.props.title
-							)
-						),
-						_react2.default.createElement(
-							'div',
-							{ className: 'h-overflowAuto ' + this.state.contentClass, style: this.state.contentStyle },
-							this.props.children
-						),
-						this.props.footer && _react2.default.createElement(
-							'div',
-							{ className: 'SlideModal__header SlideModal__footer' },
-							this.props.footer
-						)
-					)
-				)
-			) : null;
-		}
-	}]);
+    _createClass(SlideModal, [{
+        key: 'componentWillMount',
+        value: function componentWillMount() {
+            this.bodyElement = document.getElementsByTagName('body')[0];
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+            if (!prevState.isOpen && this.state.isOpen) {
+                this.bodyElement.classList.add('h-overflowHidden');
+            } else if (prevState.isOpen && !this.state.isOpen) {
+                this.bodyElement.classList.remove('h-overflowHidden');
+            }
+        }
+    }, {
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if (this.props.isOpen && !nextProps.isOpen) {
+                this.setState({
+                    sliderClass: 'SlideModal--close',
+                    wrapperClass: 'SlideWrapper--close'
+                });
+            } else if (!this.props.isOpen && nextProps.isOpen) {
+                this.setState({
+                    isOpen: true,
+                    wrapperClass: 'SlideWrapper--open',
+                    sliderClass: 'SlideModal--open'
+                });
+            }
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            this.bodyElement.classList.remove('h-overflowHidden');
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            return this.state.isOpen ? _react2.default.createElement(
+                'div',
+                {
+                    onAnimationEnd: this.onAnimationEnd,
+                    className: 'SlideWrapper js-slideWrapper' + ' ' + this.state.wrapperClass,
+                    onClick: this.onWrapperClick,
+                    style: this.props.verticalOffset ? {
+                        top: this.props.verticalOffset.top,
+                        bottom: this.props.verticalOffset.bottom
+                    } : {}
+                },
+                _react2.default.createElement(
+                    'div',
+                    { className: 'SlideModal ' + this.state.sliderClass,
+                        style: this.props.verticalOffset ? {
+                            top: this.props.verticalOffset.top,
+                            bottom: this.props.verticalOffset.bottom
+                        } : {} },
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'h-displayFlex h-flexCol h-flexSpaceBetween' },
+                        this.props.title || this.props.header ? _react2.default.createElement(
+                            'div',
+                            { className: 'SlideModal__header js-slideModalHeader' },
+                            this.props.title && _react2.default.createElement(
+                                'h4',
+                                { className: 'SlideModal__title' },
+                                this.props.title
+                            ),
+                            this.props.header
+                        ) : null,
+                        _react2.default.createElement(
+                            'div',
+                            { className: 'h-overflowAuto ' + this.state.contentClass,
+                                style: this.state.contentStyle },
+                            this.props.children
+                        ),
+                        this.props.footer && _react2.default.createElement(
+                            'div',
+                            { className: 'SlideModal__header SlideModal__footer' },
+                            this.props.footer
+                        )
+                    )
+                )
+            ) : null;
+        }
+    }]);
 
-	return SlideModal;
+    return SlideModal;
 }(_react.Component);
 
 SlideModal.propTypes = {
-	isOpen: _propTypes2.default.bool,
-	onOutsideClick: _propTypes2.default.func,
-	title: _propTypes2.default.string,
-	footer: _propTypes2.default.node,
-	children: _propTypes2.default.node,
-	verticalOffset: _propTypes2.default.shape({
-		top: _propTypes2.default.number,
-		bottom: _propTypes2.default.number
-	})
+    isOpen: _propTypes2.default.bool,
+    onOutsideClick: _propTypes2.default.func,
+    title: _propTypes2.default.string,
+    footer: _propTypes2.default.node,
+    header: _propTypes2.default.node,
+    children: _propTypes2.default.node,
+    verticalOffset: _propTypes2.default.shape({
+        top: _propTypes2.default.number,
+        bottom: _propTypes2.default.number
+    })
 };
 exports.default = SlideModal;

package.json

 {
   "name": "react-slide-out",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

14564

increased by11.94%

Lines of code

249

increased by9.21%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes