1 line
14 KiB
JSON
1 line
14 KiB
JSON
{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport classNames from 'classnames';\nimport styles from 'dom-helpers/css';\nimport transitionEnd from 'dom-helpers/transitionEnd';\nimport React, { cloneElement } from 'react';\nimport { uncontrollable } from 'uncontrollable';\nimport CarouselCaption from './CarouselCaption';\nimport CarouselItem from './CarouselItem';\nimport { forEach, map } from './ElementChildren';\nimport SafeAnchor from './SafeAnchor';\nimport { createBootstrapComponent } from './ThemeProvider';\nimport triggerBrowserReflow from './triggerBrowserReflow';\n\nvar countChildren = function countChildren(c) {\n return React.Children.toArray(c).filter(React.isValidElement).length;\n};\n\nvar SWIPE_THRESHOLD = 40; // TODO: `slide` should be `animate`.\n\nvar defaultProps = {\n slide: true,\n fade: false,\n interval: 5000,\n keyboard: true,\n pauseOnHover: true,\n wrap: true,\n indicators: true,\n controls: true,\n activeIndex: 0,\n prevIcon: React.createElement(\"span\", {\n \"aria-hidden\": \"true\",\n className: \"carousel-control-prev-icon\"\n }),\n prevLabel: 'Previous',\n nextIcon: React.createElement(\"span\", {\n \"aria-hidden\": \"true\",\n className: \"carousel-control-next-icon\"\n }),\n nextLabel: 'Next',\n touch: true\n};\n\nvar Carousel = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Carousel, _React$Component);\n\n function Carousel() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.state = {\n prevClasses: '',\n currentClasses: 'active',\n touchStartX: 0\n };\n _this.isUnmounted = false;\n _this.carousel = React.createRef();\n\n _this.handleTouchStart = function (e) {\n _this.setState({\n touchStartX: e.changedTouches[0].screenX\n });\n };\n\n _this.handleTouchEnd = function (e) {\n // If the swipe is under the threshold, don't do anything.\n if (Math.abs(e.changedTouches[0].screenX - _this.state.touchStartX) < SWIPE_THRESHOLD) return;\n\n if (e.changedTouches[0].screenX < _this.state.touchStartX) {\n // Swiping left to navigate to next item.\n _this.handleNext(e);\n } else {\n // Swiping right to navigate to previous item.\n _this.handlePrev(e);\n }\n };\n\n _this.handleSlideEnd = function () {\n var pendingIndex = _this._pendingIndex;\n _this._isSliding = false;\n _this._pendingIndex = null;\n if (pendingIndex != null) _this.to(pendingIndex);else _this.cycle();\n };\n\n _this.handleMouseOut = function () {\n _this.cycle();\n };\n\n _this.handleMouseOver = function () {\n if (_this.props.pauseOnHover) _this.pause();\n };\n\n _this.handleKeyDown = function (event) {\n if (/input|textarea/i.test(event.target.tagName)) return;\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n\n _this.handlePrev(event);\n\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n\n _this.handleNext(event);\n\n break;\n\n default:\n break;\n }\n };\n\n _this.handleNextWhenVisible = function () {\n if (!_this.isUnmounted && !document.hidden && styles(_this.carousel.current, 'visibility') !== 'hidden') {\n _this.handleNext();\n }\n };\n\n _this.handleNext = function (e) {\n if (_this._isSliding) return;\n var _this$props = _this.props,\n wrap = _this$props.wrap,\n activeIndex = _this$props.activeIndex;\n var index = activeIndex + 1;\n var count = countChildren(_this.props.children);\n\n if (index > count - 1) {\n if (!wrap) return;\n index = 0;\n }\n\n _this.select(index, e, 'next');\n };\n\n _this.handlePrev = function (e) {\n if (_this._isSliding) return;\n var _this$props2 = _this.props,\n wrap = _this$props2.wrap,\n activeIndex = _this$props2.activeIndex;\n var index = activeIndex - 1;\n\n if (index < 0) {\n if (!wrap) return;\n index = countChildren(_this.props.children) - 1;\n }\n\n _this.select(index, e, 'prev');\n };\n\n return _this;\n }\n\n var _proto = Carousel.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.cycle();\n };\n\n Carousel.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var previousActiveIndex = _ref.activeIndex;\n\n if (nextProps.activeIndex !== previousActiveIndex) {\n var lastPossibleIndex = countChildren(nextProps.children) - 1;\n var nextIndex = Math.max(0, Math.min(nextProps.activeIndex, lastPossibleIndex));\n var direction;\n\n if (nextIndex === 0 && previousActiveIndex >= lastPossibleIndex || previousActiveIndex <= nextIndex) {\n direction = 'next';\n } else {\n direction = 'prev';\n }\n\n return {\n direction: direction,\n previousActiveIndex: previousActiveIndex,\n activeIndex: nextIndex\n };\n }\n\n return null;\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(_, prevState) {\n var _this2 = this;\n\n var _this$props3 = this.props,\n bsPrefix = _this$props3.bsPrefix,\n slide = _this$props3.slide,\n onSlideEnd = _this$props3.onSlideEnd;\n if (!slide || this.state.activeIndex === prevState.activeIndex || this._isSliding) return;\n var _this$state = this.state,\n activeIndex = _this$state.activeIndex,\n direction = _this$state.direction;\n var orderClassName, directionalClassName;\n\n if (direction === 'next') {\n orderClassName = bsPrefix + \"-item-next\";\n directionalClassName = bsPrefix + \"-item-left\";\n } else if (direction === 'prev') {\n orderClassName = bsPrefix + \"-item-prev\";\n directionalClassName = bsPrefix + \"-item-right\";\n }\n\n this._isSliding = true;\n this.pause(); // eslint-disable-next-line react/no-did-update-set-state\n\n this.safeSetState({\n prevClasses: 'active',\n currentClasses: orderClassName\n }, function () {\n var items = _this2.carousel.current.children;\n var nextElement = items[activeIndex];\n triggerBrowserReflow(nextElement);\n\n _this2.safeSetState({\n prevClasses: classNames('active', directionalClassName),\n currentClasses: classNames(orderClassName, directionalClassName)\n }, function () {\n return transitionEnd(nextElement, function () {\n _this2.safeSetState({\n prevClasses: '',\n currentClasses: 'active'\n }, _this2.handleSlideEnd);\n\n if (onSlideEnd) {\n onSlideEnd();\n }\n });\n });\n });\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n clearTimeout(this.timeout);\n this.isUnmounted = true;\n };\n\n _proto.safeSetState = function safeSetState(state, cb) {\n var _this3 = this;\n\n if (this.isUnmounted) return;\n this.setState(state, function () {\n return !_this3.isUnmounted && cb();\n });\n } // This might be a public API.\n ;\n\n _proto.pause = function pause() {\n this._isPaused = true;\n clearInterval(this._interval);\n this._interval = null;\n };\n\n _proto.cycle = function cycle() {\n this._isPaused = false;\n clearInterval(this._interval);\n this._interval = null;\n\n if (this.props.interval && !this._isPaused) {\n this._interval = setInterval(document.visibilityState ? this.handleNextWhenVisible : this.handleNext, this.props.interval);\n }\n };\n\n _proto.to = function to(index, event) {\n var children = this.props.children;\n\n if (index < 0 || index > countChildren(children) - 1) {\n return;\n }\n\n if (this._isSliding) {\n this._pendingIndex = index;\n return;\n }\n\n this.select(index, event);\n };\n\n _proto.select = function select(index, event, direction) {\n var _this4 = this;\n\n clearTimeout(this.selectThrottle);\n if (event && event.persist) event.persist(); // The timeout throttles fast clicks, in order to give any pending state\n // a chance to update and propagate back through props\n\n this.selectThrottle = setTimeout(function () {\n clearTimeout(_this4.timeout);\n var _this4$props = _this4.props,\n activeIndex = _this4$props.activeIndex,\n onSelect = _this4$props.onSelect;\n if (index === activeIndex || _this4._isSliding || _this4.isUnmounted) return;\n onSelect(index, direction || (index < activeIndex ? 'prev' : 'next'), event);\n }, 50);\n };\n\n _proto.renderControls = function renderControls(properties) {\n var bsPrefix = this.props.bsPrefix;\n var wrap = properties.wrap,\n children = properties.children,\n activeIndex = properties.activeIndex,\n prevIcon = properties.prevIcon,\n nextIcon = properties.nextIcon,\n prevLabel = properties.prevLabel,\n nextLabel = properties.nextLabel;\n var count = countChildren(children);\n return [(wrap || activeIndex !== 0) && React.createElement(SafeAnchor, {\n key: \"prev\",\n className: bsPrefix + \"-control-prev\",\n onClick: this.handlePrev\n }, prevIcon, prevLabel && React.createElement(\"span\", {\n className: \"sr-only\"\n }, prevLabel)), (wrap || activeIndex !== count - 1) && React.createElement(SafeAnchor, {\n key: \"next\",\n className: bsPrefix + \"-control-next\",\n onClick: this.handleNext\n }, nextIcon, nextLabel && React.createElement(\"span\", {\n className: \"sr-only\"\n }, nextLabel))];\n };\n\n _proto.renderIndicators = function renderIndicators(children, activeIndex) {\n var _this5 = this;\n\n var bsPrefix = this.props.bsPrefix;\n var indicators = [];\n forEach(children, function (child, index) {\n indicators.push(React.createElement(\"li\", {\n key: index,\n className: index === activeIndex ? 'active' : null,\n onClick: function onClick(e) {\n return _this5.to(index, e);\n }\n }), // Force whitespace between indicator elements. Bootstrap requires\n // this for correct spacing of elements.\n ' ');\n });\n return React.createElement(\"ol\", {\n className: bsPrefix + \"-indicators\"\n }, indicators);\n };\n\n _proto.render = function render() {\n var _this$props4 = this.props,\n _this$props4$as = _this$props4.as,\n Component = _this$props4$as === void 0 ? 'div' : _this$props4$as,\n bsPrefix = _this$props4.bsPrefix,\n slide = _this$props4.slide,\n fade = _this$props4.fade,\n indicators = _this$props4.indicators,\n controls = _this$props4.controls,\n wrap = _this$props4.wrap,\n touch = _this$props4.touch,\n prevIcon = _this$props4.prevIcon,\n prevLabel = _this$props4.prevLabel,\n nextIcon = _this$props4.nextIcon,\n nextLabel = _this$props4.nextLabel,\n className = _this$props4.className,\n children = _this$props4.children,\n keyboard = _this$props4.keyboard,\n _5 = _this$props4.activeIndex,\n _4 = _this$props4.pauseOnHover,\n _3 = _this$props4.interval,\n _2 = _this$props4.onSelect,\n _1 = _this$props4.onSlideEnd,\n props = _objectWithoutPropertiesLoose(_this$props4, [\"as\", \"bsPrefix\", \"slide\", \"fade\", \"indicators\", \"controls\", \"wrap\", \"touch\", \"prevIcon\", \"prevLabel\", \"nextIcon\", \"nextLabel\", \"className\", \"children\", \"keyboard\", \"activeIndex\", \"pauseOnHover\", \"interval\", \"onSelect\", \"onSlideEnd\"]);\n\n var _this$state2 = this.state,\n activeIndex = _this$state2.activeIndex,\n previousActiveIndex = _this$state2.previousActiveIndex,\n prevClasses = _this$state2.prevClasses,\n currentClasses = _this$state2.currentClasses;\n return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n React.createElement(Component, _extends({\n onTouchStart: touch ? this.handleTouchStart : undefined,\n onTouchEnd: touch ? this.handleTouchEnd : undefined\n }, props, {\n className: classNames(className, bsPrefix, slide && 'slide', fade && bsPrefix + \"-fade\"),\n onKeyDown: keyboard ? this.handleKeyDown : undefined,\n onMouseOver: this.handleMouseOver,\n onMouseOut: this.handleMouseOut\n }), indicators && this.renderIndicators(children, activeIndex), React.createElement(\"div\", {\n className: bsPrefix + \"-inner\",\n ref: this.carousel\n }, map(children, function (child, index) {\n var current = index === activeIndex;\n var previous = index === previousActiveIndex;\n return cloneElement(child, {\n className: classNames(child.props.className, current && currentClasses, previous && prevClasses)\n });\n })), controls && this.renderControls({\n wrap: wrap,\n children: children,\n activeIndex: activeIndex,\n prevIcon: prevIcon,\n prevLabel: prevLabel,\n nextIcon: nextIcon,\n nextLabel: nextLabel\n }))\n );\n };\n\n return Carousel;\n}(React.Component);\n\nCarousel.defaultProps = defaultProps;\nvar DecoratedCarousel = createBootstrapComponent(uncontrollable(Carousel, {\n activeIndex: 'onSelect'\n}), 'carousel');\nDecoratedCarousel.Caption = CarouselCaption;\nDecoratedCarousel.Item = CarouselItem;\nexport default DecoratedCarousel;","map":null,"metadata":{},"sourceType":"module"} |