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