mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-29 03:45:15 +00:00
6106 lines
182 KiB
JavaScript
6106 lines
182 KiB
JavaScript
|
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 `<a>` instead of
|
||
|
// `<button>` because that's what the Bootstrap examples require:
|
||
|
// https://getbootstrap.com/docs/4.5/components/carousel/#with-controls
|
||
|
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
||
|
React.createElement("a", {
|
||
|
className: anchorClasses,
|
||
|
style: {
|
||
|
cursor: "pointer"
|
||
|
},
|
||
|
role: "button",
|
||
|
tabIndex: "0",
|
||
|
onClick: function onClick(e) {
|
||
|
e.preventDefault();
|
||
|
onClickHandler();
|
||
|
}
|
||
|
}, /*#__PURE__*/React.createElement("span", {
|
||
|
className: iconClasses,
|
||
|
"aria-hidden": "true"
|
||
|
}), /*#__PURE__*/React.createElement("span", {
|
||
|
className: screenReaderClasses
|
||
|
}, directionText || direction))
|
||
|
);
|
||
|
};
|
||
|
|
||
|
CarouselControl.propTypes = {
|
||
|
direction: PropTypes.oneOf(['prev', 'next']).isRequired,
|
||
|
onClickHandler: PropTypes.func.isRequired,
|
||
|
cssModule: PropTypes.object,
|
||
|
directionText: PropTypes.string,
|
||
|
className: PropTypes.string
|
||
|
};
|
||
|
|
||
|
var CarouselIndicators = function CarouselIndicators(props) {
|
||
|
var items = props.items,
|
||
|
activeIndex = props.activeIndex,
|
||
|
cssModule = props.cssModule,
|
||
|
onClickHandler = props.onClickHandler,
|
||
|
className = props.className;
|
||
|
var listClasses = mapToCssModules(classNames(className, 'carousel-indicators'), cssModule);
|
||
|
var indicators = items.map(function (item, idx) {
|
||
|
var indicatorClasses = mapToCssModules(classNames({
|
||
|
active: activeIndex === idx
|
||
|
}), cssModule);
|
||
|
return /*#__PURE__*/React.createElement("li", {
|
||
|
key: "" + (item.key || Object.values(item).join('')),
|
||
|
onClick: function onClick(e) {
|
||
|
e.preventDefault();
|
||
|
onClickHandler(idx);
|
||
|
},
|
||
|
className: indicatorClasses
|
||
|
});
|
||
|
});
|
||
|
return /*#__PURE__*/React.createElement("ol", {
|
||
|
className: listClasses
|
||
|
}, indicators);
|
||
|
};
|
||
|
|
||
|
CarouselIndicators.propTypes = {
|
||
|
items: PropTypes.array.isRequired,
|
||
|
activeIndex: PropTypes.number.isRequired,
|
||
|
cssModule: PropTypes.object,
|
||
|
onClickHandler: PropTypes.func.isRequired,
|
||
|
className: PropTypes.string
|
||
|
};
|
||
|
|
||
|
var CarouselCaption = function CarouselCaption(props) {
|
||
|
var captionHeader = props.captionHeader,
|
||
|
captionText = props.captionText,
|
||
|
cssModule = props.cssModule,
|
||
|
className = props.className;
|
||
|
var classes = mapToCssModules(classNames(className, 'carousel-caption', 'd-none', 'd-md-block'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement("div", {
|
||
|
className: classes
|
||
|
}, /*#__PURE__*/React.createElement("h3", null, captionHeader), /*#__PURE__*/React.createElement("p", null, captionText));
|
||
|
};
|
||
|
|
||
|
CarouselCaption.propTypes = {
|
||
|
captionHeader: PropTypes.node,
|
||
|
captionText: PropTypes.node.isRequired,
|
||
|
cssModule: PropTypes.object,
|
||
|
className: PropTypes.string
|
||
|
};
|
||
|
|
||
|
var propTypes$x = {
|
||
|
items: PropTypes.array.isRequired,
|
||
|
indicators: PropTypes.bool,
|
||
|
controls: PropTypes.bool,
|
||
|
autoPlay: PropTypes.bool,
|
||
|
defaultActiveIndex: PropTypes.number,
|
||
|
activeIndex: PropTypes.number,
|
||
|
next: PropTypes.func,
|
||
|
previous: PropTypes.func,
|
||
|
goToIndex: PropTypes.func
|
||
|
};
|
||
|
|
||
|
var UncontrolledCarousel = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledCarousel, _Component);
|
||
|
|
||
|
function UncontrolledCarousel(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.animating = false;
|
||
|
_this.state = {
|
||
|
activeIndex: props.defaultActiveIndex || 0
|
||
|
};
|
||
|
_this.next = _this.next.bind(_assertThisInitialized(_this));
|
||
|
_this.previous = _this.previous.bind(_assertThisInitialized(_this));
|
||
|
_this.goToIndex = _this.goToIndex.bind(_assertThisInitialized(_this));
|
||
|
_this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
|
||
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledCarousel.prototype;
|
||
|
|
||
|
_proto.onExiting = function onExiting() {
|
||
|
this.animating = true;
|
||
|
};
|
||
|
|
||
|
_proto.onExited = function onExited() {
|
||
|
this.animating = false;
|
||
|
};
|
||
|
|
||
|
_proto.next = function next() {
|
||
|
if (this.animating) return;
|
||
|
var nextIndex = this.state.activeIndex === this.props.items.length - 1 ? 0 : this.state.activeIndex + 1;
|
||
|
this.setState({
|
||
|
activeIndex: nextIndex
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.previous = function previous() {
|
||
|
if (this.animating) return;
|
||
|
var nextIndex = this.state.activeIndex === 0 ? this.props.items.length - 1 : this.state.activeIndex - 1;
|
||
|
this.setState({
|
||
|
activeIndex: nextIndex
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.goToIndex = function goToIndex(newIndex) {
|
||
|
if (this.animating) return;
|
||
|
this.setState({
|
||
|
activeIndex: newIndex
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this2 = this;
|
||
|
|
||
|
var _this$props = this.props,
|
||
|
defaultActiveIndex = _this$props.defaultActiveIndex,
|
||
|
autoPlay = _this$props.autoPlay,
|
||
|
indicators = _this$props.indicators,
|
||
|
controls = _this$props.controls,
|
||
|
items = _this$props.items,
|
||
|
goToIndex = _this$props.goToIndex,
|
||
|
props = _objectWithoutPropertiesLoose(_this$props, ["defaultActiveIndex", "autoPlay", "indicators", "controls", "items", "goToIndex"]);
|
||
|
|
||
|
var activeIndex = this.state.activeIndex;
|
||
|
var slides = items.map(function (item) {
|
||
|
var key = item.key || item.src;
|
||
|
return /*#__PURE__*/React.createElement(CarouselItem, {
|
||
|
onExiting: _this2.onExiting,
|
||
|
onExited: _this2.onExited,
|
||
|
key: key
|
||
|
}, /*#__PURE__*/React.createElement("img", {
|
||
|
className: "d-block w-100",
|
||
|
src: item.src,
|
||
|
alt: item.altText
|
||
|
}), /*#__PURE__*/React.createElement(CarouselCaption, {
|
||
|
captionText: item.caption,
|
||
|
captionHeader: item.header || item.caption
|
||
|
}));
|
||
|
});
|
||
|
return /*#__PURE__*/React.createElement(Carousel, _extends({
|
||
|
activeIndex: activeIndex,
|
||
|
next: this.next,
|
||
|
previous: this.previous,
|
||
|
ride: autoPlay ? 'carousel' : undefined
|
||
|
}, props), indicators && /*#__PURE__*/React.createElement(CarouselIndicators, {
|
||
|
items: items,
|
||
|
activeIndex: props.activeIndex || activeIndex,
|
||
|
onClickHandler: goToIndex || this.goToIndex
|
||
|
}), slides, controls && /*#__PURE__*/React.createElement(CarouselControl, {
|
||
|
direction: "prev",
|
||
|
directionText: "Previous",
|
||
|
onClickHandler: props.previous || this.previous
|
||
|
}), controls && /*#__PURE__*/React.createElement(CarouselControl, {
|
||
|
direction: "next",
|
||
|
directionText: "Next",
|
||
|
onClickHandler: props.next || this.next
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
return UncontrolledCarousel;
|
||
|
}(Component);
|
||
|
|
||
|
UncontrolledCarousel.propTypes = propTypes$x;
|
||
|
UncontrolledCarousel.defaultProps = {
|
||
|
controls: true,
|
||
|
indicators: true,
|
||
|
autoPlay: true
|
||
|
};
|
||
|
|
||
|
var propTypes$y = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$w = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var CardSubtitle = function CardSubtitle(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'card-subtitle'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
CardSubtitle.propTypes = propTypes$y;
|
||
|
CardSubtitle.defaultProps = defaultProps$w;
|
||
|
|
||
|
var propTypes$z = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$x = {
|
||
|
tag: 'p'
|
||
|
};
|
||
|
|
||
|
var CardText = function CardText(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'card-text'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
CardText.propTypes = propTypes$z;
|
||
|
CardText.defaultProps = defaultProps$x;
|
||
|
|
||
|
var propTypes$A = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$y = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var CardTitle = function CardTitle(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'card-title'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
CardTitle.propTypes = propTypes$A;
|
||
|
CardTitle.defaultProps = defaultProps$y;
|
||
|
|
||
|
var propTypes$B = {
|
||
|
className: PropTypes.string,
|
||
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||
|
label: PropTypes.node,
|
||
|
valid: PropTypes.bool,
|
||
|
invalid: PropTypes.bool,
|
||
|
bsSize: PropTypes.string,
|
||
|
htmlFor: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
onChange: PropTypes.func,
|
||
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
|
||
|
};
|
||
|
|
||
|
var CustomFileInput = /*#__PURE__*/function (_React$Component) {
|
||
|
_inheritsLoose(CustomFileInput, _React$Component);
|
||
|
|
||
|
function CustomFileInput(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _React$Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
files: null
|
||
|
};
|
||
|
_this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = CustomFileInput.prototype;
|
||
|
|
||
|
_proto.onChange = function onChange(e) {
|
||
|
var input = e.target;
|
||
|
var onChange = this.props.onChange;
|
||
|
var files = this.getSelectedFiles(input);
|
||
|
|
||
|
if (typeof onChange === "function") {
|
||
|
onChange.apply(void 0, arguments);
|
||
|
}
|
||
|
|
||
|
this.setState({
|
||
|
files: files
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.getSelectedFiles = function getSelectedFiles(input) {
|
||
|
var multiple = this.props.multiple;
|
||
|
|
||
|
if (multiple && input.files) {
|
||
|
var files = [].slice.call(input.files);
|
||
|
return files.map(function (file) {
|
||
|
return file.name;
|
||
|
}).join(", ");
|
||
|
}
|
||
|
|
||
|
if (input.value.indexOf("fakepath") !== -1) {
|
||
|
var parts = input.value.split("\\");
|
||
|
return parts[parts.length - 1];
|
||
|
}
|
||
|
|
||
|
return input.value;
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this$props = this.props,
|
||
|
className = _this$props.className,
|
||
|
label = _this$props.label,
|
||
|
valid = _this$props.valid,
|
||
|
invalid = _this$props.invalid,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
children = _this$props.children,
|
||
|
bsSize = _this$props.bsSize,
|
||
|
innerRef = _this$props.innerRef,
|
||
|
htmlFor = _this$props.htmlFor,
|
||
|
type = _this$props.type,
|
||
|
onChange = _this$props.onChange,
|
||
|
dataBrowse = _this$props.dataBrowse,
|
||
|
hidden = _this$props.hidden,
|
||
|
attributes = _objectWithoutPropertiesLoose(_this$props, ["className", "label", "valid", "invalid", "cssModule", "children", "bsSize", "innerRef", "htmlFor", "type", "onChange", "dataBrowse", "hidden"]);
|
||
|
|
||
|
var customClass = mapToCssModules(classNames(className, "custom-file"), cssModule);
|
||
|
var validationClassNames = mapToCssModules(classNames(invalid && "is-invalid", valid && "is-valid"), cssModule);
|
||
|
var labelHtmlFor = htmlFor || attributes.id;
|
||
|
var files = this.state.files;
|
||
|
return /*#__PURE__*/React.createElement("div", {
|
||
|
className: customClass,
|
||
|
hidden: hidden || false
|
||
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
||
|
type: "file"
|
||
|
}, attributes, {
|
||
|
ref: innerRef,
|
||
|
"aria-invalid": invalid,
|
||
|
className: classNames(validationClassNames, mapToCssModules("custom-file-input", cssModule)),
|
||
|
onChange: this.onChange
|
||
|
})), /*#__PURE__*/React.createElement("label", {
|
||
|
className: mapToCssModules("custom-file-label", cssModule),
|
||
|
htmlFor: labelHtmlFor,
|
||
|
"data-browse": dataBrowse
|
||
|
}, files || label || "Choose file"), children);
|
||
|
};
|
||
|
|
||
|
return CustomFileInput;
|
||
|
}(React.Component);
|
||
|
|
||
|
CustomFileInput.propTypes = propTypes$B;
|
||
|
|
||
|
var propTypes$C = {
|
||
|
className: PropTypes.string,
|
||
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||
|
type: PropTypes.string.isRequired,
|
||
|
label: PropTypes.node,
|
||
|
inline: PropTypes.bool,
|
||
|
valid: PropTypes.bool,
|
||
|
invalid: PropTypes.bool,
|
||
|
bsSize: PropTypes.string,
|
||
|
htmlFor: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
|
||
|
};
|
||
|
|
||
|
function CustomInput(props) {
|
||
|
var className = props.className,
|
||
|
label = props.label,
|
||
|
inline = props.inline,
|
||
|
valid = props.valid,
|
||
|
invalid = props.invalid,
|
||
|
cssModule = props.cssModule,
|
||
|
children = props.children,
|
||
|
bsSize = props.bsSize,
|
||
|
innerRef = props.innerRef,
|
||
|
htmlFor = props.htmlFor,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "label", "inline", "valid", "invalid", "cssModule", "children", "bsSize", "innerRef", "htmlFor"]);
|
||
|
|
||
|
var type = attributes.type;
|
||
|
var customClass = mapToCssModules(classNames(className, "custom-" + type, bsSize ? "custom-" + type + "-" + bsSize : false), cssModule);
|
||
|
var validationClassNames = mapToCssModules(classNames(invalid && "is-invalid", valid && "is-valid"), cssModule);
|
||
|
var labelHtmlFor = htmlFor || attributes.id;
|
||
|
|
||
|
if (type === "select") {
|
||
|
var _type = attributes.type,
|
||
|
_rest = _objectWithoutPropertiesLoose(attributes, ["type"]);
|
||
|
|
||
|
return /*#__PURE__*/React.createElement("select", _extends({}, _rest, {
|
||
|
ref: innerRef,
|
||
|
className: classNames(validationClassNames, customClass),
|
||
|
"aria-invalid": invalid
|
||
|
}), children);
|
||
|
}
|
||
|
|
||
|
if (type === "file") {
|
||
|
return /*#__PURE__*/React.createElement(CustomFileInput, props);
|
||
|
}
|
||
|
|
||
|
if (type !== "checkbox" && type !== "radio" && type !== "switch") {
|
||
|
return /*#__PURE__*/React.createElement("input", _extends({}, attributes, {
|
||
|
ref: innerRef,
|
||
|
"aria-invalid": invalid,
|
||
|
className: classNames(validationClassNames, customClass)
|
||
|
}));
|
||
|
}
|
||
|
|
||
|
var wrapperClasses = classNames(customClass, mapToCssModules(classNames("custom-control", {
|
||
|
"custom-control-inline": inline
|
||
|
}), cssModule));
|
||
|
|
||
|
var hidden = attributes.hidden,
|
||
|
rest = _objectWithoutPropertiesLoose(attributes, ["hidden"]);
|
||
|
|
||
|
return /*#__PURE__*/React.createElement("div", {
|
||
|
className: wrapperClasses,
|
||
|
hidden: hidden || false
|
||
|
}, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
||
|
type: type === "switch" ? "checkbox" : type,
|
||
|
ref: innerRef,
|
||
|
"aria-invalid": invalid,
|
||
|
className: classNames(validationClassNames, mapToCssModules("custom-control-input", cssModule))
|
||
|
})), /*#__PURE__*/React.createElement("label", {
|
||
|
className: mapToCssModules("custom-control-label", cssModule),
|
||
|
htmlFor: labelHtmlFor
|
||
|
}, label), children);
|
||
|
}
|
||
|
|
||
|
CustomInput.propTypes = propTypes$C;
|
||
|
|
||
|
function noop() {}
|
||
|
|
||
|
var propTypes$D = {
|
||
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
|
||
|
popperClassName: PropTypes.string,
|
||
|
placement: PropTypes.string,
|
||
|
placementPrefix: PropTypes.string,
|
||
|
arrowClassName: PropTypes.string,
|
||
|
hideArrow: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
isOpen: PropTypes.bool.isRequired,
|
||
|
cssModule: PropTypes.object,
|
||
|
offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
fallbackPlacement: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
||
|
flip: PropTypes.bool,
|
||
|
container: targetPropType,
|
||
|
target: targetPropType.isRequired,
|
||
|
modifiers: PropTypes.object,
|
||
|
positionFixed: PropTypes.bool,
|
||
|
boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
|
||
|
onClosed: PropTypes.func,
|
||
|
fade: PropTypes.bool,
|
||
|
transition: PropTypes.shape(Fade.propTypes)
|
||
|
};
|
||
|
var defaultProps$z = {
|
||
|
boundariesElement: 'scrollParent',
|
||
|
placement: 'auto',
|
||
|
hideArrow: false,
|
||
|
isOpen: false,
|
||
|
offset: 0,
|
||
|
fallbackPlacement: 'flip',
|
||
|
flip: true,
|
||
|
container: 'body',
|
||
|
modifiers: {},
|
||
|
onClosed: noop,
|
||
|
fade: true,
|
||
|
transition: _extends({}, Fade.defaultProps)
|
||
|
};
|
||
|
|
||
|
var PopperContent = /*#__PURE__*/function (_React$Component) {
|
||
|
_inheritsLoose(PopperContent, _React$Component);
|
||
|
|
||
|
function PopperContent(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _React$Component.call(this, props) || this;
|
||
|
_this.setTargetNode = _this.setTargetNode.bind(_assertThisInitialized(_this));
|
||
|
_this.getTargetNode = _this.getTargetNode.bind(_assertThisInitialized(_this));
|
||
|
_this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
|
||
|
_this.onClosed = _this.onClosed.bind(_assertThisInitialized(_this));
|
||
|
_this.state = {
|
||
|
isOpen: props.isOpen
|
||
|
};
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
PopperContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
||
|
if (props.isOpen && !state.isOpen) {
|
||
|
return {
|
||
|
isOpen: props.isOpen
|
||
|
};
|
||
|
} else return null;
|
||
|
};
|
||
|
|
||
|
var _proto = PopperContent.prototype;
|
||
|
|
||
|
_proto.componentDidUpdate = function componentDidUpdate() {
|
||
|
if (this._element && this._element.childNodes && this._element.childNodes[0] && this._element.childNodes[0].focus) {
|
||
|
this._element.childNodes[0].focus();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.setTargetNode = function setTargetNode(node) {
|
||
|
this.targetNode = typeof node === 'string' ? getTarget(node) : node;
|
||
|
};
|
||
|
|
||
|
_proto.getTargetNode = function getTargetNode() {
|
||
|
return this.targetNode;
|
||
|
};
|
||
|
|
||
|
_proto.getContainerNode = function getContainerNode() {
|
||
|
return getTarget(this.props.container);
|
||
|
};
|
||
|
|
||
|
_proto.getRef = function getRef(ref) {
|
||
|
this._element = ref;
|
||
|
};
|
||
|
|
||
|
_proto.onClosed = function onClosed() {
|
||
|
this.props.onClosed();
|
||
|
this.setState({
|
||
|
isOpen: false
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.renderChildren = function renderChildren() {
|
||
|
var _this$props = this.props,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
children = _this$props.children,
|
||
|
isOpen = _this$props.isOpen,
|
||
|
flip = _this$props.flip,
|
||
|
target = _this$props.target,
|
||
|
offset = _this$props.offset,
|
||
|
fallbackPlacement = _this$props.fallbackPlacement,
|
||
|
placementPrefix = _this$props.placementPrefix,
|
||
|
_arrowClassName = _this$props.arrowClassName,
|
||
|
hideArrow = _this$props.hideArrow,
|
||
|
_popperClassName = _this$props.popperClassName,
|
||
|
tag = _this$props.tag,
|
||
|
container = _this$props.container,
|
||
|
modifiers = _this$props.modifiers,
|
||
|
positionFixed = _this$props.positionFixed,
|
||
|
boundariesElement = _this$props.boundariesElement,
|
||
|
onClosed = _this$props.onClosed,
|
||
|
fade = _this$props.fade,
|
||
|
transition = _this$props.transition,
|
||
|
placement = _this$props.placement,
|
||
|
attrs = _objectWithoutPropertiesLoose(_this$props, ["cssModule", "children", "isOpen", "flip", "target", "offset", "fallbackPlacement", "placementPrefix", "arrowClassName", "hideArrow", "popperClassName", "tag", "container", "modifiers", "positionFixed", "boundariesElement", "onClosed", "fade", "transition", "placement"]);
|
||
|
|
||
|
var arrowClassName = mapToCssModules(classNames('arrow', _arrowClassName), cssModule);
|
||
|
var popperClassName = mapToCssModules(classNames(_popperClassName, placementPrefix ? placementPrefix + "-auto" : ''), this.props.cssModule);
|
||
|
|
||
|
var extendedModifiers = _extends({
|
||
|
offset: {
|
||
|
offset: offset
|
||
|
},
|
||
|
flip: {
|
||
|
enabled: flip,
|
||
|
behavior: fallbackPlacement
|
||
|
},
|
||
|
preventOverflow: {
|
||
|
boundariesElement: boundariesElement
|
||
|
}
|
||
|
}, modifiers);
|
||
|
|
||
|
var popperTransition = _extends({}, Fade.defaultProps, transition, {
|
||
|
baseClass: fade ? transition.baseClass : '',
|
||
|
timeout: fade ? transition.timeout : 0
|
||
|
});
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Fade, _extends({}, popperTransition, attrs, {
|
||
|
in: isOpen,
|
||
|
onExited: this.onClosed,
|
||
|
tag: tag
|
||
|
}), /*#__PURE__*/React.createElement(Popper, {
|
||
|
referenceElement: this.targetNode,
|
||
|
modifiers: extendedModifiers,
|
||
|
placement: placement,
|
||
|
positionFixed: positionFixed
|
||
|
}, function (_ref) {
|
||
|
var ref = _ref.ref,
|
||
|
style = _ref.style,
|
||
|
placement = _ref.placement,
|
||
|
outOfBoundaries = _ref.outOfBoundaries,
|
||
|
arrowProps = _ref.arrowProps,
|
||
|
scheduleUpdate = _ref.scheduleUpdate;
|
||
|
return /*#__PURE__*/React.createElement("div", {
|
||
|
ref: ref,
|
||
|
style: style,
|
||
|
className: popperClassName,
|
||
|
"x-placement": placement,
|
||
|
"x-out-of-boundaries": outOfBoundaries ? 'true' : undefined
|
||
|
}, typeof children === 'function' ? children({
|
||
|
scheduleUpdate: scheduleUpdate
|
||
|
}) : children, !hideArrow && /*#__PURE__*/React.createElement("span", {
|
||
|
ref: arrowProps.ref,
|
||
|
className: arrowClassName,
|
||
|
style: arrowProps.style
|
||
|
}));
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
this.setTargetNode(this.props.target);
|
||
|
|
||
|
if (this.state.isOpen) {
|
||
|
return this.props.container === 'inline' ? this.renderChildren() : /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
|
||
|
ref: this.getRef
|
||
|
}, this.renderChildren()), this.getContainerNode());
|
||
|
}
|
||
|
|
||
|
return null;
|
||
|
};
|
||
|
|
||
|
return PopperContent;
|
||
|
}(React.Component);
|
||
|
|
||
|
PopperContent.propTypes = propTypes$D;
|
||
|
PopperContent.defaultProps = defaultProps$z;
|
||
|
|
||
|
var PopperTargetHelper = function PopperTargetHelper(props, context) {
|
||
|
context.popperManager.setTargetNode(getTarget(props.target));
|
||
|
return null;
|
||
|
};
|
||
|
|
||
|
PopperTargetHelper.contextTypes = {
|
||
|
popperManager: PropTypes.object.isRequired
|
||
|
};
|
||
|
PopperTargetHelper.propTypes = {
|
||
|
target: targetPropType.isRequired
|
||
|
};
|
||
|
|
||
|
var propTypes$E = {
|
||
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
||
|
placement: PropTypes.oneOf(PopperPlacements),
|
||
|
target: targetPropType.isRequired,
|
||
|
container: targetPropType,
|
||
|
isOpen: PropTypes.bool,
|
||
|
disabled: PropTypes.bool,
|
||
|
hideArrow: PropTypes.bool,
|
||
|
boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
|
||
|
className: PropTypes.string,
|
||
|
innerClassName: PropTypes.string,
|
||
|
arrowClassName: PropTypes.string,
|
||
|
popperClassName: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
toggle: PropTypes.func,
|
||
|
autohide: PropTypes.bool,
|
||
|
placementPrefix: PropTypes.string,
|
||
|
delay: PropTypes.oneOfType([PropTypes.shape({
|
||
|
show: PropTypes.number,
|
||
|
hide: PropTypes.number
|
||
|
}), PropTypes.number]),
|
||
|
modifiers: PropTypes.object,
|
||
|
positionFixed: PropTypes.bool,
|
||
|
offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]),
|
||
|
trigger: PropTypes.string,
|
||
|
fade: PropTypes.bool,
|
||
|
flip: PropTypes.bool
|
||
|
};
|
||
|
var DEFAULT_DELAYS = {
|
||
|
show: 0,
|
||
|
hide: 50
|
||
|
};
|
||
|
var defaultProps$A = {
|
||
|
isOpen: false,
|
||
|
hideArrow: false,
|
||
|
autohide: false,
|
||
|
delay: DEFAULT_DELAYS,
|
||
|
toggle: function toggle() {},
|
||
|
trigger: 'click',
|
||
|
fade: true
|
||
|
};
|
||
|
|
||
|
function isInDOMSubtree(element, subtreeRoot) {
|
||
|
return subtreeRoot && (element === subtreeRoot || subtreeRoot.contains(element));
|
||
|
}
|
||
|
|
||
|
function isInDOMSubtrees(element, subtreeRoots) {
|
||
|
if (subtreeRoots === void 0) {
|
||
|
subtreeRoots = [];
|
||
|
}
|
||
|
|
||
|
return subtreeRoots && subtreeRoots.length && subtreeRoots.filter(function (subTreeRoot) {
|
||
|
return isInDOMSubtree(element, subTreeRoot);
|
||
|
})[0];
|
||
|
}
|
||
|
|
||
|
var TooltipPopoverWrapper = /*#__PURE__*/function (_React$Component) {
|
||
|
_inheritsLoose(TooltipPopoverWrapper, _React$Component);
|
||
|
|
||
|
function TooltipPopoverWrapper(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _React$Component.call(this, props) || this;
|
||
|
_this._targets = [];
|
||
|
_this.currentTargetElement = null;
|
||
|
_this.addTargetEvents = _this.addTargetEvents.bind(_assertThisInitialized(_this));
|
||
|
_this.handleDocumentClick = _this.handleDocumentClick.bind(_assertThisInitialized(_this));
|
||
|
_this.removeTargetEvents = _this.removeTargetEvents.bind(_assertThisInitialized(_this));
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
_this.showWithDelay = _this.showWithDelay.bind(_assertThisInitialized(_this));
|
||
|
_this.hideWithDelay = _this.hideWithDelay.bind(_assertThisInitialized(_this));
|
||
|
_this.onMouseOverTooltipContent = _this.onMouseOverTooltipContent.bind(_assertThisInitialized(_this));
|
||
|
_this.onMouseLeaveTooltipContent = _this.onMouseLeaveTooltipContent.bind(_assertThisInitialized(_this));
|
||
|
_this.show = _this.show.bind(_assertThisInitialized(_this));
|
||
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
||
|
_this.onEscKeyDown = _this.onEscKeyDown.bind(_assertThisInitialized(_this));
|
||
|
_this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
|
||
|
_this.state = {
|
||
|
isOpen: props.isOpen
|
||
|
};
|
||
|
_this._isMounted = false;
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = TooltipPopoverWrapper.prototype;
|
||
|
|
||
|
_proto.componentDidMount = function componentDidMount() {
|
||
|
this._isMounted = true;
|
||
|
this.updateTarget();
|
||
|
};
|
||
|
|
||
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
||
|
this._isMounted = false;
|
||
|
this.removeTargetEvents();
|
||
|
this._targets = null;
|
||
|
this.clearShowTimeout();
|
||
|
this.clearHideTimeout();
|
||
|
};
|
||
|
|
||
|
TooltipPopoverWrapper.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
||
|
if (props.isOpen && !state.isOpen) {
|
||
|
return {
|
||
|
isOpen: props.isOpen
|
||
|
};
|
||
|
} else return null;
|
||
|
};
|
||
|
|
||
|
_proto.onMouseOverTooltipContent = function onMouseOverTooltipContent() {
|
||
|
if (this.props.trigger.indexOf('hover') > -1 && !this.props.autohide) {
|
||
|
if (this._hideTimeout) {
|
||
|
this.clearHideTimeout();
|
||
|
}
|
||
|
|
||
|
if (this.state.isOpen && !this.props.isOpen) {
|
||
|
this.toggle();
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.onMouseLeaveTooltipContent = function onMouseLeaveTooltipContent(e) {
|
||
|
if (this.props.trigger.indexOf('hover') > -1 && !this.props.autohide) {
|
||
|
if (this._showTimeout) {
|
||
|
this.clearShowTimeout();
|
||
|
}
|
||
|
|
||
|
e.persist();
|
||
|
this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide'));
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.onEscKeyDown = function onEscKeyDown(e) {
|
||
|
if (e.key === 'Escape') {
|
||
|
this.hide(e);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.getRef = function getRef(ref) {
|
||
|
var innerRef = this.props.innerRef;
|
||
|
|
||
|
if (innerRef) {
|
||
|
if (typeof innerRef === 'function') {
|
||
|
innerRef(ref);
|
||
|
} else if (typeof innerRef === 'object') {
|
||
|
innerRef.current = ref;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
this._popover = ref;
|
||
|
};
|
||
|
|
||
|
_proto.getDelay = function getDelay(key) {
|
||
|
var delay = this.props.delay;
|
||
|
|
||
|
if (typeof delay === 'object') {
|
||
|
return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key];
|
||
|
}
|
||
|
|
||
|
return delay;
|
||
|
};
|
||
|
|
||
|
_proto.getCurrentTarget = function getCurrentTarget(target) {
|
||
|
if (!target) return null;
|
||
|
|
||
|
var index = this._targets.indexOf(target);
|
||
|
|
||
|
if (index >= 0) return this._targets[index];
|
||
|
return this.getCurrentTarget(target.parentElement);
|
||
|
};
|
||
|
|
||
|
_proto.show = function show(e) {
|
||
|
if (!this.props.isOpen) {
|
||
|
this.clearShowTimeout();
|
||
|
this.currentTargetElement = e ? e.currentTarget || this.getCurrentTarget(e.target) : null;
|
||
|
|
||
|
if (e && e.composedPath && typeof e.composedPath === 'function') {
|
||
|
var path = e.composedPath();
|
||
|
this.currentTargetElement = path && path[0] || this.currentTargetElement;
|
||
|
}
|
||
|
|
||
|
this.toggle(e);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.showWithDelay = function showWithDelay(e) {
|
||
|
if (this._hideTimeout) {
|
||
|
this.clearHideTimeout();
|
||
|
}
|
||
|
|
||
|
this._showTimeout = setTimeout(this.show.bind(this, e), this.getDelay('show'));
|
||
|
};
|
||
|
|
||
|
_proto.hide = function hide(e) {
|
||
|
if (this.props.isOpen) {
|
||
|
this.clearHideTimeout();
|
||
|
this.currentTargetElement = null;
|
||
|
this.toggle(e);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.hideWithDelay = function hideWithDelay(e) {
|
||
|
if (this._showTimeout) {
|
||
|
this.clearShowTimeout();
|
||
|
}
|
||
|
|
||
|
this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide'));
|
||
|
};
|
||
|
|
||
|
_proto.clearShowTimeout = function clearShowTimeout() {
|
||
|
clearTimeout(this._showTimeout);
|
||
|
this._showTimeout = undefined;
|
||
|
};
|
||
|
|
||
|
_proto.clearHideTimeout = function clearHideTimeout() {
|
||
|
clearTimeout(this._hideTimeout);
|
||
|
this._hideTimeout = undefined;
|
||
|
};
|
||
|
|
||
|
_proto.handleDocumentClick = function handleDocumentClick(e) {
|
||
|
var triggers = this.props.trigger.split(' ');
|
||
|
|
||
|
if (triggers.indexOf('legacy') > -1 && (this.props.isOpen || isInDOMSubtrees(e.target, this._targets))) {
|
||
|
if (this._hideTimeout) {
|
||
|
this.clearHideTimeout();
|
||
|
}
|
||
|
|
||
|
if (this.props.isOpen && !isInDOMSubtree(e.target, this._popover)) {
|
||
|
this.hideWithDelay(e);
|
||
|
} else if (!this.props.isOpen) {
|
||
|
this.showWithDelay(e);
|
||
|
}
|
||
|
} else if (triggers.indexOf('click') > -1 && isInDOMSubtrees(e.target, this._targets)) {
|
||
|
if (this._hideTimeout) {
|
||
|
this.clearHideTimeout();
|
||
|
}
|
||
|
|
||
|
if (!this.props.isOpen) {
|
||
|
this.showWithDelay(e);
|
||
|
} else {
|
||
|
this.hideWithDelay(e);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.addEventOnTargets = function addEventOnTargets(type, handler, isBubble) {
|
||
|
this._targets.forEach(function (target) {
|
||
|
target.addEventListener(type, handler, isBubble);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.removeEventOnTargets = function removeEventOnTargets(type, handler, isBubble) {
|
||
|
this._targets.forEach(function (target) {
|
||
|
target.removeEventListener(type, handler, isBubble);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.addTargetEvents = function addTargetEvents() {
|
||
|
if (this.props.trigger) {
|
||
|
var triggers = this.props.trigger.split(' ');
|
||
|
|
||
|
if (triggers.indexOf('manual') === -1) {
|
||
|
if (triggers.indexOf('click') > -1 || triggers.indexOf('legacy') > -1) {
|
||
|
document.addEventListener('click', this.handleDocumentClick, true);
|
||
|
}
|
||
|
|
||
|
if (this._targets && this._targets.length) {
|
||
|
if (triggers.indexOf('hover') > -1) {
|
||
|
this.addEventOnTargets('mouseover', this.showWithDelay, true);
|
||
|
this.addEventOnTargets('mouseout', this.hideWithDelay, true);
|
||
|
}
|
||
|
|
||
|
if (triggers.indexOf('focus') > -1) {
|
||
|
this.addEventOnTargets('focusin', this.show, true);
|
||
|
this.addEventOnTargets('focusout', this.hide, true);
|
||
|
}
|
||
|
|
||
|
this.addEventOnTargets('keydown', this.onEscKeyDown, true);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.removeTargetEvents = function removeTargetEvents() {
|
||
|
if (this._targets) {
|
||
|
this.removeEventOnTargets('mouseover', this.showWithDelay, true);
|
||
|
this.removeEventOnTargets('mouseout', this.hideWithDelay, true);
|
||
|
this.removeEventOnTargets('keydown', this.onEscKeyDown, true);
|
||
|
this.removeEventOnTargets('focusin', this.show, true);
|
||
|
this.removeEventOnTargets('focusout', this.hide, true);
|
||
|
}
|
||
|
|
||
|
document.removeEventListener('click', this.handleDocumentClick, true);
|
||
|
};
|
||
|
|
||
|
_proto.updateTarget = function updateTarget() {
|
||
|
var newTarget = getTarget(this.props.target, true);
|
||
|
|
||
|
if (newTarget !== this._targets) {
|
||
|
this.removeTargetEvents();
|
||
|
this._targets = newTarget ? Array.from(newTarget) : [];
|
||
|
this.currentTargetElement = this.currentTargetElement || this._targets[0];
|
||
|
this.addTargetEvents();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.toggle = function toggle(e) {
|
||
|
if (this.props.disabled || !this._isMounted) {
|
||
|
return e && e.preventDefault();
|
||
|
}
|
||
|
|
||
|
return this.props.toggle(e);
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this2 = this;
|
||
|
|
||
|
if (this.props.isOpen) {
|
||
|
this.updateTarget();
|
||
|
}
|
||
|
|
||
|
var target = this.currentTargetElement || this._targets[0];
|
||
|
|
||
|
if (!target) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
var _this$props = this.props,
|
||
|
className = _this$props.className,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
innerClassName = _this$props.innerClassName,
|
||
|
isOpen = _this$props.isOpen,
|
||
|
hideArrow = _this$props.hideArrow,
|
||
|
boundariesElement = _this$props.boundariesElement,
|
||
|
placement = _this$props.placement,
|
||
|
placementPrefix = _this$props.placementPrefix,
|
||
|
arrowClassName = _this$props.arrowClassName,
|
||
|
popperClassName = _this$props.popperClassName,
|
||
|
container = _this$props.container,
|
||
|
modifiers = _this$props.modifiers,
|
||
|
positionFixed = _this$props.positionFixed,
|
||
|
offset = _this$props.offset,
|
||
|
fade = _this$props.fade,
|
||
|
flip = _this$props.flip,
|
||
|
children = _this$props.children;
|
||
|
var attributes = omit(this.props, Object.keys(propTypes$E));
|
||
|
var popperClasses = mapToCssModules(popperClassName, cssModule);
|
||
|
var classes = mapToCssModules(innerClassName, cssModule);
|
||
|
return /*#__PURE__*/React.createElement(PopperContent, {
|
||
|
className: className,
|
||
|
target: target,
|
||
|
isOpen: isOpen,
|
||
|
hideArrow: hideArrow,
|
||
|
boundariesElement: boundariesElement,
|
||
|
placement: placement,
|
||
|
placementPrefix: placementPrefix,
|
||
|
arrowClassName: arrowClassName,
|
||
|
popperClassName: popperClasses,
|
||
|
container: container,
|
||
|
modifiers: modifiers,
|
||
|
positionFixed: positionFixed,
|
||
|
offset: offset,
|
||
|
cssModule: cssModule,
|
||
|
fade: fade,
|
||
|
flip: flip
|
||
|
}, function (_ref) {
|
||
|
var scheduleUpdate = _ref.scheduleUpdate;
|
||
|
return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
|
||
|
ref: _this2.getRef,
|
||
|
className: classes,
|
||
|
role: "tooltip",
|
||
|
onMouseOver: _this2.onMouseOverTooltipContent,
|
||
|
onMouseLeave: _this2.onMouseLeaveTooltipContent,
|
||
|
onKeyDown: _this2.onEscKeyDown
|
||
|
}), typeof children === 'function' ? children({
|
||
|
scheduleUpdate: scheduleUpdate
|
||
|
}) : children);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
return TooltipPopoverWrapper;
|
||
|
}(React.Component);
|
||
|
|
||
|
TooltipPopoverWrapper.propTypes = propTypes$E;
|
||
|
TooltipPopoverWrapper.defaultProps = defaultProps$A;
|
||
|
|
||
|
var defaultProps$B = {
|
||
|
placement: 'right',
|
||
|
placementPrefix: 'bs-popover',
|
||
|
trigger: 'click'
|
||
|
};
|
||
|
|
||
|
var Popover = function Popover(props) {
|
||
|
var popperClasses = classNames('popover', 'show', props.popperClassName);
|
||
|
var classes = classNames('popover-inner', props.innerClassName);
|
||
|
return /*#__PURE__*/React.createElement(TooltipPopoverWrapper, _extends({}, props, {
|
||
|
popperClassName: popperClasses,
|
||
|
innerClassName: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
Popover.propTypes = propTypes$E;
|
||
|
Popover.defaultProps = defaultProps$B;
|
||
|
|
||
|
var omitKeys = ['defaultOpen'];
|
||
|
|
||
|
var UncontrolledPopover = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledPopover, _Component);
|
||
|
|
||
|
function UncontrolledPopover(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
isOpen: props.defaultOpen || false
|
||
|
};
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledPopover.prototype;
|
||
|
|
||
|
_proto.toggle = function toggle() {
|
||
|
this.setState({
|
||
|
isOpen: !this.state.isOpen
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
return /*#__PURE__*/React.createElement(Popover, _extends({
|
||
|
isOpen: this.state.isOpen,
|
||
|
toggle: this.toggle
|
||
|
}, omit(this.props, omitKeys)));
|
||
|
};
|
||
|
|
||
|
return UncontrolledPopover;
|
||
|
}(Component);
|
||
|
UncontrolledPopover.propTypes = _extends({
|
||
|
defaultOpen: PropTypes.bool
|
||
|
}, Popover.propTypes);
|
||
|
|
||
|
var propTypes$F = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$C = {
|
||
|
tag: 'h3'
|
||
|
};
|
||
|
|
||
|
var PopoverHeader = function PopoverHeader(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'popover-header'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
PopoverHeader.propTypes = propTypes$F;
|
||
|
PopoverHeader.defaultProps = defaultProps$C;
|
||
|
|
||
|
var propTypes$G = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$D = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var PopoverBody = function PopoverBody(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'popover-body'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
PopoverBody.propTypes = propTypes$G;
|
||
|
PopoverBody.defaultProps = defaultProps$D;
|
||
|
|
||
|
var propTypes$H = {
|
||
|
children: PropTypes.node,
|
||
|
bar: PropTypes.bool,
|
||
|
multi: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
animated: PropTypes.bool,
|
||
|
striped: PropTypes.bool,
|
||
|
color: PropTypes.string,
|
||
|
className: PropTypes.string,
|
||
|
barClassName: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
style: PropTypes.object,
|
||
|
barStyle: PropTypes.object,
|
||
|
barAriaValueText: PropTypes.string,
|
||
|
barAriaLabelledBy: PropTypes.string
|
||
|
};
|
||
|
var defaultProps$E = {
|
||
|
tag: 'div',
|
||
|
value: 0,
|
||
|
min: 0,
|
||
|
max: 100,
|
||
|
style: {},
|
||
|
barStyle: {}
|
||
|
};
|
||
|
|
||
|
var Progress = function Progress(props) {
|
||
|
var children = props.children,
|
||
|
className = props.className,
|
||
|
barClassName = props.barClassName,
|
||
|
cssModule = props.cssModule,
|
||
|
value = props.value,
|
||
|
min = props.min,
|
||
|
max = props.max,
|
||
|
animated = props.animated,
|
||
|
striped = props.striped,
|
||
|
color = props.color,
|
||
|
bar = props.bar,
|
||
|
multi = props.multi,
|
||
|
Tag = props.tag,
|
||
|
style = props.style,
|
||
|
barStyle = props.barStyle,
|
||
|
barAriaValueText = props.barAriaValueText,
|
||
|
barAriaLabelledBy = props.barAriaLabelledBy,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["children", "className", "barClassName", "cssModule", "value", "min", "max", "animated", "striped", "color", "bar", "multi", "tag", "style", "barStyle", "barAriaValueText", "barAriaLabelledBy"]);
|
||
|
|
||
|
var percent = toNumber(value) / toNumber(max) * 100;
|
||
|
var progressClasses = mapToCssModules(classNames(className, 'progress'), cssModule);
|
||
|
var progressBarClasses = mapToCssModules(classNames('progress-bar', bar ? className || barClassName : barClassName, animated ? 'progress-bar-animated' : null, color ? "bg-" + color : null, striped || animated ? 'progress-bar-striped' : null), cssModule);
|
||
|
var progressBarProps = {
|
||
|
className: progressBarClasses,
|
||
|
style: _extends({}, bar ? style : {}, barStyle, {
|
||
|
width: percent + "%"
|
||
|
}),
|
||
|
role: 'progressbar',
|
||
|
'aria-valuenow': value,
|
||
|
'aria-valuemin': min,
|
||
|
'aria-valuemax': max,
|
||
|
'aria-valuetext': barAriaValueText,
|
||
|
'aria-labelledby': barAriaLabelledBy,
|
||
|
children: children
|
||
|
};
|
||
|
|
||
|
if (bar) {
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, progressBarProps));
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
style: style,
|
||
|
className: progressClasses
|
||
|
}), multi ? children : /*#__PURE__*/React.createElement("div", progressBarProps));
|
||
|
};
|
||
|
|
||
|
Progress.propTypes = propTypes$H;
|
||
|
Progress.defaultProps = defaultProps$E;
|
||
|
|
||
|
var propTypes$I = {
|
||
|
children: PropTypes.node.isRequired,
|
||
|
node: PropTypes.any
|
||
|
};
|
||
|
|
||
|
var Portal = /*#__PURE__*/function (_React$Component) {
|
||
|
_inheritsLoose(Portal, _React$Component);
|
||
|
|
||
|
function Portal() {
|
||
|
return _React$Component.apply(this, arguments) || this;
|
||
|
}
|
||
|
|
||
|
var _proto = Portal.prototype;
|
||
|
|
||
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
||
|
if (this.defaultNode) {
|
||
|
document.body.removeChild(this.defaultNode);
|
||
|
}
|
||
|
|
||
|
this.defaultNode = null;
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
if (!canUseDOM) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
if (!this.props.node && !this.defaultNode) {
|
||
|
this.defaultNode = document.createElement('div');
|
||
|
document.body.appendChild(this.defaultNode);
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/ReactDOM.createPortal(this.props.children, this.props.node || this.defaultNode);
|
||
|
};
|
||
|
|
||
|
return Portal;
|
||
|
}(React.Component);
|
||
|
|
||
|
Portal.propTypes = propTypes$I;
|
||
|
|
||
|
function noop$1() {}
|
||
|
|
||
|
var FadePropTypes = PropTypes.shape(Fade.propTypes);
|
||
|
var propTypes$J = {
|
||
|
isOpen: PropTypes.bool,
|
||
|
autoFocus: PropTypes.bool,
|
||
|
centered: PropTypes.bool,
|
||
|
scrollable: PropTypes.bool,
|
||
|
size: PropTypes.string,
|
||
|
toggle: PropTypes.func,
|
||
|
keyboard: PropTypes.bool,
|
||
|
role: PropTypes.string,
|
||
|
labelledBy: PropTypes.string,
|
||
|
backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
|
||
|
onEnter: PropTypes.func,
|
||
|
onExit: PropTypes.func,
|
||
|
onOpened: PropTypes.func,
|
||
|
onClosed: PropTypes.func,
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
wrapClassName: PropTypes.string,
|
||
|
modalClassName: PropTypes.string,
|
||
|
backdropClassName: PropTypes.string,
|
||
|
contentClassName: PropTypes.string,
|
||
|
external: PropTypes.node,
|
||
|
fade: PropTypes.bool,
|
||
|
cssModule: PropTypes.object,
|
||
|
zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
|
backdropTransition: FadePropTypes,
|
||
|
modalTransition: FadePropTypes,
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
|
||
|
unmountOnClose: PropTypes.bool,
|
||
|
returnFocusAfterClose: PropTypes.bool,
|
||
|
container: targetPropType,
|
||
|
trapFocus: PropTypes.bool
|
||
|
};
|
||
|
var propsToOmit = Object.keys(propTypes$J);
|
||
|
var defaultProps$F = {
|
||
|
isOpen: false,
|
||
|
autoFocus: true,
|
||
|
centered: false,
|
||
|
scrollable: false,
|
||
|
role: 'dialog',
|
||
|
backdrop: true,
|
||
|
keyboard: true,
|
||
|
zIndex: 1050,
|
||
|
fade: true,
|
||
|
onOpened: noop$1,
|
||
|
onClosed: noop$1,
|
||
|
modalTransition: {
|
||
|
timeout: TransitionTimeouts.Modal
|
||
|
},
|
||
|
backdropTransition: {
|
||
|
mountOnEnter: true,
|
||
|
timeout: TransitionTimeouts.Fade // uses standard fade transition
|
||
|
|
||
|
},
|
||
|
unmountOnClose: true,
|
||
|
returnFocusAfterClose: true,
|
||
|
container: 'body',
|
||
|
trapFocus: false
|
||
|
};
|
||
|
|
||
|
var Modal = /*#__PURE__*/function (_React$Component) {
|
||
|
_inheritsLoose(Modal, _React$Component);
|
||
|
|
||
|
function Modal(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _React$Component.call(this, props) || this;
|
||
|
_this._element = null;
|
||
|
_this._originalBodyPadding = null;
|
||
|
_this.getFocusableChildren = _this.getFocusableChildren.bind(_assertThisInitialized(_this));
|
||
|
_this.handleBackdropClick = _this.handleBackdropClick.bind(_assertThisInitialized(_this));
|
||
|
_this.handleBackdropMouseDown = _this.handleBackdropMouseDown.bind(_assertThisInitialized(_this));
|
||
|
_this.handleEscape = _this.handleEscape.bind(_assertThisInitialized(_this));
|
||
|
_this.handleStaticBackdropAnimation = _this.handleStaticBackdropAnimation.bind(_assertThisInitialized(_this));
|
||
|
_this.handleTab = _this.handleTab.bind(_assertThisInitialized(_this));
|
||
|
_this.onOpened = _this.onOpened.bind(_assertThisInitialized(_this));
|
||
|
_this.onClosed = _this.onClosed.bind(_assertThisInitialized(_this));
|
||
|
_this.manageFocusAfterClose = _this.manageFocusAfterClose.bind(_assertThisInitialized(_this));
|
||
|
_this.clearBackdropAnimationTimeout = _this.clearBackdropAnimationTimeout.bind(_assertThisInitialized(_this));
|
||
|
_this.trapFocus = _this.trapFocus.bind(_assertThisInitialized(_this));
|
||
|
_this.state = {
|
||
|
isOpen: false,
|
||
|
showStaticBackdropAnimation: false
|
||
|
};
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = Modal.prototype;
|
||
|
|
||
|
_proto.componentDidMount = function componentDidMount() {
|
||
|
var _this$props = this.props,
|
||
|
isOpen = _this$props.isOpen,
|
||
|
autoFocus = _this$props.autoFocus,
|
||
|
onEnter = _this$props.onEnter;
|
||
|
|
||
|
if (isOpen) {
|
||
|
this.init();
|
||
|
this.setState({
|
||
|
isOpen: true
|
||
|
});
|
||
|
|
||
|
if (autoFocus) {
|
||
|
this.setFocus();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (onEnter) {
|
||
|
onEnter();
|
||
|
} // traps focus inside the Modal, even if the browser address bar is focused
|
||
|
|
||
|
|
||
|
document.addEventListener('focus', this.trapFocus, true);
|
||
|
this._isMounted = true;
|
||
|
};
|
||
|
|
||
|
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
||
|
if (this.props.isOpen && !prevProps.isOpen) {
|
||
|
this.init();
|
||
|
this.setState({
|
||
|
isOpen: true
|
||
|
}); // let render() renders Modal Dialog first
|
||
|
|
||
|
return;
|
||
|
} // now Modal Dialog is rendered and we can refer this._element and this._dialog
|
||
|
|
||
|
|
||
|
if (this.props.autoFocus && this.state.isOpen && !prevState.isOpen) {
|
||
|
this.setFocus();
|
||
|
}
|
||
|
|
||
|
if (this._element && prevProps.zIndex !== this.props.zIndex) {
|
||
|
this._element.style.zIndex = this.props.zIndex;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
||
|
this.clearBackdropAnimationTimeout();
|
||
|
|
||
|
if (this.props.onExit) {
|
||
|
this.props.onExit();
|
||
|
}
|
||
|
|
||
|
if (this._element) {
|
||
|
this.destroy();
|
||
|
|
||
|
if (this.props.isOpen || this.state.isOpen) {
|
||
|
this.close();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
document.removeEventListener('focus', this.trapFocus, true);
|
||
|
this._isMounted = false;
|
||
|
};
|
||
|
|
||
|
_proto.trapFocus = function trapFocus(ev) {
|
||
|
if (!this.props.trapFocus) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (!this._element) //element is not attached
|
||
|
return;
|
||
|
if (this._dialog && this._dialog.parentNode === ev.target) // initial focus when the Modal is opened
|
||
|
return;
|
||
|
if (this.modalIndex < Modal.openCount - 1) // last opened modal
|
||
|
return;
|
||
|
var children = this.getFocusableChildren();
|
||
|
|
||
|
for (var i = 0; i < children.length; i++) {
|
||
|
// focus is already inside the Modal
|
||
|
if (children[i] === ev.target) return;
|
||
|
}
|
||
|
|
||
|
if (children.length > 0) {
|
||
|
// otherwise focus the first focusable element in the Modal
|
||
|
ev.preventDefault();
|
||
|
ev.stopPropagation();
|
||
|
children[0].focus();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.onOpened = function onOpened(node, isAppearing) {
|
||
|
this.props.onOpened();
|
||
|
(this.props.modalTransition.onEntered || noop$1)(node, isAppearing);
|
||
|
};
|
||
|
|
||
|
_proto.onClosed = function onClosed(node) {
|
||
|
var unmountOnClose = this.props.unmountOnClose; // so all methods get called before it is unmounted
|
||
|
|
||
|
this.props.onClosed();
|
||
|
(this.props.modalTransition.onExited || noop$1)(node);
|
||
|
|
||
|
if (unmountOnClose) {
|
||
|
this.destroy();
|
||
|
}
|
||
|
|
||
|
this.close();
|
||
|
|
||
|
if (this._isMounted) {
|
||
|
this.setState({
|
||
|
isOpen: false
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.setFocus = function setFocus() {
|
||
|
if (this._dialog && this._dialog.parentNode && typeof this._dialog.parentNode.focus === 'function') {
|
||
|
this._dialog.parentNode.focus();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.getFocusableChildren = function getFocusableChildren() {
|
||
|
return this._element.querySelectorAll(focusableElements.join(', '));
|
||
|
};
|
||
|
|
||
|
_proto.getFocusedChild = function getFocusedChild() {
|
||
|
var currentFocus;
|
||
|
var focusableChildren = this.getFocusableChildren();
|
||
|
|
||
|
try {
|
||
|
currentFocus = document.activeElement;
|
||
|
} catch (err) {
|
||
|
currentFocus = focusableChildren[0];
|
||
|
}
|
||
|
|
||
|
return currentFocus;
|
||
|
} // not mouseUp because scrollbar fires it, shouldn't close when user scrolls
|
||
|
;
|
||
|
|
||
|
_proto.handleBackdropClick = function handleBackdropClick(e) {
|
||
|
if (e.target === this._mouseDownElement) {
|
||
|
e.stopPropagation();
|
||
|
var backdrop = this._dialog ? this._dialog.parentNode : null;
|
||
|
|
||
|
if (backdrop && e.target === backdrop && this.props.backdrop === 'static') {
|
||
|
this.handleStaticBackdropAnimation();
|
||
|
}
|
||
|
|
||
|
if (!this.props.isOpen || this.props.backdrop !== true) return;
|
||
|
|
||
|
if (backdrop && e.target === backdrop && this.props.toggle) {
|
||
|
this.props.toggle(e);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.handleTab = function handleTab(e) {
|
||
|
if (e.which !== 9) return;
|
||
|
if (this.modalIndex < Modal.openCount - 1) return; // last opened modal
|
||
|
|
||
|
var focusableChildren = this.getFocusableChildren();
|
||
|
var totalFocusable = focusableChildren.length;
|
||
|
if (totalFocusable === 0) return;
|
||
|
var currentFocus = this.getFocusedChild();
|
||
|
var focusedIndex = 0;
|
||
|
|
||
|
for (var i = 0; i < totalFocusable; i += 1) {
|
||
|
if (focusableChildren[i] === currentFocus) {
|
||
|
focusedIndex = i;
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (e.shiftKey && focusedIndex === 0) {
|
||
|
e.preventDefault();
|
||
|
focusableChildren[totalFocusable - 1].focus();
|
||
|
} else if (!e.shiftKey && focusedIndex === totalFocusable - 1) {
|
||
|
e.preventDefault();
|
||
|
focusableChildren[0].focus();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.handleBackdropMouseDown = function handleBackdropMouseDown(e) {
|
||
|
this._mouseDownElement = e.target;
|
||
|
};
|
||
|
|
||
|
_proto.handleEscape = function handleEscape(e) {
|
||
|
if (this.props.isOpen && e.keyCode === keyCodes.esc && this.props.toggle) {
|
||
|
if (this.props.keyboard) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
this.props.toggle(e);
|
||
|
} else if (this.props.backdrop === 'static') {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
this.handleStaticBackdropAnimation();
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.handleStaticBackdropAnimation = function handleStaticBackdropAnimation() {
|
||
|
var _this2 = this;
|
||
|
|
||
|
this.clearBackdropAnimationTimeout();
|
||
|
this.setState({
|
||
|
showStaticBackdropAnimation: true
|
||
|
});
|
||
|
this._backdropAnimationTimeout = setTimeout(function () {
|
||
|
_this2.setState({
|
||
|
showStaticBackdropAnimation: false
|
||
|
});
|
||
|
}, 100);
|
||
|
};
|
||
|
|
||
|
_proto.init = function init() {
|
||
|
try {
|
||
|
this._triggeringElement = document.activeElement;
|
||
|
} catch (err) {
|
||
|
this._triggeringElement = null;
|
||
|
}
|
||
|
|
||
|
if (!this._element) {
|
||
|
this._element = document.createElement('div');
|
||
|
|
||
|
this._element.setAttribute('tabindex', '-1');
|
||
|
|
||
|
this._element.style.position = 'relative';
|
||
|
this._element.style.zIndex = this.props.zIndex;
|
||
|
this._mountContainer = getTarget(this.props.container);
|
||
|
|
||
|
this._mountContainer.appendChild(this._element);
|
||
|
}
|
||
|
|
||
|
this._originalBodyPadding = getOriginalBodyPadding();
|
||
|
conditionallyUpdateScrollbar();
|
||
|
|
||
|
if (Modal.openCount === 0) {
|
||
|
document.body.className = classNames(document.body.className, mapToCssModules('modal-open', this.props.cssModule));
|
||
|
}
|
||
|
|
||
|
this.modalIndex = Modal.openCount;
|
||
|
Modal.openCount += 1;
|
||
|
};
|
||
|
|
||
|
_proto.destroy = function destroy() {
|
||
|
if (this._element) {
|
||
|
this._mountContainer.removeChild(this._element);
|
||
|
|
||
|
this._element = null;
|
||
|
}
|
||
|
|
||
|
this.manageFocusAfterClose();
|
||
|
};
|
||
|
|
||
|
_proto.manageFocusAfterClose = function manageFocusAfterClose() {
|
||
|
if (this._triggeringElement) {
|
||
|
var returnFocusAfterClose = this.props.returnFocusAfterClose;
|
||
|
if (this._triggeringElement.focus && returnFocusAfterClose) this._triggeringElement.focus();
|
||
|
this._triggeringElement = null;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.close = function close() {
|
||
|
if (Modal.openCount <= 1) {
|
||
|
var modalOpenClassName = mapToCssModules('modal-open', this.props.cssModule); // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`
|
||
|
|
||
|
var modalOpenClassNameRegex = new RegExp("(^| )" + modalOpenClassName + "( |$)");
|
||
|
document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim();
|
||
|
}
|
||
|
|
||
|
this.manageFocusAfterClose();
|
||
|
Modal.openCount = Math.max(0, Modal.openCount - 1);
|
||
|
setScrollbarWidth(this._originalBodyPadding);
|
||
|
};
|
||
|
|
||
|
_proto.renderModalDialog = function renderModalDialog() {
|
||
|
var _classNames,
|
||
|
_this3 = this;
|
||
|
|
||
|
var attributes = omit(this.props, propsToOmit);
|
||
|
var dialogBaseClass = 'modal-dialog';
|
||
|
return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
|
||
|
className: mapToCssModules(classNames(dialogBaseClass, this.props.className, (_classNames = {}, _classNames["modal-" + this.props.size] = this.props.size, _classNames[dialogBaseClass + "-centered"] = this.props.centered, _classNames[dialogBaseClass + "-scrollable"] = this.props.scrollable, _classNames)), this.props.cssModule),
|
||
|
role: "document",
|
||
|
ref: function ref(c) {
|
||
|
_this3._dialog = c;
|
||
|
}
|
||
|
}), /*#__PURE__*/React.createElement("div", {
|
||
|
className: mapToCssModules(classNames('modal-content', this.props.contentClassName), this.props.cssModule)
|
||
|
}, this.props.children));
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var unmountOnClose = this.props.unmountOnClose;
|
||
|
|
||
|
if (!!this._element && (this.state.isOpen || !unmountOnClose)) {
|
||
|
var isModalHidden = !!this._element && !this.state.isOpen && !unmountOnClose;
|
||
|
this._element.style.display = isModalHidden ? 'none' : 'block';
|
||
|
var _this$props2 = this.props,
|
||
|
wrapClassName = _this$props2.wrapClassName,
|
||
|
modalClassName = _this$props2.modalClassName,
|
||
|
backdropClassName = _this$props2.backdropClassName,
|
||
|
cssModule = _this$props2.cssModule,
|
||
|
isOpen = _this$props2.isOpen,
|
||
|
backdrop = _this$props2.backdrop,
|
||
|
role = _this$props2.role,
|
||
|
labelledBy = _this$props2.labelledBy,
|
||
|
external = _this$props2.external,
|
||
|
innerRef = _this$props2.innerRef;
|
||
|
var modalAttributes = {
|
||
|
onClick: this.handleBackdropClick,
|
||
|
onMouseDown: this.handleBackdropMouseDown,
|
||
|
onKeyUp: this.handleEscape,
|
||
|
onKeyDown: this.handleTab,
|
||
|
style: {
|
||
|
display: 'block'
|
||
|
},
|
||
|
'aria-labelledby': labelledBy,
|
||
|
role: role,
|
||
|
tabIndex: '-1'
|
||
|
};
|
||
|
var hasTransition = this.props.fade;
|
||
|
|
||
|
var modalTransition = _extends({}, Fade.defaultProps, this.props.modalTransition, {
|
||
|
baseClass: hasTransition ? this.props.modalTransition.baseClass : '',
|
||
|
timeout: hasTransition ? this.props.modalTransition.timeout : 0
|
||
|
});
|
||
|
|
||
|
var backdropTransition = _extends({}, Fade.defaultProps, this.props.backdropTransition, {
|
||
|
baseClass: hasTransition ? this.props.backdropTransition.baseClass : '',
|
||
|
timeout: hasTransition ? this.props.backdropTransition.timeout : 0
|
||
|
});
|
||
|
|
||
|
var Backdrop = backdrop && (hasTransition ? /*#__PURE__*/React.createElement(Fade, _extends({}, backdropTransition, {
|
||
|
in: isOpen && !!backdrop,
|
||
|
cssModule: cssModule,
|
||
|
className: mapToCssModules(classNames('modal-backdrop', backdropClassName), cssModule)
|
||
|
})) : /*#__PURE__*/React.createElement("div", {
|
||
|
className: mapToCssModules(classNames('modal-backdrop', 'show', backdropClassName), cssModule)
|
||
|
}));
|
||
|
return /*#__PURE__*/React.createElement(Portal, {
|
||
|
node: this._element
|
||
|
}, /*#__PURE__*/React.createElement("div", {
|
||
|
className: mapToCssModules(wrapClassName)
|
||
|
}, /*#__PURE__*/React.createElement(Fade, _extends({}, modalAttributes, modalTransition, {
|
||
|
in: isOpen,
|
||
|
onEntered: this.onOpened,
|
||
|
onExited: this.onClosed,
|
||
|
cssModule: cssModule,
|
||
|
className: mapToCssModules(classNames('modal', modalClassName, this.state.showStaticBackdropAnimation && 'modal-static'), cssModule),
|
||
|
innerRef: innerRef
|
||
|
}), external, this.renderModalDialog()), Backdrop));
|
||
|
}
|
||
|
|
||
|
return null;
|
||
|
};
|
||
|
|
||
|
_proto.clearBackdropAnimationTimeout = function clearBackdropAnimationTimeout() {
|
||
|
if (this._backdropAnimationTimeout) {
|
||
|
clearTimeout(this._backdropAnimationTimeout);
|
||
|
this._backdropAnimationTimeout = undefined;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
return Modal;
|
||
|
}(React.Component);
|
||
|
|
||
|
Modal.propTypes = propTypes$J;
|
||
|
Modal.defaultProps = defaultProps$F;
|
||
|
Modal.openCount = 0;
|
||
|
|
||
|
var propTypes$K = {
|
||
|
tag: tagPropType,
|
||
|
wrapTag: tagPropType,
|
||
|
toggle: PropTypes.func,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
children: PropTypes.node,
|
||
|
closeAriaLabel: PropTypes.string,
|
||
|
charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
close: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$G = {
|
||
|
tag: 'h5',
|
||
|
wrapTag: 'div',
|
||
|
closeAriaLabel: 'Close',
|
||
|
charCode: 215
|
||
|
};
|
||
|
|
||
|
var ModalHeader = function ModalHeader(props) {
|
||
|
var closeButton;
|
||
|
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
children = props.children,
|
||
|
toggle = props.toggle,
|
||
|
Tag = props.tag,
|
||
|
WrapTag = props.wrapTag,
|
||
|
closeAriaLabel = props.closeAriaLabel,
|
||
|
charCode = props.charCode,
|
||
|
close = props.close,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "children", "toggle", "tag", "wrapTag", "closeAriaLabel", "charCode", "close"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'modal-header'), cssModule);
|
||
|
|
||
|
if (!close && toggle) {
|
||
|
var closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
|
||
|
closeButton = /*#__PURE__*/React.createElement("button", {
|
||
|
type: "button",
|
||
|
onClick: toggle,
|
||
|
className: mapToCssModules('close', cssModule),
|
||
|
"aria-label": closeAriaLabel
|
||
|
}, /*#__PURE__*/React.createElement("span", {
|
||
|
"aria-hidden": "true"
|
||
|
}, closeIcon));
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(WrapTag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}), /*#__PURE__*/React.createElement(Tag, {
|
||
|
className: mapToCssModules('modal-title', cssModule)
|
||
|
}, children), close || closeButton);
|
||
|
};
|
||
|
|
||
|
ModalHeader.propTypes = propTypes$K;
|
||
|
ModalHeader.defaultProps = defaultProps$G;
|
||
|
|
||
|
var propTypes$L = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$H = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var ModalBody = function ModalBody(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'modal-body'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ModalBody.propTypes = propTypes$L;
|
||
|
ModalBody.defaultProps = defaultProps$H;
|
||
|
|
||
|
var propTypes$M = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$I = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var ModalFooter = function ModalFooter(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'modal-footer'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ModalFooter.propTypes = propTypes$M;
|
||
|
ModalFooter.defaultProps = defaultProps$I;
|
||
|
|
||
|
var defaultProps$J = {
|
||
|
placement: 'top',
|
||
|
autohide: true,
|
||
|
placementPrefix: 'bs-tooltip',
|
||
|
trigger: 'hover focus'
|
||
|
};
|
||
|
|
||
|
var Tooltip = function Tooltip(props) {
|
||
|
var popperClasses = classNames('tooltip', 'show', props.popperClassName);
|
||
|
var classes = classNames('tooltip-inner', props.innerClassName);
|
||
|
return /*#__PURE__*/React.createElement(TooltipPopoverWrapper, _extends({}, props, {
|
||
|
popperClassName: popperClasses,
|
||
|
innerClassName: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
Tooltip.propTypes = propTypes$E;
|
||
|
Tooltip.defaultProps = defaultProps$J;
|
||
|
|
||
|
var propTypes$N = {
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
size: PropTypes.string,
|
||
|
bordered: PropTypes.bool,
|
||
|
borderless: PropTypes.bool,
|
||
|
striped: PropTypes.bool,
|
||
|
dark: PropTypes.bool,
|
||
|
hover: PropTypes.bool,
|
||
|
responsive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
||
|
tag: tagPropType,
|
||
|
responsiveTag: tagPropType,
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object])
|
||
|
};
|
||
|
var defaultProps$K = {
|
||
|
tag: 'table',
|
||
|
responsiveTag: 'div'
|
||
|
};
|
||
|
|
||
|
var Table = function Table(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
size = props.size,
|
||
|
bordered = props.bordered,
|
||
|
borderless = props.borderless,
|
||
|
striped = props.striped,
|
||
|
dark = props.dark,
|
||
|
hover = props.hover,
|
||
|
responsive = props.responsive,
|
||
|
Tag = props.tag,
|
||
|
ResponsiveTag = props.responsiveTag,
|
||
|
innerRef = props.innerRef,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "size", "bordered", "borderless", "striped", "dark", "hover", "responsive", "tag", "responsiveTag", "innerRef"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'table', size ? 'table-' + size : false, bordered ? 'table-bordered' : false, borderless ? 'table-borderless' : false, striped ? 'table-striped' : false, dark ? 'table-dark' : false, hover ? 'table-hover' : false), cssModule);
|
||
|
var table = /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
ref: innerRef,
|
||
|
className: classes
|
||
|
}));
|
||
|
|
||
|
if (responsive) {
|
||
|
var responsiveClassName = mapToCssModules(responsive === true ? 'table-responsive' : "table-responsive-" + responsive, cssModule);
|
||
|
return /*#__PURE__*/React.createElement(ResponsiveTag, {
|
||
|
className: responsiveClassName
|
||
|
}, table);
|
||
|
}
|
||
|
|
||
|
return table;
|
||
|
};
|
||
|
|
||
|
Table.propTypes = propTypes$N;
|
||
|
Table.defaultProps = defaultProps$K;
|
||
|
|
||
|
var propTypes$O = {
|
||
|
tag: tagPropType,
|
||
|
flush: PropTypes.bool,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
|
||
|
};
|
||
|
var defaultProps$L = {
|
||
|
tag: 'ul',
|
||
|
horizontal: false
|
||
|
};
|
||
|
|
||
|
var getHorizontalClass = function getHorizontalClass(horizontal) {
|
||
|
if (horizontal === false) {
|
||
|
return false;
|
||
|
} else if (horizontal === true || horizontal === "xs") {
|
||
|
return "list-group-horizontal";
|
||
|
}
|
||
|
|
||
|
return "list-group-horizontal-" + horizontal;
|
||
|
};
|
||
|
|
||
|
var ListGroup = function ListGroup(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
flush = props.flush,
|
||
|
horizontal = props.horizontal,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "flush", "horizontal"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'list-group', // list-group-horizontal cannot currently be mixed with list-group-flush
|
||
|
// we only try to apply horizontal classes if flush is false
|
||
|
flush ? 'list-group-flush' : getHorizontalClass(horizontal)), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ListGroup.propTypes = propTypes$O;
|
||
|
ListGroup.defaultProps = defaultProps$L;
|
||
|
|
||
|
var propTypes$P = {
|
||
|
children: PropTypes.node,
|
||
|
inline: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$M = {
|
||
|
tag: 'form'
|
||
|
};
|
||
|
|
||
|
var Form = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(Form, _Component);
|
||
|
|
||
|
function Form(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
|
||
|
_this.submit = _this.submit.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = Form.prototype;
|
||
|
|
||
|
_proto.getRef = function getRef(ref) {
|
||
|
if (this.props.innerRef) {
|
||
|
this.props.innerRef(ref);
|
||
|
}
|
||
|
|
||
|
this.ref = ref;
|
||
|
};
|
||
|
|
||
|
_proto.submit = function submit() {
|
||
|
if (this.ref) {
|
||
|
this.ref.submit();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this$props = this.props,
|
||
|
className = _this$props.className,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
inline = _this$props.inline,
|
||
|
Tag = _this$props.tag,
|
||
|
innerRef = _this$props.innerRef,
|
||
|
attributes = _objectWithoutPropertiesLoose(_this$props, ["className", "cssModule", "inline", "tag", "innerRef"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, inline ? 'form-inline' : false), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
ref: innerRef,
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
return Form;
|
||
|
}(Component);
|
||
|
|
||
|
Form.propTypes = propTypes$P;
|
||
|
Form.defaultProps = defaultProps$M;
|
||
|
|
||
|
var propTypes$Q = {
|
||
|
children: PropTypes.node,
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
valid: PropTypes.bool,
|
||
|
tooltip: PropTypes.bool
|
||
|
};
|
||
|
var defaultProps$N = {
|
||
|
tag: 'div',
|
||
|
valid: undefined
|
||
|
};
|
||
|
|
||
|
var FormFeedback = function FormFeedback(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
valid = props.valid,
|
||
|
tooltip = props.tooltip,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "valid", "tooltip", "tag"]);
|
||
|
|
||
|
var validMode = tooltip ? 'tooltip' : 'feedback';
|
||
|
var classes = mapToCssModules(classNames(className, valid ? "valid-" + validMode : "invalid-" + validMode), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
FormFeedback.propTypes = propTypes$Q;
|
||
|
FormFeedback.defaultProps = defaultProps$N;
|
||
|
|
||
|
var propTypes$R = {
|
||
|
children: PropTypes.node,
|
||
|
row: PropTypes.bool,
|
||
|
check: PropTypes.bool,
|
||
|
inline: PropTypes.bool,
|
||
|
disabled: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$O = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var FormGroup = function FormGroup(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
row = props.row,
|
||
|
disabled = props.disabled,
|
||
|
check = props.check,
|
||
|
inline = props.inline,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "row", "disabled", "check", "inline", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, row ? 'row' : false, check ? 'form-check' : 'form-group', check && inline ? 'form-check-inline' : false, check && disabled ? 'disabled' : false), cssModule);
|
||
|
|
||
|
if (Tag === 'fieldset') {
|
||
|
attributes.disabled = disabled;
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
FormGroup.propTypes = propTypes$R;
|
||
|
FormGroup.defaultProps = defaultProps$O;
|
||
|
|
||
|
var propTypes$S = {
|
||
|
children: PropTypes.node,
|
||
|
inline: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
color: PropTypes.string,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$P = {
|
||
|
tag: 'small',
|
||
|
color: 'muted'
|
||
|
};
|
||
|
|
||
|
var FormText = function FormText(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
inline = props.inline,
|
||
|
color = props.color,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "inline", "color", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, !inline ? 'form-text' : false, color ? "text-" + color : false), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
FormText.propTypes = propTypes$S;
|
||
|
FormText.defaultProps = defaultProps$P;
|
||
|
|
||
|
var propTypes$T = {
|
||
|
children: PropTypes.node,
|
||
|
type: PropTypes.string,
|
||
|
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
|
bsSize: PropTypes.string,
|
||
|
valid: PropTypes.bool,
|
||
|
invalid: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
|
||
|
plaintext: PropTypes.bool,
|
||
|
addon: PropTypes.bool,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$Q = {
|
||
|
type: 'text'
|
||
|
};
|
||
|
|
||
|
var Input = /*#__PURE__*/function (_React$Component) {
|
||
|
_inheritsLoose(Input, _React$Component);
|
||
|
|
||
|
function Input(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _React$Component.call(this, props) || this;
|
||
|
_this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
|
||
|
_this.focus = _this.focus.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = Input.prototype;
|
||
|
|
||
|
_proto.getRef = function getRef(ref) {
|
||
|
if (this.props.innerRef) {
|
||
|
this.props.innerRef(ref);
|
||
|
}
|
||
|
|
||
|
this.ref = ref;
|
||
|
};
|
||
|
|
||
|
_proto.focus = function focus() {
|
||
|
if (this.ref) {
|
||
|
this.ref.focus();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this$props = this.props,
|
||
|
className = _this$props.className,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
type = _this$props.type,
|
||
|
bsSize = _this$props.bsSize,
|
||
|
valid = _this$props.valid,
|
||
|
invalid = _this$props.invalid,
|
||
|
tag = _this$props.tag,
|
||
|
addon = _this$props.addon,
|
||
|
plaintext = _this$props.plaintext,
|
||
|
innerRef = _this$props.innerRef,
|
||
|
attributes = _objectWithoutPropertiesLoose(_this$props, ["className", "cssModule", "type", "bsSize", "valid", "invalid", "tag", "addon", "plaintext", "innerRef"]);
|
||
|
|
||
|
var checkInput = ['radio', 'checkbox'].indexOf(type) > -1;
|
||
|
var isNotaNumber = new RegExp('\\D', 'g');
|
||
|
var fileInput = type === 'file';
|
||
|
var textareaInput = type === 'textarea';
|
||
|
var selectInput = type === 'select';
|
||
|
var rangeInput = type === 'range';
|
||
|
var Tag = tag || (selectInput || textareaInput ? type : 'input');
|
||
|
var formControlClass = 'form-control';
|
||
|
|
||
|
if (plaintext) {
|
||
|
formControlClass = formControlClass + "-plaintext";
|
||
|
Tag = tag || 'input';
|
||
|
} else if (fileInput) {
|
||
|
formControlClass = formControlClass + "-file";
|
||
|
} else if (rangeInput) {
|
||
|
formControlClass = formControlClass + "-range";
|
||
|
} else if (checkInput) {
|
||
|
if (addon) {
|
||
|
formControlClass = null;
|
||
|
} else {
|
||
|
formControlClass = 'form-check-input';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (attributes.size && isNotaNumber.test(attributes.size)) {
|
||
|
warnOnce('Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.');
|
||
|
bsSize = attributes.size;
|
||
|
delete attributes.size;
|
||
|
}
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, invalid && 'is-invalid', valid && 'is-valid', bsSize ? "form-control-" + bsSize : false, formControlClass), cssModule);
|
||
|
|
||
|
if (Tag === 'input' || tag && typeof tag === 'function') {
|
||
|
attributes.type = type;
|
||
|
}
|
||
|
|
||
|
if (attributes.children && !(plaintext || type === 'select' || typeof Tag !== 'string' || Tag === 'select')) {
|
||
|
warnOnce("Input with a type of \"" + type + "\" cannot have children. Please use \"value\"/\"defaultValue\" instead.");
|
||
|
delete attributes.children;
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
ref: innerRef,
|
||
|
className: classes,
|
||
|
"aria-invalid": invalid
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
return Input;
|
||
|
}(React.Component);
|
||
|
|
||
|
Input.propTypes = propTypes$T;
|
||
|
Input.defaultProps = defaultProps$Q;
|
||
|
|
||
|
var propTypes$U = {
|
||
|
tag: tagPropType,
|
||
|
size: PropTypes.string,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$R = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var InputGroup = function InputGroup(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
size = props.size,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "size"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'input-group', size ? "input-group-" + size : null), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
InputGroup.propTypes = propTypes$U;
|
||
|
InputGroup.defaultProps = defaultProps$R;
|
||
|
|
||
|
var propTypes$V = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$S = {
|
||
|
tag: 'span'
|
||
|
};
|
||
|
|
||
|
var InputGroupText = function InputGroupText(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'input-group-text'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
InputGroupText.propTypes = propTypes$V;
|
||
|
InputGroupText.defaultProps = defaultProps$S;
|
||
|
|
||
|
var propTypes$W = {
|
||
|
tag: tagPropType,
|
||
|
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$T = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var InputGroupAddon = function InputGroupAddon(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
addonType = props.addonType,
|
||
|
children = props.children,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "addonType", "children"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'input-group-' + addonType), cssModule); // Convenience to assist with transition
|
||
|
|
||
|
if (typeof children === 'string') {
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}), /*#__PURE__*/React.createElement(InputGroupText, {
|
||
|
children: children
|
||
|
}));
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes,
|
||
|
children: children
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
InputGroupAddon.propTypes = propTypes$W;
|
||
|
InputGroupAddon.defaultProps = defaultProps$T;
|
||
|
|
||
|
var propTypes$X = {
|
||
|
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
|
||
|
children: PropTypes.node
|
||
|
};
|
||
|
|
||
|
var InputGroupButtonDropdown = function InputGroupButtonDropdown(props) {
|
||
|
return /*#__PURE__*/React.createElement(Dropdown, props);
|
||
|
};
|
||
|
|
||
|
InputGroupButtonDropdown.propTypes = propTypes$X;
|
||
|
|
||
|
var colWidths$1 = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||
|
var stringOrNumberProp$1 = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
|
||
|
var columnProps$1 = PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number, PropTypes.shape({
|
||
|
size: stringOrNumberProp$1,
|
||
|
order: stringOrNumberProp$1,
|
||
|
offset: stringOrNumberProp$1
|
||
|
})]);
|
||
|
var propTypes$Y = {
|
||
|
children: PropTypes.node,
|
||
|
hidden: PropTypes.bool,
|
||
|
check: PropTypes.bool,
|
||
|
size: PropTypes.string,
|
||
|
for: PropTypes.string,
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
xs: columnProps$1,
|
||
|
sm: columnProps$1,
|
||
|
md: columnProps$1,
|
||
|
lg: columnProps$1,
|
||
|
xl: columnProps$1,
|
||
|
widths: PropTypes.array
|
||
|
};
|
||
|
var defaultProps$U = {
|
||
|
tag: 'label',
|
||
|
widths: colWidths$1
|
||
|
};
|
||
|
|
||
|
var getColumnSizeClass$1 = 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 Label = function Label(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
hidden = props.hidden,
|
||
|
widths = props.widths,
|
||
|
Tag = props.tag,
|
||
|
check = props.check,
|
||
|
size = props.size,
|
||
|
htmlFor = props.for,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "hidden", "widths", "tag", "check", "size", "for"]);
|
||
|
|
||
|
var colClasses = [];
|
||
|
widths.forEach(function (colWidth, i) {
|
||
|
var columnProp = props[colWidth];
|
||
|
delete attributes[colWidth];
|
||
|
|
||
|
if (!columnProp && columnProp !== '') {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var isXs = !i;
|
||
|
var colClass;
|
||
|
|
||
|
if (isObject(columnProp)) {
|
||
|
var _classNames;
|
||
|
|
||
|
var colSizeInterfix = isXs ? '-' : "-" + colWidth + "-";
|
||
|
colClass = getColumnSizeClass$1(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 {
|
||
|
colClass = getColumnSizeClass$1(isXs, colWidth, columnProp);
|
||
|
colClasses.push(colClass);
|
||
|
}
|
||
|
});
|
||
|
var classes = mapToCssModules(classNames(className, hidden ? 'sr-only' : false, check ? 'form-check-label' : false, size ? "col-form-label-" + size : false, colClasses, colClasses.length ? 'col-form-label' : false), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({
|
||
|
htmlFor: htmlFor
|
||
|
}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
Label.propTypes = propTypes$Y;
|
||
|
Label.defaultProps = defaultProps$U;
|
||
|
|
||
|
var propTypes$Z = {
|
||
|
body: PropTypes.bool,
|
||
|
bottom: PropTypes.bool,
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
heading: PropTypes.bool,
|
||
|
left: PropTypes.bool,
|
||
|
list: PropTypes.bool,
|
||
|
middle: PropTypes.bool,
|
||
|
object: PropTypes.bool,
|
||
|
right: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
top: PropTypes.bool
|
||
|
};
|
||
|
|
||
|
var Media = function Media(props) {
|
||
|
var body = props.body,
|
||
|
bottom = props.bottom,
|
||
|
className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
heading = props.heading,
|
||
|
left = props.left,
|
||
|
list = props.list,
|
||
|
middle = props.middle,
|
||
|
object = props.object,
|
||
|
right = props.right,
|
||
|
tag = props.tag,
|
||
|
top = props.top,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["body", "bottom", "className", "cssModule", "heading", "left", "list", "middle", "object", "right", "tag", "top"]);
|
||
|
|
||
|
var defaultTag;
|
||
|
|
||
|
if (heading) {
|
||
|
defaultTag = 'h4';
|
||
|
} else if (attributes.href) {
|
||
|
defaultTag = 'a';
|
||
|
} else if (attributes.src || object) {
|
||
|
defaultTag = 'img';
|
||
|
} else if (list) {
|
||
|
defaultTag = 'ul';
|
||
|
} else {
|
||
|
defaultTag = 'div';
|
||
|
}
|
||
|
|
||
|
var Tag = tag || defaultTag;
|
||
|
var classes = mapToCssModules(classNames(className, {
|
||
|
'media-body': body,
|
||
|
'media-heading': heading,
|
||
|
'media-left': left,
|
||
|
'media-right': right,
|
||
|
'media-top': top,
|
||
|
'media-bottom': bottom,
|
||
|
'media-middle': middle,
|
||
|
'media-object': object,
|
||
|
'media-list': list,
|
||
|
media: !body && !heading && !left && !right && !top && !bottom && !middle && !object && !list
|
||
|
}), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
Media.propTypes = propTypes$Z;
|
||
|
|
||
|
var propTypes$_ = {
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
listClassName: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
size: PropTypes.string,
|
||
|
tag: tagPropType,
|
||
|
listTag: tagPropType,
|
||
|
'aria-label': PropTypes.string
|
||
|
};
|
||
|
var defaultProps$V = {
|
||
|
tag: 'nav',
|
||
|
listTag: 'ul',
|
||
|
'aria-label': 'pagination'
|
||
|
};
|
||
|
|
||
|
var Pagination = function Pagination(props) {
|
||
|
var _classNames;
|
||
|
|
||
|
var className = props.className,
|
||
|
listClassName = props.listClassName,
|
||
|
cssModule = props.cssModule,
|
||
|
size = props.size,
|
||
|
Tag = props.tag,
|
||
|
ListTag = props.listTag,
|
||
|
label = props['aria-label'],
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "listClassName", "cssModule", "size", "tag", "listTag", "aria-label"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className), cssModule);
|
||
|
var listClasses = mapToCssModules(classNames(listClassName, 'pagination', (_classNames = {}, _classNames["pagination-" + size] = !!size, _classNames)), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, {
|
||
|
className: classes,
|
||
|
"aria-label": label
|
||
|
}, /*#__PURE__*/React.createElement(ListTag, _extends({}, attributes, {
|
||
|
className: listClasses
|
||
|
})));
|
||
|
};
|
||
|
|
||
|
Pagination.propTypes = propTypes$_;
|
||
|
Pagination.defaultProps = defaultProps$V;
|
||
|
|
||
|
var propTypes$$ = {
|
||
|
active: PropTypes.bool,
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
disabled: PropTypes.bool,
|
||
|
tag: tagPropType
|
||
|
};
|
||
|
var defaultProps$W = {
|
||
|
tag: 'li'
|
||
|
};
|
||
|
|
||
|
var PaginationItem = function PaginationItem(props) {
|
||
|
var active = props.active,
|
||
|
className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
disabled = props.disabled,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["active", "className", "cssModule", "disabled", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'page-item', {
|
||
|
active: active,
|
||
|
disabled: disabled
|
||
|
}), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
PaginationItem.propTypes = propTypes$$;
|
||
|
PaginationItem.defaultProps = defaultProps$W;
|
||
|
|
||
|
var propTypes$10 = {
|
||
|
'aria-label': PropTypes.string,
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
next: PropTypes.bool,
|
||
|
previous: PropTypes.bool,
|
||
|
first: PropTypes.bool,
|
||
|
last: PropTypes.bool,
|
||
|
tag: tagPropType
|
||
|
};
|
||
|
var defaultProps$X = {
|
||
|
tag: 'a'
|
||
|
};
|
||
|
|
||
|
var PaginationLink = function PaginationLink(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
next = props.next,
|
||
|
previous = props.previous,
|
||
|
first = props.first,
|
||
|
last = props.last,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "next", "previous", "first", "last", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'page-link'), cssModule);
|
||
|
var defaultAriaLabel;
|
||
|
|
||
|
if (previous) {
|
||
|
defaultAriaLabel = 'Previous';
|
||
|
} else if (next) {
|
||
|
defaultAriaLabel = 'Next';
|
||
|
} else if (first) {
|
||
|
defaultAriaLabel = 'First';
|
||
|
} else if (last) {
|
||
|
defaultAriaLabel = 'Last';
|
||
|
}
|
||
|
|
||
|
var ariaLabel = props['aria-label'] || defaultAriaLabel;
|
||
|
var defaultCaret;
|
||
|
|
||
|
if (previous) {
|
||
|
defaultCaret = "\u2039";
|
||
|
} else if (next) {
|
||
|
defaultCaret = "\u203A";
|
||
|
} else if (first) {
|
||
|
defaultCaret = "\xAB";
|
||
|
} else if (last) {
|
||
|
defaultCaret = "\xBB";
|
||
|
}
|
||
|
|
||
|
var children = props.children;
|
||
|
|
||
|
if (children && Array.isArray(children) && children.length === 0) {
|
||
|
children = null;
|
||
|
}
|
||
|
|
||
|
if (!attributes.href && Tag === 'a') {
|
||
|
Tag = 'button';
|
||
|
}
|
||
|
|
||
|
if (previous || next || first || last) {
|
||
|
children = [/*#__PURE__*/React.createElement("span", {
|
||
|
"aria-hidden": "true",
|
||
|
key: "caret"
|
||
|
}, children || defaultCaret), /*#__PURE__*/React.createElement("span", {
|
||
|
className: "sr-only",
|
||
|
key: "sr"
|
||
|
}, ariaLabel)];
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes,
|
||
|
"aria-label": ariaLabel
|
||
|
}), children);
|
||
|
};
|
||
|
|
||
|
PaginationLink.propTypes = propTypes$10;
|
||
|
PaginationLink.defaultProps = defaultProps$X;
|
||
|
|
||
|
/**
|
||
|
* TabContext
|
||
|
* {
|
||
|
* activeTabId: PropTypes.any
|
||
|
* }
|
||
|
*/
|
||
|
|
||
|
var TabContext = /*#__PURE__*/React.createContext({});
|
||
|
|
||
|
var propTypes$11 = {
|
||
|
tag: tagPropType,
|
||
|
activeTab: PropTypes.any,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$Y = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var TabContent = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(TabContent, _Component);
|
||
|
|
||
|
TabContent.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
||
|
if (prevState.activeTab !== nextProps.activeTab) {
|
||
|
return {
|
||
|
activeTab: nextProps.activeTab
|
||
|
};
|
||
|
}
|
||
|
|
||
|
return null;
|
||
|
};
|
||
|
|
||
|
function TabContent(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
activeTab: _this.props.activeTab
|
||
|
};
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = TabContent.prototype;
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this$props = this.props,
|
||
|
className = _this$props.className,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
Tag = _this$props.tag;
|
||
|
var attributes = omit(this.props, Object.keys(propTypes$11));
|
||
|
var classes = mapToCssModules(classNames('tab-content', className), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(TabContext.Provider, {
|
||
|
value: {
|
||
|
activeTabId: this.state.activeTab
|
||
|
}
|
||
|
}, /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
})));
|
||
|
};
|
||
|
|
||
|
return TabContent;
|
||
|
}(Component);
|
||
|
TabContent.propTypes = propTypes$11;
|
||
|
TabContent.defaultProps = defaultProps$Y;
|
||
|
|
||
|
var propTypes$12 = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
tabId: PropTypes.any
|
||
|
};
|
||
|
var defaultProps$Z = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
function TabPane(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
tabId = props.tabId,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tabId", "tag"]);
|
||
|
|
||
|
var getClasses = function getClasses(activeTabId) {
|
||
|
return mapToCssModules(classNames('tab-pane', className, {
|
||
|
active: tabId === activeTabId
|
||
|
}), cssModule);
|
||
|
};
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(TabContext.Consumer, null, function (_ref) {
|
||
|
var activeTabId = _ref.activeTabId;
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: getClasses(activeTabId)
|
||
|
}));
|
||
|
});
|
||
|
}
|
||
|
TabPane.propTypes = propTypes$12;
|
||
|
TabPane.defaultProps = defaultProps$Z;
|
||
|
|
||
|
var propTypes$13 = {
|
||
|
tag: tagPropType,
|
||
|
fluid: PropTypes.bool,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$_ = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var Jumbotron = function Jumbotron(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
fluid = props.fluid,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "fluid"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'jumbotron', fluid ? 'jumbotron-fluid' : false), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
Jumbotron.propTypes = propTypes$13;
|
||
|
Jumbotron.defaultProps = defaultProps$_;
|
||
|
|
||
|
var propTypes$14 = {
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
closeClassName: PropTypes.string,
|
||
|
closeAriaLabel: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
color: PropTypes.string,
|
||
|
fade: PropTypes.bool,
|
||
|
isOpen: PropTypes.bool,
|
||
|
toggle: PropTypes.func,
|
||
|
tag: tagPropType,
|
||
|
transition: PropTypes.shape(Fade.propTypes),
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
|
||
|
};
|
||
|
var defaultProps$$ = {
|
||
|
color: 'success',
|
||
|
isOpen: true,
|
||
|
tag: 'div',
|
||
|
closeAriaLabel: 'Close',
|
||
|
fade: true,
|
||
|
transition: _extends({}, Fade.defaultProps, {
|
||
|
unmountOnExit: true
|
||
|
})
|
||
|
};
|
||
|
|
||
|
function Alert(props) {
|
||
|
var className = props.className,
|
||
|
closeClassName = props.closeClassName,
|
||
|
closeAriaLabel = props.closeAriaLabel,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
color = props.color,
|
||
|
isOpen = props.isOpen,
|
||
|
toggle = props.toggle,
|
||
|
children = props.children,
|
||
|
transition = props.transition,
|
||
|
fade = props.fade,
|
||
|
innerRef = props.innerRef,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "closeClassName", "closeAriaLabel", "cssModule", "tag", "color", "isOpen", "toggle", "children", "transition", "fade", "innerRef"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'alert', "alert-" + color, {
|
||
|
'alert-dismissible': toggle
|
||
|
}), cssModule);
|
||
|
var closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);
|
||
|
|
||
|
var alertTransition = _extends({}, Fade.defaultProps, transition, {
|
||
|
baseClass: fade ? transition.baseClass : '',
|
||
|
timeout: fade ? transition.timeout : 0
|
||
|
});
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Fade, _extends({}, attributes, alertTransition, {
|
||
|
tag: Tag,
|
||
|
className: classes,
|
||
|
in: isOpen,
|
||
|
role: "alert",
|
||
|
innerRef: innerRef
|
||
|
}), toggle ? /*#__PURE__*/React.createElement("button", {
|
||
|
type: "button",
|
||
|
className: closeClasses,
|
||
|
"aria-label": closeAriaLabel,
|
||
|
onClick: toggle
|
||
|
}, /*#__PURE__*/React.createElement("span", {
|
||
|
"aria-hidden": "true"
|
||
|
}, "\xD7")) : null, children);
|
||
|
}
|
||
|
|
||
|
Alert.propTypes = propTypes$14;
|
||
|
Alert.defaultProps = defaultProps$$;
|
||
|
|
||
|
var propTypes$15 = {
|
||
|
children: PropTypes.node,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
fade: PropTypes.bool,
|
||
|
isOpen: PropTypes.bool,
|
||
|
tag: tagPropType,
|
||
|
transition: PropTypes.shape(Fade.propTypes),
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
|
||
|
};
|
||
|
var defaultProps$10 = {
|
||
|
isOpen: true,
|
||
|
tag: 'div',
|
||
|
fade: true,
|
||
|
transition: _extends({}, Fade.defaultProps, {
|
||
|
unmountOnExit: true
|
||
|
})
|
||
|
};
|
||
|
|
||
|
function Toast(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
isOpen = props.isOpen,
|
||
|
children = props.children,
|
||
|
transition = props.transition,
|
||
|
fade = props.fade,
|
||
|
innerRef = props.innerRef,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "isOpen", "children", "transition", "fade", "innerRef"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'toast'), cssModule);
|
||
|
|
||
|
var toastTransition = _extends({}, Fade.defaultProps, transition, {
|
||
|
baseClass: fade ? transition.baseClass : '',
|
||
|
timeout: fade ? transition.timeout : 0
|
||
|
});
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Fade, _extends({}, attributes, toastTransition, {
|
||
|
tag: Tag,
|
||
|
className: classes,
|
||
|
in: isOpen,
|
||
|
role: "alert",
|
||
|
innerRef: innerRef
|
||
|
}), children);
|
||
|
}
|
||
|
|
||
|
Toast.propTypes = propTypes$15;
|
||
|
Toast.defaultProps = defaultProps$10;
|
||
|
|
||
|
var propTypes$16 = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
|
||
|
};
|
||
|
var defaultProps$11 = {
|
||
|
tag: 'div'
|
||
|
};
|
||
|
|
||
|
var ToastBody = function ToastBody(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, 'toast-body'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes,
|
||
|
ref: innerRef
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ToastBody.propTypes = propTypes$16;
|
||
|
ToastBody.defaultProps = defaultProps$11;
|
||
|
|
||
|
var propTypes$17 = {
|
||
|
tag: tagPropType,
|
||
|
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||
|
wrapTag: tagPropType,
|
||
|
toggle: PropTypes.func,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
children: PropTypes.node,
|
||
|
closeAriaLabel: PropTypes.string,
|
||
|
charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
close: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$12 = {
|
||
|
tag: 'strong',
|
||
|
wrapTag: 'div',
|
||
|
tagClassName: 'mr-auto',
|
||
|
closeAriaLabel: 'Close',
|
||
|
charCode: 215
|
||
|
};
|
||
|
|
||
|
var ToastHeader = function ToastHeader(props) {
|
||
|
var closeButton;
|
||
|
var icon;
|
||
|
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
children = props.children,
|
||
|
toggle = props.toggle,
|
||
|
Tag = props.tag,
|
||
|
WrapTag = props.wrapTag,
|
||
|
closeAriaLabel = props.closeAriaLabel,
|
||
|
charCode = props.charCode,
|
||
|
close = props.close,
|
||
|
tagClassName = props.tagClassName,
|
||
|
iconProp = props.icon,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "children", "toggle", "tag", "wrapTag", "closeAriaLabel", "charCode", "close", "tagClassName", "icon"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'toast-header'), cssModule);
|
||
|
|
||
|
if (!close && toggle) {
|
||
|
var closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
|
||
|
closeButton = /*#__PURE__*/React.createElement("button", {
|
||
|
type: "button",
|
||
|
onClick: toggle,
|
||
|
className: mapToCssModules('close', cssModule),
|
||
|
"aria-label": closeAriaLabel
|
||
|
}, /*#__PURE__*/React.createElement("span", {
|
||
|
"aria-hidden": "true"
|
||
|
}, closeIcon));
|
||
|
}
|
||
|
|
||
|
if (typeof iconProp === "string") {
|
||
|
icon = /*#__PURE__*/React.createElement("svg", {
|
||
|
className: mapToCssModules("rounded text-" + iconProp),
|
||
|
width: "20",
|
||
|
height: "20",
|
||
|
xmlns: "http://www.w3.org/2000/svg",
|
||
|
preserveAspectRatio: "xMidYMid slice",
|
||
|
focusable: "false",
|
||
|
role: "img"
|
||
|
}, /*#__PURE__*/React.createElement("rect", {
|
||
|
fill: "currentColor",
|
||
|
width: "100%",
|
||
|
height: "100%"
|
||
|
}));
|
||
|
} else if (iconProp) {
|
||
|
icon = iconProp;
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(WrapTag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}), icon, /*#__PURE__*/React.createElement(Tag, {
|
||
|
className: mapToCssModules(classNames(tagClassName, {
|
||
|
"ml-2": icon != null
|
||
|
}), cssModule)
|
||
|
}, children), close || closeButton);
|
||
|
};
|
||
|
|
||
|
ToastHeader.propTypes = propTypes$17;
|
||
|
ToastHeader.defaultProps = defaultProps$12;
|
||
|
|
||
|
var _transitionStatusToCl;
|
||
|
|
||
|
var propTypes$18 = _extends({}, Transition.propTypes, {
|
||
|
isOpen: PropTypes.bool,
|
||
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.node,
|
||
|
navbar: PropTypes.bool,
|
||
|
cssModule: PropTypes.object,
|
||
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object])
|
||
|
});
|
||
|
|
||
|
var defaultProps$13 = _extends({}, Transition.defaultProps, {
|
||
|
isOpen: false,
|
||
|
appear: false,
|
||
|
enter: true,
|
||
|
exit: true,
|
||
|
tag: 'div',
|
||
|
timeout: TransitionTimeouts.Collapse
|
||
|
});
|
||
|
|
||
|
var transitionStatusToClassHash = (_transitionStatusToCl = {}, _transitionStatusToCl[TransitionStatuses.ENTERING] = 'collapsing', _transitionStatusToCl[TransitionStatuses.ENTERED] = 'collapse show', _transitionStatusToCl[TransitionStatuses.EXITING] = 'collapsing', _transitionStatusToCl[TransitionStatuses.EXITED] = 'collapse', _transitionStatusToCl);
|
||
|
|
||
|
function getTransitionClass(status) {
|
||
|
return transitionStatusToClassHash[status] || 'collapse';
|
||
|
}
|
||
|
|
||
|
function getHeight(node) {
|
||
|
return node.scrollHeight;
|
||
|
}
|
||
|
|
||
|
var Collapse = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(Collapse, _Component);
|
||
|
|
||
|
function Collapse(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
height: null
|
||
|
};
|
||
|
['onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].forEach(function (name) {
|
||
|
_this[name] = _this[name].bind(_assertThisInitialized(_this));
|
||
|
});
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = Collapse.prototype;
|
||
|
|
||
|
_proto.onEntering = function onEntering(node, isAppearing) {
|
||
|
this.setState({
|
||
|
height: getHeight(node)
|
||
|
});
|
||
|
this.props.onEntering(node, isAppearing);
|
||
|
};
|
||
|
|
||
|
_proto.onEntered = function onEntered(node, isAppearing) {
|
||
|
this.setState({
|
||
|
height: null
|
||
|
});
|
||
|
this.props.onEntered(node, isAppearing);
|
||
|
};
|
||
|
|
||
|
_proto.onExit = function onExit(node) {
|
||
|
this.setState({
|
||
|
height: getHeight(node)
|
||
|
});
|
||
|
this.props.onExit(node);
|
||
|
};
|
||
|
|
||
|
_proto.onExiting = function onExiting(node) {
|
||
|
// getting this variable triggers a reflow
|
||
|
var _unused = node.offsetHeight; // eslint-disable-line no-unused-vars
|
||
|
|
||
|
this.setState({
|
||
|
height: 0
|
||
|
});
|
||
|
this.props.onExiting(node);
|
||
|
};
|
||
|
|
||
|
_proto.onExited = function onExited(node) {
|
||
|
this.setState({
|
||
|
height: null
|
||
|
});
|
||
|
this.props.onExited(node);
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
var _this2 = this;
|
||
|
|
||
|
var _this$props = this.props,
|
||
|
Tag = _this$props.tag,
|
||
|
isOpen = _this$props.isOpen,
|
||
|
className = _this$props.className,
|
||
|
navbar = _this$props.navbar,
|
||
|
cssModule = _this$props.cssModule,
|
||
|
children = _this$props.children,
|
||
|
innerRef = _this$props.innerRef,
|
||
|
otherProps = _objectWithoutPropertiesLoose(_this$props, ["tag", "isOpen", "className", "navbar", "cssModule", "children", "innerRef"]);
|
||
|
|
||
|
var height = this.state.height;
|
||
|
var transitionProps = pick(otherProps, TransitionPropTypeKeys);
|
||
|
var childProps = omit(otherProps, TransitionPropTypeKeys);
|
||
|
return /*#__PURE__*/React.createElement(Transition, _extends({}, transitionProps, {
|
||
|
in: isOpen,
|
||
|
onEntering: this.onEntering,
|
||
|
onEntered: this.onEntered,
|
||
|
onExit: this.onExit,
|
||
|
onExiting: this.onExiting,
|
||
|
onExited: this.onExited
|
||
|
}), function (status) {
|
||
|
var collapseClass = getTransitionClass(status);
|
||
|
var classes = mapToCssModules(classNames(className, collapseClass, navbar && 'navbar-collapse'), cssModule);
|
||
|
var style = height === null ? null : {
|
||
|
height: height
|
||
|
};
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, childProps, {
|
||
|
style: _extends({}, childProps.style, style),
|
||
|
className: classes,
|
||
|
ref: _this2.props.innerRef
|
||
|
}), children);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
return Collapse;
|
||
|
}(Component);
|
||
|
|
||
|
Collapse.propTypes = propTypes$18;
|
||
|
Collapse.defaultProps = defaultProps$13;
|
||
|
|
||
|
var propTypes$19 = {
|
||
|
tag: tagPropType,
|
||
|
active: PropTypes.bool,
|
||
|
disabled: PropTypes.bool,
|
||
|
color: PropTypes.string,
|
||
|
action: PropTypes.bool,
|
||
|
className: PropTypes.any,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$14 = {
|
||
|
tag: 'li'
|
||
|
};
|
||
|
|
||
|
var handleDisabledOnClick = function handleDisabledOnClick(e) {
|
||
|
e.preventDefault();
|
||
|
};
|
||
|
|
||
|
var ListGroupItem = function ListGroupItem(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
active = props.active,
|
||
|
disabled = props.disabled,
|
||
|
action = props.action,
|
||
|
color = props.color,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "active", "disabled", "action", "color"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, active ? 'active' : false, disabled ? 'disabled' : false, action ? 'list-group-item-action' : false, color ? "list-group-item-" + color : false, 'list-group-item'), cssModule); // Prevent click event when disabled.
|
||
|
|
||
|
if (disabled) {
|
||
|
attributes.onClick = handleDisabledOnClick;
|
||
|
}
|
||
|
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ListGroupItem.propTypes = propTypes$19;
|
||
|
ListGroupItem.defaultProps = defaultProps$14;
|
||
|
|
||
|
var propTypes$1a = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.any,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$15 = {
|
||
|
tag: 'h5'
|
||
|
};
|
||
|
|
||
|
var ListGroupItemHeading = function ListGroupItemHeading(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'list-group-item-heading'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ListGroupItemHeading.propTypes = propTypes$1a;
|
||
|
ListGroupItemHeading.defaultProps = defaultProps$15;
|
||
|
|
||
|
var propTypes$1b = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.any,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$16 = {
|
||
|
tag: 'p'
|
||
|
};
|
||
|
|
||
|
var ListGroupItemText = function ListGroupItemText(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'list-group-item-text'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes
|
||
|
}));
|
||
|
};
|
||
|
|
||
|
ListGroupItemText.propTypes = propTypes$1b;
|
||
|
ListGroupItemText.defaultProps = defaultProps$16;
|
||
|
|
||
|
var propTypes$1c = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
type: PropTypes.string
|
||
|
};
|
||
|
var defaultProps$17 = {
|
||
|
tag: 'ul'
|
||
|
};
|
||
|
var List = /*#__PURE__*/forwardRef(function (props, ref) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
type = props.type,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag", "type"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, type ? "list-" + type : false), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes,
|
||
|
ref: ref
|
||
|
}));
|
||
|
});
|
||
|
List.propTypes = propTypes$1c;
|
||
|
List.defaultProps = defaultProps$17;
|
||
|
|
||
|
var propTypes$1d = {
|
||
|
tag: tagPropType,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object
|
||
|
};
|
||
|
var defaultProps$18 = {
|
||
|
tag: 'li'
|
||
|
};
|
||
|
var ListInlineItem = /*#__PURE__*/forwardRef(function (props, ref) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, 'list-inline-item'), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({}, attributes, {
|
||
|
className: classes,
|
||
|
ref: ref
|
||
|
}));
|
||
|
});
|
||
|
ListInlineItem.propTypes = propTypes$1d;
|
||
|
ListInlineItem.defaultProps = defaultProps$18;
|
||
|
|
||
|
var UncontrolledAlert = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledAlert, _Component);
|
||
|
|
||
|
function UncontrolledAlert(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
isOpen: true
|
||
|
};
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledAlert.prototype;
|
||
|
|
||
|
_proto.toggle = function toggle() {
|
||
|
this.setState({
|
||
|
isOpen: !this.state.isOpen
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
return /*#__PURE__*/React.createElement(Alert, _extends({
|
||
|
isOpen: this.state.isOpen,
|
||
|
toggle: this.toggle
|
||
|
}, this.props));
|
||
|
};
|
||
|
|
||
|
return UncontrolledAlert;
|
||
|
}(Component);
|
||
|
|
||
|
var omitKeys$1 = ['defaultOpen'];
|
||
|
|
||
|
var UncontrolledButtonDropdown = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledButtonDropdown, _Component);
|
||
|
|
||
|
function UncontrolledButtonDropdown(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
isOpen: props.defaultOpen || false
|
||
|
};
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledButtonDropdown.prototype;
|
||
|
|
||
|
_proto.toggle = function toggle() {
|
||
|
this.setState({
|
||
|
isOpen: !this.state.isOpen
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
return /*#__PURE__*/React.createElement(ButtonDropdown, _extends({
|
||
|
isOpen: this.state.isOpen,
|
||
|
toggle: this.toggle
|
||
|
}, omit(this.props, omitKeys$1)));
|
||
|
};
|
||
|
|
||
|
return UncontrolledButtonDropdown;
|
||
|
}(Component);
|
||
|
UncontrolledButtonDropdown.propTypes = _extends({
|
||
|
defaultOpen: PropTypes.bool
|
||
|
}, ButtonDropdown.propTypes);
|
||
|
|
||
|
var omitKeys$2 = ['toggleEvents', 'defaultOpen'];
|
||
|
var propTypes$1e = {
|
||
|
defaultOpen: PropTypes.bool,
|
||
|
toggler: PropTypes.string.isRequired,
|
||
|
toggleEvents: PropTypes.arrayOf(PropTypes.string)
|
||
|
};
|
||
|
var defaultProps$19 = {
|
||
|
toggleEvents: defaultToggleEvents
|
||
|
};
|
||
|
|
||
|
var UncontrolledCollapse = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledCollapse, _Component);
|
||
|
|
||
|
function UncontrolledCollapse(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.togglers = null;
|
||
|
_this.removeEventListeners = null;
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
_this.state = {
|
||
|
isOpen: props.defaultOpen || false
|
||
|
};
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledCollapse.prototype;
|
||
|
|
||
|
_proto.componentDidMount = function componentDidMount() {
|
||
|
this.togglers = findDOMElements(this.props.toggler);
|
||
|
|
||
|
if (this.togglers.length) {
|
||
|
this.removeEventListeners = addMultipleEventListeners(this.togglers, this.toggle, this.props.toggleEvents);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
||
|
if (this.togglers.length && this.removeEventListeners) {
|
||
|
this.removeEventListeners();
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.toggle = function toggle(e) {
|
||
|
this.setState(function (_ref) {
|
||
|
var isOpen = _ref.isOpen;
|
||
|
return {
|
||
|
isOpen: !isOpen
|
||
|
};
|
||
|
});
|
||
|
e.preventDefault();
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
return /*#__PURE__*/React.createElement(Collapse, _extends({
|
||
|
isOpen: this.state.isOpen
|
||
|
}, omit(this.props, omitKeys$2)));
|
||
|
};
|
||
|
|
||
|
return UncontrolledCollapse;
|
||
|
}(Component);
|
||
|
|
||
|
UncontrolledCollapse.propTypes = propTypes$1e;
|
||
|
UncontrolledCollapse.defaultProps = defaultProps$19;
|
||
|
|
||
|
var omitKeys$3 = ['defaultOpen'];
|
||
|
|
||
|
var UncontrolledDropdown = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledDropdown, _Component);
|
||
|
|
||
|
function UncontrolledDropdown(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
isOpen: props.defaultOpen || false
|
||
|
};
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledDropdown.prototype;
|
||
|
|
||
|
_proto.toggle = function toggle(e) {
|
||
|
this.setState({
|
||
|
isOpen: !this.state.isOpen
|
||
|
});
|
||
|
|
||
|
if (this.props.onToggle) {
|
||
|
this.props.onToggle(e, !this.state.isOpen);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
return /*#__PURE__*/React.createElement(Dropdown, _extends({
|
||
|
isOpen: this.state.isOpen,
|
||
|
toggle: this.toggle
|
||
|
}, omit(this.props, omitKeys$3)));
|
||
|
};
|
||
|
|
||
|
return UncontrolledDropdown;
|
||
|
}(Component);
|
||
|
UncontrolledDropdown.propTypes = _extends({
|
||
|
defaultOpen: PropTypes.bool,
|
||
|
onToggle: PropTypes.func
|
||
|
}, Dropdown.propTypes);
|
||
|
|
||
|
var omitKeys$4 = ['defaultOpen'];
|
||
|
|
||
|
var UncontrolledTooltip = /*#__PURE__*/function (_Component) {
|
||
|
_inheritsLoose(UncontrolledTooltip, _Component);
|
||
|
|
||
|
function UncontrolledTooltip(props) {
|
||
|
var _this;
|
||
|
|
||
|
_this = _Component.call(this, props) || this;
|
||
|
_this.state = {
|
||
|
isOpen: props.defaultOpen || false
|
||
|
};
|
||
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
||
|
return _this;
|
||
|
}
|
||
|
|
||
|
var _proto = UncontrolledTooltip.prototype;
|
||
|
|
||
|
_proto.toggle = function toggle() {
|
||
|
this.setState({
|
||
|
isOpen: !this.state.isOpen
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.render = function render() {
|
||
|
return /*#__PURE__*/React.createElement(Tooltip, _extends({
|
||
|
isOpen: this.state.isOpen,
|
||
|
toggle: this.toggle
|
||
|
}, omit(this.props, omitKeys$4)));
|
||
|
};
|
||
|
|
||
|
return UncontrolledTooltip;
|
||
|
}(Component);
|
||
|
UncontrolledTooltip.propTypes = _extends({
|
||
|
defaultOpen: PropTypes.bool
|
||
|
}, Tooltip.propTypes);
|
||
|
|
||
|
var propTypes$1f = {
|
||
|
tag: tagPropType,
|
||
|
type: PropTypes.string,
|
||
|
size: PropTypes.string,
|
||
|
color: PropTypes.string,
|
||
|
className: PropTypes.string,
|
||
|
cssModule: PropTypes.object,
|
||
|
children: PropTypes.string
|
||
|
};
|
||
|
var defaultProps$1a = {
|
||
|
tag: 'div',
|
||
|
type: 'border',
|
||
|
children: 'Loading...'
|
||
|
};
|
||
|
|
||
|
var Spinner = function Spinner(props) {
|
||
|
var className = props.className,
|
||
|
cssModule = props.cssModule,
|
||
|
type = props.type,
|
||
|
size = props.size,
|
||
|
color = props.color,
|
||
|
children = props.children,
|
||
|
Tag = props.tag,
|
||
|
attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "type", "size", "color", "children", "tag"]);
|
||
|
|
||
|
var classes = mapToCssModules(classNames(className, size ? "spinner-" + type + "-" + size : false, "spinner-" + type, color ? "text-" + color : false), cssModule);
|
||
|
return /*#__PURE__*/React.createElement(Tag, _extends({
|
||
|
role: "status"
|
||
|
}, attributes, {
|
||
|
className: classes
|
||
|
}), children && /*#__PURE__*/React.createElement("span", {
|
||
|
className: mapToCssModules('sr-only', cssModule)
|
||
|
}, children));
|
||
|
};
|
||
|
|
||
|
Spinner.propTypes = propTypes$1f;
|
||
|
Spinner.defaultProps = defaultProps$1a;
|
||
|
|
||
|
(function () {
|
||
|
if (typeof window !== 'object' || typeof window.CustomEvent === 'function') return;
|
||
|
|
||
|
var CustomEvent = function CustomEvent(event, params) {
|
||
|
params = params || {
|
||
|
bubbles: false,
|
||
|
cancelable: false,
|
||
|
detail: null
|
||
|
};
|
||
|
var evt = document.createEvent('CustomEvent');
|
||
|
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
||
|
return evt;
|
||
|
};
|
||
|
|
||
|
window.CustomEvent = CustomEvent;
|
||
|
})();
|
||
|
|
||
|
(function () {
|
||
|
if (typeof Object.values === 'function') return;
|
||
|
|
||
|
var values = function values(O) {
|
||
|
return Object.keys(O).map(function (key) {
|
||
|
return O[key];
|
||
|
});
|
||
|
};
|
||
|
|
||
|
Object.values = values;
|
||
|
})();
|
||
|
|
||
|
var polyfill = /*#__PURE__*/Object.freeze({
|
||
|
__proto__: null
|
||
|
});
|
||
|
|
||
|
export { Alert, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonDropdown, ButtonGroup, ButtonToggle, ButtonToolbar, Card, CardBody, CardColumns, CardDeck, CardFooter, CardGroup, CardHeader, CardImg, CardImgOverlay, CardLink, CardSubtitle, CardText, CardTitle, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Collapse, Container, CustomFileInput, CustomInput, Dropdown, DropdownContext, DropdownItem, DropdownMenu, DropdownToggle, Fade, Form, FormFeedback, FormGroup, FormText, Input, InputGroup, InputGroupAddon, InputGroupButtonDropdown, InputGroupText, Jumbotron, Label, List, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, ListInlineItem, Media, Modal, ModalBody, ModalFooter, ModalHeader, Nav, NavItem, NavLink, Navbar, NavbarBrand, NavbarText, NavbarToggler, Pagination, PaginationItem, PaginationLink, polyfill as Polyfill, Popover, PopoverBody, PopoverHeader, PopperContent, PopperTargetHelper, Progress, Row, Spinner, TabContent, TabPane, Table, Toast, ToastBody, ToastHeader, Tooltip, UncontrolledAlert, UncontrolledButtonDropdown, UncontrolledCarousel, UncontrolledCollapse, UncontrolledDropdown, UncontrolledPopover, UncontrolledTooltip, utils as Util };
|
||
|
//# sourceMappingURL=reactstrap.es.js.map
|