react-slideshow-image - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/components/slideshow/fade.js

@@ -45,8 +45,6 @@ 'use strict';
     };
-    _this.divsRef = [];
     _this.width = 0;
-    _this.height = 0;
     _this.timeout = null;
     _this.divsContainer = null;
-    _this.getImageDim = _this.getImageDim.bind(_this);
+    _this.setWidth = _this.setWidth.bind(_this);
     _this.resizeListener = _this.resizeListener.bind(_this);
@@ -72,4 +70,4 @@ _this.goto = _this.goto.bind(_this);
     value: function componentDidMount() {
-      this.width = document.querySelector('.react-slideshow-fade-wrapper').clientWidth;
       window.addEventListener('resize', this.resizeListener);
+      this.setWidth();
     }
@@ -84,6 +82,5 @@ }, {
   }, {
-    key: 'getImageDim',
-    value: function getImageDim() {
-      this.height = this.divsContainer.children[0].clientHeight;
-      this.divsContainer.style.height = this.height + 'px';
+    key: 'setWidth',
+    value: function setWidth() {
+      this.width = document.querySelector('.react-slideshow-fade-wrapper').clientWidth;
       this.applyStyle();
@@ -94,6 +91,3 @@ }
     value: function resizeListener() {
-      this.width = document.querySelector('.react-slideshow-fade-wrapper').clientWidth;
-      this.height = this.divsContainer.children[0].clientHeight;
-      this.divsContainer.style.height = this.height + 'px';
-      this.applyStyle();
+      this.setWidth();
     }
@@ -103,9 +97,11 @@ }, {
     value: function applyStyle() {
-      var _this3 = this;
-
-      this.divsRef.forEach(function (eachDiv, index) {
+      var fullwidth = this.width * this.props.children.length;
+      this.divsContainer.style.width = fullwidth + 'px';
+      for (var index = 0; index < this.divsContainer.children.length; index++) {
+        var eachDiv = this.divsContainer.children[index];
         if (eachDiv) {
-          eachDiv.style.width = _this3.width + 'px';
+          eachDiv.style.width = this.width + 'px';
+          eachDiv.style.left = index * -this.width + 'px';
         }
-      });
+      }
     }
@@ -117,3 +113,5 @@ }, {
 
-      this.fadeImages(parseInt(target.dataset.key));
+      if (target.dataset.key != this.state.index) {
+        this.fadeImages(parseInt(target.dataset.key));
+      }
     }
@@ -123,7 +121,7 @@ }, {
     value: function render() {
-      var _this4 = this;
+      var _this3 = this;
 
       var _props = this.props,
-          type = _props.type,
-          indicators = _props.indicators;
+          indicators = _props.indicators,
+          arrows = _props.arrows;
       var _state = this.state,
@@ -139,6 +137,6 @@ children = _state.children,
           { className: 'react-slideshow-container' },
-          _react2.default.createElement(
+          arrows && _react2.default.createElement(
             'div',
             { className: 'nav', onClick: function onClick() {
-                return _this4.fadeImages(index === 0 ? children.length - 1 : index - 1);
+                return _this3.fadeImages(index === 0 ? children.length - 1 : index - 1);
               } },
@@ -151,3 +149,3 @@ ' ',
             'div',
-            { className: 'react-slideshow-fade-wrapper ' + type },
+            { className: 'react-slideshow-fade-wrapper' },
             _react2.default.createElement(
@@ -158,3 +156,3 @@ 'div',
                 ref: function ref(wrap) {
-                  return _this4.divsContainer = wrap;
+                  return _this3.divsContainer = wrap;
                 }
@@ -167,6 +165,2 @@ },
                     style: { opacity: key === index ? '1' : '0' },
-                    ref: function ref(el) {
-                      _this4.divsRef.push(el);
-                    },
-                    onLoad: key === 0 ? _this4.getImageDim : null,
                     'data-index': key,
@@ -180,6 +174,6 @@ key: key
           ),
-          _react2.default.createElement(
+          arrows && _react2.default.createElement(
             'div',
             { className: 'nav', onClick: function onClick() {
-                return _this4.fadeImages((index + 1) % children.length);
+                return _this3.fadeImages((index + 1) % children.length);
               } },
@@ -199,3 +193,3 @@ ' ',
               className: index === key ? 'active' : '',
-              onClick: _this4.goto });
+              onClick: _this3.goto });
           })
@@ -208,3 +202,3 @@ )
     value: function fadeImages(newIndex) {
-      var _this5 = this;
+      var _this4 = this;
 
@@ -219,3 +213,3 @@ var _state2 = this.state,
       var animate = function animate() {
-        if (_this5.willUnmount) {
+        if (_this4.willUnmount) {
           TWEEN.default.removeAll();
@@ -231,16 +225,16 @@ return;
       var tween = new TWEEN.Tween(value).to({ opacity: 1 }, this.props.transitionDuration).onUpdate(function (value) {
-        _this5.divsContainer.children[newIndex].style.opacity = value.opacity;
-        _this5.divsContainer.children[index].style.opacity = 1 - value.opacity;
+        _this4.divsContainer.children[newIndex].style.opacity = value.opacity;
+        _this4.divsContainer.children[index].style.opacity = 1 - value.opacity;
       }).start();
 
       tween.onComplete(function () {
-        if (_this5.willUnmount) {
+        if (_this4.willUnmount) {
           return;
         }
-        _this5.setState({
+        _this4.setState({
           index: newIndex
         });
-        _this5.timeout = setTimeout(function () {
-          _this5.fadeImages((newIndex + 1) % children.length);
-        }, _this5.props.duration);
+        _this4.timeout = setTimeout(function () {
+          _this4.fadeImages((newIndex + 1) % children.length);
+        }, _this4.props.duration);
       });
@@ -256,3 +250,4 @@ }
   transitionDuration: 1000,
-  indicators: false
+  indicators: false,
+  arrows: true
 };
@@ -263,4 +258,5 @@
   transitionDuration: _propTypes2.default.number,
-  indicators: _propTypes2.default.bool
+  indicators: _propTypes2.default.bool,
+  arrows: _propTypes2.default.bool
 };
 exports.default = Fade;

lib/components/slideshow/slide.js

@@ -126,3 +126,4 @@ 'use strict';
           infinite = _props.infinite,
-          indicators = _props.indicators;
+          indicators = _props.indicators,
+          arrows = _props.arrows;
       var index = this.state.index;
@@ -144,3 +145,3 @@
           { className: 'react-slideshow-container' },
-          _react2.default.createElement(
+          arrows && _react2.default.createElement(
             'div',
@@ -186,3 +187,3 @@ { className: 'nav ' + (index <= 0 && !infinite ? 'disabled' : ''), 'data-type': 'prev', onClick: this.moveSlides },
           ),
-          _react2.default.createElement(
+          arrows && _react2.default.createElement(
             'div',
@@ -255,3 +256,4 @@ { className: 'nav ' + (index === children.length - 1 && !infinite ? 'disabled' : ''), 'data-type': 'next', onClick: this.moveSlides },
   infinite: false,
-  indicators: false
+  indicators: false,
+  arrows: true
 };
@@ -263,4 +265,5 @@
   infinite: _propTypes2.default.bool,
-  indicators: _propTypes2.default.bool
+  indicators: _propTypes2.default.bool,
+  arrows: _propTypes2.default.bool
 };
 exports.default = Slideshow;

lib/components/slideshow/zoom.js

@@ -45,8 +45,6 @@ 'use strict';
     };
-    _this.divRefs = [];
     _this.width = 0;
-    _this.height = 0;
     _this.timeout = null;
     _this.divsContainer = null;
-    _this.getImageDim = _this.getImageDim.bind(_this);
+    _this.setWidth = _this.setWidth.bind(_this);
     _this.resizeListener = _this.resizeListener.bind(_this);
@@ -72,4 +70,4 @@ _this.goto = _this.goto.bind(_this);
     value: function componentDidMount() {
-      this.width = document.querySelector('.react-slideshow-zoom-wrapper').clientWidth;
       window.addEventListener('resize', this.resizeListener);
+      this.setWidth();
     }
@@ -84,6 +82,5 @@ }, {
   }, {
-    key: 'getImageDim',
-    value: function getImageDim() {
-      this.height = this.divsContainer.children[0].clientHeight;
-      this.divsContainer.style.height = this.height + 'px';
+    key: 'setWidth',
+    value: function setWidth() {
+      this.width = document.querySelector('.react-slideshow-zoom-wrapper').clientWidth;
       this.applyStyle();
@@ -94,6 +91,3 @@ }
     value: function resizeListener() {
-      this.width = document.querySelector('.react-slideshow-zoom-wrapper').clientWidth;
-      this.height = this.divsContainer.children[0].clientHeight;
-      this.divsContainer.style.height = this.height + 'px';
-      this.applyStyle();
+      this.setWidth();
     }
@@ -103,10 +97,11 @@ }, {
     value: function applyStyle() {
-      var _this3 = this;
-
-      this.divRefs.forEach(function (eachDiv, index) {
+      var fullwidth = this.width * this.props.children.length;
+      this.divsContainer.style.width = fullwidth + 'px';
+      for (var index = 0; index < this.divsContainer.children.length; index++) {
+        var eachDiv = this.divsContainer.children[index];
         if (eachDiv) {
-          eachDiv.style.width = _this3.width + 'px';
-          eachDiv.style.height = _this3.height + 'px';
+          eachDiv.style.width = this.width + 'px';
+          eachDiv.style.left = index * -this.width + 'px';
         }
-      });
+      }
     }
@@ -118,3 +113,5 @@ }, {
 
-      this.zoomTo(parseInt(target.dataset.key));
+      if (target.dataset.key != this.state.index) {
+        this.zoomTo(parseInt(target.dataset.key));
+      }
     }
@@ -124,5 +121,7 @@ }, {
     value: function render() {
-      var _this4 = this;
+      var _this3 = this;
 
-      var indicators = this.props.indicators;
+      var _props = this.props,
+          indicators = _props.indicators,
+          arrows = _props.arrows;
       var _state = this.state,
@@ -138,6 +137,6 @@ children = _state.children,
           { className: 'react-slideshow-container' },
-          _react2.default.createElement(
+          arrows && _react2.default.createElement(
             'div',
             { className: 'nav', onClick: function onClick() {
-                return _this4.zoomTo(index === 0 ? children.length - 1 : index - 1);
+                return _this3.zoomTo(index === 0 ? children.length - 1 : index - 1);
               } },
@@ -156,3 +155,3 @@ ' ',
                 ref: function ref(wrap) {
-                  return _this4.divsContainer = wrap;
+                  return _this3.divsContainer = wrap;
                 }
@@ -165,6 +164,2 @@ },
                     style: { opacity: key === index ? '1' : '0' },
-                    ref: function ref(el) {
-                      _this4.divRefs.push(el);
-                    },
-                    onLoad: key === 0 ? _this4.getImageDim : null,
                     'data-index': key,
@@ -178,6 +173,6 @@ key: key
           ),
-          _react2.default.createElement(
+          arrows && _react2.default.createElement(
             'div',
             { className: 'nav', onClick: function onClick() {
-                return _this4.zoomTo((index + 1) % children.length);
+                return _this3.zoomTo((index + 1) % children.length);
               } },
@@ -197,3 +192,3 @@ ' ',
               className: index === key ? 'active' : '',
-              onClick: _this4.goto });
+              onClick: _this3.goto });
           })
@@ -206,3 +201,3 @@ )
     value: function zoomTo(newIndex) {
-      var _this5 = this;
+      var _this4 = this;
 
@@ -221,3 +216,3 @@ var _state2 = this.state,
       var animate = function animate() {
-        if (_this5.willUnmount) {
+        if (_this4.willUnmount) {
           TWEEN.default.removeAll();
@@ -233,19 +228,19 @@ return;
       var tween = new TWEEN.Tween(value).to({ opacity: 1, scale: scale }, this.props.transitionDuration).onUpdate(function (value) {
-        _this5.divsContainer.children[newIndex].style.opacity = value.opacity;
-        _this5.divsContainer.children[index].style.opacity = 1 - value.opacity;
-        _this5.divsContainer.children[index].style.transform = 'scale(' + value.scale + ')';
+        _this4.divsContainer.children[newIndex].style.opacity = value.opacity;
+        _this4.divsContainer.children[index].style.opacity = 1 - value.opacity;
+        _this4.divsContainer.children[index].style.transform = 'scale(' + value.scale + ')';
       }).start();
 
       tween.onComplete(function () {
-        if (_this5.willUnmount) {
+        if (_this4.willUnmount) {
           return;
         }
-        _this5.setState({
+        _this4.setState({
           index: newIndex
         }, function () {
-          _this5.divsContainer.children[index].style.transform = 'scale(1)';
+          _this4.divsContainer.children[index].style.transform = 'scale(1)';
         });
-        _this5.timeout = setTimeout(function () {
-          _this5.zoomTo((newIndex + 1) % children.length);
-        }, _this5.props.duration);
+        _this4.timeout = setTimeout(function () {
+          _this4.zoomTo((newIndex + 1) % children.length);
+        }, _this4.props.duration);
       });
@@ -261,3 +256,4 @@ }
   transitionDuration: 1000,
-  indicators: false
+  indicators: false,
+  arrows: true
 };
@@ -269,4 +265,5 @@
   indicators: _propTypes2.default.bool,
-  scale: _propTypes2.default.number.isRequired
+  scale: _propTypes2.default.number.isRequired,
+  arrows: _propTypes2.default.bool
 };
 exports.default = Zoom;

package.json

 {
   "name": "react-slideshow-image",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Femi Oladeji",
@@ -5,0 +5,0 @@ "description": "An image slideshow with react",

README.md

@@ -17,3 +17,3 @@ # React-Slideshow
 ## Slide Effect
-```
+```js
 import React from 'react';
@@ -32,3 +32,4 @@ import { Slide } from 'react-slideshow-image';
   infinite: true,
-  indicators: true
+  indicators: true,
+  arrows: true
 }
@@ -61,3 +62,3 @@
 ## Fade Effect
-```
+```js
 import React from 'react';
@@ -107,3 +108,3 @@ import { Fade } from 'react-slideshow-image';
 ## Zoom Effect
-```
+```js
 import React from 'react';
@@ -126,3 +127,4 @@ import { Zoom } from 'react-slideshow-image';
   indicators: true,
-  scale: 0.4
+  scale: 0.4,
+  arrows: true
 }
@@ -140,3 +142,2 @@
 ```
-The `images` and `scale` props are compulsory. The `scale` prop determines if the images will be zoomed out or in. If a scale less than 1 was entered, then the image will be zoomed out but if it's greater than 1 then the image will be zoomed in. The `scale` property is numeric
 
@@ -161,2 +162,12 @@ # Webpack configuration
 }
-```
+```
+
+## Properties
+| Properties          | Type        | DefaultValue  | Description                                                                                |
+| ------------------- |:-----------:| ------------- | ------------------------------------------------------------------------------------------ |
+| duration            | integer     | 5000          | Time it takes (milliseconds) before next transition starts                                 |
+| transitionDuration  | integer     | 1000          | Determines how long the transition takes                                                   |
+| infinite            | boolean     | false         | Specifies if the transition should loop throughout                                         |
+| indicators          | boolean     | false         | For specifying if there should be dots below the slideshow                                 |
+| scale               | number      |               | *Required* when using zoom to specify the scale the current slide should be zoomed to      |
+| arrows              | boolean     | true          | Determines if there should be a navigational arrow for going to the next or previous slide |

No alert changes

Improved metrics

Total package byte prevSize

3722776

increased by0.02%

Number of lines in readme file

166

increased by7.1%

Worsened metrics

Lines of code

4544

decreased by-0.04%

No dependency changes