react-swipe/react-swipe.js at gh-pages · alexter42/react-swipe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
(function (root, factory) {
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = factory(
      require('react'),
      require('react-dom'),
      require('swipe-js-iso'),
      require('object-assign')
    );
  } else {
    root.ReactSwipe = factory(
      root.React,
      root.ReactDOM,
      root.Swipe,
      root.objectAssign
    );
  }
})(this, function (React, ReactDOM, Swipe, objectAssign) {
  var styles = {
    container: {
      overflow: 'hidden',
      visibility: 'hidden',
      position: 'relative'
    },

    wrapper: {
      overflow: 'hidden',
      position: 'relative'
    },

    child: {
      float: 'left',
      width: '100%',
      position: 'relative',
      transitionProperty: 'transform'
    }
  };

  var ReactSwipe = React.createClass({
    // https://github.com/thebird/Swipe#config-options
    propTypes: {
      startSlide          : React.PropTypes.number,
      slideToIndex        : React.PropTypes.number,
      shouldUpdate        : React.PropTypes.func,
      speed               : React.PropTypes.number,
      auto                : React.PropTypes.number,
      continuous          : React.PropTypes.bool,
      disableScroll       : React.PropTypes.bool,
      stopPropagation     : React.PropTypes.bool,
      callback            : React.PropTypes.func,
      transitionEnd       : React.PropTypes.func,
      containerStyles     : React.PropTypes.object,
      wrapperStyles       : React.PropTypes.object,
      reinitSwipeOnUpdate : React.PropTypes.bool
    },

    componentDidMount: function () {
      this.swipe = Swipe(ReactDOM.findDOMNode(this), objectAssign({}, this.props));
    },

    componentDidUpdate: function () {
      if (this.props.reinitSwipeOnUpdate) {
        this.swipe.kill();
        this.swipe = Swipe(ReactDOM.findDOMNode(this), objectAssign({}, this.props));
      }
      if (this.props.slideToIndex || this.props.slideToIndex === 0) {
        this.swipe.slide(this.props.slideToIndex);
      }
    },

    componentWillUnmount: function () {
      this.swipe.kill();
      delete this.swipe;
    },

    shouldComponentUpdate: function (nextProps) {
      return (
        (this.props.slideToIndex !== nextProps.slideToIndex) ||
        (typeof this.props.shouldUpdate !== 'undefined') && this.props.shouldUpdate(nextProps, this.props)
      );
    },

    render: function() {
      return React.createElement('div', React.__spread({}, {style: objectAssign({}, styles.container, this.props.containerStyles)}, this.props),
        React.createElement('div', {style: objectAssign({}, styles.wrapper, this.props.wrapperStyles)},
          React.Children.map(this.props.children, function (child) {
            return React.cloneElement(child, {
              style: styles.child
            });
          })
        )
      );
    }
  });

  return ReactSwipe;
});