1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _extends2 = require('babel-runtime/helpers/extends');
|
6 |
|
7 | var _extends3 = _interopRequireDefault(_extends2);
|
8 |
|
9 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
10 |
|
11 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
12 |
|
13 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
14 |
|
15 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
16 |
|
17 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
18 |
|
19 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
20 |
|
21 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
22 |
|
23 | var _inherits3 = _interopRequireDefault(_inherits2);
|
24 |
|
25 | var _classnames = require('classnames');
|
26 |
|
27 | var _classnames2 = _interopRequireDefault(_classnames);
|
28 |
|
29 | var _react = require('react');
|
30 |
|
31 | var _react2 = _interopRequireDefault(_react);
|
32 |
|
33 | var _propTypes = require('prop-types');
|
34 |
|
35 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
36 |
|
37 | var _reactDom = require('react-dom');
|
38 |
|
39 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
40 |
|
41 | var _transition = require('dom-helpers/transition');
|
42 |
|
43 | var _transition2 = _interopRequireDefault(_transition);
|
44 |
|
45 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
46 |
|
47 | var propTypes = {
|
48 | direction: _propTypes2.default.oneOf(['prev', 'next']),
|
49 | onAnimateOutEnd: _propTypes2.default.func,
|
50 | active: _propTypes2.default.bool,
|
51 | animateIn: _propTypes2.default.bool,
|
52 | animateOut: _propTypes2.default.bool,
|
53 | index: _propTypes2.default.number
|
54 | };
|
55 |
|
56 | var defaultProps = {
|
57 | active: false,
|
58 | animateIn: false,
|
59 | animateOut: false
|
60 | };
|
61 |
|
62 | var CarouselItem = function (_React$Component) {
|
63 | (0, _inherits3.default)(CarouselItem, _React$Component);
|
64 |
|
65 | function CarouselItem(props, context) {
|
66 | (0, _classCallCheck3.default)(this, CarouselItem);
|
67 |
|
68 | var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props, context));
|
69 |
|
70 | _this.handleAnimateOutEnd = _this.handleAnimateOutEnd.bind(_this);
|
71 |
|
72 | _this.state = {
|
73 | direction: null
|
74 | };
|
75 |
|
76 | _this.isUnmounted = false;
|
77 | return _this;
|
78 | }
|
79 |
|
80 | CarouselItem.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
81 | if (this.props.active !== nextProps.active) {
|
82 | this.setState({ direction: null });
|
83 | }
|
84 | };
|
85 |
|
86 | CarouselItem.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
87 | var _this2 = this;
|
88 |
|
89 | var active = this.props.active;
|
90 |
|
91 | var prevActive = prevProps.active;
|
92 |
|
93 | if (!active && prevActive) {
|
94 | _transition2.default.end(_reactDom2.default.findDOMNode(this), this.handleAnimateOutEnd);
|
95 | }
|
96 |
|
97 | if (active !== prevActive) {
|
98 | setTimeout(function () {
|
99 | return _this2.startAnimation();
|
100 | }, 20);
|
101 | }
|
102 | };
|
103 |
|
104 | CarouselItem.prototype.componentWillUnmount = function componentWillUnmount() {
|
105 | this.isUnmounted = true;
|
106 | };
|
107 |
|
108 | CarouselItem.prototype.handleAnimateOutEnd = function handleAnimateOutEnd() {
|
109 | if (this.isUnmounted) {
|
110 | return;
|
111 | }
|
112 |
|
113 | if (this.props.onAnimateOutEnd) {
|
114 | this.props.onAnimateOutEnd(this.props.index);
|
115 | }
|
116 | };
|
117 |
|
118 | CarouselItem.prototype.startAnimation = function startAnimation() {
|
119 | if (this.isUnmounted) {
|
120 | return;
|
121 | }
|
122 |
|
123 | this.setState({
|
124 | direction: this.props.direction === 'prev' ? 'right' : 'left'
|
125 | });
|
126 | };
|
127 |
|
128 | CarouselItem.prototype.render = function render() {
|
129 | var _props = this.props,
|
130 | direction = _props.direction,
|
131 | active = _props.active,
|
132 | animateIn = _props.animateIn,
|
133 | animateOut = _props.animateOut,
|
134 | className = _props.className,
|
135 | props = (0, _objectWithoutProperties3.default)(_props, ['direction', 'active', 'animateIn', 'animateOut', 'className']);
|
136 |
|
137 |
|
138 | delete props.onAnimateOutEnd;
|
139 | delete props.index;
|
140 |
|
141 | var classes = {
|
142 | item: true,
|
143 | active: active && !animateIn || animateOut
|
144 | };
|
145 | if (direction && active && animateIn) {
|
146 | classes[direction] = true;
|
147 | }
|
148 | if (this.state.direction && (animateIn || animateOut)) {
|
149 | classes[this.state.direction] = true;
|
150 | }
|
151 |
|
152 | return _react2.default.createElement('div', (0, _extends3.default)({}, props, { className: (0, _classnames2.default)(className, classes) }));
|
153 | };
|
154 |
|
155 | return CarouselItem;
|
156 | }(_react2.default.Component);
|
157 |
|
158 | CarouselItem.propTypes = propTypes;
|
159 | CarouselItem.defaultProps = defaultProps;
|
160 |
|
161 | exports.default = CarouselItem;
|
162 | module.exports = exports['default']; |
\ | No newline at end of file |