uinz-slider - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/slider.js

@@ -21,3 +21,3 @@ 'use strict';
 
-var wrapperStyle = {
+var containerStyle = {
   overflow: 'hidden',
@@ -58,4 +58,2 @@ position: 'relative'
 
-var EDGE_WIDTH = 50;
-
 /* 
@@ -89,9 +87,5 @@ @parmas images arrary
       var images = _props.images;
-      var autoTime = this.props.autoTime;
+      var autoTime = _props.autoTime;
 
 
-      autoTime = autoTime ? autoTime : 3000;
-
-      console.log(auto);
-
       if (auto) {
@@ -116,2 +110,4 @@ this.interval = setInterval(function () {
       e.preventDefault();
+      clearInterval(this.interval);
+
       this.containerWidth = this.refs.container.offsetWidth;
@@ -126,8 +122,10 @@ this.rowWidth = (this.props.images.length - 1) * this.containerWidth;
     value: function onTouchMove(e) {
-      var leftEdge = EDGE_WIDTH;
-      var rightEdge = -(this.rowWidth + EDGE_WIDTH);
+      var edgeWidth = this.props.edgeWidth;
+
+      var leftEdge = edgeWidth;
+      var rightEdge = -(this.rowWidth + edgeWidth);
       var diffX = e.touches[0].pageX - this.startX;
 
       this.translateX = this.preTranslateX + diffX;
-      this.translateX = this.translateX > leftEdge ? EDGE_WIDTH : this.translateX;
+      this.translateX = this.translateX > leftEdge ? edgeWidth : this.translateX;
       this.translateX = this.translateX < rightEdge ? rightEdge : this.translateX;
@@ -151,2 +149,4 @@
       this.refs.row.style.webkitTransform = 'translateX(' + this.preTranslateX + 'px)';
+
+      this.componentDidMount();
     }
@@ -164,4 +164,4 @@ }, {
         {
-          className: 'slider-wrapper',
-          style: wrapperStyle,
+          className: 'slider-container',
+          style: containerStyle,
           ref: 'container',
@@ -200,3 +200,6 @@ onTouchStart: this.onTouchStart.bind(this),
 Slider.defaultProps = {
-  images: []
+  images: [],
+  auto: false,
+  autoTime: 3000,
+  edgeWidth: 50
 };
@@ -203,0 +206,0 @@

package.json

 {
   "name": "uinz-slider",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "image slider react componet",
@@ -5,0 +5,0 @@ "main": "dist/slider.js",

src/example.js

@@ -11,10 +11,2 @@ import React, {Component} from 'react'
 
-class Example extends Component {
-  render() {
-    return (
-      <Slider images={images} auto={true}/>
-    )
-  }
-}
-
-ReactDOM.render(<Example/>, document.getElementById('app'))
+ReactDOM.render(<Slider images={images} auto={true}/>, document.getElementById('app'))

src/slider.js

 import React, {Component} from 'react'
 
-const wrapperStyle = {
+const containerStyle = {
   overflow: 'hidden',
@@ -10,3 +10,3 @@ position: 'relative',
   position: 'absolute',
-  bottom: '5%',
+  bottom: '10%',
   textAlign: 'center',
@@ -40,3 +40,2 @@ zIndex: '3',
 
-const EDGE_WIDTH = 50
 
@@ -58,11 +57,7 @@ /*
   componentDidMount() {
-    const {auto, images} = this.props
-    let {autoTime} = this.props
 
-    autoTime = autoTime ? autoTime : 3000
+    if (this.props.auto) {
+      this.interval = setInterval(() => {
+        const {images, autoTime} = this.props
 
-    console.log(auto)
-
-    if (auto) {
-      this.interval = setInterval(() => {
         const index = this.state.index + 2 > images.length ? 0 : this.state.index + 1
@@ -83,4 +78,10 @@ this.setState({index})
 
+  componentWillUnMount() {
+    clearInterval(this.interval)
+  }
+
   onTouchStart(e) {
     e.preventDefault()
+    clearInterval(this.interval)
+
     this.containerWidth = this.refs.container.offsetWidth
@@ -94,8 +95,9 @@ this.rowWidth = (this.props.images.length - 1) * this.containerWidth
   onTouchMove(e) {
-    const leftEdge = EDGE_WIDTH
-    const rightEdge = -(this.rowWidth + EDGE_WIDTH)
+    const {edgeWidth} = this.props
+    const leftEdge = edgeWidth
+    const rightEdge = -(this.rowWidth + edgeWidth)
     const diffX = e.touches[0].pageX - this.startX
 
     this.translateX = this.preTranslateX + diffX
-    this.translateX = this.translateX > leftEdge ? EDGE_WIDTH : this.translateX
+    this.translateX = this.translateX > leftEdge ? edgeWidth : this.translateX
     this.translateX = this.translateX < rightEdge ? rightEdge : this.translateX
@@ -118,2 +120,4 @@
     this.refs.row.style.webkitTransform = `translateX(${this.preTranslateX}px)`
+
+    this.componentDidMount()
   }
@@ -126,4 +130,4 @@
       <div
-        className="slider-wrapper"
-        style={wrapperStyle}
+        className="slider-container"
+        style={containerStyle}
         ref="container"
@@ -154,2 +158,5 @@ onTouchStart={this.onTouchStart.bind(this)}
   images: [],
+  auto: false,
+  autoTime: 3000,
+  edgeWidth: 50,
 }
@@ -156,0 +163,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

697106

-0.25%

Lines of code

17706

-0.09%

No dependency changes