import React, { Component, forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Manager, Popper, Reference } from 'react-popper'; import ReactDOM from 'react-dom'; import { Transition } from 'react-transition-group'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function getScrollbarWidth() { var scrollDiv = document.createElement('div'); // .modal-scrollbar-measure styles // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/scss/_modal.scss#L106-L113 scrollDiv.style.position = 'absolute'; scrollDiv.style.top = '-9999px'; scrollDiv.style.width = '50px'; scrollDiv.style.height = '50px'; scrollDiv.style.overflow = 'scroll'; document.body.appendChild(scrollDiv); var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; } function setScrollbarWidth(padding) { document.body.style.paddingRight = padding > 0 ? padding + "px" : null; } function isBodyOverflowing() { return document.body.clientWidth < window.innerWidth; } function getOriginalBodyPadding() { var style = window.getComputedStyle(document.body, null); return parseInt(style && style.getPropertyValue('padding-right') || 0, 10); } function conditionallyUpdateScrollbar() { var scrollbarWidth = getScrollbarWidth(); // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/js/src/modal.js#L433 var fixedContent = document.querySelectorAll('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top')[0]; var bodyPadding = fixedContent ? parseInt(fixedContent.style.paddingRight || 0, 10) : 0; if (isBodyOverflowing()) { setScrollbarWidth(bodyPadding + scrollbarWidth); } } var globalCssModule; function setGlobalCssModule(cssModule) { globalCssModule = cssModule; } function mapToCssModules(className, cssModule) { if (className === void 0) { className = ''; } if (cssModule === void 0) { cssModule = globalCssModule; } if (!cssModule) return className; return className.split(' ').map(function (c) { return cssModule[c] || c; }).join(' '); } /** * Returns a new object with the key/value pairs from `obj` that are not in the array `omitKeys`. */ function omit(obj, omitKeys) { var result = {}; Object.keys(obj).forEach(function (key) { if (omitKeys.indexOf(key) === -1) { result[key] = obj[key]; } }); return result; } /** * Returns a filtered copy of an object with only the specified keys. */ function pick(obj, keys) { var pickKeys = Array.isArray(keys) ? keys : [keys]; var length = pickKeys.length; var key; var result = {}; while (length > 0) { length -= 1; key = pickKeys[length]; result[key] = obj[key]; } return result; } var warned = {}; function warnOnce(message) { if (!warned[message]) { /* istanbul ignore else */ if (typeof console !== 'undefined') { console.error(message); // eslint-disable-line no-console } warned[message] = true; } } function deprecated(propType, explanation) { return function validate(props, propName, componentName) { if (props[propName] !== null && typeof props[propName] !== 'undefined') { warnOnce("\"" + propName + "\" property of \"" + componentName + "\" has been deprecated.\n" + explanation); } for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) { rest[_key - 3] = arguments[_key]; } return propType.apply(void 0, [props, propName, componentName].concat(rest)); }; } // Shim Element if needed (e.g. in Node environment) var Element = typeof window === 'object' && window.Element || function () {}; function DOMElement(props, propName, componentName) { if (!(props[propName] instanceof Element)) { return new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. Expected prop to be an instance of Element. Validation failed.'); } } var targetPropType = PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement, PropTypes.shape({ current: PropTypes.any })]); var tagPropType = PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func })]))]); /* eslint key-spacing: ["error", { afterColon: true, align: "value" }] */ // These are all setup to match what is in the bootstrap _variables.scss // https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss var TransitionTimeouts = { Fade: 150, // $transition-fade Collapse: 350, // $transition-collapse Modal: 300, // $modal-transition Carousel: 600 // $carousel-transition }; // Duplicated Transition.propType keys to ensure that Reactstrap builds // for distribution properly exclude these keys for nested child HTML attributes // since `react-transition-group` removes propTypes in production builds. var TransitionPropTypeKeys = ['in', 'mountOnEnter', 'unmountOnExit', 'appear', 'enter', 'exit', 'timeout', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited']; var TransitionStatuses = { ENTERING: 'entering', ENTERED: 'entered', EXITING: 'exiting', EXITED: 'exited' }; var keyCodes = { esc: 27, space: 32, enter: 13, tab: 9, up: 38, down: 40, home: 36, end: 35, n: 78, p: 80 }; var PopperPlacements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']; var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); function isReactRefObj(target) { if (target && typeof target === 'object') { return 'current' in target; } return false; } function getTag(value) { if (value == null) { return value === undefined ? '[object Undefined]' : '[object Null]'; } return Object.prototype.toString.call(value); } function toNumber(value) { var type = typeof value; var NAN = 0 / 0; if (type === 'number') { return value; } if (type === 'symbol' || type === 'object' && getTag(value) === '[object Symbol]') { return NAN; } if (isObject(value)) { var other = typeof value.valueOf === 'function' ? value.valueOf() : value; value = isObject(other) ? "" + other : other; } if (type !== 'string') { return value === 0 ? value : +value; } value = value.replace(/^\s+|\s+$/g, ''); var isBinary = /^0b[01]+$/i.test(value); return isBinary || /^0o[0-7]+$/i.test(value) ? parseInt(value.slice(2), isBinary ? 2 : 8) : /^[-+]0x[0-9a-f]+$/i.test(value) ? NAN : +value; } function isObject(value) { var type = typeof value; return value != null && (type === 'object' || type === 'function'); } function isFunction(value) { if (!isObject(value)) { return false; } var tag = getTag(value); return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object Proxy]'; } function findDOMElements(target) { if (isReactRefObj(target)) { return target.current; } if (isFunction(target)) { return target(); } if (typeof target === 'string' && canUseDOM) { var selection = document.querySelectorAll(target); if (!selection.length) { selection = document.querySelectorAll("#" + target); } if (!selection.length) { throw new Error("The target '" + target + "' could not be identified in the dom, tip: check spelling"); } return selection; } return target; } function isArrayOrNodeList(els) { if (els === null) { return false; } return Array.isArray(els) || canUseDOM && typeof els.length === 'number'; } function getTarget(target, allElements) { var els = findDOMElements(target); if (allElements) { if (isArrayOrNodeList(els)) { return els; } if (els === null) { return []; } return [els]; } else { if (isArrayOrNodeList(els)) { return els[0]; } return els; } } var defaultToggleEvents = ['touchstart', 'click']; function addMultipleEventListeners(_els, handler, _events, useCapture) { var els = _els; if (!isArrayOrNodeList(els)) { els = [els]; } var events = _events; if (typeof events === 'string') { events = events.split(/\s+/); } if (!isArrayOrNodeList(els) || typeof handler !== 'function' || !Array.isArray(events)) { throw new Error("\n The first argument of this function must be DOM node or an array on DOM nodes or NodeList.\n The second must be a function.\n The third is a string or an array of strings that represents DOM events\n "); } Array.prototype.forEach.call(events, function (event) { Array.prototype.forEach.call(els, function (el) { el.addEventListener(event, handler, useCapture); }); }); return function removeEvents() { Array.prototype.forEach.call(events, function (event) { Array.prototype.forEach.call(els, function (el) { el.removeEventListener(event, handler, useCapture); }); }); }; } var focusableElements = ['a[href]', 'area[href]', 'input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'object', 'embed', '[tabindex]:not(.modal)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])']; var utils = /*#__PURE__*/Object.freeze({ __proto__: null, getScrollbarWidth: getScrollbarWidth, setScrollbarWidth: setScrollbarWidth, isBodyOverflowing: isBodyOverflowing, getOriginalBodyPadding: getOriginalBodyPadding, conditionallyUpdateScrollbar: conditionallyUpdateScrollbar, setGlobalCssModule: setGlobalCssModule, mapToCssModules: mapToCssModules, omit: omit, pick: pick, warnOnce: warnOnce, deprecated: deprecated, DOMElement: DOMElement, targetPropType: targetPropType, tagPropType: tagPropType, TransitionTimeouts: TransitionTimeouts, TransitionPropTypeKeys: TransitionPropTypeKeys, TransitionStatuses: TransitionStatuses, keyCodes: keyCodes, PopperPlacements: PopperPlacements, canUseDOM: canUseDOM, isReactRefObj: isReactRefObj, toNumber: toNumber, isObject: isObject, isFunction: isFunction, findDOMElements: findDOMElements, isArrayOrNodeList: isArrayOrNodeList, getTarget: getTarget, defaultToggleEvents: defaultToggleEvents, addMultipleEventListeners: addMultipleEventListeners, focusableElements: focusableElements }); var propTypes = { tag: tagPropType, fluid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps = { tag: 'div' }; var Container = function Container(props) { var className = props.className, cssModule = props.cssModule, fluid = props.fluid, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "fluid", "tag"]); var containerClass = 'container'; if (fluid === true) { containerClass = 'container-fluid'; } else if (fluid) { containerClass = "container-" + fluid; } var classes = mapToCssModules(classNames(className, containerClass), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; Container.propTypes = propTypes; Container.defaultProps = defaultProps; var rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl']; var rowColsPropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); var propTypes$1 = { tag: tagPropType, noGutters: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object, form: PropTypes.bool, xs: rowColsPropType, sm: rowColsPropType, md: rowColsPropType, lg: rowColsPropType, xl: rowColsPropType }; var defaultProps$1 = { tag: 'div', widths: rowColWidths }; var Row = function Row(props) { var className = props.className, cssModule = props.cssModule, noGutters = props.noGutters, Tag = props.tag, form = props.form, widths = props.widths, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "noGutters", "tag", "form", "widths"]); var colClasses = []; widths.forEach(function (colWidth, i) { var colSize = props[colWidth]; delete attributes[colWidth]; if (!colSize) { return; } var isXs = !i; colClasses.push(isXs ? "row-cols-" + colSize : "row-cols-" + colWidth + "-" + colSize); }); var classes = mapToCssModules(classNames(className, noGutters ? 'no-gutters' : null, form ? 'form-row' : 'row', colClasses), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; Row.propTypes = propTypes$1; Row.defaultProps = defaultProps$1; var colWidths = ['xs', 'sm', 'md', 'lg', 'xl']; var stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); var columnProps = PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.shape({ size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]), order: stringOrNumberProp, offset: stringOrNumberProp })]); var propTypes$2 = { tag: tagPropType, xs: columnProps, sm: columnProps, md: columnProps, lg: columnProps, xl: columnProps, className: PropTypes.string, cssModule: PropTypes.object, widths: PropTypes.array }; var defaultProps$2 = { tag: 'div', widths: colWidths }; var getColumnSizeClass = function getColumnSizeClass(isXs, colWidth, colSize) { if (colSize === true || colSize === '') { return isXs ? 'col' : "col-" + colWidth; } else if (colSize === 'auto') { return isXs ? 'col-auto' : "col-" + colWidth + "-auto"; } return isXs ? "col-" + colSize : "col-" + colWidth + "-" + colSize; }; var Col = function Col(props) { var className = props.className, cssModule = props.cssModule, widths = props.widths, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "widths", "tag"]); var colClasses = []; widths.forEach(function (colWidth, i) { var columnProp = props[colWidth]; delete attributes[colWidth]; if (!columnProp && columnProp !== '') { return; } var isXs = !i; if (isObject(columnProp)) { var _classNames; var colSizeInterfix = isXs ? '-' : "-" + colWidth + "-"; var colClass = getColumnSizeClass(isXs, colWidth, columnProp.size); colClasses.push(mapToCssModules(classNames((_classNames = {}, _classNames[colClass] = columnProp.size || columnProp.size === '', _classNames["order" + colSizeInterfix + columnProp.order] = columnProp.order || columnProp.order === 0, _classNames["offset" + colSizeInterfix + columnProp.offset] = columnProp.offset || columnProp.offset === 0, _classNames)), cssModule)); } else { var _colClass = getColumnSizeClass(isXs, colWidth, columnProp); colClasses.push(_colClass); } }); if (!colClasses.length) { colClasses.push('col'); } var classes = mapToCssModules(classNames(className, colClasses), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; Col.propTypes = propTypes$2; Col.defaultProps = defaultProps$2; var propTypes$3 = { light: PropTypes.bool, dark: PropTypes.bool, full: PropTypes.bool, fixed: PropTypes.string, sticky: PropTypes.string, color: PropTypes.string, role: PropTypes.string, tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object, expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) }; var defaultProps$3 = { tag: 'nav', expand: false }; var getExpandClass = function getExpandClass(expand) { if (expand === false) { return false; } else if (expand === true || expand === 'xs') { return 'navbar-expand'; } return "navbar-expand-" + expand; }; var Navbar = function Navbar(props) { var _classNames; var expand = props.expand, className = props.className, cssModule = props.cssModule, light = props.light, dark = props.dark, fixed = props.fixed, sticky = props.sticky, color = props.color, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["expand", "className", "cssModule", "light", "dark", "fixed", "sticky", "color", "tag"]); var classes = mapToCssModules(classNames(className, 'navbar', getExpandClass(expand), (_classNames = { 'navbar-light': light, 'navbar-dark': dark }, _classNames["bg-" + color] = color, _classNames["fixed-" + fixed] = fixed, _classNames["sticky-" + sticky] = sticky, _classNames)), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; Navbar.propTypes = propTypes$3; Navbar.defaultProps = defaultProps$3; var propTypes$4 = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$4 = { tag: 'a' }; var NavbarBrand = function NavbarBrand(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'navbar-brand'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; NavbarBrand.propTypes = propTypes$4; NavbarBrand.defaultProps = defaultProps$4; var propTypes$5 = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$5 = { tag: 'span' }; var NavbarText = function NavbarText(props) { var className = props.className, cssModule = props.cssModule, active = props.active, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "active", "tag"]); var classes = mapToCssModules(classNames(className, 'navbar-text'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; NavbarText.propTypes = propTypes$5; NavbarText.defaultProps = defaultProps$5; var propTypes$6 = { tag: tagPropType, type: PropTypes.string, className: PropTypes.string, cssModule: PropTypes.object, children: PropTypes.node }; var defaultProps$6 = { tag: 'button', type: 'button' }; var NavbarToggler = function NavbarToggler(props) { var className = props.className, cssModule = props.cssModule, children = props.children, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "children", "tag"]); var classes = mapToCssModules(classNames(className, 'navbar-toggler'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({ "aria-label": "Toggle navigation" }, attributes, { className: classes }), children || /*#__PURE__*/React.createElement("span", { className: mapToCssModules('navbar-toggler-icon', cssModule) })); }; NavbarToggler.propTypes = propTypes$6; NavbarToggler.defaultProps = defaultProps$6; var propTypes$7 = { tabs: PropTypes.bool, pills: PropTypes.bool, vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), horizontal: PropTypes.string, justified: PropTypes.bool, fill: PropTypes.bool, navbar: PropTypes.bool, card: PropTypes.bool, tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$7 = { tag: 'ul', vertical: false }; var getVerticalClass = function getVerticalClass(vertical) { if (vertical === false) { return false; } else if (vertical === true || vertical === 'xs') { return 'flex-column'; } return "flex-" + vertical + "-column"; }; var Nav = function Nav(props) { var className = props.className, cssModule = props.cssModule, tabs = props.tabs, pills = props.pills, vertical = props.vertical, horizontal = props.horizontal, justified = props.justified, fill = props.fill, navbar = props.navbar, card = props.card, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tabs", "pills", "vertical", "horizontal", "justified", "fill", "navbar", "card", "tag"]); var classes = mapToCssModules(classNames(className, navbar ? 'navbar-nav' : 'nav', horizontal ? "justify-content-" + horizontal : false, getVerticalClass(vertical), { 'nav-tabs': tabs, 'card-header-tabs': card && tabs, 'nav-pills': pills, 'card-header-pills': card && pills, 'nav-justified': justified, 'nav-fill': fill }), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; Nav.propTypes = propTypes$7; Nav.defaultProps = defaultProps$7; var propTypes$8 = { tag: tagPropType, active: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$8 = { tag: 'li' }; var NavItem = function NavItem(props) { var className = props.className, cssModule = props.cssModule, active = props.active, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "active", "tag"]); var classes = mapToCssModules(classNames(className, 'nav-item', active ? 'active' : false), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; NavItem.propTypes = propTypes$8; NavItem.defaultProps = defaultProps$8; var propTypes$9 = { tag: tagPropType, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), disabled: PropTypes.bool, active: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object, onClick: PropTypes.func, href: PropTypes.any }; var defaultProps$9 = { tag: 'a' }; var NavLink = /*#__PURE__*/function (_React$Component) { _inheritsLoose(NavLink, _React$Component); function NavLink(props) { var _this; _this = _React$Component.call(this, props) || this; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); return _this; } var _proto = NavLink.prototype; _proto.onClick = function onClick(e) { if (this.props.disabled) { e.preventDefault(); return; } if (this.props.href === '#') { e.preventDefault(); } if (this.props.onClick) { this.props.onClick(e); } }; _proto.render = function render() { var _this$props = this.props, className = _this$props.className, cssModule = _this$props.cssModule, active = _this$props.active, Tag = _this$props.tag, innerRef = _this$props.innerRef, attributes = _objectWithoutPropertiesLoose(_this$props, ["className", "cssModule", "active", "tag", "innerRef"]); var classes = mapToCssModules(classNames(className, 'nav-link', { disabled: attributes.disabled, active: active }), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { ref: innerRef, onClick: this.onClick, className: classes })); }; return NavLink; }(React.Component); NavLink.propTypes = propTypes$9; NavLink.defaultProps = defaultProps$9; var propTypes$a = { tag: tagPropType, listTag: tagPropType, className: PropTypes.string, listClassName: PropTypes.string, cssModule: PropTypes.object, children: PropTypes.node, 'aria-label': PropTypes.string }; var defaultProps$a = { tag: 'nav', listTag: 'ol', 'aria-label': 'breadcrumb' }; var Breadcrumb = function Breadcrumb(props) { var className = props.className, listClassName = props.listClassName, cssModule = props.cssModule, children = props.children, Tag = props.tag, ListTag = props.listTag, label = props['aria-label'], attributes = _objectWithoutPropertiesLoose(props, ["className", "listClassName", "cssModule", "children", "tag", "listTag", "aria-label"]); var classes = mapToCssModules(classNames(className), cssModule); var listClasses = mapToCssModules(classNames('breadcrumb', listClassName), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes, "aria-label": label }), /*#__PURE__*/React.createElement(ListTag, { className: listClasses }, children)); }; Breadcrumb.propTypes = propTypes$a; Breadcrumb.defaultProps = defaultProps$a; var propTypes$b = { tag: tagPropType, active: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$b = { tag: 'li' }; var BreadcrumbItem = function BreadcrumbItem(props) { var className = props.className, cssModule = props.cssModule, active = props.active, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "active", "tag"]); var classes = mapToCssModules(classNames(className, active ? 'active' : false, 'breadcrumb-item'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes, "aria-current": active ? 'page' : undefined })); }; BreadcrumbItem.propTypes = propTypes$b; BreadcrumbItem.defaultProps = defaultProps$b; var propTypes$c = { active: PropTypes.bool, 'aria-label': PropTypes.string, block: PropTypes.bool, color: PropTypes.string, disabled: PropTypes.bool, outline: PropTypes.bool, tag: tagPropType, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), onClick: PropTypes.func, size: PropTypes.string, children: PropTypes.node, className: PropTypes.string, cssModule: PropTypes.object, close: PropTypes.bool }; var defaultProps$c = { color: 'secondary', tag: 'button' }; var Button = /*#__PURE__*/function (_React$Component) { _inheritsLoose(Button, _React$Component); function Button(props) { var _this; _this = _React$Component.call(this, props) || this; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); return _this; } var _proto = Button.prototype; _proto.onClick = function onClick(e) { if (this.props.disabled) { e.preventDefault(); return; } if (this.props.onClick) { return this.props.onClick(e); } }; _proto.render = function render() { var _this$props = this.props, active = _this$props.active, ariaLabel = _this$props['aria-label'], block = _this$props.block, className = _this$props.className, close = _this$props.close, cssModule = _this$props.cssModule, color = _this$props.color, outline = _this$props.outline, size = _this$props.size, Tag = _this$props.tag, innerRef = _this$props.innerRef, attributes = _objectWithoutPropertiesLoose(_this$props, ["active", "aria-label", "block", "className", "close", "cssModule", "color", "outline", "size", "tag", "innerRef"]); if (close && typeof attributes.children === 'undefined') { attributes.children = /*#__PURE__*/React.createElement("span", { "aria-hidden": true }, "\xD7"); } var btnOutlineColor = "btn" + (outline ? '-outline' : '') + "-" + color; var classes = mapToCssModules(classNames(className, { close: close }, close || 'btn', close || btnOutlineColor, size ? "btn-" + size : false, block ? 'btn-block' : false, { active: active, disabled: this.props.disabled }), cssModule); if (attributes.href && Tag === 'button') { Tag = 'a'; } var defaultAriaLabel = close ? 'Close' : null; return /*#__PURE__*/React.createElement(Tag, _extends({ type: Tag === 'button' && attributes.onClick ? 'button' : undefined }, attributes, { className: classes, ref: innerRef, onClick: this.onClick, "aria-label": ariaLabel || defaultAriaLabel })); }; return Button; }(React.Component); Button.propTypes = propTypes$c; Button.defaultProps = defaultProps$c; var propTypes$d = { onClick: PropTypes.func, onBlur: PropTypes.func, onFocus: PropTypes.func, defaultValue: PropTypes.bool }; var defaultProps$d = { defaultValue: false }; var ButtonToggle = /*#__PURE__*/function (_React$Component) { _inheritsLoose(ButtonToggle, _React$Component); function ButtonToggle(props) { var _this; _this = _React$Component.call(this, props) || this; _this.state = { toggled: props.defaultValue, focus: false }; _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this)); _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this)); _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); return _this; } var _proto = ButtonToggle.prototype; _proto.onBlur = function onBlur(e) { if (this.props.onBlur) { this.props.onBlur(e); } this.setState({ focus: false }); }; _proto.onFocus = function onFocus(e) { if (this.props.onFocus) { this.props.onFocus(e); } this.setState({ focus: true }); }; _proto.onClick = function onClick(e) { if (this.props.onClick) { this.props.onClick(e); } this.setState(function (_ref) { var toggled = _ref.toggled; return { toggled: !toggled }; }); }; _proto.render = function render() { var _this$props = this.props, className = _this$props.className, attributes = _objectWithoutPropertiesLoose(_this$props, ["className"]); var classes = mapToCssModules(classNames(className, { focus: this.state.focus }), this.props.cssModule); return /*#__PURE__*/React.createElement(Button, _extends({ active: this.state.toggled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.onClick, className: classes }, attributes)); }; return ButtonToggle; }(React.Component); ButtonToggle.propTypes = propTypes$d; ButtonToggle.defaultProps = defaultProps$d; /** * DropdownContext * { * toggle: PropTypes.func.isRequired, * isOpen: PropTypes.bool.isRequired, * direction: PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired, * inNavbar: PropTypes.bool.isRequired, * disabled: PropTypes.bool * } */ var DropdownContext = /*#__PURE__*/React.createContext({}); var propTypes$e = { a11y: PropTypes.bool, disabled: PropTypes.bool, direction: PropTypes.oneOf(['up', 'down', 'left', 'right']), group: PropTypes.bool, isOpen: PropTypes.bool, nav: PropTypes.bool, active: PropTypes.bool, addonType: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['prepend', 'append'])]), size: PropTypes.string, tag: tagPropType, toggle: PropTypes.func, children: PropTypes.node, className: PropTypes.string, cssModule: PropTypes.object, inNavbar: PropTypes.bool, setActiveFromChild: PropTypes.bool }; var defaultProps$e = { a11y: true, isOpen: false, direction: 'down', nav: false, active: false, addonType: false, inNavbar: false, setActiveFromChild: false }; var preventDefaultKeys = [keyCodes.space, keyCodes.enter, keyCodes.up, keyCodes.down, keyCodes.end, keyCodes.home]; var Dropdown = /*#__PURE__*/function (_React$Component) { _inheritsLoose(Dropdown, _React$Component); function Dropdown(props) { var _this; _this = _React$Component.call(this, props) || this; _this.addEvents = _this.addEvents.bind(_assertThisInitialized(_this)); _this.handleDocumentClick = _this.handleDocumentClick.bind(_assertThisInitialized(_this)); _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this)); _this.removeEvents = _this.removeEvents.bind(_assertThisInitialized(_this)); _this.toggle = _this.toggle.bind(_assertThisInitialized(_this)); _this.handleMenuRef = _this.handleMenuRef.bind(_assertThisInitialized(_this)); _this.containerRef = /*#__PURE__*/React.createRef(); _this.menuRef = /*#__PURE__*/React.createRef(); return _this; } var _proto = Dropdown.prototype; _proto.handleMenuRef = function handleMenuRef(menuRef) { this.menuRef.current = menuRef; }; _proto.getContextValue = function getContextValue() { return { toggle: this.toggle, isOpen: this.props.isOpen, direction: this.props.direction === 'down' && this.props.dropup ? 'up' : this.props.direction, inNavbar: this.props.inNavbar, disabled: this.props.disabled, // Callback that should be called by DropdownMenu to provide a ref to // a HTML tag that's used for the DropdownMenu onMenuRef: this.handleMenuRef }; }; _proto.componentDidMount = function componentDidMount() { this.handleProps(); }; _proto.componentDidUpdate = function componentDidUpdate(prevProps) { if (this.props.isOpen !== prevProps.isOpen) { this.handleProps(); } }; _proto.componentWillUnmount = function componentWillUnmount() { this.removeEvents(); }; _proto.getContainer = function getContainer() { return this.containerRef.current; }; _proto.getMenu = function getMenu() { return this.menuRef.current; }; _proto.getMenuCtrl = function getMenuCtrl() { if (this._$menuCtrl) return this._$menuCtrl; this._$menuCtrl = this.getContainer().querySelector('[aria-expanded]'); return this._$menuCtrl; }; _proto.getMenuItems = function getMenuItems() { // In a real menu with a child DropdownMenu, `this.getMenu()` should never // be null, but it is sometimes null in tests. To mitigate that, we just // use `this.getContainer()` as the fallback `menuContainer`. var menuContainer = this.getMenu() || this.getContainer(); return [].slice.call(menuContainer.querySelectorAll('[role="menuitem"]')); }; _proto.addEvents = function addEvents() { var _this2 = this; ['click', 'touchstart', 'keyup'].forEach(function (event) { return document.addEventListener(event, _this2.handleDocumentClick, true); }); }; _proto.removeEvents = function removeEvents() { var _this3 = this; ['click', 'touchstart', 'keyup'].forEach(function (event) { return document.removeEventListener(event, _this3.handleDocumentClick, true); }); }; _proto.handleDocumentClick = function handleDocumentClick(e) { if (e && (e.which === 3 || e.type === 'keyup' && e.which !== keyCodes.tab)) return; var container = this.getContainer(); var menu = this.getMenu(); var clickIsInContainer = container.contains(e.target) && container !== e.target; var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target; if ((clickIsInContainer || clickIsInMenu) && (e.type !== 'keyup' || e.which === keyCodes.tab)) { return; } this.toggle(e); }; _proto.handleKeyDown = function handleKeyDown(e) { var _this4 = this; var isTargetMenuItem = e.target.getAttribute('role') === 'menuitem'; var isTargetMenuCtrl = this.getMenuCtrl() === e.target; var isTab = keyCodes.tab === e.which; if (/input|textarea/i.test(e.target.tagName) || isTab && !this.props.a11y || isTab && !(isTargetMenuItem || isTargetMenuCtrl)) { return; } if (preventDefaultKeys.indexOf(e.which) !== -1 || e.which >= 48 && e.which <= 90) { e.preventDefault(); } if (this.props.disabled) return; if (isTargetMenuCtrl) { if ([keyCodes.space, keyCodes.enter, keyCodes.up, keyCodes.down].indexOf(e.which) > -1) { // Open the menu (if not open) and focus the first menu item if (!this.props.isOpen) { this.toggle(e); } setTimeout(function () { return _this4.getMenuItems()[0].focus(); }); } else if (this.props.isOpen && isTab) { // Focus the first menu item if tabbing from an open menu. We need this // for cases where the DropdownMenu sets a custom container, which may // not be the natural next item to tab to from the DropdownToggle. e.preventDefault(); this.getMenuItems()[0].focus(); } else if (this.props.isOpen && e.which === keyCodes.esc) { this.toggle(e); } } if (this.props.isOpen && e.target.getAttribute('role') === 'menuitem') { if ([keyCodes.tab, keyCodes.esc].indexOf(e.which) > -1) { this.toggle(e); this.getMenuCtrl().focus(); } else if ([keyCodes.space, keyCodes.enter].indexOf(e.which) > -1) { e.target.click(); this.getMenuCtrl().focus(); } else if ([keyCodes.down, keyCodes.up].indexOf(e.which) > -1 || [keyCodes.n, keyCodes.p].indexOf(e.which) > -1 && e.ctrlKey) { var $menuitems = this.getMenuItems(); var index = $menuitems.indexOf(e.target); if (keyCodes.up === e.which || keyCodes.p === e.which && e.ctrlKey) { index = index !== 0 ? index - 1 : $menuitems.length - 1; } else if (keyCodes.down === e.which || keyCodes.n === e.which && e.ctrlKey) { index = index === $menuitems.length - 1 ? 0 : index + 1; } $menuitems[index].focus(); } else if (keyCodes.end === e.which) { var _$menuitems = this.getMenuItems(); _$menuitems[_$menuitems.length - 1].focus(); } else if (keyCodes.home === e.which) { var _$menuitems2 = this.getMenuItems(); _$menuitems2[0].focus(); } else if (e.which >= 48 && e.which <= 90) { var _$menuitems3 = this.getMenuItems(); var charPressed = String.fromCharCode(e.which).toLowerCase(); for (var i = 0; i < _$menuitems3.length; i += 1) { var firstLetter = _$menuitems3[i].textContent && _$menuitems3[i].textContent[0].toLowerCase(); if (firstLetter === charPressed) { _$menuitems3[i].focus(); break; } } } } }; _proto.handleProps = function handleProps() { if (this.props.isOpen) { this.addEvents(); } else { this.removeEvents(); } }; _proto.toggle = function toggle(e) { if (this.props.disabled) { return e && e.preventDefault(); } return this.props.toggle(e); }; _proto.render = function render() { var _classNames, _ref; var _omit = omit(this.props, ['toggle', 'disabled', 'inNavbar', 'a11y']), className = _omit.className, cssModule = _omit.cssModule, direction = _omit.direction, isOpen = _omit.isOpen, group = _omit.group, size = _omit.size, nav = _omit.nav, setActiveFromChild = _omit.setActiveFromChild, active = _omit.active, addonType = _omit.addonType, tag = _omit.tag, attrs = _objectWithoutPropertiesLoose(_omit, ["className", "cssModule", "direction", "isOpen", "group", "size", "nav", "setActiveFromChild", "active", "addonType", "tag"]); var Tag = tag || (nav ? 'li' : 'div'); var subItemIsActive = false; if (setActiveFromChild) { React.Children.map(this.props.children[1].props.children, function (dropdownItem) { if (dropdownItem && dropdownItem.props.active) subItemIsActive = true; }); } var classes = mapToCssModules(classNames(className, direction !== 'down' && "drop" + direction, nav && active ? 'active' : false, setActiveFromChild && subItemIsActive ? 'active' : false, (_classNames = {}, _classNames["input-group-" + addonType] = addonType, _classNames['btn-group'] = group, _classNames["btn-group-" + size] = !!size, _classNames.dropdown = !group && !addonType, _classNames.show = isOpen, _classNames['nav-item'] = nav, _classNames)), cssModule); return /*#__PURE__*/React.createElement(DropdownContext.Provider, { value: this.getContextValue() }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Tag, _extends({}, attrs, (_ref = {}, _ref[typeof Tag === 'string' ? 'ref' : 'innerRef'] = this.containerRef, _ref), { onKeyDown: this.handleKeyDown, className: classes })))); }; return Dropdown; }(React.Component); Dropdown.propTypes = propTypes$e; Dropdown.defaultProps = defaultProps$e; var propTypes$f = { children: PropTypes.node }; var ButtonDropdown = function ButtonDropdown(props) { return /*#__PURE__*/React.createElement(Dropdown, _extends({ group: true }, props)); }; ButtonDropdown.propTypes = propTypes$f; var propTypes$g = { tag: tagPropType, 'aria-label': PropTypes.string, className: PropTypes.string, cssModule: PropTypes.object, role: PropTypes.string, size: PropTypes.string, vertical: PropTypes.bool }; var defaultProps$f = { tag: 'div', role: 'group' }; var ButtonGroup = function ButtonGroup(props) { var className = props.className, cssModule = props.cssModule, size = props.size, vertical = props.vertical, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "size", "vertical", "tag"]); var classes = mapToCssModules(classNames(className, size ? 'btn-group-' + size : false, vertical ? 'btn-group-vertical' : 'btn-group'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; ButtonGroup.propTypes = propTypes$g; ButtonGroup.defaultProps = defaultProps$f; var propTypes$h = { tag: tagPropType, 'aria-label': PropTypes.string, className: PropTypes.string, cssModule: PropTypes.object, role: PropTypes.string }; var defaultProps$g = { tag: 'div', role: 'toolbar' }; var ButtonToolbar = function ButtonToolbar(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'btn-toolbar'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; ButtonToolbar.propTypes = propTypes$h; ButtonToolbar.defaultProps = defaultProps$g; var propTypes$i = { children: PropTypes.node, active: PropTypes.bool, disabled: PropTypes.bool, divider: PropTypes.bool, tag: tagPropType, header: PropTypes.bool, onClick: PropTypes.func, className: PropTypes.string, cssModule: PropTypes.object, toggle: PropTypes.bool, text: PropTypes.bool }; var defaultProps$h = { tag: 'button', toggle: true }; var DropdownItem = /*#__PURE__*/function (_React$Component) { _inheritsLoose(DropdownItem, _React$Component); function DropdownItem(props) { var _this; _this = _React$Component.call(this, props) || this; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.getTabIndex = _this.getTabIndex.bind(_assertThisInitialized(_this)); return _this; } var _proto = DropdownItem.prototype; _proto.onClick = function onClick(e) { var _this$props = this.props, disabled = _this$props.disabled, header = _this$props.header, divider = _this$props.divider, text = _this$props.text; if (disabled || header || divider || text) { e.preventDefault(); return; } if (this.props.onClick) { this.props.onClick(e); } if (this.props.toggle) { this.context.toggle(e); } }; _proto.getTabIndex = function getTabIndex() { var _this$props2 = this.props, disabled = _this$props2.disabled, header = _this$props2.header, divider = _this$props2.divider, text = _this$props2.text; if (disabled || header || divider || text) { return '-1'; } return '0'; }; _proto.render = function render() { var tabIndex = this.getTabIndex(); var role = tabIndex > -1 ? 'menuitem' : undefined; var _omit = omit(this.props, ['toggle']), className = _omit.className, cssModule = _omit.cssModule, divider = _omit.divider, Tag = _omit.tag, header = _omit.header, active = _omit.active, text = _omit.text, props = _objectWithoutPropertiesLoose(_omit, ["className", "cssModule", "divider", "tag", "header", "active", "text"]); var classes = mapToCssModules(classNames(className, { disabled: props.disabled, 'dropdown-item': !divider && !header && !text, active: active, 'dropdown-header': header, 'dropdown-divider': divider, 'dropdown-item-text': text }), cssModule); if (Tag === 'button') { if (header) { Tag = 'h6'; } else if (divider) { Tag = 'div'; } else if (props.href) { Tag = 'a'; } else if (text) { Tag = 'span'; } } return /*#__PURE__*/React.createElement(Tag, _extends({ type: Tag === 'button' && (props.onClick || this.props.toggle) ? 'button' : undefined }, props, { tabIndex: tabIndex, role: role, className: classes, onClick: this.onClick })); }; return DropdownItem; }(React.Component); DropdownItem.propTypes = propTypes$i; DropdownItem.defaultProps = defaultProps$h; DropdownItem.contextType = DropdownContext; var propTypes$j = { tag: tagPropType, children: PropTypes.node.isRequired, right: PropTypes.bool, flip: PropTypes.bool, modifiers: PropTypes.object, className: PropTypes.string, cssModule: PropTypes.object, persist: PropTypes.bool, positionFixed: PropTypes.bool, container: targetPropType }; var defaultProps$i = { tag: 'div', flip: true }; var noFlipModifier = { flip: { enabled: false } }; var directionPositionMap = { up: 'top', left: 'left', right: 'right', down: 'bottom' }; var DropdownMenu = /*#__PURE__*/function (_React$Component) { _inheritsLoose(DropdownMenu, _React$Component); function DropdownMenu() { return _React$Component.apply(this, arguments) || this; } var _proto = DropdownMenu.prototype; _proto.render = function render() { var _this = this; var _this$props = this.props, className = _this$props.className, cssModule = _this$props.cssModule, right = _this$props.right, tag = _this$props.tag, flip = _this$props.flip, modifiers = _this$props.modifiers, persist = _this$props.persist, positionFixed = _this$props.positionFixed, container = _this$props.container, attrs = _objectWithoutPropertiesLoose(_this$props, ["className", "cssModule", "right", "tag", "flip", "modifiers", "persist", "positionFixed", "container"]); var classes = mapToCssModules(classNames(className, 'dropdown-menu', { 'dropdown-menu-right': right, show: this.context.isOpen }), cssModule); var Tag = tag; if (persist || this.context.isOpen && !this.context.inNavbar) { var position1 = directionPositionMap[this.context.direction] || 'bottom'; var position2 = right ? 'end' : 'start'; var poperPlacement = position1 + "-" + position2; var poperModifiers = !flip ? _extends({}, modifiers, noFlipModifier) : modifiers; var popperPositionFixed = !!positionFixed; var popper = /*#__PURE__*/React.createElement(Popper, { placement: poperPlacement, modifiers: poperModifiers, positionFixed: popperPositionFixed }, function (_ref) { var ref = _ref.ref, style = _ref.style, placement = _ref.placement; var combinedStyle = _extends({}, _this.props.style, style); var handleRef = function handleRef(tagRef) { // Send the ref to `react-popper` ref(tagRef); // Send the ref to the parent Dropdown so that clicks outside // it will cause it to close var onMenuRef = _this.context.onMenuRef; if (onMenuRef) onMenuRef(tagRef); }; return /*#__PURE__*/React.createElement(Tag, _extends({ tabIndex: "-1", role: "menu", ref: handleRef }, attrs, { style: combinedStyle, "aria-hidden": !_this.context.isOpen, className: classes, "x-placement": placement })); }); if (container) { return /*#__PURE__*/ReactDOM.createPortal(popper, getTarget(container)); } else { return popper; } } return /*#__PURE__*/React.createElement(Tag, _extends({ tabIndex: "-1", role: "menu" }, attrs, { "aria-hidden": !this.context.isOpen, className: classes, "x-placement": attrs.placement })); }; return DropdownMenu; }(React.Component); DropdownMenu.propTypes = propTypes$j; DropdownMenu.defaultProps = defaultProps$i; DropdownMenu.contextType = DropdownContext; var propTypes$k = { caret: PropTypes.bool, color: PropTypes.string, children: PropTypes.node, className: PropTypes.string, cssModule: PropTypes.object, disabled: PropTypes.bool, onClick: PropTypes.func, 'aria-haspopup': PropTypes.bool, split: PropTypes.bool, tag: tagPropType, nav: PropTypes.bool }; var defaultProps$j = { 'aria-haspopup': true, color: 'secondary' }; var DropdownToggle = /*#__PURE__*/function (_React$Component) { _inheritsLoose(DropdownToggle, _React$Component); function DropdownToggle(props) { var _this; _this = _React$Component.call(this, props) || this; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); return _this; } var _proto = DropdownToggle.prototype; _proto.onClick = function onClick(e) { if (this.props.disabled || this.context.disabled) { e.preventDefault(); return; } if (this.props.nav && !this.props.tag) { e.preventDefault(); } if (this.props.onClick) { this.props.onClick(e); } this.context.toggle(e); }; _proto.render = function render() { var _this2 = this; var _this$props = this.props, className = _this$props.className, color = _this$props.color, cssModule = _this$props.cssModule, caret = _this$props.caret, split = _this$props.split, nav = _this$props.nav, tag = _this$props.tag, innerRef = _this$props.innerRef, props = _objectWithoutPropertiesLoose(_this$props, ["className", "color", "cssModule", "caret", "split", "nav", "tag", "innerRef"]); var ariaLabel = props['aria-label'] || 'Toggle Dropdown'; var classes = mapToCssModules(classNames(className, { 'dropdown-toggle': caret || split, 'dropdown-toggle-split': split, 'nav-link': nav }), cssModule); var children = typeof props.children !== 'undefined' ? props.children : /*#__PURE__*/React.createElement("span", { className: "sr-only" }, ariaLabel); var Tag; if (nav && !tag) { Tag = 'a'; props.href = '#'; } else if (!tag) { Tag = Button; props.color = color; props.cssModule = cssModule; } else { Tag = tag; } if (this.context.inNavbar) { return /*#__PURE__*/React.createElement(Tag, _extends({}, props, { className: classes, onClick: this.onClick, "aria-expanded": this.context.isOpen, children: children })); } return /*#__PURE__*/React.createElement(Reference, { innerRef: innerRef }, function (_ref) { var _ref2; var ref = _ref.ref; return /*#__PURE__*/React.createElement(Tag, _extends({}, props, (_ref2 = {}, _ref2[typeof Tag === 'string' ? 'ref' : 'innerRef'] = ref, _ref2), { className: classes, onClick: _this2.onClick, "aria-expanded": _this2.context.isOpen, children: children })); }); }; return DropdownToggle; }(React.Component); DropdownToggle.propTypes = propTypes$k; DropdownToggle.defaultProps = defaultProps$j; DropdownToggle.contextType = DropdownContext; var propTypes$l = _extends({}, Transition.propTypes, { children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), tag: tagPropType, baseClass: PropTypes.string, baseClassActive: PropTypes.string, className: PropTypes.string, cssModule: PropTypes.object, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]) }); var defaultProps$k = _extends({}, Transition.defaultProps, { tag: 'div', baseClass: 'fade', baseClassActive: 'show', timeout: TransitionTimeouts.Fade, appear: true, enter: true, exit: true, in: true }); function Fade(props) { var Tag = props.tag, baseClass = props.baseClass, baseClassActive = props.baseClassActive, className = props.className, cssModule = props.cssModule, children = props.children, innerRef = props.innerRef, otherProps = _objectWithoutPropertiesLoose(props, ["tag", "baseClass", "baseClassActive", "className", "cssModule", "children", "innerRef"]); var transitionProps = pick(otherProps, TransitionPropTypeKeys); var childProps = omit(otherProps, TransitionPropTypeKeys); return /*#__PURE__*/React.createElement(Transition, transitionProps, function (status) { var isActive = status === 'entered'; var classes = mapToCssModules(classNames(className, baseClass, isActive && baseClassActive), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({ className: classes }, childProps, { ref: innerRef }), children); }); } Fade.propTypes = propTypes$l; Fade.defaultProps = defaultProps$k; var propTypes$m = { color: PropTypes.string, pill: PropTypes.bool, tag: tagPropType, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), children: PropTypes.node, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$l = { color: 'secondary', pill: false, tag: 'span' }; var Badge = function Badge(props) { var className = props.className, cssModule = props.cssModule, color = props.color, innerRef = props.innerRef, pill = props.pill, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "color", "innerRef", "pill", "tag"]); var classes = mapToCssModules(classNames(className, 'badge', 'badge-' + color, pill ? 'badge-pill' : false), cssModule); if (attributes.href && Tag === 'span') { Tag = 'a'; } return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes, ref: innerRef })); }; Badge.propTypes = propTypes$m; Badge.defaultProps = defaultProps$l; var propTypes$n = { tag: tagPropType, inverse: PropTypes.bool, color: PropTypes.string, body: PropTypes.bool, outline: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]) }; var defaultProps$m = { tag: 'div' }; var Card = function Card(props) { var className = props.className, cssModule = props.cssModule, color = props.color, body = props.body, inverse = props.inverse, outline = props.outline, Tag = props.tag, innerRef = props.innerRef, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "color", "body", "inverse", "outline", "tag", "innerRef"]); var classes = mapToCssModules(classNames(className, 'card', inverse ? 'text-white' : false, body ? 'card-body' : false, color ? (outline ? 'border' : 'bg') + "-" + color : false), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes, ref: innerRef })); }; Card.propTypes = propTypes$n; Card.defaultProps = defaultProps$m; var propTypes$o = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$n = { tag: 'div' }; var CardGroup = function CardGroup(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'card-group'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardGroup.propTypes = propTypes$o; CardGroup.defaultProps = defaultProps$n; var propTypes$p = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$o = { tag: 'div' }; var CardDeck = function CardDeck(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'card-deck'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardDeck.propTypes = propTypes$p; CardDeck.defaultProps = defaultProps$o; var propTypes$q = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$p = { tag: 'div' }; var CardColumns = function CardColumns(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'card-columns'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardColumns.propTypes = propTypes$q; CardColumns.defaultProps = defaultProps$p; var propTypes$r = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]) }; var defaultProps$q = { tag: 'div' }; var CardBody = function CardBody(props) { var className = props.className, cssModule = props.cssModule, innerRef = props.innerRef, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "innerRef", "tag"]); var classes = mapToCssModules(classNames(className, 'card-body'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes, ref: innerRef })); }; CardBody.propTypes = propTypes$r; CardBody.defaultProps = defaultProps$q; var propTypes$s = { tag: tagPropType, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$r = { tag: 'a' }; var CardLink = function CardLink(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, innerRef = props.innerRef, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "innerRef"]); var classes = mapToCssModules(classNames(className, 'card-link'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { ref: innerRef, className: classes })); }; CardLink.propTypes = propTypes$s; CardLink.defaultProps = defaultProps$r; var propTypes$t = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$s = { tag: 'div' }; var CardFooter = function CardFooter(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'card-footer'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardFooter.propTypes = propTypes$t; CardFooter.defaultProps = defaultProps$s; var propTypes$u = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$t = { tag: 'div' }; var CardHeader = function CardHeader(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'card-header'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardHeader.propTypes = propTypes$u; CardHeader.defaultProps = defaultProps$t; var propTypes$v = { tag: tagPropType, top: PropTypes.bool, bottom: PropTypes.bool, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$u = { tag: 'img' }; var CardImg = function CardImg(props) { var className = props.className, cssModule = props.cssModule, top = props.top, bottom = props.bottom, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "top", "bottom", "tag"]); var cardImgClassName = 'card-img'; if (top) { cardImgClassName = 'card-img-top'; } if (bottom) { cardImgClassName = 'card-img-bottom'; } var classes = mapToCssModules(classNames(className, cardImgClassName), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardImg.propTypes = propTypes$v; CardImg.defaultProps = defaultProps$u; var propTypes$w = { tag: tagPropType, className: PropTypes.string, cssModule: PropTypes.object }; var defaultProps$v = { tag: 'div' }; var CardImgOverlay = function CardImgOverlay(props) { var className = props.className, cssModule = props.cssModule, Tag = props.tag, attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]); var classes = mapToCssModules(classNames(className, 'card-img-overlay'), cssModule); return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, { className: classes })); }; CardImgOverlay.propTypes = propTypes$w; CardImgOverlay.defaultProps = defaultProps$v; var CarouselItem = /*#__PURE__*/function (_React$Component) { _inheritsLoose(CarouselItem, _React$Component); function CarouselItem(props) { var _this; _this = _React$Component.call(this, props) || this; _this.state = { startAnimation: false }; _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this)); _this.onEntering = _this.onEntering.bind(_assertThisInitialized(_this)); _this.onExit = _this.onExit.bind(_assertThisInitialized(_this)); _this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this)); _this.onExited = _this.onExited.bind(_assertThisInitialized(_this)); return _this; } var _proto = CarouselItem.prototype; _proto.onEnter = function onEnter(node, isAppearing) { this.setState({ startAnimation: false }); this.props.onEnter(node, isAppearing); }; _proto.onEntering = function onEntering(node, isAppearing) { // getting this variable triggers a reflow var offsetHeight = node.offsetHeight; this.setState({ startAnimation: true }); this.props.onEntering(node, isAppearing); return offsetHeight; }; _proto.onExit = function onExit(node) { this.setState({ startAnimation: false }); this.props.onExit(node); }; _proto.onExiting = function onExiting(node) { this.setState({ startAnimation: true }); node.dispatchEvent(new CustomEvent('slide.bs.carousel')); this.props.onExiting(node); }; _proto.onExited = function onExited(node) { node.dispatchEvent(new CustomEvent('slid.bs.carousel')); this.props.onExited(node); }; _proto.render = function render() { var _this2 = this; var _this$props = this.props, isIn = _this$props.in, children = _this$props.children, cssModule = _this$props.cssModule, slide = _this$props.slide, Tag = _this$props.tag, className = _this$props.className, transitionProps = _objectWithoutPropertiesLoose(_this$props, ["in", "children", "cssModule", "slide", "tag", "className"]); return /*#__PURE__*/React.createElement(Transition, _extends({}, transitionProps, { enter: slide, exit: slide, in: isIn, onEnter: this.onEnter, onEntering: this.onEntering, onExit: this.onExit, onExiting: this.onExiting, onExited: this.onExited }), function (status) { var direction = _this2.context.direction; var isActive = status === TransitionStatuses.ENTERED || status === TransitionStatuses.EXITING; var directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) && _this2.state.startAnimation && (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right'); var orderClassName = status === TransitionStatuses.ENTERING && (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev'); var itemClasses = mapToCssModules(classNames(className, 'carousel-item', isActive && 'active', directionClassName, orderClassName), cssModule); return /*#__PURE__*/React.createElement(Tag, { className: itemClasses }, children); }); }; return CarouselItem; }(React.Component); CarouselItem.propTypes = _extends({}, Transition.propTypes, { tag: tagPropType, in: PropTypes.bool, cssModule: PropTypes.object, children: PropTypes.node, slide: PropTypes.bool, className: PropTypes.string }); CarouselItem.defaultProps = _extends({}, Transition.defaultProps, { tag: 'div', timeout: TransitionTimeouts.Carousel, slide: true }); CarouselItem.contextTypes = { direction: PropTypes.string }; 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 }; var CarouselControl = function CarouselControl(props) { var direction = props.direction, onClickHandler = props.onClickHandler, cssModule = props.cssModule, directionText = props.directionText, className = props.className; var anchorClasses = mapToCssModules(classNames(className, "carousel-control-" + direction), cssModule); var iconClasses = mapToCssModules(classNames("carousel-control-" + direction + "-icon"), cssModule); var screenReaderClasses = mapToCssModules(classNames('sr-only'), cssModule); return ( /*#__PURE__*/ // We need to disable this linting rule to use an `` instead of // `