\n {carouselItems.map((item, index) => {\n const isIn = (index === this.props.activeIndex);\n return React.cloneElement(item, {\n in: isIn,\n slide: slide,\n });\n })}\n
\n );\n }\n\n render() {\n const { cssModule, slide, className } = this.props;\n const outerClasses = mapToCssModules(classNames(\n className,\n 'carousel',\n slide && 'slide'\n ), cssModule);\n\n const innerClasses = mapToCssModules(classNames(\n 'carousel-inner'\n ), cssModule);\n\n // filter out booleans, null, or undefined\n const children = this.props.children.filter(child => child !== null && child !== undefined && typeof child !== 'boolean');\n\n const slidesOnly = children.every(child => child.type === CarouselItem);\n\n // Rendering only slides\n if (slidesOnly) {\n return (\n \n {this.renderItems(children, innerClasses)}\n
\n );\n }\n\n // Rendering slides and controls\n if (children[0] instanceof Array) {\n const carouselItems = children[0];\n const controlLeft = children[1];\n const controlRight = children[2];\n\n return (\n \n {this.renderItems(carouselItems, innerClasses)}\n {controlLeft}\n {controlRight}\n
\n );\n }\n\n // Rendering indicators, slides and controls\n const indicators = children[0];\n const wrappedOnClick = (e) => {\n if (typeof indicators.props.onClickHandler === 'function') {\n this.setState({ indicatorClicked: true }, () => indicators.props.onClickHandler(e));\n }\n };\n const wrappedIndicators = React.cloneElement(indicators, { onClickHandler: wrappedOnClick });\n const carouselItems = children[1];\n const controlLeft = children[2];\n const controlRight = children[3];\n\n return (\n \n {wrappedIndicators}\n {this.renderItems(carouselItems, innerClasses)}\n {controlLeft}\n {controlRight}\n
\n );\n }\n}\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 /* 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([\n PropTypes.number,\n PropTypes.string,\n PropTypes.bool,\n ]),\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};\n\nCarousel.defaultProps = {\n interval: 5000,\n pause: 'hover',\n keyboard: true,\n slide: true,\n};\n\nCarousel.childContextTypes = {\n direction: PropTypes.string\n};\n\nexport default Carousel;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselControl = (props) => {\n const { direction, onClickHandler, cssModule, directionText, className } = props;\n\n const anchorClasses = mapToCssModules(classNames(\n className,\n `carousel-control-${direction}`\n ), cssModule);\n\n const iconClasses = mapToCssModules(classNames(\n `carousel-control-${direction}-icon`\n ), cssModule);\n\n const screenReaderClasses = mapToCssModules(classNames(\n 'sr-only'\n ), cssModule);\n\n\n return (\n - \n {indicators}\n
\n
\n );\n};\n\nCarouselCaption.propTypes = {\n captionHeader: PropTypes.string,\n captionText: PropTypes.string.isRequired,\n cssModule: PropTypes.object,\n className: PropTypes.string,\n};\n\nexport default CarouselCaption;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Carousel from './Carousel';\nimport CarouselItem from './CarouselItem';\nimport CarouselControl from './CarouselControl';\nimport CarouselIndicators from './CarouselIndicators';\nimport CarouselCaption from './CarouselCaption';\n\nconst propTypes = {\n items: PropTypes.array.isRequired,\n indicators: PropTypes.bool,\n controls: PropTypes.bool,\n autoPlay: PropTypes.bool,\n activeIndex: PropTypes.number,\n next: PropTypes.func,\n previous: PropTypes.func,\n goToIndex: PropTypes.func,\n};\n\nclass UncontrolledCarousel extends Component {\n constructor(props) {\n super(props);\n this.animating = false;\n this.state = { activeIndex: 0 };\n this.next = this.next.bind(this);\n this.previous = this.previous.bind(this);\n this.goToIndex = this.goToIndex.bind(this);\n this.onExiting = this.onExiting.bind(this);\n this.onExited = this.onExited.bind(this);\n }\n\n onExiting() {\n this.animating = true;\n }\n\n onExited() {\n this.animating = false;\n }\n\n next() {\n if (this.animating) return;\n const nextIndex = this.state.activeIndex === this.props.items.length - 1 ? 0 : this.state.activeIndex + 1;\n this.setState({ activeIndex: nextIndex });\n }\n\n previous() {\n if (this.animating) return;\n const nextIndex = this.state.activeIndex === 0 ? this.props.items.length - 1 : this.state.activeIndex - 1;\n this.setState({ activeIndex: nextIndex });\n }\n\n goToIndex(newIndex) {\n if (this.animating) return;\n this.setState({ activeIndex: newIndex });\n }\n\n render() {\n const { autoPlay, indicators, controls, items, goToIndex, ...props } = this.props;\n const { activeIndex } = this.state;\n\n const slides = items.map((item) => {\n return (\n {captionHeader}
\n{captionText}
\n\n \n \n
\n );\n }\n\n if (type !== 'checkbox' && type !== 'radio') {\n return ;\n }\n\n const wrapperClasses = classNames(\n customClass,\n mapToCssModules(classNames(\n 'custom-control',\n { 'custom-control-inline': inline }\n ), cssModule)\n );\n\n return (\n \n
\n );\n}\n\nCustomInput.propTypes = propTypes;\n\nexport default CustomInput;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\nimport { Arrow, Popper as ReactPopper } from 'react-popper';\nimport { getTarget, targetPropType, mapToCssModules, DOMElement } from './utils';\n\nconst propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n placement: PropTypes.string,\n placementPrefix: PropTypes.string,\n arrowClassName: PropTypes.string,\n hideArrow: PropTypes.bool,\n tag: PropTypes.string,\n isOpen: PropTypes.bool.isRequired,\n cssModule: PropTypes.object,\n offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n fallbackPlacement: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n flip: PropTypes.bool,\n container: targetPropType,\n target: targetPropType.isRequired,\n modifiers: PropTypes.object,\n boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),\n};\n\nconst defaultProps = {\n boundariesElement: 'scrollParent',\n placement: 'auto',\n hideArrow: false,\n isOpen: false,\n offset: 0,\n fallbackPlacement: 'flip',\n flip: true,\n container: 'body',\n modifiers: {},\n};\n\nconst childContextTypes = {\n popperManager: PropTypes.object.isRequired,\n};\n\nclass PopperContent extends React.Component {\n constructor(props) {\n super(props);\n\n this.handlePlacementChange = this.handlePlacementChange.bind(this);\n this.setTargetNode = this.setTargetNode.bind(this);\n this.getTargetNode = this.getTargetNode.bind(this);\n this.state = {};\n }\n\n getChildContext() {\n return {\n popperManager: {\n setTargetNode: this.setTargetNode,\n getTargetNode: this.getTargetNode,\n },\n };\n }\n\n componentDidMount() {\n this.handleProps();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.isOpen !== prevProps.isOpen) {\n this.handleProps();\n } else if (this._element) {\n // rerender\n this.renderIntoSubtree();\n }\n }\n\n componentWillUnmount() {\n this.hide();\n }\n\n setTargetNode(node) {\n this.targetNode = node;\n }\n\n getTargetNode() {\n return this.targetNode;\n }\n\n getContainerNode() {\n return getTarget(this.props.container);\n }\n\n handlePlacementChange(data) {\n if (this.state.placement !== data.placement) {\n this.setState({ placement: data.placement });\n }\n return data;\n }\n\n handleProps() {\n if (this.props.container !== 'inline') {\n if (this.props.isOpen) {\n this.show();\n } else {\n this.hide();\n }\n }\n }\n\n hide() {\n if (this._element) {\n this.getContainerNode().removeChild(this._element);\n ReactDOM.unmountComponentAtNode(this._element);\n this._element = null;\n }\n }\n\n show() {\n this._element = document.createElement('div');\n this.getContainerNode().appendChild(this._element);\n this.renderIntoSubtree();\n if (this._element.childNodes && this._element.childNodes[0] && this._element.childNodes[0].focus) {\n this._element.childNodes[0].focus();\n }\n }\n\n renderIntoSubtree() {\n ReactDOM.unstable_renderSubtreeIntoContainer(\n this,\n this.renderChildren(),\n this._element\n );\n }\n\n renderChildren() {\n const {\n cssModule,\n children,\n isOpen,\n flip,\n target,\n offset,\n fallbackPlacement,\n placementPrefix,\n arrowClassName: _arrowClassName,\n hideArrow,\n className,\n tag,\n container,\n modifiers,\n boundariesElement,\n ...attrs\n } = this.props;\n const arrowClassName = mapToCssModules(classNames(\n 'arrow',\n _arrowClassName\n ), cssModule);\n const placement = (this.state.placement || attrs.placement).split('-')[0];\n const popperClassName = mapToCssModules(classNames(\n className,\n placementPrefix ? `${placementPrefix}-${placement}` : placement\n ), this.props.cssModule);\n\n const extendedModifiers = {\n offset: { offset },\n flip: { enabled: flip, behavior: fallbackPlacement },\n preventOverflow: { boundariesElement },\n update: {\n enabled: true,\n order: 950,\n fn: this.handlePlacementChange,\n },\n ...modifiers,\n };\n\n return (\n \n \n {external}\n {this.renderModalDialog()}\n \n {Backdrop}\n
\n