react-photostory - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

components/Story.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -20,11 +21,14 @@ import autoBind from 'react-auto-bind'
 
-  handleClick ({index, length, title, subTitle, image, data}) {
-    const {isOpen} = this.state
+  handleClick ({ index, length, title, subTitle, image, data }) {
+    const { isOpen } = this.state
     if (!isOpen) {
       this.data = data
-      this.setState({isOpen: true, length, currentIndex: index, title, subTitle}, () => {
-        document.body.style.overflow = this.state.isOpen ? 'hidden' : null
-      })
+      this.setState(
+        { isOpen: true, length, currentIndex: index, title, subTitle },
+        () => {
+          document.body.style.overflow = this.state.isOpen ? 'hidden' : null
+        }
+      )
 
-      this.props.onOpen({index, title, subTitle, data})
+      this.props.onOpen({ index, title, subTitle, data })
     } else {
@@ -37,17 +41,20 @@ this.setState({
 
-  handleSwipe ({currentIndex, title, subTitle, data}) {
+  handleSwipe ({ currentIndex, title, subTitle, data }) {
     this.data = data
-    this.setState({currentIndex, title, subTitle})
+    this.setState({ currentIndex, title, subTitle })
   }
 
   disablePan () {
-    this.setState({panImageUrl: false})
+    this.setState({ panImageUrl: false })
   }
 
   closeModal () {
-    this.setState({
-      isOpen: false
-    }, () => {
-      this.props.onClose({index: this.state.currentIndex})
-    })
+    this.setState(
+      {
+        isOpen: false
+      },
+      () => {
+        this.props.onClose({ index: this.state.currentIndex })
+      }
+    )
 
@@ -59,4 +66,18 @@ this.disablePan()
   render () {
-    const {children, height, panHeight, closeBtn, footerElem, headerElem} = this.props
-    const {isOpen, currentIndex, length, title, subTitle, panImageUrl} = this.state
+    const {
+      children,
+      height,
+      panHeight,
+      closeBtn,
+      footerElem,
+      headerElem
+    } = this.props
+    const {
+      isOpen,
+      currentIndex,
+      length,
+      title,
+      subTitle,
+      panImageUrl
+    } = this.state
     const mainClass = classNames('react-story', {
@@ -67,5 +88,7 @@ open: isOpen,
 
-    const style = isOpen ? {
-      marginTop: -(panImageUrl ? panHeight : height) / 2
-    } : {}
+    const style = isOpen
+      ? {
+        marginTop: -(panImageUrl ? panHeight : height) / 2
+      }
+      : {}
 
@@ -84,10 +107,22 @@ const panStyle = {
 
-    const args = {currentIndex, title, subTitle, length, image: panImageUrl, data: this.data}
+    const args = {
+      currentIndex,
+      title,
+      subTitle,
+      length,
+      image: panImageUrl,
+      data: this.data
+    }
 
     return (
       <div className={mainClass}>
-        {isOpen && <div>
-          <div className='rs-close' onClick={this.closeModal}>{closeBtn}</div>
-          <div className='rs-header'>{headerElem(args)}</div>
-        </div>}
+        {isOpen &&
+          <div>
+            <div className='rs-close' onClick={this.closeModal}>
+              {closeBtn}
+            </div>
+            <div className='rs-header'>
+              {headerElem(args)}
+            </div>
+          </div>}
         <div className='swipe-wrapper' style={style}>
@@ -100,3 +135,9 @@ {children({
           })}
-          {panImageUrl && <img className='rs-pan-image' src={panImageUrl} onClick={this.disablePan} style={panStyle} />}
+          {panImageUrl &&
+            <img
+              className='rs-pan-image'
+              src={panImageUrl}
+              onClick={this.disablePan}
+              style={panStyle}
+            />}
         </div>
@@ -126,3 +167,7 @@
   headerElem (...args) {
-    return <span>Photo {args[0].currentIndex + 1} of {args[0].length}</span>
+    return (
+      <span>
+        Photo {args[0].currentIndex + 1} of {args[0].length}
+      </span>
+    )
   },
@@ -132,11 +177,13 @@ footerElem (...args) {
       <div className='rs-footer'>
-        <div className='rs-title'>{args[0].title}</div>
-        <div className='rs-sub-title'>{args[0].subTitle}</div>
+        <div className='rs-title'>
+          {args[0].title}
+        </div>
+        <div className='rs-sub-title'>
+          {args[0].subTitle}
+        </div>
       </div>
     )
   },
-  onClose () {
-  },
-  onOpen () {
-  }
+  onClose () {},
+  onOpen () {}
 }

components/Swipe.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -52,4 +53,4 @@ import autoBind from 'react-auto-bind'
     if (this.hasSingleImage()) return
-    const {drag, currentIndex, width} = this.state
-    const {threshold} = this.props
+    const { drag, currentIndex, width } = this.state
+    const { threshold } = this.props
 
@@ -59,17 +60,23 @@ const initialIndex = currentIndex
     if (Math.abs(drag) > threshold * width) {
-      this.setState(() => {
-        if (drag < 0 && currentIndex > 0) {
-          return {
-            // goto previous slide
-            currentIndex: currentIndex - 1
+      this.setState(
+        () => {
+          if (drag < 0 && currentIndex > 0) {
+            return {
+              // goto previous slide
+              currentIndex: currentIndex - 1
+            }
+          } else if (
+            drag > 0 &&
+            currentIndex + 1 < this.props.children.length
+          ) {
+            return {
+              // goto next slide
+              currentIndex: currentIndex + 1
+            }
           }
-        } else if (drag > 0 && ((currentIndex + 1) < this.props.children.length)) {
-          return {
-            // goto next slide
-            currentIndex: currentIndex + 1
-          }
+        },
+        () => {
+          this.onChange(initialIndex)
         }
-      }, () => {
-        this.onChange(initialIndex)
-      })
+      )
     }
@@ -85,8 +92,10 @@
   initLazyLoad () {
-    const {currentIndex} = this.state
-    const {overScan, children} = this.props
+    const { currentIndex } = this.state
+    const { overScan, children } = this.props
     this[`imageRef${currentIndex}`].load()
     if (overScan === 1) {
       if (currentIndex > 0) this[`imageRef${currentIndex - 1}`].load()
-      if (currentIndex + 1 < children.length) this[`imageRef${currentIndex + 1}`].load()
+      if (currentIndex + 1 < children.length) {
+        this[`imageRef${currentIndex + 1}`].load()
+      }
     }
@@ -102,3 +111,3 @@ }
   gotoPrev () {
-    const {currentIndex} = this.state
+    const { currentIndex } = this.state
     if (currentIndex > 0) {
@@ -110,3 +119,3 @@ this.gotoSlide(currentIndex - 1, false)
   gotoNext () {
-    const {currentIndex} = this.state
+    const { currentIndex } = this.state
     if (currentIndex + 1 < this.props.children.length) {
@@ -120,9 +129,12 @@ this.gotoSlide(currentIndex + 1, false)
     const initial = this.state.currentIndex
-    this.setState({
-      currentIndex: i
-    }, () => (this.onChange(initial)))
+    this.setState(
+      {
+        currentIndex: i
+      },
+      () => this.onChange(initial)
+    )
   }
 
   autoPlay (props) {
-    const {children, autoPlayInterval} = props
+    const { children, autoPlayInterval } = props
     this.pause()
@@ -133,3 +145,3 @@
     this.autoPlayId = setInterval(() => {
-      const {currentIndex} = this.state
+      const { currentIndex } = this.state
       if (currentIndex + 1 < children.length) {
@@ -181,8 +193,17 @@ this.gotoNext()
     window.removeEventListener('resize', this.setWidth)
+    if (this.autoPlayId) clearInterval(this.autoPlayId)
   }
 
   render () {
-    const {className, children, prev, next, initialIndex, renderFirst, height} = this.props
+    const {
+      className,
+      children,
+      prev,
+      next,
+      initialIndex,
+      renderFirst,
+      height
+    } = this.props
 
-    const {width, drag, currentIndex} = this.state
+    const { width, drag, currentIndex } = this.state
 
@@ -209,6 +230,6 @@ const mainClass = classNames('react-swipe', className)
     const self = this
-    const children$ = React.Children.map(children, (child, index) => (
+    const children$ = React.Children.map(children, (child, index) =>
       React.cloneElement(child, {
         width,
-        ref: (ref) => (self[`imageRef${index}`] = ref),
+        ref: ref => (self[`imageRef${index}`] = ref),
         attributes: {
@@ -219,3 +240,3 @@ ...child.props.attributes,
         lazyLoad: renderFirst ? index !== initialIndex : true
-      }))
+      })
     )
@@ -225,3 +246,7 @@
       <div className={mainClass}>
-        <div className='rs-swipe-gallery' ref={(swipe) => (this.swipeRef = swipe)} style={{height}}>
+        <div
+          className='rs-swipe-gallery'
+          ref={swipe => (this.swipeRef = swipe)}
+          style={{ height }}
+        >
           <div
@@ -237,4 +262,10 @@ className='rs-imgs-wrapper'
         </div>
-        {!this.hasSingleImage() && <div className={prevClass} onClick={this.gotoPrev}>{prev}</div>}
-        {!this.hasSingleImage() && <div className={nextClass} onClick={this.gotoNext}>{next}</div>}
+        {!this.hasSingleImage() &&
+          <div className={prevClass} onClick={this.gotoPrev}>
+            {prev}
+          </div>}
+        {!this.hasSingleImage() &&
+          <div className={nextClass} onClick={this.gotoNext}>
+            {next}
+          </div>}
       </div>
@@ -281,5 +312,3 @@ )
 
-  children: PropTypes.oneOfType([
-    PropTypes.array, PropTypes.object
-  ]),
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 
@@ -296,6 +325,4 @@ renderFirst: PropTypes.bool,
   initialIndex: 0,
-  onSwipe () {
-  },
-  onClick () {
-  },
+  onSwipe () {},
+  onClick () {},
   prev: <button>PREV</button>,
@@ -302,0 +329,0 @@ next: <button>NEXT</button>,

dist/Story.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -146,3 +150,10 @@
 
-      var args = { currentIndex: currentIndex, title: title, subTitle: subTitle, length: length, image: panImageUrl, data: this.data };
+      var args = {
+        currentIndex: currentIndex,
+        title: title,
+        subTitle: subTitle,
+        length: length,
+        image: panImageUrl,
+        data: this.data
+      };
 
@@ -175,3 +186,8 @@ return _react2.default.createElement(
           }),
-          panImageUrl && _react2.default.createElement('img', { className: 'rs-pan-image', src: panImageUrl, onClick: this.disablePan, style: panStyle })
+          panImageUrl && _react2.default.createElement('img', {
+            className: 'rs-pan-image',
+            src: panImageUrl,
+            onClick: this.disablePan,
+            style: panStyle
+          })
         ),
@@ -190,10 +206,10 @@ isOpen && footerElem(args)
 Story.propTypes = {
-  height: _react.PropTypes.number,
-  closeBtn: _react.PropTypes.element,
-  panHeight: _react.PropTypes.number,
-  children: _react.PropTypes.func,
-  headerElem: _react.PropTypes.func,
-  footerElem: _react.PropTypes.func,
-  onOpen: _react.PropTypes.func,
-  onClose: _react.PropTypes.func
+  height: _propTypes2.default.number,
+  closeBtn: _propTypes2.default.element,
+  panHeight: _propTypes2.default.number,
+  children: _propTypes2.default.func,
+  headerElem: _propTypes2.default.func,
+  footerElem: _propTypes2.default.func,
+  onOpen: _propTypes2.default.func,
+  onClose: _propTypes2.default.func
 };
@@ -200,0 +216,0 @@

dist/Swipe.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -137,3 +141,5 @@
         if (currentIndex > 0) this['imageRef' + (currentIndex - 1)].load();
-        if (currentIndex + 1 < children.length) this['imageRef' + (currentIndex + 1)].load();
+        if (currentIndex + 1 < children.length) {
+          this['imageRef' + (currentIndex + 1)].load();
+        }
       }
@@ -247,2 +253,3 @@ }
       window.removeEventListener('resize', this.setWidth);
+      if (this.autoPlayId) clearInterval(this.autoPlayId);
     }
@@ -306,5 +313,9 @@ }, {
           'div',
-          { className: 'rs-swipe-gallery', ref: function ref(swipe) {
+          {
+            className: 'rs-swipe-gallery',
+            ref: function ref(swipe) {
               return _this5.swipeRef = swipe;
-            }, style: { height: height } },
+            },
+            style: { height: height }
+          },
           _react2.default.createElement(
@@ -344,41 +355,41 @@ 'div',
   // autoplay true or false
-  autoPlay: _react.PropTypes.bool,
+  autoPlay: _propTypes2.default.bool,
 
   // interval for autoplay
-  autoPlayInterval: _react.PropTypes.number,
+  autoPlayInterval: _propTypes2.default.number,
 
   // custom class name for the component
-  className: _react.PropTypes.string,
+  className: _propTypes2.default.string,
 
   // number of images to be loaded in advance
-  overScan: _react.PropTypes.oneOf([0, 1]),
+  overScan: _propTypes2.default.oneOf([0, 1]),
 
   // function called on slide change
   // argument { initialIndex, currentIndex }
-  onSwipe: _react.PropTypes.func,
+  onSwipe: _propTypes2.default.func,
 
   // function called on slide is clicked
   // argument { index }
-  onClick: _react.PropTypes.func,
+  onClick: _propTypes2.default.func,
 
   // index of initially visible image
-  initialIndex: _react.PropTypes.number,
+  initialIndex: _propTypes2.default.number,
 
   // drag ratio of full width for successful swipe
-  threshold: _react.PropTypes.number,
+  threshold: _propTypes2.default.number,
 
   // whether responsive to window resize
-  responsive: _react.PropTypes.bool,
+  responsive: _propTypes2.default.bool,
 
   // prev React element
-  prev: _react.PropTypes.element,
+  prev: _propTypes2.default.element,
 
   // next React element
-  next: _react.PropTypes.element,
+  next: _propTypes2.default.element,
 
-  children: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]),
+  children: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
 
-  renderFirst: _react.PropTypes.bool,
+  renderFirst: _propTypes2.default.bool,
 
-  height: _react.PropTypes.number
+  height: _propTypes2.default.number
 };
@@ -385,0 +396,0 @@

package.json

@@ -42,7 +42,7 @@ {
   "devDependencies": {
-    "@kadira/storybook": "^2.24.0",
-    "@kadira/storybook-addon-actions": "^1.1.1",
-    "@kadira/storybook-addon-knobs": "^1.3.0",
-    "@kadira/storybook-addon-options": "^1.0.1",
-    "autoprefixer": "^6.4.1",
+    "@storybook/addon-actions": "3.1.8",
+    "@storybook/addon-knobs": "3.1.8",
+    "@storybook/addon-options": "3.1.6",
+    "@storybook/react": "3.1.8",
+    "autoprefixer": "^7.1.2",
     "babel-cli": "^6.16.0",
@@ -52,8 +52,8 @@ "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-react": "^6.11.1",
-    "chai": "^3.5.0",
-    "chai-enzyme": "^0.5.2",
+    "chai": "^4.0.2",
+    "chai-enzyme": "^0.8.0",
     "codecov.io": "^0.1.6",
     "commitizen": "^2.8.6",
     "concurrently": "^3.1.0",
-    "cz-conventional-changelog": "^1.2.0",
+    "cz-conventional-changelog": "^2.0.0",
     "enzyme": "^2.4.1",
@@ -72,3 +72,3 @@ "eslint": "^3.7.1",
     "mocha": "^3.1.0",
-    "node-sass": "^3.10.1",
+    "node-sass": "^4.5.3",
     "react-addons-test-utils": "^15.3.2",
@@ -78,10 +78,11 @@ "react-dom": "^15.4.1",
     "rimraf": "^2.5.4",
-    "sass-loader": "^4.0.2",
-    "semantic-release": "^4.3.5",
-    "sinon": "^1.17.6"
+    "sass-loader": "^6.0.6",
+    "semantic-release": "^6.3.6",
+    "sinon": "^2.3.7"
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "prop-types": "^15.5.10",
     "react": "^15.x.x",
-    "react-auto-bind": "^0.2.0"
+    "react-auto-bind": "^0.3.0"
   },
@@ -93,3 +94,3 @@ "config": {
   },
-  "version": "0.6.2"
+  "version": "0.7.0"
 }

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

44065

increased by3.07%

Lines of code

1077

increased by9.9%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedreact-auto-bind@0.3.0(transitive)

• - Removedreact-auto-bind@0.2.0(transitive)

• Updatedreact-auto-bind@^0.3.0