mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-22 16:35:14 +00:00
320 lines
9.9 KiB
JavaScript
320 lines
9.9 KiB
JavaScript
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import CarouselItem from './CarouselItem';
|
|
import { mapToCssModules } from './utils';
|
|
var SWIPE_THRESHOLD = 40;
|
|
|
|
var Carousel = /*#__PURE__*/function (_React$Component) {
|
|
_inheritsLoose(Carousel, _React$Component);
|
|
|
|
function Carousel(props) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, props) || this;
|
|
_this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
|
|
_this.renderItems = _this.renderItems.bind(_assertThisInitialized(_this));
|
|
_this.hoverStart = _this.hoverStart.bind(_assertThisInitialized(_this));
|
|
_this.hoverEnd = _this.hoverEnd.bind(_assertThisInitialized(_this));
|
|
_this.handleTouchStart = _this.handleTouchStart.bind(_assertThisInitialized(_this));
|
|
_this.handleTouchEnd = _this.handleTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.touchStartX = 0;
|
|
_this.touchStartY = 0;
|
|
_this.state = {
|
|
activeIndex: _this.props.activeIndex,
|
|
direction: 'right',
|
|
indicatorClicked: false
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Carousel.prototype;
|
|
|
|
_proto.getChildContext = function getChildContext() {
|
|
return {
|
|
direction: this.state.direction
|
|
};
|
|
};
|
|
|
|
_proto.componentDidMount = function componentDidMount() {
|
|
// Set up the cycle
|
|
if (this.props.ride === 'carousel') {
|
|
this.setInterval();
|
|
} // TODO: move this to the specific carousel like bootstrap. Currently it will trigger ALL carousels on the page.
|
|
|
|
|
|
document.addEventListener('keyup', this.handleKeyPress);
|
|
};
|
|
|
|
Carousel.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
|
var newState = null;
|
|
var activeIndex = prevState.activeIndex,
|
|
direction = prevState.direction,
|
|
indicatorClicked = prevState.indicatorClicked;
|
|
|
|
if (nextProps.activeIndex !== activeIndex) {
|
|
// Calculate the direction to turn
|
|
if (nextProps.activeIndex === activeIndex + 1) {
|
|
direction = 'right';
|
|
} else if (nextProps.activeIndex === activeIndex - 1) {
|
|
direction = 'left';
|
|
} else if (nextProps.activeIndex < activeIndex) {
|
|
direction = indicatorClicked ? 'left' : 'right';
|
|
} else if (nextProps.activeIndex !== activeIndex) {
|
|
direction = indicatorClicked ? 'right' : 'left';
|
|
}
|
|
|
|
newState = {
|
|
activeIndex: nextProps.activeIndex,
|
|
direction: direction,
|
|
indicatorClicked: false
|
|
};
|
|
}
|
|
|
|
return newState;
|
|
};
|
|
|
|
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
|
if (prevState.activeIndex === this.state.activeIndex) return;
|
|
this.setInterval(this.props);
|
|
};
|
|
|
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
this.clearInterval();
|
|
document.removeEventListener('keyup', this.handleKeyPress);
|
|
};
|
|
|
|
_proto.setInterval = function (_setInterval) {
|
|
function setInterval() {
|
|
return _setInterval.apply(this, arguments);
|
|
}
|
|
|
|
setInterval.toString = function () {
|
|
return _setInterval.toString();
|
|
};
|
|
|
|
return setInterval;
|
|
}(function (props) {
|
|
if (props === void 0) {
|
|
props = this.props;
|
|
}
|
|
|
|
// make sure not to have multiple intervals going...
|
|
this.clearInterval();
|
|
|
|
if (props.interval) {
|
|
this.cycleInterval = setInterval(function () {
|
|
props.next();
|
|
}, parseInt(props.interval, 10));
|
|
}
|
|
});
|
|
|
|
_proto.clearInterval = function (_clearInterval) {
|
|
function clearInterval() {
|
|
return _clearInterval.apply(this, arguments);
|
|
}
|
|
|
|
clearInterval.toString = function () {
|
|
return _clearInterval.toString();
|
|
};
|
|
|
|
return clearInterval;
|
|
}(function () {
|
|
clearInterval(this.cycleInterval);
|
|
});
|
|
|
|
_proto.hoverStart = function hoverStart() {
|
|
if (this.props.pause === 'hover') {
|
|
this.clearInterval();
|
|
}
|
|
|
|
if (this.props.mouseEnter) {
|
|
var _this$props;
|
|
|
|
(_this$props = this.props).mouseEnter.apply(_this$props, arguments);
|
|
}
|
|
};
|
|
|
|
_proto.hoverEnd = function hoverEnd() {
|
|
if (this.props.pause === 'hover') {
|
|
this.setInterval();
|
|
}
|
|
|
|
if (this.props.mouseLeave) {
|
|
var _this$props2;
|
|
|
|
(_this$props2 = this.props).mouseLeave.apply(_this$props2, arguments);
|
|
}
|
|
};
|
|
|
|
_proto.handleKeyPress = function handleKeyPress(evt) {
|
|
if (this.props.keyboard) {
|
|
if (evt.keyCode === 37) {
|
|
this.props.previous();
|
|
} else if (evt.keyCode === 39) {
|
|
this.props.next();
|
|
}
|
|
}
|
|
};
|
|
|
|
_proto.handleTouchStart = function handleTouchStart(e) {
|
|
if (!this.props.enableTouch) {
|
|
return;
|
|
}
|
|
|
|
this.touchStartX = e.changedTouches[0].screenX;
|
|
this.touchStartY = e.changedTouches[0].screenY;
|
|
};
|
|
|
|
_proto.handleTouchEnd = function handleTouchEnd(e) {
|
|
if (!this.props.enableTouch) {
|
|
return;
|
|
}
|
|
|
|
var currentX = e.changedTouches[0].screenX;
|
|
var currentY = e.changedTouches[0].screenY;
|
|
var diffX = Math.abs(this.touchStartX - currentX);
|
|
var diffY = Math.abs(this.touchStartY - currentY); // Don't swipe if Y-movement is bigger than X-movement
|
|
|
|
if (diffX < diffY) {
|
|
return;
|
|
}
|
|
|
|
if (diffX < SWIPE_THRESHOLD) {
|
|
return;
|
|
}
|
|
|
|
if (currentX < this.touchStartX) {
|
|
this.props.next();
|
|
} else {
|
|
this.props.previous();
|
|
}
|
|
};
|
|
|
|
_proto.renderItems = function renderItems(carouselItems, className) {
|
|
var _this2 = this;
|
|
|
|
var slide = this.props.slide;
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: className
|
|
}, carouselItems.map(function (item, index) {
|
|
var isIn = index === _this2.state.activeIndex;
|
|
return /*#__PURE__*/React.cloneElement(item, {
|
|
in: isIn,
|
|
slide: slide
|
|
});
|
|
}));
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _this3 = this;
|
|
|
|
var _this$props3 = this.props,
|
|
cssModule = _this$props3.cssModule,
|
|
slide = _this$props3.slide,
|
|
className = _this$props3.className;
|
|
var outerClasses = mapToCssModules(classNames(className, 'carousel', slide && 'slide'), cssModule);
|
|
var innerClasses = mapToCssModules(classNames('carousel-inner'), cssModule); // filter out booleans, null, or undefined
|
|
|
|
var children = this.props.children.filter(function (child) {
|
|
return child !== null && child !== undefined && typeof child !== 'boolean';
|
|
});
|
|
var slidesOnly = children.every(function (child) {
|
|
return child.type === CarouselItem;
|
|
}); // Rendering only slides
|
|
|
|
if (slidesOnly) {
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: outerClasses,
|
|
onMouseEnter: this.hoverStart,
|
|
onMouseLeave: this.hoverEnd
|
|
}, this.renderItems(children, innerClasses));
|
|
} // Rendering slides and controls
|
|
|
|
|
|
if (children[0] instanceof Array) {
|
|
var _carouselItems = children[0];
|
|
var _controlLeft = children[1];
|
|
var _controlRight = children[2];
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: outerClasses,
|
|
onMouseEnter: this.hoverStart,
|
|
onMouseLeave: this.hoverEnd
|
|
}, this.renderItems(_carouselItems, innerClasses), _controlLeft, _controlRight);
|
|
} // Rendering indicators, slides and controls
|
|
|
|
|
|
var indicators = children[0];
|
|
|
|
var wrappedOnClick = function wrappedOnClick(e) {
|
|
if (typeof indicators.props.onClickHandler === 'function') {
|
|
_this3.setState({
|
|
indicatorClicked: true
|
|
}, function () {
|
|
return indicators.props.onClickHandler(e);
|
|
});
|
|
}
|
|
};
|
|
|
|
var wrappedIndicators = /*#__PURE__*/React.cloneElement(indicators, {
|
|
onClickHandler: wrappedOnClick
|
|
});
|
|
var carouselItems = children[1];
|
|
var controlLeft = children[2];
|
|
var controlRight = children[3];
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: outerClasses,
|
|
onMouseEnter: this.hoverStart,
|
|
onMouseLeave: this.hoverEnd,
|
|
onTouchStart: this.handleTouchStart,
|
|
onTouchEnd: this.handleTouchEnd
|
|
}, wrappedIndicators, this.renderItems(carouselItems, innerClasses), controlLeft, controlRight);
|
|
};
|
|
|
|
return Carousel;
|
|
}(React.Component);
|
|
|
|
Carousel.propTypes = {
|
|
// the current active slide of the carousel
|
|
activeIndex: PropTypes.number,
|
|
// a function which should advance the carousel to the next slide (via activeIndex)
|
|
next: PropTypes.func.isRequired,
|
|
// a function which should advance the carousel to the previous slide (via activeIndex)
|
|
previous: PropTypes.func.isRequired,
|
|
// controls if the left and right arrow keys should control the carousel
|
|
keyboard: PropTypes.bool,
|
|
|
|
/* If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on
|
|
* mouseleave. If set to false, hovering over the carousel won't pause it. (default: "hover")
|
|
*/
|
|
pause: PropTypes.oneOf(['hover', false]),
|
|
// Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
|
|
// This is how bootstrap defines it... I would prefer a bool named autoplay or something...
|
|
ride: PropTypes.oneOf(['carousel']),
|
|
// the interval at which the carousel automatically cycles (default: 5000)
|
|
// eslint-disable-next-line react/no-unused-prop-types
|
|
interval: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
|
|
children: PropTypes.array,
|
|
// called when the mouse enters the Carousel
|
|
mouseEnter: PropTypes.func,
|
|
// called when the mouse exits the Carousel
|
|
mouseLeave: PropTypes.func,
|
|
// controls whether the slide animation on the Carousel works or not
|
|
slide: PropTypes.bool,
|
|
cssModule: PropTypes.object,
|
|
className: PropTypes.string,
|
|
enableTouch: PropTypes.bool
|
|
};
|
|
Carousel.defaultProps = {
|
|
interval: 5000,
|
|
pause: 'hover',
|
|
keyboard: true,
|
|
slide: true,
|
|
enableTouch: true
|
|
};
|
|
Carousel.childContextTypes = {
|
|
direction: PropTypes.string
|
|
};
|
|
export default Carousel; |