react-page-slider - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

lib/react-page-slider.js

@@ -27,47 +27,101 @@ 'use strict';
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(PageSlider).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(PageSlider).call(this));
+
+    _this.renderCloseDiv = _this.renderCloseDiv.bind(_this);
+    return _this;
   }
 
   _createClass(PageSlider, [{
-    key: 'render',
-    value: function render() {
+    key: 'renderCloseDiv',
+    value: function renderCloseDiv() {
+      if (this.props.close) {
+        return _react2.default.createElement(
+          'a',
+          { href: '#', onClick: this.props.close, style: this.props.closeStyle },
+          this.props.closeText || 'Close'
+        );
+      }
+    }
+  }, {
+    key: 'calculateSlidingStyle',
+    value: function calculateSlidingStyle() {
+
+      var oneHundred = 110;
+      switch (this.props.slideFrom) {
+        case 'left':
+          oneHundred *= -1;
+        case 'right':
+          return { hidden: { marginLeft: oneHundred + '%', visibility: 'hidden' }, shown: { marginLeft: '0%', visibility: '' } };
+        case 'top':
+          oneHundred *= -1;
+        case 'bottom':
+        default:
+          return { hidden: { marginTop: oneHundred + '%', visibility: 'hidden' }, shown: { marginTop: '0%', visibility: '' } };
+      }
+    }
+  }, {
+    key: 'calculateOuterStyle',
+    value: function calculateOuterStyle() {
+
       var overlayStyle = {
         minWidth: '100%',
         minHeight: '100%',
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        marginTop: '150%',
+        overflowY: 'auto', //to be checked
+        overflowX: 'hidden', //to be checked    
         position: 'fixed',
         background: '#000',
         boxShadow: '0px 0px 0px 0px rgba(0,0,0,0.6)',
-        zIndex: '2',
-        WebkitTransition: 'all .8s ease-in-out',
-        MozTransition: 'all .8s ease-in-out',
-        OTransition: 'all .8s ease-in-out',
-        transition: 'all .8s ease-in-out',
+        WebkitTransition: 'all 1s ease-in-out',
+        MozTransition: 'all 1s ease-in-out',
+        OTransition: 'all 1s ease-in-out',
+        transition: 'all 1s ease-in-out',
         top: 0
       };
 
-      var topcornerStyle = {
-        position: 'absolute',
-        top: 10,
-        right: 10
+      var defaultStyle = {
+        backgroundColor: '#009cde',
+        zIndex: '2'
       };
 
-      var slideUp = {
-        marginTop: '0%',
-        backgroundColor: '#009cde'
+      var _ref = this.props.customStyle || defaultStyle;
+
+      var backgroundColor = _ref.backgroundColor;
+      var zIndex = _ref.zIndex;
+
+      var behaviour = this.calculateSlidingStyle();
+      var shownStyle = Object.assign({}, overlayStyle, behaviour.shown, { backgroundColor: backgroundColor, zIndex: zIndex });
+      var hiddenStyle = Object.assign({}, overlayStyle, behaviour.hidden, { backgroundColor: backgroundColor, zIndex: zIndex });
+
+      return this.props.show ? shownStyle : hiddenStyle;
+    }
+  }, {
+    key: 'calculateInnerStyle',
+    value: function calculateInnerStyle() {
+
+      var centered = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
       };
 
-      var style = this.props.show ? Object.assign({}, overlayStyle, slideUp) : overlayStyle;
+      return this.props.innerStyle || centered;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      //extract only styles that are needed
+      var outerStyle = this.calculateOuterStyle();
+      var innerStyle = this.calculateInnerStyle();
+      var closeDiv = this.renderCloseDiv();
 
       return _react2.default.createElement(
         'div',
-        { style: style },
+        { style: outerStyle },
+        closeDiv,
         _react2.default.createElement(
-          'a',
-          { href: '#', onClick: this.props.close, style: topcornerStyle },
-          'Close'
-        ),
-        this.props.children
+          'div',
+          { style: innerStyle },
+          this.props.children
+        )
       );
@@ -82,10 +136,20 @@ }
   close: _react.PropTypes.func,
-  show: _react.PropTypes.bool
+  closeStyle: _react.PropTypes.object,
+  closeText: _react.PropTypes.string,
+  customStyle: _react.PropTypes.object,
+  innerStyle: _react.PropTypes.object,
+  show: _react.PropTypes.bool.isRequired,
+  slideFrom: _react2.default.PropTypes.oneOf(['right', 'bottom', 'left', 'top'])
 };
 
 PageSlider.defaultProps = {
-  close: function close() {},
-  show: false
+  close: undefined,
+  closeStyle: undefined,
+  closeText: '',
+  customStyle: undefined,
+  innerStyle: undefined,
+  show: false,
+  slideFrom: 'bottom'
 };
 
 exports.default = PageSlider;

package.json

 {
   "name": "react-page-slider",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "To insert an overlay in a page for a customized experience",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # react-page-slider
 ### Demo
-![image](https://raw.githubusercontent.com/chunkiat82/react-page-slider/master/demo/demo.gif)
+![image](https://raw.githubusercontent.com/chunkiat82/react-page-slider/4bbe1020e61ec7a2e085735f44f7bffba38d3e71/demo/demo.gif)
 ### Quick Start
@@ -5,0 +5,0 @@ * npm install

No alert changes

Improved metrics

Total package byte prevSize

11540

22.98%

Lines of code

158

56.44%

No dependency changes