8921 lines
271 KiB
JavaScript
8921 lines
271 KiB
JavaScript
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
|
|
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
|
|
(factory((global.Reactstrap = global.Reactstrap || {}),global.React,global.ReactDOM));
|
|
}(this, (function (exports,React,ReactDOM) { 'use strict';
|
|
|
|
var React__default = 'default' in React ? React['default'] : React;
|
|
ReactDOM = ReactDOM && 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM;
|
|
|
|
function unwrapExports (x) {
|
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
}
|
|
|
|
function createCommonjsModule(fn, module) {
|
|
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
}
|
|
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
*
|
|
*/
|
|
|
|
function makeEmptyFunction(arg) {
|
|
return function () {
|
|
return arg;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* This function accepts and discards inputs; it has no side effects. This is
|
|
* primarily useful idiomatically for overridable function endpoints which
|
|
* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
|
|
*/
|
|
var emptyFunction = function emptyFunction() {};
|
|
|
|
emptyFunction.thatReturns = makeEmptyFunction;
|
|
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
|
|
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
|
|
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
|
|
emptyFunction.thatReturnsThis = function () {
|
|
return this;
|
|
};
|
|
emptyFunction.thatReturnsArgument = function (arg) {
|
|
return arg;
|
|
};
|
|
|
|
var emptyFunction_1 = emptyFunction;
|
|
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Use invariant() to assert state which your program assumes to be true.
|
|
*
|
|
* Provide sprintf-style format (only %s is supported) and arguments
|
|
* to provide information about what broke and what you were
|
|
* expecting.
|
|
*
|
|
* The invariant message will be stripped in production, but the invariant
|
|
* will remain to ensure logic does not differ in production.
|
|
*/
|
|
|
|
var validateFormat = function validateFormat(format) {};
|
|
|
|
function invariant(condition, format, a, b, c, d, e, f) {
|
|
validateFormat(format);
|
|
|
|
if (!condition) {
|
|
var error;
|
|
if (format === undefined) {
|
|
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
|
|
} else {
|
|
var args = [a, b, c, d, e, f];
|
|
var argIndex = 0;
|
|
error = new Error(format.replace(/%s/g, function () {
|
|
return args[argIndex++];
|
|
}));
|
|
error.name = 'Invariant Violation';
|
|
}
|
|
|
|
error.framesToPop = 1; // we don't care about invariant's own frame
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
var invariant_1 = invariant;
|
|
|
|
/*
|
|
object-assign
|
|
(c) Sindre Sorhus
|
|
@license MIT
|
|
*/
|
|
|
|
/* eslint-disable no-unused-vars */
|
|
|
|
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
|
|
|
function toObject(val) {
|
|
if (val === null || val === undefined) {
|
|
throw new TypeError('Object.assign cannot be called with null or undefined');
|
|
}
|
|
|
|
return Object(val);
|
|
}
|
|
|
|
function shouldUseNative() {
|
|
try {
|
|
if (!Object.assign) {
|
|
return false;
|
|
}
|
|
|
|
// Detect buggy property enumeration order in older V8 versions.
|
|
|
|
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
|
|
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
|
|
test1[5] = 'de';
|
|
if (Object.getOwnPropertyNames(test1)[0] === '5') {
|
|
return false;
|
|
}
|
|
|
|
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
|
|
var test2 = {};
|
|
for (var i = 0; i < 10; i++) {
|
|
test2['_' + String.fromCharCode(i)] = i;
|
|
}
|
|
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
|
|
return test2[n];
|
|
});
|
|
if (order2.join('') !== '0123456789') {
|
|
return false;
|
|
}
|
|
|
|
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
|
|
var test3 = {};
|
|
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
|
|
test3[letter] = letter;
|
|
});
|
|
if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
} catch (err) {
|
|
// We don't expect any of the above to throw, but better to be safe.
|
|
return false;
|
|
}
|
|
}
|
|
|
|
var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
|
|
var from;
|
|
var to = toObject(target);
|
|
var symbols;
|
|
|
|
for (var s = 1; s < arguments.length; s++) {
|
|
from = Object(arguments[s]);
|
|
|
|
for (var key in from) {
|
|
if (hasOwnProperty.call(from, key)) {
|
|
to[key] = from[key];
|
|
}
|
|
}
|
|
|
|
if (getOwnPropertySymbols) {
|
|
symbols = getOwnPropertySymbols(from);
|
|
for (var i = 0; i < symbols.length; i++) {
|
|
if (propIsEnumerable.call(from, symbols[i])) {
|
|
to[symbols[i]] = from[symbols[i]];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return to;
|
|
};
|
|
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
|
|
var ReactPropTypesSecret_1 = ReactPropTypesSecret;
|
|
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
|
return typeof obj;
|
|
} : function (obj) {
|
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var classCallCheck = function (instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
};
|
|
|
|
var createClass = function () {
|
|
function defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) defineProperties(Constructor, staticProps);
|
|
return Constructor;
|
|
};
|
|
}();
|
|
|
|
|
|
|
|
|
|
|
|
var defineProperty = function (obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, {
|
|
value: value,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
});
|
|
} else {
|
|
obj[key] = value;
|
|
}
|
|
|
|
return obj;
|
|
};
|
|
|
|
var _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;
|
|
};
|
|
|
|
|
|
|
|
var inherits = function (subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
|
}
|
|
|
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
constructor: {
|
|
value: subClass,
|
|
enumerable: false,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var objectWithoutProperties = function (obj, keys) {
|
|
var target = {};
|
|
|
|
for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;
|
|
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
|
|
target[i] = obj[i];
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
var possibleConstructorReturn = function (self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}
|
|
|
|
return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
|
};
|
|
|
|
var factoryWithThrowingShims = function factoryWithThrowingShims() {
|
|
function shim(props, propName, componentName, location, propFullName, secret) {
|
|
if (secret === ReactPropTypesSecret_1) {
|
|
// It is still safe when called from React.
|
|
return;
|
|
}
|
|
invariant_1(false, 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
|
|
}
|
|
shim.isRequired = shim;
|
|
function getShim() {
|
|
return shim;
|
|
}
|
|
// Important!
|
|
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
|
|
var ReactPropTypes = {
|
|
array: shim,
|
|
bool: shim,
|
|
func: shim,
|
|
number: shim,
|
|
object: shim,
|
|
string: shim,
|
|
symbol: shim,
|
|
|
|
any: shim,
|
|
arrayOf: getShim,
|
|
element: shim,
|
|
instanceOf: getShim,
|
|
node: shim,
|
|
objectOf: getShim,
|
|
oneOf: getShim,
|
|
oneOfType: getShim,
|
|
shape: getShim,
|
|
exact: getShim
|
|
};
|
|
|
|
ReactPropTypes.checkPropTypes = emptyFunction_1;
|
|
ReactPropTypes.PropTypes = ReactPropTypes;
|
|
|
|
return ReactPropTypes;
|
|
};
|
|
|
|
var propTypes$1 = createCommonjsModule(function (module) {
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
{
|
|
// By explicitly using `prop-types` you are opting into new production behavior.
|
|
// http://fb.me/prop-types-in-prod
|
|
module.exports = factoryWithThrowingShims();
|
|
}
|
|
});
|
|
|
|
var classnames = createCommonjsModule(function (module) {
|
|
/*!
|
|
Copyright (c) 2016 Jed Watson.
|
|
Licensed under the MIT License (MIT), see
|
|
http://jedwatson.github.io/classnames
|
|
*/
|
|
/* global define */
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
var hasOwn = {}.hasOwnProperty;
|
|
|
|
function classNames() {
|
|
var classes = [];
|
|
|
|
for (var i = 0; i < arguments.length; i++) {
|
|
var arg = arguments[i];
|
|
if (!arg) continue;
|
|
|
|
var argType = typeof arg === 'undefined' ? 'undefined' : _typeof(arg);
|
|
|
|
if (argType === 'string' || argType === 'number') {
|
|
classes.push(arg);
|
|
} else if (Array.isArray(arg)) {
|
|
classes.push(classNames.apply(null, arg));
|
|
} else if (argType === 'object') {
|
|
for (var key in arg) {
|
|
if (hasOwn.call(arg, key) && arg[key]) {
|
|
classes.push(key);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return classes.join(' ');
|
|
}
|
|
|
|
if ('object' !== 'undefined' && module.exports) {
|
|
module.exports = classNames;
|
|
} else if (typeof undefined === 'function' && _typeof(undefined.amd) === 'object' && undefined.amd) {
|
|
// register as 'classnames', consistent with npm package name
|
|
undefined('classnames', [], function () {
|
|
return classNames;
|
|
});
|
|
} else {
|
|
window.classNames = classNames;
|
|
}
|
|
})();
|
|
});
|
|
|
|
/**
|
|
* lodash 3.0.8 (Custom Build) <https://lodash.com/>
|
|
* Build: `lodash modularize exports="npm" -o ./`
|
|
* Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
|
|
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
|
* Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
|
* Available under MIT license <https://lodash.com/license>
|
|
*/
|
|
|
|
/** `Object#toString` result references. */
|
|
var funcTag = '[object Function]';
|
|
var genTag = '[object GeneratorFunction]';
|
|
|
|
/** Used for built-in method references. */
|
|
var objectProto = Object.prototype;
|
|
|
|
/**
|
|
* Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
|
|
* of values.
|
|
*/
|
|
var objectToString = objectProto.toString;
|
|
|
|
/**
|
|
* Checks if `value` is classified as a `Function` object.
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @category Lang
|
|
* @param {*} value The value to check.
|
|
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
|
|
* @example
|
|
*
|
|
* _.isFunction(_);
|
|
* // => true
|
|
*
|
|
* _.isFunction(/abc/);
|
|
* // => false
|
|
*/
|
|
function isFunction(value) {
|
|
// The use of `Object#toString` avoids issues with the `typeof` operator
|
|
// in Safari 8 which returns 'object' for typed array constructors, and
|
|
// PhantomJS 1.9 which returns 'function' for `NodeList` instances.
|
|
var tag = isObject(value) ? objectToString.call(value) : '';
|
|
return tag == funcTag || tag == genTag;
|
|
}
|
|
|
|
/**
|
|
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
|
|
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @category Lang
|
|
* @param {*} value The value to check.
|
|
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
|
|
* @example
|
|
*
|
|
* _.isObject({});
|
|
* // => true
|
|
*
|
|
* _.isObject([1, 2, 3]);
|
|
* // => true
|
|
*
|
|
* _.isObject(_.noop);
|
|
* // => true
|
|
*
|
|
* _.isObject(null);
|
|
* // => false
|
|
*/
|
|
function isObject(value) {
|
|
var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
|
|
return !!value && (type == 'object' || type == 'function');
|
|
}
|
|
|
|
var lodash_isfunction = isFunction;
|
|
|
|
// https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L436-L443
|
|
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() {
|
|
return parseInt(window.getComputedStyle(document.body, null).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);
|
|
}
|
|
}
|
|
|
|
function mapToCssModules(className, cssModule) {
|
|
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 = void 0;
|
|
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 = Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
|
|
rest[_key - 3] = arguments[_key];
|
|
}
|
|
|
|
return propType.apply(undefined, [props, propName, componentName].concat(rest));
|
|
};
|
|
}
|
|
|
|
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.');
|
|
}
|
|
}
|
|
|
|
function getTarget(target) {
|
|
if (lodash_isfunction(target)) {
|
|
return target();
|
|
}
|
|
|
|
if (typeof target === 'string' && document) {
|
|
var selection = document.querySelector(target);
|
|
if (selection === null) {
|
|
selection = document.querySelector('#' + target);
|
|
}
|
|
if (selection === null) {
|
|
throw new Error('The target \'' + target + '\' could not be identified in the dom, tip: check spelling');
|
|
}
|
|
return selection;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
/* 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,
|
|
tab: 9,
|
|
up: 38,
|
|
down: 40
|
|
};
|
|
|
|
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 propTypes = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
fluid: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var Container = function Container(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
fluid = props.fluid,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'fluid', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, fluid ? 'container-fluid' : 'container'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Container.propTypes = propTypes;
|
|
Container.defaultProps = defaultProps;
|
|
|
|
var propTypes$2 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
noGutters: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$1 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var Row = function Row(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
noGutters = props.noGutters,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'noGutters', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, noGutters ? 'no-gutters' : null, 'row'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Row.propTypes = propTypes$2;
|
|
Row.defaultProps = defaultProps$1;
|
|
|
|
/**
|
|
* lodash 3.0.2 (Custom Build) <https://lodash.com/>
|
|
* Build: `lodash modern modularize exports="npm" -o ./`
|
|
* Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>
|
|
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
|
* Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
|
* Available under MIT license <https://lodash.com/license>
|
|
*/
|
|
|
|
/**
|
|
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
|
|
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @category Lang
|
|
* @param {*} value The value to check.
|
|
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
|
|
* @example
|
|
*
|
|
* _.isObject({});
|
|
* // => true
|
|
*
|
|
* _.isObject([1, 2, 3]);
|
|
* // => true
|
|
*
|
|
* _.isObject(1);
|
|
* // => false
|
|
*/
|
|
function isObject$1(value) {
|
|
// Avoid a V8 JIT bug in Chrome 19-20.
|
|
// See https://code.google.com/p/v8/issues/detail?id=2291 for more details.
|
|
var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
|
|
return !!value && (type == 'object' || type == 'function');
|
|
}
|
|
|
|
var lodash_isobject = isObject$1;
|
|
|
|
var colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
var stringOrNumberProp = propTypes$1.oneOfType([propTypes$1.number, propTypes$1.string]);
|
|
|
|
var columnProps = propTypes$1.oneOfType([propTypes$1.bool, propTypes$1.number, propTypes$1.string, propTypes$1.shape({
|
|
size: propTypes$1.oneOfType([propTypes$1.bool, propTypes$1.number, propTypes$1.string]),
|
|
push: stringOrNumberProp,
|
|
pull: stringOrNumberProp,
|
|
offset: stringOrNumberProp
|
|
})]);
|
|
|
|
var propTypes$3 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
xs: columnProps,
|
|
sm: columnProps,
|
|
md: columnProps,
|
|
lg: columnProps,
|
|
xl: columnProps,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
widths: propTypes$1.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 = objectWithoutProperties(props, ['className', 'cssModule', 'widths', 'tag']);
|
|
|
|
var colClasses = [];
|
|
|
|
widths.forEach(function (colWidth, i) {
|
|
var columnProp = props[colWidth];
|
|
|
|
if (!i && columnProp === undefined) {
|
|
columnProp = true;
|
|
}
|
|
|
|
delete attributes[colWidth];
|
|
|
|
if (!columnProp && columnProp !== '') {
|
|
return;
|
|
}
|
|
|
|
var isXs = !i;
|
|
var colClass = void 0;
|
|
|
|
if (lodash_isobject(columnProp)) {
|
|
var _classNames;
|
|
|
|
var colSizeInterfix = isXs ? '-' : '-' + colWidth + '-';
|
|
colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);
|
|
|
|
colClasses.push(mapToCssModules(classnames((_classNames = {}, defineProperty(_classNames, colClass, columnProp.size || columnProp.size === ''), defineProperty(_classNames, 'push' + colSizeInterfix + columnProp.push, columnProp.push || columnProp.push === 0), defineProperty(_classNames, 'pull' + colSizeInterfix + columnProp.pull, columnProp.pull || columnProp.pull === 0), defineProperty(_classNames, 'offset' + colSizeInterfix + columnProp.offset, columnProp.offset || columnProp.offset === 0), _classNames))), cssModule);
|
|
} else {
|
|
colClass = getColumnSizeClass(isXs, colWidth, columnProp);
|
|
colClasses.push(colClass);
|
|
}
|
|
});
|
|
|
|
var classes = mapToCssModules(classnames(className, colClasses), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Col.propTypes = propTypes$3;
|
|
Col.defaultProps = defaultProps$2;
|
|
|
|
var propTypes$4 = {
|
|
light: propTypes$1.bool,
|
|
dark: propTypes$1.bool,
|
|
inverse: deprecated(propTypes$1.bool, 'Please use the prop "dark"'),
|
|
full: propTypes$1.bool,
|
|
fixed: propTypes$1.string,
|
|
sticky: propTypes$1.string,
|
|
color: propTypes$1.string,
|
|
role: propTypes$1.string,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
toggleable: deprecated(propTypes$1.oneOfType([propTypes$1.bool, propTypes$1.string]), 'Please use the prop "expand"'),
|
|
expand: propTypes$1.oneOfType([propTypes$1.bool, propTypes$1.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;
|
|
};
|
|
|
|
// To better maintain backwards compatibility while toggleable is deprecated.
|
|
// We must map breakpoints to the next breakpoint so that toggleable and expand do the same things at the same breakpoint.
|
|
var toggleableToExpand = {
|
|
xs: 'sm',
|
|
sm: 'md',
|
|
md: 'lg',
|
|
lg: 'xl'
|
|
};
|
|
|
|
var getToggleableClass = function getToggleableClass(toggleable) {
|
|
if (toggleable === undefined || toggleable === 'xl') {
|
|
return false;
|
|
} else if (toggleable === false) {
|
|
return 'navbar-expand';
|
|
}
|
|
|
|
return 'navbar-expand-' + (toggleable === true ? 'sm' : toggleableToExpand[toggleable] || toggleable);
|
|
};
|
|
|
|
var Navbar = function Navbar(props) {
|
|
var _classNames;
|
|
|
|
var toggleable = props.toggleable,
|
|
expand = props.expand,
|
|
className = props.className,
|
|
cssModule = props.cssModule,
|
|
light = props.light,
|
|
dark = props.dark,
|
|
inverse = props.inverse,
|
|
fixed = props.fixed,
|
|
sticky = props.sticky,
|
|
color = props.color,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['toggleable', 'expand', 'className', 'cssModule', 'light', 'dark', 'inverse', 'fixed', 'sticky', 'color', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'navbar', getExpandClass(expand) || getToggleableClass(toggleable), (_classNames = {
|
|
'navbar-light': light,
|
|
'navbar-dark': inverse || dark
|
|
}, defineProperty(_classNames, 'bg-' + color, color), defineProperty(_classNames, 'fixed-' + fixed, fixed), defineProperty(_classNames, 'sticky-' + sticky, sticky), _classNames)), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Navbar.propTypes = propTypes$4;
|
|
Navbar.defaultProps = defaultProps$3;
|
|
|
|
var propTypes$5 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$4 = {
|
|
tag: 'a'
|
|
};
|
|
|
|
var NavbarBrand = function NavbarBrand(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'navbar-brand'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
NavbarBrand.propTypes = propTypes$5;
|
|
NavbarBrand.defaultProps = defaultProps$4;
|
|
|
|
var propTypes$6 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
type: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
children: propTypes$1.node
|
|
};
|
|
|
|
var defaultProps$5 = {
|
|
tag: 'button',
|
|
type: 'button'
|
|
};
|
|
|
|
var NavbarToggler = function NavbarToggler(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
children = props.children,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'children', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'navbar-toggler'), cssModule);
|
|
|
|
return React__default.createElement(
|
|
Tag,
|
|
_extends({}, attributes, { className: classes }),
|
|
children || React__default.createElement('span', { className: mapToCssModules('navbar-toggler-icon', cssModule) })
|
|
);
|
|
};
|
|
|
|
NavbarToggler.propTypes = propTypes$6;
|
|
NavbarToggler.defaultProps = defaultProps$5;
|
|
|
|
var propTypes$7 = {
|
|
tabs: propTypes$1.bool,
|
|
pills: propTypes$1.bool,
|
|
vertical: propTypes$1.oneOfType([propTypes$1.bool, propTypes$1.string]),
|
|
horizontal: propTypes$1.string,
|
|
justified: propTypes$1.bool,
|
|
fill: propTypes$1.bool,
|
|
navbar: propTypes$1.bool,
|
|
card: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$6 = {
|
|
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 = objectWithoutProperties(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 React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Nav.propTypes = propTypes$7;
|
|
Nav.defaultProps = defaultProps$6;
|
|
|
|
var propTypes$8 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
active: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$7 = {
|
|
tag: 'li'
|
|
};
|
|
|
|
var NavItem = function NavItem(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
active = props.active,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'active', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'nav-item', active ? 'active' : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
NavItem.propTypes = propTypes$8;
|
|
NavItem.defaultProps = defaultProps$7;
|
|
|
|
var Manager_1 = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _createClass = function () {
|
|
function defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
|
|
};
|
|
}();
|
|
|
|
var _react2 = _interopRequireDefault(React__default);
|
|
|
|
var _propTypes2 = _interopRequireDefault(propTypes$1);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
function _objectWithoutProperties(obj, keys) {
|
|
var target = {};for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
|
|
}return target;
|
|
}
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _possibleConstructorReturn(self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}return call && ((typeof call === 'undefined' ? 'undefined' : _typeof(call)) === "object" || typeof call === "function") ? call : self;
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof(superClass)));
|
|
}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
}
|
|
|
|
var Manager = function (_Component) {
|
|
_inherits(Manager, _Component);
|
|
|
|
function Manager() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, Manager);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Manager.__proto__ || Object.getPrototypeOf(Manager)).call.apply(_ref, [this].concat(args))), _this), _this._setTargetNode = function (node) {
|
|
_this._targetNode = node;
|
|
}, _this._getTargetNode = function () {
|
|
return _this._targetNode;
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
_createClass(Manager, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return {
|
|
popperManager: {
|
|
setTargetNode: this._setTargetNode,
|
|
getTargetNode: this._getTargetNode
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
tag = _props.tag,
|
|
children = _props.children,
|
|
restProps = _objectWithoutProperties(_props, ['tag', 'children']);
|
|
|
|
if (tag !== false) {
|
|
return (0, React__default.createElement)(tag, restProps, children);
|
|
} else {
|
|
return children;
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return Manager;
|
|
}(React__default.Component);
|
|
|
|
Manager.childContextTypes = {
|
|
popperManager: _propTypes2.default.object.isRequired
|
|
};
|
|
Manager.propTypes = {
|
|
tag: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool])
|
|
};
|
|
Manager.defaultProps = {
|
|
tag: 'div'
|
|
};
|
|
exports.default = Manager;
|
|
});
|
|
|
|
unwrapExports(Manager_1);
|
|
|
|
var Target_1 = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _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;
|
|
};
|
|
|
|
var _react2 = _interopRequireDefault(React__default);
|
|
|
|
var _propTypes2 = _interopRequireDefault(propTypes$1);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
function _objectWithoutProperties(obj, keys) {
|
|
var target = {};for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
|
|
}return target;
|
|
}
|
|
|
|
var Target = function Target(props, context) {
|
|
var _props$component = props.component,
|
|
component = _props$component === undefined ? 'div' : _props$component,
|
|
innerRef = props.innerRef,
|
|
children = props.children,
|
|
restProps = _objectWithoutProperties(props, ['component', 'innerRef', 'children']);
|
|
|
|
var popperManager = context.popperManager;
|
|
|
|
var targetRef = function targetRef(node) {
|
|
popperManager.setTargetNode(node);
|
|
if (typeof innerRef === 'function') {
|
|
innerRef(node);
|
|
}
|
|
};
|
|
|
|
if (typeof children === 'function') {
|
|
var targetProps = { ref: targetRef };
|
|
return children({ targetProps: targetProps, restProps: restProps });
|
|
}
|
|
|
|
var componentProps = _extends({}, restProps);
|
|
|
|
if (typeof component === 'string') {
|
|
componentProps.ref = targetRef;
|
|
} else {
|
|
componentProps.innerRef = targetRef;
|
|
}
|
|
|
|
return (0, React__default.createElement)(component, componentProps, children);
|
|
};
|
|
|
|
Target.contextTypes = {
|
|
popperManager: _propTypes2.default.object.isRequired
|
|
};
|
|
|
|
Target.propTypes = {
|
|
component: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
|
|
innerRef: _propTypes2.default.func,
|
|
children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
|
|
};
|
|
|
|
exports.default = Target;
|
|
});
|
|
|
|
unwrapExports(Target_1);
|
|
|
|
/**!
|
|
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
|
* @version 1.12.6
|
|
* @license
|
|
* Copyright (c) 2016 Federico Zivolo and contributors
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*/
|
|
var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
|
|
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
|
var timeoutDuration = 0;
|
|
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
|
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
|
|
timeoutDuration = 1;
|
|
break;
|
|
}
|
|
}
|
|
|
|
function microtaskDebounce(fn) {
|
|
var called = false;
|
|
return function () {
|
|
if (called) {
|
|
return;
|
|
}
|
|
called = true;
|
|
Promise.resolve().then(function () {
|
|
called = false;
|
|
fn();
|
|
});
|
|
};
|
|
}
|
|
|
|
function taskDebounce(fn) {
|
|
var scheduled = false;
|
|
return function () {
|
|
if (!scheduled) {
|
|
scheduled = true;
|
|
setTimeout(function () {
|
|
scheduled = false;
|
|
fn();
|
|
}, timeoutDuration);
|
|
}
|
|
};
|
|
}
|
|
|
|
var supportsMicroTasks = isBrowser && window.Promise;
|
|
|
|
/**
|
|
* Create a debounced version of a method, that's asynchronously deferred
|
|
* but called in the minimum time possible.
|
|
*
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Function} fn
|
|
* @returns {Function}
|
|
*/
|
|
var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
|
|
|
|
/**
|
|
* Check if the given variable is a function
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Any} functionToCheck - variable to check
|
|
* @returns {Boolean} answer to: is a function?
|
|
*/
|
|
function isFunction$2(functionToCheck) {
|
|
var getType = {};
|
|
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
|
|
}
|
|
|
|
/**
|
|
* Get CSS computed property of the given element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Eement} element
|
|
* @argument {String} property
|
|
*/
|
|
function getStyleComputedProperty(element, property) {
|
|
if (element.nodeType !== 1) {
|
|
return [];
|
|
}
|
|
// NOTE: 1 DOM access here
|
|
var css = window.getComputedStyle(element, null);
|
|
return property ? css[property] : css;
|
|
}
|
|
|
|
/**
|
|
* Returns the parentNode or the host of the element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element
|
|
* @returns {Element} parent
|
|
*/
|
|
function getParentNode(element) {
|
|
if (element.nodeName === 'HTML') {
|
|
return element;
|
|
}
|
|
return element.parentNode || element.host;
|
|
}
|
|
|
|
/**
|
|
* Returns the scrolling parent of the given element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element
|
|
* @returns {Element} scroll parent
|
|
*/
|
|
function getScrollParent(element) {
|
|
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
|
|
if (!element) {
|
|
return window.document.body;
|
|
}
|
|
|
|
switch (element.nodeName) {
|
|
case 'HTML':
|
|
case 'BODY':
|
|
return element.ownerDocument.body;
|
|
case '#document':
|
|
return element.body;
|
|
}
|
|
|
|
// Firefox want us to check `-x` and `-y` variations as well
|
|
|
|
var _getStyleComputedProp = getStyleComputedProperty(element),
|
|
overflow = _getStyleComputedProp.overflow,
|
|
overflowX = _getStyleComputedProp.overflowX,
|
|
overflowY = _getStyleComputedProp.overflowY;
|
|
|
|
if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) {
|
|
return element;
|
|
}
|
|
|
|
return getScrollParent(getParentNode(element));
|
|
}
|
|
|
|
/**
|
|
* Returns the offset parent of the given element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element
|
|
* @returns {Element} offset parent
|
|
*/
|
|
function getOffsetParent(element) {
|
|
// NOTE: 1 DOM access here
|
|
var offsetParent = element && element.offsetParent;
|
|
var nodeName = offsetParent && offsetParent.nodeName;
|
|
|
|
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
|
if (element) {
|
|
return element.ownerDocument.documentElement;
|
|
}
|
|
|
|
return window.document.documentElement;
|
|
}
|
|
|
|
// .offsetParent will return the closest TD or TABLE in case
|
|
// no offsetParent is present, I hate this job...
|
|
if (['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
|
|
return getOffsetParent(offsetParent);
|
|
}
|
|
|
|
return offsetParent;
|
|
}
|
|
|
|
function isOffsetContainer(element) {
|
|
var nodeName = element.nodeName;
|
|
|
|
if (nodeName === 'BODY') {
|
|
return false;
|
|
}
|
|
return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
|
|
}
|
|
|
|
/**
|
|
* Finds the root node (document, shadowDOM root) of the given element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} node
|
|
* @returns {Element} root node
|
|
*/
|
|
function getRoot(node) {
|
|
if (node.parentNode !== null) {
|
|
return getRoot(node.parentNode);
|
|
}
|
|
|
|
return node;
|
|
}
|
|
|
|
/**
|
|
* Finds the offset parent common to the two provided nodes
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element1
|
|
* @argument {Element} element2
|
|
* @returns {Element} common offset parent
|
|
*/
|
|
function findCommonOffsetParent(element1, element2) {
|
|
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
|
|
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
|
|
return window.document.documentElement;
|
|
}
|
|
|
|
// Here we make sure to give as "start" the element that comes first in the DOM
|
|
var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
|
|
var start = order ? element1 : element2;
|
|
var end = order ? element2 : element1;
|
|
|
|
// Get common ancestor container
|
|
var range = document.createRange();
|
|
range.setStart(start, 0);
|
|
range.setEnd(end, 0);
|
|
var commonAncestorContainer = range.commonAncestorContainer;
|
|
|
|
// Both nodes are inside #document
|
|
|
|
if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
|
|
if (isOffsetContainer(commonAncestorContainer)) {
|
|
return commonAncestorContainer;
|
|
}
|
|
|
|
return getOffsetParent(commonAncestorContainer);
|
|
}
|
|
|
|
// one of the nodes is inside shadowDOM, find which one
|
|
var element1root = getRoot(element1);
|
|
if (element1root.host) {
|
|
return findCommonOffsetParent(element1root.host, element2);
|
|
} else {
|
|
return findCommonOffsetParent(element1, getRoot(element2).host);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets the scroll value of the given element in the given side (top and left)
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element
|
|
* @argument {String} side `top` or `left`
|
|
* @returns {number} amount of scrolled pixels
|
|
*/
|
|
function getScroll(element) {
|
|
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
|
|
|
|
var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
|
|
var nodeName = element.nodeName;
|
|
|
|
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
|
var html = element.ownerDocument.documentElement;
|
|
var scrollingElement = element.ownerDocument.scrollingElement || html;
|
|
return scrollingElement[upperSide];
|
|
}
|
|
|
|
return element[upperSide];
|
|
}
|
|
|
|
/*
|
|
* Sum or subtract the element scroll values (left and top) from a given rect object
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {Object} rect - Rect object you want to change
|
|
* @param {HTMLElement} element - The element from the function reads the scroll values
|
|
* @param {Boolean} subtract - set to true if you want to subtract the scroll values
|
|
* @return {Object} rect - The modifier rect object
|
|
*/
|
|
function includeScroll(rect, element) {
|
|
var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
|
|
var scrollTop = getScroll(element, 'top');
|
|
var scrollLeft = getScroll(element, 'left');
|
|
var modifier = subtract ? -1 : 1;
|
|
rect.top += scrollTop * modifier;
|
|
rect.bottom += scrollTop * modifier;
|
|
rect.left += scrollLeft * modifier;
|
|
rect.right += scrollLeft * modifier;
|
|
return rect;
|
|
}
|
|
|
|
/*
|
|
* Helper to detect borders of a given element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {CSSStyleDeclaration} styles
|
|
* Result of `getStyleComputedProperty` on the given element
|
|
* @param {String} axis - `x` or `y`
|
|
* @return {number} borders - The borders size of the given axis
|
|
*/
|
|
|
|
function getBordersSize(styles, axis) {
|
|
var sideA = axis === 'x' ? 'Left' : 'Top';
|
|
var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
|
|
|
return +styles['border' + sideA + 'Width'].split('px')[0] + +styles['border' + sideB + 'Width'].split('px')[0];
|
|
}
|
|
|
|
/**
|
|
* Tells if you are running Internet Explorer 10
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @returns {Boolean} isIE10
|
|
*/
|
|
var isIE10 = undefined;
|
|
|
|
var isIE10$1 = function isIE10$1() {
|
|
if (isIE10 === undefined) {
|
|
isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1;
|
|
}
|
|
return isIE10;
|
|
};
|
|
|
|
function getSize(axis, body, html, computedStyle) {
|
|
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE10$1() ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0);
|
|
}
|
|
|
|
function getWindowSizes() {
|
|
var body = window.document.body;
|
|
var html = window.document.documentElement;
|
|
var computedStyle = isIE10$1() && window.getComputedStyle(html);
|
|
|
|
return {
|
|
height: getSize('Height', body, html, computedStyle),
|
|
width: getSize('Width', body, html, computedStyle)
|
|
};
|
|
}
|
|
|
|
var classCallCheck$1 = function classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
};
|
|
|
|
var createClass$1 = function () {
|
|
function defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) defineProperties(Constructor, staticProps);
|
|
return Constructor;
|
|
};
|
|
}();
|
|
|
|
var defineProperty$1 = function defineProperty(obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, {
|
|
value: value,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
});
|
|
} else {
|
|
obj[key] = value;
|
|
}
|
|
|
|
return obj;
|
|
};
|
|
|
|
var _extends$1 = 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;
|
|
};
|
|
|
|
/**
|
|
* Given element offsets, generate an output similar to getBoundingClientRect
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Object} offsets
|
|
* @returns {Object} ClientRect like output
|
|
*/
|
|
function getClientRect(offsets) {
|
|
return _extends$1({}, offsets, {
|
|
right: offsets.left + offsets.width,
|
|
bottom: offsets.top + offsets.height
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get bounding client rect of given element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {HTMLElement} element
|
|
* @return {Object} client rect
|
|
*/
|
|
function getBoundingClientRect(element) {
|
|
var rect = {};
|
|
|
|
// IE10 10 FIX: Please, don't ask, the element isn't
|
|
// considered in DOM in some circumstances...
|
|
// This isn't reproducible in IE10 compatibility mode of IE11
|
|
if (isIE10$1()) {
|
|
try {
|
|
rect = element.getBoundingClientRect();
|
|
var scrollTop = getScroll(element, 'top');
|
|
var scrollLeft = getScroll(element, 'left');
|
|
rect.top += scrollTop;
|
|
rect.left += scrollLeft;
|
|
rect.bottom += scrollTop;
|
|
rect.right += scrollLeft;
|
|
} catch (err) {}
|
|
} else {
|
|
rect = element.getBoundingClientRect();
|
|
}
|
|
|
|
var result = {
|
|
left: rect.left,
|
|
top: rect.top,
|
|
width: rect.right - rect.left,
|
|
height: rect.bottom - rect.top
|
|
};
|
|
|
|
// subtract scrollbar size from sizes
|
|
var sizes = element.nodeName === 'HTML' ? getWindowSizes() : {};
|
|
var width = sizes.width || element.clientWidth || result.right - result.left;
|
|
var height = sizes.height || element.clientHeight || result.bottom - result.top;
|
|
|
|
var horizScrollbar = element.offsetWidth - width;
|
|
var vertScrollbar = element.offsetHeight - height;
|
|
|
|
// if an hypothetical scrollbar is detected, we must be sure it's not a `border`
|
|
// we make this check conditional for performance reasons
|
|
if (horizScrollbar || vertScrollbar) {
|
|
var styles = getStyleComputedProperty(element);
|
|
horizScrollbar -= getBordersSize(styles, 'x');
|
|
vertScrollbar -= getBordersSize(styles, 'y');
|
|
|
|
result.width -= horizScrollbar;
|
|
result.height -= vertScrollbar;
|
|
}
|
|
|
|
return getClientRect(result);
|
|
}
|
|
|
|
function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
|
var isIE10 = isIE10$1();
|
|
var isHTML = parent.nodeName === 'HTML';
|
|
var childrenRect = getBoundingClientRect(children);
|
|
var parentRect = getBoundingClientRect(parent);
|
|
var scrollParent = getScrollParent(children);
|
|
|
|
var styles = getStyleComputedProperty(parent);
|
|
var borderTopWidth = +styles.borderTopWidth.split('px')[0];
|
|
var borderLeftWidth = +styles.borderLeftWidth.split('px')[0];
|
|
|
|
var offsets = getClientRect({
|
|
top: childrenRect.top - parentRect.top - borderTopWidth,
|
|
left: childrenRect.left - parentRect.left - borderLeftWidth,
|
|
width: childrenRect.width,
|
|
height: childrenRect.height
|
|
});
|
|
offsets.marginTop = 0;
|
|
offsets.marginLeft = 0;
|
|
|
|
// Subtract margins of documentElement in case it's being used as parent
|
|
// we do this only on HTML because it's the only element that behaves
|
|
// differently when margins are applied to it. The margins are included in
|
|
// the box of the documentElement, in the other cases not.
|
|
if (!isIE10 && isHTML) {
|
|
var marginTop = +styles.marginTop.split('px')[0];
|
|
var marginLeft = +styles.marginLeft.split('px')[0];
|
|
|
|
offsets.top -= borderTopWidth - marginTop;
|
|
offsets.bottom -= borderTopWidth - marginTop;
|
|
offsets.left -= borderLeftWidth - marginLeft;
|
|
offsets.right -= borderLeftWidth - marginLeft;
|
|
|
|
// Attach marginTop and marginLeft because in some circumstances we may need them
|
|
offsets.marginTop = marginTop;
|
|
offsets.marginLeft = marginLeft;
|
|
}
|
|
|
|
if (isIE10 ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
|
|
offsets = includeScroll(offsets, parent);
|
|
}
|
|
|
|
return offsets;
|
|
}
|
|
|
|
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
|
var html = element.ownerDocument.documentElement;
|
|
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
|
var width = Math.max(html.clientWidth, window.innerWidth || 0);
|
|
var height = Math.max(html.clientHeight, window.innerHeight || 0);
|
|
|
|
var scrollTop = getScroll(html);
|
|
var scrollLeft = getScroll(html, 'left');
|
|
|
|
var offset = {
|
|
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
|
|
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
|
|
width: width,
|
|
height: height
|
|
};
|
|
|
|
return getClientRect(offset);
|
|
}
|
|
|
|
/**
|
|
* Check if the given element is fixed or is inside a fixed parent
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element
|
|
* @argument {Element} customContainer
|
|
* @returns {Boolean} answer to "isFixed?"
|
|
*/
|
|
function isFixed(element) {
|
|
var nodeName = element.nodeName;
|
|
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
|
return false;
|
|
}
|
|
if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
|
return true;
|
|
}
|
|
return isFixed(getParentNode(element));
|
|
}
|
|
|
|
/**
|
|
* Computed the boundaries limits and return them
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {HTMLElement} popper
|
|
* @param {HTMLElement} reference
|
|
* @param {number} padding
|
|
* @param {HTMLElement} boundariesElement - Element used to define the boundaries
|
|
* @returns {Object} Coordinates of the boundaries
|
|
*/
|
|
function getBoundaries(popper, reference, padding, boundariesElement) {
|
|
// NOTE: 1 DOM access here
|
|
var boundaries = { top: 0, left: 0 };
|
|
var offsetParent = findCommonOffsetParent(popper, reference);
|
|
|
|
// Handle viewport case
|
|
if (boundariesElement === 'viewport') {
|
|
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent);
|
|
} else {
|
|
// Handle other cases based on DOM element used as boundaries
|
|
var boundariesNode = void 0;
|
|
if (boundariesElement === 'scrollParent') {
|
|
boundariesNode = getScrollParent(getParentNode(popper));
|
|
if (boundariesNode.nodeName === 'BODY') {
|
|
boundariesNode = popper.ownerDocument.documentElement;
|
|
}
|
|
} else if (boundariesElement === 'window') {
|
|
boundariesNode = popper.ownerDocument.documentElement;
|
|
} else {
|
|
boundariesNode = boundariesElement;
|
|
}
|
|
|
|
var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent);
|
|
|
|
// In case of HTML, we need a different computation
|
|
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
|
var _getWindowSizes = getWindowSizes(),
|
|
height = _getWindowSizes.height,
|
|
width = _getWindowSizes.width;
|
|
|
|
boundaries.top += offsets.top - offsets.marginTop;
|
|
boundaries.bottom = height + offsets.top;
|
|
boundaries.left += offsets.left - offsets.marginLeft;
|
|
boundaries.right = width + offsets.left;
|
|
} else {
|
|
// for all the other DOM elements, this one is good
|
|
boundaries = offsets;
|
|
}
|
|
}
|
|
|
|
// Add paddings
|
|
boundaries.left += padding;
|
|
boundaries.top += padding;
|
|
boundaries.right -= padding;
|
|
boundaries.bottom -= padding;
|
|
|
|
return boundaries;
|
|
}
|
|
|
|
function getArea(_ref) {
|
|
var width = _ref.width,
|
|
height = _ref.height;
|
|
|
|
return width * height;
|
|
}
|
|
|
|
/**
|
|
* Utility used to transform the `auto` placement to the placement with more
|
|
* available space.
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Object} data - The data object generated by update method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
|
|
var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
|
|
|
|
if (placement.indexOf('auto') === -1) {
|
|
return placement;
|
|
}
|
|
|
|
var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
|
|
|
|
var rects = {
|
|
top: {
|
|
width: boundaries.width,
|
|
height: refRect.top - boundaries.top
|
|
},
|
|
right: {
|
|
width: boundaries.right - refRect.right,
|
|
height: boundaries.height
|
|
},
|
|
bottom: {
|
|
width: boundaries.width,
|
|
height: boundaries.bottom - refRect.bottom
|
|
},
|
|
left: {
|
|
width: refRect.left - boundaries.left,
|
|
height: boundaries.height
|
|
}
|
|
};
|
|
|
|
var sortedAreas = Object.keys(rects).map(function (key) {
|
|
return _extends$1({
|
|
key: key
|
|
}, rects[key], {
|
|
area: getArea(rects[key])
|
|
});
|
|
}).sort(function (a, b) {
|
|
return b.area - a.area;
|
|
});
|
|
|
|
var filteredAreas = sortedAreas.filter(function (_ref2) {
|
|
var width = _ref2.width,
|
|
height = _ref2.height;
|
|
return width >= popper.clientWidth && height >= popper.clientHeight;
|
|
});
|
|
|
|
var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
|
|
|
|
var variation = placement.split('-')[1];
|
|
|
|
return computedPlacement + (variation ? '-' + variation : '');
|
|
}
|
|
|
|
/**
|
|
* Get offsets to the reference element
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {Object} state
|
|
* @param {Element} popper - the popper element
|
|
* @param {Element} reference - the reference element (the popper will be relative to this)
|
|
* @returns {Object} An object containing the offsets which will be applied to the popper
|
|
*/
|
|
function getReferenceOffsets(state, popper, reference) {
|
|
var commonOffsetParent = findCommonOffsetParent(popper, reference);
|
|
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent);
|
|
}
|
|
|
|
/**
|
|
* Get the outer sizes of the given element (offset size + margins)
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element
|
|
* @returns {Object} object containing width and height properties
|
|
*/
|
|
function getOuterSizes(element) {
|
|
var styles = window.getComputedStyle(element);
|
|
var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
|
|
var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
|
|
var result = {
|
|
width: element.offsetWidth + y,
|
|
height: element.offsetHeight + x
|
|
};
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* Get the opposite placement of the given one
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {String} placement
|
|
* @returns {String} flipped placement
|
|
*/
|
|
function getOppositePlacement(placement) {
|
|
var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
|
return placement.replace(/left|right|bottom|top/g, function (matched) {
|
|
return hash[matched];
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get offsets to the popper
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {Object} position - CSS position the Popper will get applied
|
|
* @param {HTMLElement} popper - the popper element
|
|
* @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
|
|
* @param {String} placement - one of the valid placement options
|
|
* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
|
|
*/
|
|
function getPopperOffsets(popper, referenceOffsets, placement) {
|
|
placement = placement.split('-')[0];
|
|
|
|
// Get popper node sizes
|
|
var popperRect = getOuterSizes(popper);
|
|
|
|
// Add position, width and height to our offsets object
|
|
var popperOffsets = {
|
|
width: popperRect.width,
|
|
height: popperRect.height
|
|
};
|
|
|
|
// depending by the popper placement we have to compute its offsets slightly differently
|
|
var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
|
|
var mainSide = isHoriz ? 'top' : 'left';
|
|
var secondarySide = isHoriz ? 'left' : 'top';
|
|
var measurement = isHoriz ? 'height' : 'width';
|
|
var secondaryMeasurement = !isHoriz ? 'height' : 'width';
|
|
|
|
popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
|
|
if (placement === secondarySide) {
|
|
popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
|
|
} else {
|
|
popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
|
|
}
|
|
|
|
return popperOffsets;
|
|
}
|
|
|
|
/**
|
|
* Mimics the `find` method of Array
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Array} arr
|
|
* @argument prop
|
|
* @argument value
|
|
* @returns index or -1
|
|
*/
|
|
function find(arr, check) {
|
|
// use native find if supported
|
|
if (Array.prototype.find) {
|
|
return arr.find(check);
|
|
}
|
|
|
|
// use `filter` to obtain the same behavior of `find`
|
|
return arr.filter(check)[0];
|
|
}
|
|
|
|
/**
|
|
* Return the index of the matching object
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Array} arr
|
|
* @argument prop
|
|
* @argument value
|
|
* @returns index or -1
|
|
*/
|
|
function findIndex(arr, prop, value) {
|
|
// use native findIndex if supported
|
|
if (Array.prototype.findIndex) {
|
|
return arr.findIndex(function (cur) {
|
|
return cur[prop] === value;
|
|
});
|
|
}
|
|
|
|
// use `find` + `indexOf` if `findIndex` isn't supported
|
|
var match = find(arr, function (obj) {
|
|
return obj[prop] === value;
|
|
});
|
|
return arr.indexOf(match);
|
|
}
|
|
|
|
/**
|
|
* Loop trough the list of modifiers and run them in order,
|
|
* each of them will then edit the data object.
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {dataObject} data
|
|
* @param {Array} modifiers
|
|
* @param {String} ends - Optional modifier name used as stopper
|
|
* @returns {dataObject}
|
|
*/
|
|
function runModifiers(modifiers, data, ends) {
|
|
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
|
|
|
modifiersToRun.forEach(function (modifier) {
|
|
if (modifier['function']) {
|
|
// eslint-disable-line dot-notation
|
|
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
|
}
|
|
var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
|
|
if (modifier.enabled && isFunction$2(fn)) {
|
|
// Add properties to offsets to make them a complete clientRect object
|
|
// we do this before each modifier to make sure the previous one doesn't
|
|
// mess with these values
|
|
data.offsets.popper = getClientRect(data.offsets.popper);
|
|
data.offsets.reference = getClientRect(data.offsets.reference);
|
|
|
|
data = fn(data, modifier);
|
|
}
|
|
});
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Updates the position of the popper, computing the new offsets and applying
|
|
* the new style.<br />
|
|
* Prefer `scheduleUpdate` over `update` because of performance reasons.
|
|
* @method
|
|
* @memberof Popper
|
|
*/
|
|
function update() {
|
|
// if popper is destroyed, don't perform any further update
|
|
if (this.state.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
var data = {
|
|
instance: this,
|
|
styles: {},
|
|
arrowStyles: {},
|
|
attributes: {},
|
|
flipped: false,
|
|
offsets: {}
|
|
};
|
|
|
|
// compute reference element offsets
|
|
data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference);
|
|
|
|
// compute auto placement, store placement inside the data object,
|
|
// modifiers will be able to edit `placement` if needed
|
|
// and refer to originalPlacement to know the original value
|
|
data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);
|
|
|
|
// store the computed placement inside `originalPlacement`
|
|
data.originalPlacement = data.placement;
|
|
|
|
// compute the popper offsets
|
|
data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
|
|
data.offsets.popper.position = 'absolute';
|
|
|
|
// run the modifiers
|
|
data = runModifiers(this.modifiers, data);
|
|
|
|
// the first `update` will call `onCreate` callback
|
|
// the other ones will call `onUpdate` callback
|
|
if (!this.state.isCreated) {
|
|
this.state.isCreated = true;
|
|
this.options.onCreate(data);
|
|
} else {
|
|
this.options.onUpdate(data);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Helper used to know if the given modifier is enabled.
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @returns {Boolean}
|
|
*/
|
|
function isModifierEnabled(modifiers, modifierName) {
|
|
return modifiers.some(function (_ref) {
|
|
var name = _ref.name,
|
|
enabled = _ref.enabled;
|
|
return enabled && name === modifierName;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get the prefixed supported property name
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {String} property (camelCase)
|
|
* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
|
|
*/
|
|
function getSupportedPropertyName(property) {
|
|
var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
|
|
var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
|
|
|
|
for (var i = 0; i < prefixes.length - 1; i++) {
|
|
var prefix = prefixes[i];
|
|
var toCheck = prefix ? '' + prefix + upperProp : property;
|
|
if (typeof window.document.body.style[toCheck] !== 'undefined') {
|
|
return toCheck;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Destroy the popper
|
|
* @method
|
|
* @memberof Popper
|
|
*/
|
|
function destroy() {
|
|
this.state.isDestroyed = true;
|
|
|
|
// touch DOM only if `applyStyle` modifier is enabled
|
|
if (isModifierEnabled(this.modifiers, 'applyStyle')) {
|
|
this.popper.removeAttribute('x-placement');
|
|
this.popper.style.left = '';
|
|
this.popper.style.position = '';
|
|
this.popper.style.top = '';
|
|
this.popper.style[getSupportedPropertyName('transform')] = '';
|
|
}
|
|
|
|
this.disableEventListeners();
|
|
|
|
// remove the popper if user explicity asked for the deletion on destroy
|
|
// do not use `remove` because IE11 doesn't support it
|
|
if (this.options.removeOnDestroy) {
|
|
this.popper.parentNode.removeChild(this.popper);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Get the window associated with the element
|
|
* @argument {Element} element
|
|
* @returns {Window}
|
|
*/
|
|
function getWindow(element) {
|
|
var ownerDocument = element.ownerDocument;
|
|
return ownerDocument ? ownerDocument.defaultView : window;
|
|
}
|
|
|
|
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
|
var isBody = scrollParent.nodeName === 'BODY';
|
|
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
|
target.addEventListener(event, callback, { passive: true });
|
|
|
|
if (!isBody) {
|
|
attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
|
|
}
|
|
scrollParents.push(target);
|
|
}
|
|
|
|
/**
|
|
* Setup needed event listeners used to update the popper position
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @private
|
|
*/
|
|
function setupEventListeners(reference, options, state, updateBound) {
|
|
// Resize event listener on window
|
|
state.updateBound = updateBound;
|
|
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
|
|
|
// Scroll event listener on scroll parents
|
|
var scrollElement = getScrollParent(reference);
|
|
attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
|
|
state.scrollElement = scrollElement;
|
|
state.eventsEnabled = true;
|
|
|
|
return state;
|
|
}
|
|
|
|
/**
|
|
* It will add resize/scroll events and start recalculating
|
|
* position of the popper element when they are triggered.
|
|
* @method
|
|
* @memberof Popper
|
|
*/
|
|
function enableEventListeners() {
|
|
if (!this.state.eventsEnabled) {
|
|
this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove event listeners used to update the popper position
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @private
|
|
*/
|
|
function removeEventListeners(reference, state) {
|
|
// Remove resize event listener on window
|
|
getWindow(reference).removeEventListener('resize', state.updateBound);
|
|
|
|
// Remove scroll event listener on scroll parents
|
|
state.scrollParents.forEach(function (target) {
|
|
target.removeEventListener('scroll', state.updateBound);
|
|
});
|
|
|
|
// Reset state
|
|
state.updateBound = null;
|
|
state.scrollParents = [];
|
|
state.scrollElement = null;
|
|
state.eventsEnabled = false;
|
|
return state;
|
|
}
|
|
|
|
/**
|
|
* It will remove resize/scroll events and won't recalculate popper position
|
|
* when they are triggered. It also won't trigger onUpdate callback anymore,
|
|
* unless you call `update` method manually.
|
|
* @method
|
|
* @memberof Popper
|
|
*/
|
|
function disableEventListeners() {
|
|
if (this.state.eventsEnabled) {
|
|
window.cancelAnimationFrame(this.scheduleUpdate);
|
|
this.state = removeEventListeners(this.reference, this.state);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Tells if a given input is a number
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {*} input to check
|
|
* @return {Boolean}
|
|
*/
|
|
function isNumeric(n) {
|
|
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
|
}
|
|
|
|
/**
|
|
* Set the style to the given popper
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element - Element to apply the style to
|
|
* @argument {Object} styles
|
|
* Object with a list of properties and values which will be applied to the element
|
|
*/
|
|
function setStyles(element, styles) {
|
|
Object.keys(styles).forEach(function (prop) {
|
|
var unit = '';
|
|
// add unit if the value is numeric and is one of the following
|
|
if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
|
|
unit = 'px';
|
|
}
|
|
element.style[prop] = styles[prop] + unit;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set the attributes to the given popper
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {Element} element - Element to apply the attributes to
|
|
* @argument {Object} styles
|
|
* Object with a list of properties and values which will be applied to the element
|
|
*/
|
|
function setAttributes(element, attributes) {
|
|
Object.keys(attributes).forEach(function (prop) {
|
|
var value = attributes[prop];
|
|
if (value !== false) {
|
|
element.setAttribute(prop, attributes[prop]);
|
|
} else {
|
|
element.removeAttribute(prop);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by `update` method
|
|
* @argument {Object} data.styles - List of style properties - values to apply to popper element
|
|
* @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The same data object
|
|
*/
|
|
function applyStyle(data) {
|
|
// any property present in `data.styles` will be applied to the popper,
|
|
// in this way we can make the 3rd party modifiers add custom styles to it
|
|
// Be aware, modifiers could override the properties defined in the previous
|
|
// lines of this modifier!
|
|
setStyles(data.instance.popper, data.styles);
|
|
|
|
// any property present in `data.attributes` will be applied to the popper,
|
|
// they will be set as HTML attributes of the element
|
|
setAttributes(data.instance.popper, data.attributes);
|
|
|
|
// if arrowElement is defined and arrowStyles has some properties
|
|
if (data.arrowElement && Object.keys(data.arrowStyles).length) {
|
|
setStyles(data.arrowElement, data.arrowStyles);
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Set the x-placement attribute before everything else because it could be used
|
|
* to add margins to the popper margins needs to be calculated to get the
|
|
* correct popper offsets.
|
|
* @method
|
|
* @memberof Popper.modifiers
|
|
* @param {HTMLElement} reference - The reference element used to position the popper
|
|
* @param {HTMLElement} popper - The HTML element used as popper.
|
|
* @param {Object} options - Popper.js options
|
|
*/
|
|
function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
|
|
// compute reference element offsets
|
|
var referenceOffsets = getReferenceOffsets(state, popper, reference);
|
|
|
|
// compute auto placement, store placement inside the data object,
|
|
// modifiers will be able to edit `placement` if needed
|
|
// and refer to originalPlacement to know the original value
|
|
var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
|
|
|
|
popper.setAttribute('x-placement', placement);
|
|
|
|
// Apply `position` to popper before anything else because
|
|
// without the position applied we can't guarantee correct computations
|
|
setStyles(popper, { position: 'absolute' });
|
|
|
|
return options;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by `update` method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function computeStyle(data, options) {
|
|
var x = options.x,
|
|
y = options.y;
|
|
var popper = data.offsets.popper;
|
|
|
|
// Remove this legacy support in Popper.js v2
|
|
|
|
var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
|
|
return modifier.name === 'applyStyle';
|
|
}).gpuAcceleration;
|
|
if (legacyGpuAccelerationOption !== undefined) {
|
|
console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
|
|
}
|
|
var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
|
|
|
|
var offsetParent = getOffsetParent(data.instance.popper);
|
|
var offsetParentRect = getBoundingClientRect(offsetParent);
|
|
|
|
// Styles
|
|
var styles = {
|
|
position: popper.position
|
|
};
|
|
|
|
// floor sides to avoid blurry text
|
|
var offsets = {
|
|
left: Math.floor(popper.left),
|
|
top: Math.floor(popper.top),
|
|
bottom: Math.floor(popper.bottom),
|
|
right: Math.floor(popper.right)
|
|
};
|
|
|
|
var sideA = x === 'bottom' ? 'top' : 'bottom';
|
|
var sideB = y === 'right' ? 'left' : 'right';
|
|
|
|
// if gpuAcceleration is set to `true` and transform is supported,
|
|
// we use `translate3d` to apply the position to the popper we
|
|
// automatically use the supported prefixed version if needed
|
|
var prefixedProperty = getSupportedPropertyName('transform');
|
|
|
|
// now, let's make a step back and look at this code closely (wtf?)
|
|
// If the content of the popper grows once it's been positioned, it
|
|
// may happen that the popper gets misplaced because of the new content
|
|
// overflowing its reference element
|
|
// To avoid this problem, we provide two options (x and y), which allow
|
|
// the consumer to define the offset origin.
|
|
// If we position a popper on top of a reference element, we can set
|
|
// `x` to `top` to make the popper grow towards its top instead of
|
|
// its bottom.
|
|
var left = void 0,
|
|
top = void 0;
|
|
if (sideA === 'bottom') {
|
|
top = -offsetParentRect.height + offsets.bottom;
|
|
} else {
|
|
top = offsets.top;
|
|
}
|
|
if (sideB === 'right') {
|
|
left = -offsetParentRect.width + offsets.right;
|
|
} else {
|
|
left = offsets.left;
|
|
}
|
|
if (gpuAcceleration && prefixedProperty) {
|
|
styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
|
|
styles[sideA] = 0;
|
|
styles[sideB] = 0;
|
|
styles.willChange = 'transform';
|
|
} else {
|
|
// othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
|
|
var invertTop = sideA === 'bottom' ? -1 : 1;
|
|
var invertLeft = sideB === 'right' ? -1 : 1;
|
|
styles[sideA] = top * invertTop;
|
|
styles[sideB] = left * invertLeft;
|
|
styles.willChange = sideA + ', ' + sideB;
|
|
}
|
|
|
|
// Attributes
|
|
var attributes = {
|
|
'x-placement': data.placement
|
|
};
|
|
|
|
// Update `data` attributes, styles and arrowStyles
|
|
data.attributes = _extends$1({}, attributes, data.attributes);
|
|
data.styles = _extends$1({}, styles, data.styles);
|
|
data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Helper used to know if the given modifier depends from another one.<br />
|
|
* It checks if the needed modifier is listed and enabled.
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @param {Array} modifiers - list of modifiers
|
|
* @param {String} requestingName - name of requesting modifier
|
|
* @param {String} requestedName - name of requested modifier
|
|
* @returns {Boolean}
|
|
*/
|
|
function isModifierRequired(modifiers, requestingName, requestedName) {
|
|
var requesting = find(modifiers, function (_ref) {
|
|
var name = _ref.name;
|
|
return name === requestingName;
|
|
});
|
|
|
|
var isRequired = !!requesting && modifiers.some(function (modifier) {
|
|
return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
|
|
});
|
|
|
|
if (!isRequired) {
|
|
var _requesting = '`' + requestingName + '`';
|
|
var requested = '`' + requestedName + '`';
|
|
console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
|
|
}
|
|
return isRequired;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by update method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function arrow(data, options) {
|
|
// arrow depends on keepTogether in order to work
|
|
if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
|
|
return data;
|
|
}
|
|
|
|
var arrowElement = options.element;
|
|
|
|
// if arrowElement is a string, suppose it's a CSS selector
|
|
if (typeof arrowElement === 'string') {
|
|
arrowElement = data.instance.popper.querySelector(arrowElement);
|
|
|
|
// if arrowElement is not found, don't run the modifier
|
|
if (!arrowElement) {
|
|
return data;
|
|
}
|
|
} else {
|
|
// if the arrowElement isn't a query selector we must check that the
|
|
// provided DOM node is child of its popper node
|
|
if (!data.instance.popper.contains(arrowElement)) {
|
|
console.warn('WARNING: `arrow.element` must be child of its popper element!');
|
|
return data;
|
|
}
|
|
}
|
|
|
|
var placement = data.placement.split('-')[0];
|
|
var _data$offsets = data.offsets,
|
|
popper = _data$offsets.popper,
|
|
reference = _data$offsets.reference;
|
|
|
|
var isVertical = ['left', 'right'].indexOf(placement) !== -1;
|
|
|
|
var len = isVertical ? 'height' : 'width';
|
|
var sideCapitalized = isVertical ? 'Top' : 'Left';
|
|
var side = sideCapitalized.toLowerCase();
|
|
var altSide = isVertical ? 'left' : 'top';
|
|
var opSide = isVertical ? 'bottom' : 'right';
|
|
var arrowElementSize = getOuterSizes(arrowElement)[len];
|
|
|
|
//
|
|
// extends keepTogether behavior making sure the popper and its
|
|
// reference have enough pixels in conjuction
|
|
//
|
|
|
|
// top/left side
|
|
if (reference[opSide] - arrowElementSize < popper[side]) {
|
|
data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
|
|
}
|
|
// bottom/right side
|
|
if (reference[side] + arrowElementSize > popper[opSide]) {
|
|
data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
|
|
}
|
|
|
|
// compute center of the popper
|
|
var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
|
|
|
|
// Compute the sideValue using the updated popper offsets
|
|
// take popper margin in account because we don't have this info available
|
|
var popperMarginSide = getStyleComputedProperty(data.instance.popper, 'margin' + sideCapitalized).replace('px', '');
|
|
var sideValue = center - getClientRect(data.offsets.popper)[side] - popperMarginSide;
|
|
|
|
// prevent arrowElement from being placed not contiguously to its popper
|
|
sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
|
|
|
|
data.arrowElement = arrowElement;
|
|
data.offsets.arrow = {};
|
|
data.offsets.arrow[side] = Math.round(sideValue);
|
|
data.offsets.arrow[altSide] = ''; // make sure to unset any eventual altSide value from the DOM node
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Get the opposite placement variation of the given one
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {String} placement variation
|
|
* @returns {String} flipped placement variation
|
|
*/
|
|
function getOppositeVariation(variation) {
|
|
if (variation === 'end') {
|
|
return 'start';
|
|
} else if (variation === 'start') {
|
|
return 'end';
|
|
}
|
|
return variation;
|
|
}
|
|
|
|
/**
|
|
* List of accepted placements to use as values of the `placement` option.<br />
|
|
* Valid placements are:
|
|
* - `auto`
|
|
* - `top`
|
|
* - `right`
|
|
* - `bottom`
|
|
* - `left`
|
|
*
|
|
* Each placement can have a variation from this list:
|
|
* - `-start`
|
|
* - `-end`
|
|
*
|
|
* Variations are interpreted easily if you think of them as the left to right
|
|
* written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
|
|
* is right.<br />
|
|
* Vertically (`left` and `right`), `start` is top and `end` is bottom.
|
|
*
|
|
* Some valid examples are:
|
|
* - `top-end` (on top of reference, right aligned)
|
|
* - `right-start` (on right of reference, top aligned)
|
|
* - `bottom` (on bottom, centered)
|
|
* - `auto-right` (on the side with more space available, alignment depends by placement)
|
|
*
|
|
* @static
|
|
* @type {Array}
|
|
* @enum {String}
|
|
* @readonly
|
|
* @method placements
|
|
* @memberof Popper
|
|
*/
|
|
var placements = ['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'];
|
|
|
|
// Get rid of `auto` `auto-start` and `auto-end`
|
|
var validPlacements = placements.slice(3);
|
|
|
|
/**
|
|
* Given an initial placement, returns all the subsequent placements
|
|
* clockwise (or counter-clockwise).
|
|
*
|
|
* @method
|
|
* @memberof Popper.Utils
|
|
* @argument {String} placement - A valid placement (it accepts variations)
|
|
* @argument {Boolean} counter - Set to true to walk the placements counterclockwise
|
|
* @returns {Array} placements including their variations
|
|
*/
|
|
function clockwise(placement) {
|
|
var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
|
|
var index = validPlacements.indexOf(placement);
|
|
var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
|
|
return counter ? arr.reverse() : arr;
|
|
}
|
|
|
|
var BEHAVIORS = {
|
|
FLIP: 'flip',
|
|
CLOCKWISE: 'clockwise',
|
|
COUNTERCLOCKWISE: 'counterclockwise'
|
|
};
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by update method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function flip(data, options) {
|
|
// if `inner` modifier is enabled, we can't use the `flip` modifier
|
|
if (isModifierEnabled(data.instance.modifiers, 'inner')) {
|
|
return data;
|
|
}
|
|
|
|
if (data.flipped && data.placement === data.originalPlacement) {
|
|
// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
|
|
return data;
|
|
}
|
|
|
|
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement);
|
|
|
|
var placement = data.placement.split('-')[0];
|
|
var placementOpposite = getOppositePlacement(placement);
|
|
var variation = data.placement.split('-')[1] || '';
|
|
|
|
var flipOrder = [];
|
|
|
|
switch (options.behavior) {
|
|
case BEHAVIORS.FLIP:
|
|
flipOrder = [placement, placementOpposite];
|
|
break;
|
|
case BEHAVIORS.CLOCKWISE:
|
|
flipOrder = clockwise(placement);
|
|
break;
|
|
case BEHAVIORS.COUNTERCLOCKWISE:
|
|
flipOrder = clockwise(placement, true);
|
|
break;
|
|
default:
|
|
flipOrder = options.behavior;
|
|
}
|
|
|
|
flipOrder.forEach(function (step, index) {
|
|
if (placement !== step || flipOrder.length === index + 1) {
|
|
return data;
|
|
}
|
|
|
|
placement = data.placement.split('-')[0];
|
|
placementOpposite = getOppositePlacement(placement);
|
|
|
|
var popperOffsets = data.offsets.popper;
|
|
var refOffsets = data.offsets.reference;
|
|
|
|
// using floor because the reference offsets may contain decimals we are not going to consider here
|
|
var floor = Math.floor;
|
|
var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
|
|
|
|
var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
|
|
var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
|
|
var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
|
|
var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
|
|
|
|
var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
|
|
|
|
// flip the variation if required
|
|
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
|
var flippedVariation = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
|
|
|
|
if (overlapsRef || overflowsBoundaries || flippedVariation) {
|
|
// this boolean to detect any flip loop
|
|
data.flipped = true;
|
|
|
|
if (overlapsRef || overflowsBoundaries) {
|
|
placement = flipOrder[index + 1];
|
|
}
|
|
|
|
if (flippedVariation) {
|
|
variation = getOppositeVariation(variation);
|
|
}
|
|
|
|
data.placement = placement + (variation ? '-' + variation : '');
|
|
|
|
// this object contains `position`, we want to preserve it along with
|
|
// any additional property we may add in the future
|
|
data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
|
|
|
|
data = runModifiers(data.instance.modifiers, data, 'flip');
|
|
}
|
|
});
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by update method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function keepTogether(data) {
|
|
var _data$offsets = data.offsets,
|
|
popper = _data$offsets.popper,
|
|
reference = _data$offsets.reference;
|
|
|
|
var placement = data.placement.split('-')[0];
|
|
var floor = Math.floor;
|
|
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
|
var side = isVertical ? 'right' : 'bottom';
|
|
var opSide = isVertical ? 'left' : 'top';
|
|
var measurement = isVertical ? 'width' : 'height';
|
|
|
|
if (popper[side] < floor(reference[opSide])) {
|
|
data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
|
|
}
|
|
if (popper[opSide] > floor(reference[side])) {
|
|
data.offsets.popper[opSide] = floor(reference[side]);
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Converts a string containing value + unit into a px value number
|
|
* @function
|
|
* @memberof {modifiers~offset}
|
|
* @private
|
|
* @argument {String} str - Value + unit string
|
|
* @argument {String} measurement - `height` or `width`
|
|
* @argument {Object} popperOffsets
|
|
* @argument {Object} referenceOffsets
|
|
* @returns {Number|String}
|
|
* Value in pixels, or original string if no values were extracted
|
|
*/
|
|
function toValue(str, measurement, popperOffsets, referenceOffsets) {
|
|
// separate value from unit
|
|
var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
|
|
var value = +split[1];
|
|
var unit = split[2];
|
|
|
|
// If it's not a number it's an operator, I guess
|
|
if (!value) {
|
|
return str;
|
|
}
|
|
|
|
if (unit.indexOf('%') === 0) {
|
|
var element = void 0;
|
|
switch (unit) {
|
|
case '%p':
|
|
element = popperOffsets;
|
|
break;
|
|
case '%':
|
|
case '%r':
|
|
default:
|
|
element = referenceOffsets;
|
|
}
|
|
|
|
var rect = getClientRect(element);
|
|
return rect[measurement] / 100 * value;
|
|
} else if (unit === 'vh' || unit === 'vw') {
|
|
// if is a vh or vw, we calculate the size based on the viewport
|
|
var size = void 0;
|
|
if (unit === 'vh') {
|
|
size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
} else {
|
|
size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
}
|
|
return size / 100 * value;
|
|
} else {
|
|
// if is an explicit pixel unit, we get rid of the unit and keep the value
|
|
// if is an implicit unit, it's px, and we return just the value
|
|
return value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
|
|
* @function
|
|
* @memberof {modifiers~offset}
|
|
* @private
|
|
* @argument {String} offset
|
|
* @argument {Object} popperOffsets
|
|
* @argument {Object} referenceOffsets
|
|
* @argument {String} basePlacement
|
|
* @returns {Array} a two cells array with x and y offsets in numbers
|
|
*/
|
|
function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
|
|
var offsets = [0, 0];
|
|
|
|
// Use height if placement is left or right and index is 0 otherwise use width
|
|
// in this way the first offset will use an axis and the second one
|
|
// will use the other one
|
|
var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
|
|
|
|
// Split the offset string to obtain a list of values and operands
|
|
// The regex addresses values with the plus or minus sign in front (+10, -20, etc)
|
|
var fragments = offset.split(/(\+|\-)/).map(function (frag) {
|
|
return frag.trim();
|
|
});
|
|
|
|
// Detect if the offset string contains a pair of values or a single one
|
|
// they could be separated by comma or space
|
|
var divider = fragments.indexOf(find(fragments, function (frag) {
|
|
return frag.search(/,|\s/) !== -1;
|
|
}));
|
|
|
|
if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
|
|
console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
|
|
}
|
|
|
|
// If divider is found, we divide the list of values and operands to divide
|
|
// them by ofset X and Y.
|
|
var splitRegex = /\s*,\s*|\s+/;
|
|
var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];
|
|
|
|
// Convert the values with units to absolute pixels to allow our computations
|
|
ops = ops.map(function (op, index) {
|
|
// Most of the units rely on the orientation of the popper
|
|
var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
|
|
var mergeWithPrevious = false;
|
|
return op
|
|
// This aggregates any `+` or `-` sign that aren't considered operators
|
|
// e.g.: 10 + +5 => [10, +, +5]
|
|
.reduce(function (a, b) {
|
|
if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
|
|
a[a.length - 1] = b;
|
|
mergeWithPrevious = true;
|
|
return a;
|
|
} else if (mergeWithPrevious) {
|
|
a[a.length - 1] += b;
|
|
mergeWithPrevious = false;
|
|
return a;
|
|
} else {
|
|
return a.concat(b);
|
|
}
|
|
}, [])
|
|
// Here we convert the string values into number values (in px)
|
|
.map(function (str) {
|
|
return toValue(str, measurement, popperOffsets, referenceOffsets);
|
|
});
|
|
});
|
|
|
|
// Loop trough the offsets arrays and execute the operations
|
|
ops.forEach(function (op, index) {
|
|
op.forEach(function (frag, index2) {
|
|
if (isNumeric(frag)) {
|
|
offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
|
|
}
|
|
});
|
|
});
|
|
return offsets;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by update method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @argument {Number|String} options.offset=0
|
|
* The offset value as described in the modifier description
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function offset(data, _ref) {
|
|
var offset = _ref.offset;
|
|
var placement = data.placement,
|
|
_data$offsets = data.offsets,
|
|
popper = _data$offsets.popper,
|
|
reference = _data$offsets.reference;
|
|
|
|
var basePlacement = placement.split('-')[0];
|
|
|
|
var offsets = void 0;
|
|
if (isNumeric(+offset)) {
|
|
offsets = [+offset, 0];
|
|
} else {
|
|
offsets = parseOffset(offset, popper, reference, basePlacement);
|
|
}
|
|
|
|
if (basePlacement === 'left') {
|
|
popper.top += offsets[0];
|
|
popper.left -= offsets[1];
|
|
} else if (basePlacement === 'right') {
|
|
popper.top += offsets[0];
|
|
popper.left += offsets[1];
|
|
} else if (basePlacement === 'top') {
|
|
popper.left += offsets[0];
|
|
popper.top -= offsets[1];
|
|
} else if (basePlacement === 'bottom') {
|
|
popper.left += offsets[0];
|
|
popper.top += offsets[1];
|
|
}
|
|
|
|
data.popper = popper;
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by `update` method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function preventOverflow(data, options) {
|
|
var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);
|
|
|
|
// If offsetParent is the reference element, we really want to
|
|
// go one step up and use the next offsetParent as reference to
|
|
// avoid to make this modifier completely useless and look like broken
|
|
if (data.instance.reference === boundariesElement) {
|
|
boundariesElement = getOffsetParent(boundariesElement);
|
|
}
|
|
|
|
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement);
|
|
options.boundaries = boundaries;
|
|
|
|
var order = options.priority;
|
|
var popper = data.offsets.popper;
|
|
|
|
var check = {
|
|
primary: function primary(placement) {
|
|
var value = popper[placement];
|
|
if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
|
|
value = Math.max(popper[placement], boundaries[placement]);
|
|
}
|
|
return defineProperty$1({}, placement, value);
|
|
},
|
|
secondary: function secondary(placement) {
|
|
var mainSide = placement === 'right' ? 'left' : 'top';
|
|
var value = popper[mainSide];
|
|
if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
|
|
value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
|
|
}
|
|
return defineProperty$1({}, mainSide, value);
|
|
}
|
|
};
|
|
|
|
order.forEach(function (placement) {
|
|
var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
|
|
popper = _extends$1({}, popper, check[side](placement));
|
|
});
|
|
|
|
data.offsets.popper = popper;
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by `update` method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function shift(data) {
|
|
var placement = data.placement;
|
|
var basePlacement = placement.split('-')[0];
|
|
var shiftvariation = placement.split('-')[1];
|
|
|
|
// if shift shiftvariation is specified, run the modifier
|
|
if (shiftvariation) {
|
|
var _data$offsets = data.offsets,
|
|
reference = _data$offsets.reference,
|
|
popper = _data$offsets.popper;
|
|
|
|
var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
|
|
var side = isVertical ? 'left' : 'top';
|
|
var measurement = isVertical ? 'width' : 'height';
|
|
|
|
var shiftOffsets = {
|
|
start: defineProperty$1({}, side, reference[side]),
|
|
end: defineProperty$1({}, side, reference[side] + reference[measurement] - popper[measurement])
|
|
};
|
|
|
|
data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by update method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function hide(data) {
|
|
if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
|
|
return data;
|
|
}
|
|
|
|
var refRect = data.offsets.reference;
|
|
var bound = find(data.instance.modifiers, function (modifier) {
|
|
return modifier.name === 'preventOverflow';
|
|
}).boundaries;
|
|
|
|
if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
|
|
// Avoid unnecessary DOM access if visibility hasn't changed
|
|
if (data.hide === true) {
|
|
return data;
|
|
}
|
|
|
|
data.hide = true;
|
|
data.attributes['x-out-of-boundaries'] = '';
|
|
} else {
|
|
// Avoid unnecessary DOM access if visibility hasn't changed
|
|
if (data.hide === false) {
|
|
return data;
|
|
}
|
|
|
|
data.hide = false;
|
|
data.attributes['x-out-of-boundaries'] = false;
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* @function
|
|
* @memberof Modifiers
|
|
* @argument {Object} data - The data object generated by `update` method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {Object} The data object, properly modified
|
|
*/
|
|
function inner(data) {
|
|
var placement = data.placement;
|
|
var basePlacement = placement.split('-')[0];
|
|
var _data$offsets = data.offsets,
|
|
popper = _data$offsets.popper,
|
|
reference = _data$offsets.reference;
|
|
|
|
var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
|
|
|
|
var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
|
|
|
|
popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
|
|
|
|
data.placement = getOppositePlacement(placement);
|
|
data.offsets.popper = getClientRect(popper);
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Modifier function, each modifier can have a function of this type assigned
|
|
* to its `fn` property.<br />
|
|
* These functions will be called on each update, this means that you must
|
|
* make sure they are performant enough to avoid performance bottlenecks.
|
|
*
|
|
* @function ModifierFn
|
|
* @argument {dataObject} data - The data object generated by `update` method
|
|
* @argument {Object} options - Modifiers configuration and options
|
|
* @returns {dataObject} The data object, properly modified
|
|
*/
|
|
|
|
/**
|
|
* Modifiers are plugins used to alter the behavior of your poppers.<br />
|
|
* Popper.js uses a set of 9 modifiers to provide all the basic functionalities
|
|
* needed by the library.
|
|
*
|
|
* Usually you don't want to override the `order`, `fn` and `onLoad` props.
|
|
* All the other properties are configurations that could be tweaked.
|
|
* @namespace modifiers
|
|
*/
|
|
var modifiers = {
|
|
/**
|
|
* Modifier used to shift the popper on the start or end of its reference
|
|
* element.<br />
|
|
* It will read the variation of the `placement` property.<br />
|
|
* It can be one either `-end` or `-start`.
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
shift: {
|
|
/** @prop {number} order=100 - Index used to define the order of execution */
|
|
order: 100,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: shift
|
|
},
|
|
|
|
/**
|
|
* The `offset` modifier can shift your popper on both its axis.
|
|
*
|
|
* It accepts the following units:
|
|
* - `px` or unitless, interpreted as pixels
|
|
* - `%` or `%r`, percentage relative to the length of the reference element
|
|
* - `%p`, percentage relative to the length of the popper element
|
|
* - `vw`, CSS viewport width unit
|
|
* - `vh`, CSS viewport height unit
|
|
*
|
|
* For length is intended the main axis relative to the placement of the popper.<br />
|
|
* This means that if the placement is `top` or `bottom`, the length will be the
|
|
* `width`. In case of `left` or `right`, it will be the height.
|
|
*
|
|
* You can provide a single value (as `Number` or `String`), or a pair of values
|
|
* as `String` divided by a comma or one (or more) white spaces.<br />
|
|
* The latter is a deprecated method because it leads to confusion and will be
|
|
* removed in v2.<br />
|
|
* Additionally, it accepts additions and subtractions between different units.
|
|
* Note that multiplications and divisions aren't supported.
|
|
*
|
|
* Valid examples are:
|
|
* ```
|
|
* 10
|
|
* '10%'
|
|
* '10, 10'
|
|
* '10%, 10'
|
|
* '10 + 10%'
|
|
* '10 - 5vh + 3%'
|
|
* '-10px + 5vh, 5px - 6%'
|
|
* ```
|
|
* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
|
|
* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
|
|
* > More on this [reading this issue](https://github.com/FezVrasta/popper.js/issues/373)
|
|
*
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
offset: {
|
|
/** @prop {number} order=200 - Index used to define the order of execution */
|
|
order: 200,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: offset,
|
|
/** @prop {Number|String} offset=0
|
|
* The offset value as described in the modifier description
|
|
*/
|
|
offset: 0
|
|
},
|
|
|
|
/**
|
|
* Modifier used to prevent the popper from being positioned outside the boundary.
|
|
*
|
|
* An scenario exists where the reference itself is not within the boundaries.<br />
|
|
* We can say it has "escaped the boundaries" — or just "escaped".<br />
|
|
* In this case we need to decide whether the popper should either:
|
|
*
|
|
* - detach from the reference and remain "trapped" in the boundaries, or
|
|
* - if it should ignore the boundary and "escape with its reference"
|
|
*
|
|
* When `escapeWithReference` is set to`true` and reference is completely
|
|
* outside its boundaries, the popper will overflow (or completely leave)
|
|
* the boundaries in order to remain attached to the edge of the reference.
|
|
*
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
preventOverflow: {
|
|
/** @prop {number} order=300 - Index used to define the order of execution */
|
|
order: 300,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: preventOverflow,
|
|
/**
|
|
* @prop {Array} [priority=['left','right','top','bottom']]
|
|
* Popper will try to prevent overflow following these priorities by default,
|
|
* then, it could overflow on the left and on top of the `boundariesElement`
|
|
*/
|
|
priority: ['left', 'right', 'top', 'bottom'],
|
|
/**
|
|
* @prop {number} padding=5
|
|
* Amount of pixel used to define a minimum distance between the boundaries
|
|
* and the popper this makes sure the popper has always a little padding
|
|
* between the edges of its container
|
|
*/
|
|
padding: 5,
|
|
/**
|
|
* @prop {String|HTMLElement} boundariesElement='scrollParent'
|
|
* Boundaries used by the modifier, can be `scrollParent`, `window`,
|
|
* `viewport` or any DOM element.
|
|
*/
|
|
boundariesElement: 'scrollParent'
|
|
},
|
|
|
|
/**
|
|
* Modifier used to make sure the reference and its popper stay near eachothers
|
|
* without leaving any gap between the two. Expecially useful when the arrow is
|
|
* enabled and you want to assure it to point to its reference element.
|
|
* It cares only about the first axis, you can still have poppers with margin
|
|
* between the popper and its reference element.
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
keepTogether: {
|
|
/** @prop {number} order=400 - Index used to define the order of execution */
|
|
order: 400,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: keepTogether
|
|
},
|
|
|
|
/**
|
|
* This modifier is used to move the `arrowElement` of the popper to make
|
|
* sure it is positioned between the reference element and its popper element.
|
|
* It will read the outer size of the `arrowElement` node to detect how many
|
|
* pixels of conjuction are needed.
|
|
*
|
|
* It has no effect if no `arrowElement` is provided.
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
arrow: {
|
|
/** @prop {number} order=500 - Index used to define the order of execution */
|
|
order: 500,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: arrow,
|
|
/** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
|
|
element: '[x-arrow]'
|
|
},
|
|
|
|
/**
|
|
* Modifier used to flip the popper's placement when it starts to overlap its
|
|
* reference element.
|
|
*
|
|
* Requires the `preventOverflow` modifier before it in order to work.
|
|
*
|
|
* **NOTE:** this modifier will interrupt the current update cycle and will
|
|
* restart it if it detects the need to flip the placement.
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
flip: {
|
|
/** @prop {number} order=600 - Index used to define the order of execution */
|
|
order: 600,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: flip,
|
|
/**
|
|
* @prop {String|Array} behavior='flip'
|
|
* The behavior used to change the popper's placement. It can be one of
|
|
* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
|
|
* placements (with optional variations).
|
|
*/
|
|
behavior: 'flip',
|
|
/**
|
|
* @prop {number} padding=5
|
|
* The popper will flip if it hits the edges of the `boundariesElement`
|
|
*/
|
|
padding: 5,
|
|
/**
|
|
* @prop {String|HTMLElement} boundariesElement='viewport'
|
|
* The element which will define the boundaries of the popper position,
|
|
* the popper will never be placed outside of the defined boundaries
|
|
* (except if keepTogether is enabled)
|
|
*/
|
|
boundariesElement: 'viewport'
|
|
},
|
|
|
|
/**
|
|
* Modifier used to make the popper flow toward the inner of the reference element.
|
|
* By default, when this modifier is disabled, the popper will be placed outside
|
|
* the reference element.
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
inner: {
|
|
/** @prop {number} order=700 - Index used to define the order of execution */
|
|
order: 700,
|
|
/** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
|
|
enabled: false,
|
|
/** @prop {ModifierFn} */
|
|
fn: inner
|
|
},
|
|
|
|
/**
|
|
* Modifier used to hide the popper when its reference element is outside of the
|
|
* popper boundaries. It will set a `x-out-of-boundaries` attribute which can
|
|
* be used to hide with a CSS selector the popper when its reference is
|
|
* out of boundaries.
|
|
*
|
|
* Requires the `preventOverflow` modifier before it in order to work.
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
hide: {
|
|
/** @prop {number} order=800 - Index used to define the order of execution */
|
|
order: 800,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: hide
|
|
},
|
|
|
|
/**
|
|
* Computes the style that will be applied to the popper element to gets
|
|
* properly positioned.
|
|
*
|
|
* Note that this modifier will not touch the DOM, it just prepares the styles
|
|
* so that `applyStyle` modifier can apply it. This separation is useful
|
|
* in case you need to replace `applyStyle` with a custom implementation.
|
|
*
|
|
* This modifier has `850` as `order` value to maintain backward compatibility
|
|
* with previous versions of Popper.js. Expect the modifiers ordering method
|
|
* to change in future major versions of the library.
|
|
*
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
computeStyle: {
|
|
/** @prop {number} order=850 - Index used to define the order of execution */
|
|
order: 850,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: computeStyle,
|
|
/**
|
|
* @prop {Boolean} gpuAcceleration=true
|
|
* If true, it uses the CSS 3d transformation to position the popper.
|
|
* Otherwise, it will use the `top` and `left` properties.
|
|
*/
|
|
gpuAcceleration: true,
|
|
/**
|
|
* @prop {string} [x='bottom']
|
|
* Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
|
|
* Change this if your popper should grow in a direction different from `bottom`
|
|
*/
|
|
x: 'bottom',
|
|
/**
|
|
* @prop {string} [x='left']
|
|
* Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
|
|
* Change this if your popper should grow in a direction different from `right`
|
|
*/
|
|
y: 'right'
|
|
},
|
|
|
|
/**
|
|
* Applies the computed styles to the popper element.
|
|
*
|
|
* All the DOM manipulations are limited to this modifier. This is useful in case
|
|
* you want to integrate Popper.js inside a framework or view library and you
|
|
* want to delegate all the DOM manipulations to it.
|
|
*
|
|
* Note that if you disable this modifier, you must make sure the popper element
|
|
* has its position set to `absolute` before Popper.js can do its work!
|
|
*
|
|
* Just disable this modifier and define you own to achieve the desired effect.
|
|
*
|
|
* @memberof modifiers
|
|
* @inner
|
|
*/
|
|
applyStyle: {
|
|
/** @prop {number} order=900 - Index used to define the order of execution */
|
|
order: 900,
|
|
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
|
|
enabled: true,
|
|
/** @prop {ModifierFn} */
|
|
fn: applyStyle,
|
|
/** @prop {Function} */
|
|
onLoad: applyStyleOnLoad,
|
|
/**
|
|
* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
|
|
* @prop {Boolean} gpuAcceleration=true
|
|
* If true, it uses the CSS 3d transformation to position the popper.
|
|
* Otherwise, it will use the `top` and `left` properties.
|
|
*/
|
|
gpuAcceleration: undefined
|
|
}
|
|
};
|
|
|
|
/**
|
|
* The `dataObject` is an object containing all the informations used by Popper.js
|
|
* this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
|
|
* @name dataObject
|
|
* @property {Object} data.instance The Popper.js instance
|
|
* @property {String} data.placement Placement applied to popper
|
|
* @property {String} data.originalPlacement Placement originally defined on init
|
|
* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
|
|
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
|
|
* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
|
|
* @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
|
|
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
|
|
* @property {Object} data.boundaries Offsets of the popper boundaries
|
|
* @property {Object} data.offsets The measurements of popper, reference and arrow elements.
|
|
* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
|
|
* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
|
|
* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
|
|
*/
|
|
|
|
/**
|
|
* Default options provided to Popper.js constructor.<br />
|
|
* These can be overriden using the `options` argument of Popper.js.<br />
|
|
* To override an option, simply pass as 3rd argument an object with the same
|
|
* structure of this object, example:
|
|
* ```
|
|
* new Popper(ref, pop, {
|
|
* modifiers: {
|
|
* preventOverflow: { enabled: false }
|
|
* }
|
|
* })
|
|
* ```
|
|
* @type {Object}
|
|
* @static
|
|
* @memberof Popper
|
|
*/
|
|
var Defaults = {
|
|
/**
|
|
* Popper's placement
|
|
* @prop {Popper.placements} placement='bottom'
|
|
*/
|
|
placement: 'bottom',
|
|
|
|
/**
|
|
* Whether events (resize, scroll) are initially enabled
|
|
* @prop {Boolean} eventsEnabled=true
|
|
*/
|
|
eventsEnabled: true,
|
|
|
|
/**
|
|
* Set to true if you want to automatically remove the popper when
|
|
* you call the `destroy` method.
|
|
* @prop {Boolean} removeOnDestroy=false
|
|
*/
|
|
removeOnDestroy: false,
|
|
|
|
/**
|
|
* Callback called when the popper is created.<br />
|
|
* By default, is set to no-op.<br />
|
|
* Access Popper.js instance with `data.instance`.
|
|
* @prop {onCreate}
|
|
*/
|
|
onCreate: function onCreate() {},
|
|
|
|
/**
|
|
* Callback called when the popper is updated, this callback is not called
|
|
* on the initialization/creation of the popper, but only on subsequent
|
|
* updates.<br />
|
|
* By default, is set to no-op.<br />
|
|
* Access Popper.js instance with `data.instance`.
|
|
* @prop {onUpdate}
|
|
*/
|
|
onUpdate: function onUpdate() {},
|
|
|
|
/**
|
|
* List of modifiers used to modify the offsets before they are applied to the popper.
|
|
* They provide most of the functionalities of Popper.js
|
|
* @prop {modifiers}
|
|
*/
|
|
modifiers: modifiers
|
|
};
|
|
|
|
/**
|
|
* @callback onCreate
|
|
* @param {dataObject} data
|
|
*/
|
|
|
|
/**
|
|
* @callback onUpdate
|
|
* @param {dataObject} data
|
|
*/
|
|
|
|
// Utils
|
|
// Methods
|
|
var Popper$1 = function () {
|
|
/**
|
|
* Create a new Popper.js instance
|
|
* @class Popper
|
|
* @param {HTMLElement|referenceObject} reference - The reference element used to position the popper
|
|
* @param {HTMLElement} popper - The HTML element used as popper.
|
|
* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
|
|
* @return {Object} instance - The generated Popper.js instance
|
|
*/
|
|
function Popper(reference, popper) {
|
|
var _this = this;
|
|
|
|
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
classCallCheck$1(this, Popper);
|
|
|
|
this.scheduleUpdate = function () {
|
|
return requestAnimationFrame(_this.update);
|
|
};
|
|
|
|
// make update() debounced, so that it only runs at most once-per-tick
|
|
this.update = debounce(this.update.bind(this));
|
|
|
|
// with {} we create a new object with the options inside it
|
|
this.options = _extends$1({}, Popper.Defaults, options);
|
|
|
|
// init state
|
|
this.state = {
|
|
isDestroyed: false,
|
|
isCreated: false,
|
|
scrollParents: []
|
|
};
|
|
|
|
// get reference and popper elements (allow jQuery wrappers)
|
|
this.reference = reference && reference.jquery ? reference[0] : reference;
|
|
this.popper = popper && popper.jquery ? popper[0] : popper;
|
|
|
|
// Deep merge modifiers options
|
|
this.options.modifiers = {};
|
|
Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
|
|
_this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
|
|
});
|
|
|
|
// Refactoring modifiers' list (Object => Array)
|
|
this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
|
|
return _extends$1({
|
|
name: name
|
|
}, _this.options.modifiers[name]);
|
|
})
|
|
// sort the modifiers by order
|
|
.sort(function (a, b) {
|
|
return a.order - b.order;
|
|
});
|
|
|
|
// modifiers have the ability to execute arbitrary code when Popper.js get inited
|
|
// such code is executed in the same order of its modifier
|
|
// they could add new properties to their options configuration
|
|
// BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
|
|
this.modifiers.forEach(function (modifierOptions) {
|
|
if (modifierOptions.enabled && isFunction$2(modifierOptions.onLoad)) {
|
|
modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
|
|
}
|
|
});
|
|
|
|
// fire the first update to position the popper in the right place
|
|
this.update();
|
|
|
|
var eventsEnabled = this.options.eventsEnabled;
|
|
if (eventsEnabled) {
|
|
// setup event listeners, they will take care of update the position in specific situations
|
|
this.enableEventListeners();
|
|
}
|
|
|
|
this.state.eventsEnabled = eventsEnabled;
|
|
}
|
|
|
|
// We can't use class properties because they don't get listed in the
|
|
// class prototype and break stuff like Sinon stubs
|
|
|
|
|
|
createClass$1(Popper, [{
|
|
key: 'update',
|
|
value: function update$$1() {
|
|
return update.call(this);
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy$$1() {
|
|
return destroy.call(this);
|
|
}
|
|
}, {
|
|
key: 'enableEventListeners',
|
|
value: function enableEventListeners$$1() {
|
|
return enableEventListeners.call(this);
|
|
}
|
|
}, {
|
|
key: 'disableEventListeners',
|
|
value: function disableEventListeners$$1() {
|
|
return disableEventListeners.call(this);
|
|
}
|
|
|
|
/**
|
|
* Schedule an update, it will run on the next UI update available
|
|
* @method scheduleUpdate
|
|
* @memberof Popper
|
|
*/
|
|
|
|
/**
|
|
* Collection of utilities useful when writing custom modifiers.
|
|
* Starting from version 1.7, this method is available only if you
|
|
* include `popper-utils.js` before `popper.js`.
|
|
*
|
|
* **DEPRECATION**: This way to access PopperUtils is deprecated
|
|
* and will be removed in v2! Use the PopperUtils module directly instead.
|
|
* Due to the high instability of the methods contained in Utils, we can't
|
|
* guarantee them to follow semver. Use them at your own risk!
|
|
* @static
|
|
* @private
|
|
* @type {Object}
|
|
* @deprecated since version 1.8
|
|
* @member Utils
|
|
* @memberof Popper
|
|
*/
|
|
|
|
}]);
|
|
return Popper;
|
|
}();
|
|
|
|
/**
|
|
* The `referenceObject` is an object that provides an interface compatible with Popper.js
|
|
* and lets you use it as replacement of a real DOM node.<br />
|
|
* You can use this method to position a popper relatively to a set of coordinates
|
|
* in case you don't have a DOM node to use as reference.
|
|
*
|
|
* ```
|
|
* new Popper(referenceObject, popperNode);
|
|
* ```
|
|
*
|
|
* NB: This feature isn't supported in Internet Explorer 10
|
|
* @name referenceObject
|
|
* @property {Function} data.getBoundingClientRect
|
|
* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
|
|
* @property {number} data.clientWidth
|
|
* An ES6 getter that will return the width of the virtual reference element.
|
|
* @property {number} data.clientHeight
|
|
* An ES6 getter that will return the height of the virtual reference element.
|
|
*/
|
|
|
|
Popper$1.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
|
|
Popper$1.placements = placements;
|
|
Popper$1.Defaults = Defaults;
|
|
|
|
|
|
|
|
|
|
var popper = Object.freeze({
|
|
default: Popper$1
|
|
});
|
|
|
|
var _popper = ( popper && Popper$1 ) || popper;
|
|
|
|
var Popper_1 = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends$$1 = 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;
|
|
};
|
|
|
|
var _createClass = function () {
|
|
function defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
|
|
};
|
|
}();
|
|
|
|
var _react2 = _interopRequireDefault(React__default);
|
|
|
|
var _propTypes2 = _interopRequireDefault(propTypes$1);
|
|
|
|
var _popper2 = _interopRequireDefault(_popper);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
function _defineProperty(obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
|
|
} else {
|
|
obj[key] = value;
|
|
}return obj;
|
|
}
|
|
|
|
function _objectWithoutProperties(obj, keys) {
|
|
var target = {};for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
|
|
}return target;
|
|
}
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _possibleConstructorReturn(self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}return call && ((typeof call === 'undefined' ? 'undefined' : _typeof(call)) === "object" || typeof call === "function") ? call : self;
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof(superClass)));
|
|
}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
}
|
|
|
|
var noop = function noop() {
|
|
return null;
|
|
};
|
|
|
|
var Popper = function (_Component) {
|
|
_inherits(Popper, _Component);
|
|
|
|
function Popper() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, Popper);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Popper.__proto__ || Object.getPrototypeOf(Popper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this._setArrowNode = function (node) {
|
|
_this._arrowNode = node;
|
|
}, _this._getTargetNode = function () {
|
|
return _this.context.popperManager.getTargetNode();
|
|
}, _this._getOffsets = function (data) {
|
|
return Object.keys(data.offsets).map(function (key) {
|
|
return data.offsets[key];
|
|
});
|
|
}, _this._isDataDirty = function (data) {
|
|
if (_this.state.data) {
|
|
return JSON.stringify(_this._getOffsets(_this.state.data)) !== JSON.stringify(_this._getOffsets(data));
|
|
} else {
|
|
return true;
|
|
}
|
|
}, _this._updateStateModifier = {
|
|
enabled: true,
|
|
order: 900,
|
|
fn: function fn(data) {
|
|
if (_this._isDataDirty(data)) {
|
|
_this.setState({ data: data });
|
|
}
|
|
return data;
|
|
}
|
|
}, _this._getPopperStyle = function () {
|
|
var data = _this.state.data;
|
|
|
|
// If Popper isn't instantiated, hide the popperElement
|
|
// to avoid flash of unstyled content
|
|
|
|
if (!_this._popper || !data) {
|
|
return {
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
opacity: 0
|
|
};
|
|
}
|
|
|
|
var _data$offsets$popper = data.offsets.popper,
|
|
top = _data$offsets$popper.top,
|
|
left = _data$offsets$popper.left,
|
|
position = _data$offsets$popper.position;
|
|
|
|
return _extends$$1({
|
|
position: position
|
|
}, data.styles);
|
|
}, _this._getPopperPlacement = function () {
|
|
return !!_this.state.data ? _this.state.data.placement : undefined;
|
|
}, _this._getPopperHide = function () {
|
|
return !!_this.state.data && _this.state.data.hide ? '' : undefined;
|
|
}, _this._getArrowStyle = function () {
|
|
if (!_this.state.data || !_this.state.data.offsets.arrow) {
|
|
return {};
|
|
} else {
|
|
var _this$state$data$offs = _this.state.data.offsets.arrow,
|
|
top = _this$state$data$offs.top,
|
|
left = _this$state$data$offs.left;
|
|
|
|
return { top: top, left: left };
|
|
}
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
_createClass(Popper, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return {
|
|
popper: {
|
|
setArrowNode: this._setArrowNode,
|
|
getArrowStyle: this._getArrowStyle
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this._updatePopper();
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(lastProps) {
|
|
if (lastProps.placement !== this.props.placement || lastProps.eventsEnabled !== this.props.eventsEnabled) {
|
|
this._updatePopper();
|
|
}
|
|
|
|
if (this._popper && lastProps.children !== this.props.children) {
|
|
this._popper.scheduleUpdate();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this._destroyPopper();
|
|
}
|
|
}, {
|
|
key: '_updatePopper',
|
|
value: function _updatePopper() {
|
|
this._destroyPopper();
|
|
if (this._node) {
|
|
this._createPopper();
|
|
}
|
|
}
|
|
}, {
|
|
key: '_createPopper',
|
|
value: function _createPopper() {
|
|
var _props = this.props,
|
|
placement = _props.placement,
|
|
eventsEnabled = _props.eventsEnabled;
|
|
|
|
var modifiers = _extends$$1({}, this.props.modifiers, {
|
|
applyStyle: { enabled: false },
|
|
updateState: this._updateStateModifier
|
|
});
|
|
|
|
if (this._arrowNode) {
|
|
modifiers.arrow = {
|
|
element: this._arrowNode
|
|
};
|
|
}
|
|
|
|
this._popper = new _popper2.default(this._getTargetNode(), this._node, {
|
|
placement: placement,
|
|
eventsEnabled: eventsEnabled,
|
|
modifiers: modifiers
|
|
});
|
|
|
|
// schedule an update to make sure everything gets positioned correct
|
|
// after being instantiated
|
|
this._popper.scheduleUpdate();
|
|
}
|
|
}, {
|
|
key: '_destroyPopper',
|
|
value: function _destroyPopper() {
|
|
if (this._popper) {
|
|
this._popper.destroy();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props2 = this.props,
|
|
component = _props2.component,
|
|
innerRef = _props2.innerRef,
|
|
placement = _props2.placement,
|
|
eventsEnabled = _props2.eventsEnabled,
|
|
modifiers = _props2.modifiers,
|
|
children = _props2.children,
|
|
restProps = _objectWithoutProperties(_props2, ['component', 'innerRef', 'placement', 'eventsEnabled', 'modifiers', 'children']);
|
|
|
|
var popperRef = function popperRef(node) {
|
|
_this2._node = node;
|
|
if (typeof innerRef === 'function') {
|
|
innerRef(node);
|
|
}
|
|
};
|
|
var popperStyle = this._getPopperStyle();
|
|
var popperPlacement = this._getPopperPlacement();
|
|
var popperHide = this._getPopperHide();
|
|
|
|
if (typeof children === 'function') {
|
|
var _popperProps;
|
|
|
|
var popperProps = (_popperProps = {
|
|
ref: popperRef,
|
|
style: popperStyle
|
|
}, _defineProperty(_popperProps, 'data-placement', popperPlacement), _defineProperty(_popperProps, 'data-x-out-of-boundaries', popperHide), _popperProps);
|
|
return children({
|
|
popperProps: popperProps,
|
|
restProps: restProps,
|
|
scheduleUpdate: this._popper && this._popper.scheduleUpdate
|
|
});
|
|
}
|
|
|
|
var componentProps = _extends$$1({}, restProps, {
|
|
style: _extends$$1({}, restProps.style, popperStyle),
|
|
'data-placement': popperPlacement,
|
|
'data-x-out-of-boundaries': popperHide
|
|
});
|
|
|
|
if (typeof component === 'string') {
|
|
componentProps.ref = popperRef;
|
|
} else {
|
|
componentProps.innerRef = popperRef;
|
|
}
|
|
|
|
return (0, React__default.createElement)(component, componentProps, children);
|
|
}
|
|
}]);
|
|
|
|
return Popper;
|
|
}(React__default.Component);
|
|
|
|
Popper.contextTypes = {
|
|
popperManager: _propTypes2.default.object.isRequired
|
|
};
|
|
Popper.childContextTypes = {
|
|
popper: _propTypes2.default.object.isRequired
|
|
};
|
|
Popper.propTypes = {
|
|
component: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
|
|
innerRef: _propTypes2.default.func,
|
|
placement: _propTypes2.default.oneOf(_popper2.default.placements),
|
|
eventsEnabled: _propTypes2.default.bool,
|
|
modifiers: _propTypes2.default.object,
|
|
children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
|
|
};
|
|
Popper.defaultProps = {
|
|
component: 'div',
|
|
placement: 'bottom',
|
|
eventsEnabled: true,
|
|
modifiers: {}
|
|
};
|
|
exports.default = Popper;
|
|
});
|
|
|
|
unwrapExports(Popper_1);
|
|
|
|
var Arrow_1 = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _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;
|
|
};
|
|
|
|
var _react2 = _interopRequireDefault(React__default);
|
|
|
|
var _propTypes2 = _interopRequireDefault(propTypes$1);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
function _objectWithoutProperties(obj, keys) {
|
|
var target = {};for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
|
|
}return target;
|
|
}
|
|
|
|
var Arrow = function Arrow(props, context) {
|
|
var _props$component = props.component,
|
|
component = _props$component === undefined ? 'span' : _props$component,
|
|
innerRef = props.innerRef,
|
|
children = props.children,
|
|
restProps = _objectWithoutProperties(props, ['component', 'innerRef', 'children']);
|
|
|
|
var popper = context.popper;
|
|
|
|
var arrowRef = function arrowRef(node) {
|
|
popper.setArrowNode(node);
|
|
if (typeof innerRef === 'function') {
|
|
innerRef(node);
|
|
}
|
|
};
|
|
var arrowStyle = popper.getArrowStyle();
|
|
|
|
if (typeof children === 'function') {
|
|
var arrowProps = {
|
|
ref: arrowRef,
|
|
style: arrowStyle
|
|
};
|
|
return children({ arrowProps: arrowProps, restProps: restProps });
|
|
}
|
|
|
|
var componentProps = _extends({}, restProps, {
|
|
style: _extends({}, arrowStyle, restProps.style)
|
|
});
|
|
|
|
if (typeof component === 'string') {
|
|
componentProps.ref = arrowRef;
|
|
} else {
|
|
componentProps.innerRef = arrowRef;
|
|
}
|
|
|
|
return (0, React__default.createElement)(component, componentProps, children);
|
|
};
|
|
|
|
Arrow.contextTypes = {
|
|
popper: _propTypes2.default.object.isRequired
|
|
};
|
|
|
|
Arrow.propTypes = {
|
|
component: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
|
|
innerRef: _propTypes2.default.func,
|
|
children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
|
|
};
|
|
|
|
exports.default = Arrow;
|
|
});
|
|
|
|
unwrapExports(Arrow_1);
|
|
|
|
var reactPopper = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.Arrow = exports.Popper = exports.Target = exports.Manager = undefined;
|
|
|
|
var _Manager3 = _interopRequireDefault(Manager_1);
|
|
|
|
var _Target3 = _interopRequireDefault(Target_1);
|
|
|
|
var _Popper3 = _interopRequireDefault(Popper_1);
|
|
|
|
var _Arrow3 = _interopRequireDefault(Arrow_1);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
exports.Manager = _Manager3.default;
|
|
exports.Target = _Target3.default;
|
|
exports.Popper = _Popper3.default;
|
|
exports.Arrow = _Arrow3.default;
|
|
});
|
|
|
|
unwrapExports(reactPopper);
|
|
var reactPopper_1 = reactPopper.Arrow;
|
|
var reactPopper_2 = reactPopper.Popper;
|
|
var reactPopper_3 = reactPopper.Target;
|
|
var reactPopper_4 = reactPopper.Manager;
|
|
|
|
/* eslint react/no-find-dom-node: 0 */
|
|
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md
|
|
|
|
var propTypes$9 = {
|
|
disabled: propTypes$1.bool,
|
|
dropup: propTypes$1.bool,
|
|
group: propTypes$1.bool,
|
|
isOpen: propTypes$1.bool,
|
|
nav: propTypes$1.bool,
|
|
size: propTypes$1.string,
|
|
tag: propTypes$1.string,
|
|
toggle: propTypes$1.func,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$8 = {
|
|
isOpen: false,
|
|
dropup: false,
|
|
nav: false
|
|
};
|
|
|
|
var childContextTypes = {
|
|
toggle: propTypes$1.func.isRequired,
|
|
isOpen: propTypes$1.bool.isRequired,
|
|
dropup: propTypes$1.bool.isRequired
|
|
};
|
|
|
|
var Dropdown = function (_React$Component) {
|
|
inherits(Dropdown, _React$Component);
|
|
|
|
function Dropdown(props) {
|
|
classCallCheck(this, Dropdown);
|
|
|
|
var _this = possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, props));
|
|
|
|
_this.addEvents = _this.addEvents.bind(_this);
|
|
_this.handleDocumentClick = _this.handleDocumentClick.bind(_this);
|
|
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
|
|
_this.removeEvents = _this.removeEvents.bind(_this);
|
|
_this.toggle = _this.toggle.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Dropdown, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return {
|
|
toggle: this.props.toggle,
|
|
isOpen: this.props.isOpen,
|
|
dropup: this.props.dropup
|
|
};
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this.handleProps();
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.props.isOpen !== prevProps.isOpen) {
|
|
this.handleProps();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.removeEvents();
|
|
}
|
|
}, {
|
|
key: 'getContainer',
|
|
value: function getContainer() {
|
|
return ReactDOM.findDOMNode(this);
|
|
}
|
|
}, {
|
|
key: 'addEvents',
|
|
value: function addEvents() {
|
|
var _this2 = this;
|
|
|
|
['click', 'touchstart', 'keyup'].forEach(function (event) {
|
|
return document.addEventListener(event, _this2.handleDocumentClick, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'removeEvents',
|
|
value: function removeEvents() {
|
|
var _this3 = this;
|
|
|
|
['click', 'touchstart', 'keyup'].forEach(function (event) {
|
|
return document.removeEventListener(event, _this3.handleDocumentClick, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'handleDocumentClick',
|
|
value: function handleDocumentClick(e) {
|
|
if (e && (e.which === 3 || e.type === 'keyup' && e.which !== keyCodes.tab)) return;
|
|
var container = this.getContainer();
|
|
|
|
if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === keyCodes.tab)) {
|
|
return;
|
|
}
|
|
|
|
this.toggle(e);
|
|
}
|
|
}, {
|
|
key: 'handleKeyDown',
|
|
value: function handleKeyDown(e) {
|
|
if ([keyCodes.esc, keyCodes.up, keyCodes.down, keyCodes.space].indexOf(e.which) === -1 || /button/i.test(e.target.tagName) && e.which === keyCodes.space || /input|textarea/i.test(e.target.tagName)) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
if (this.props.disabled) return;
|
|
|
|
var container = this.getContainer();
|
|
|
|
if (e.which === keyCodes.space && this.props.isOpen && container !== e.target) {
|
|
e.target.click();
|
|
}
|
|
|
|
if (e.which === keyCodes.esc || !this.props.isOpen) {
|
|
this.toggle(e);
|
|
container.querySelector('[aria-expanded]').focus();
|
|
return;
|
|
}
|
|
|
|
var menuClass = mapToCssModules('dropdown-menu', this.props.cssModule);
|
|
var itemClass = mapToCssModules('dropdown-item', this.props.cssModule);
|
|
var disabledClass = mapToCssModules('disabled', this.props.cssModule);
|
|
|
|
var items = container.querySelectorAll('.' + menuClass + ' .' + itemClass + ':not(.' + disabledClass + ')');
|
|
|
|
if (!items.length) return;
|
|
|
|
var index = -1;
|
|
for (var i = 0; i < items.length; i += 1) {
|
|
if (items[i] === e.target) {
|
|
index = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (e.which === keyCodes.up && index > 0) {
|
|
index -= 1;
|
|
}
|
|
|
|
if (e.which === keyCodes.down && index < items.length - 1) {
|
|
index += 1;
|
|
}
|
|
|
|
if (index < 0) {
|
|
index = 0;
|
|
}
|
|
|
|
items[index].focus();
|
|
}
|
|
}, {
|
|
key: 'handleProps',
|
|
value: function handleProps() {
|
|
if (this.props.isOpen) {
|
|
this.addEvents();
|
|
} else {
|
|
this.removeEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'toggle',
|
|
value: function toggle(e) {
|
|
if (this.props.disabled) {
|
|
return e && e.preventDefault();
|
|
}
|
|
|
|
return this.props.toggle(e);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _classNames;
|
|
|
|
var _omit = omit(this.props, ['toggle', 'disabled']),
|
|
className = _omit.className,
|
|
cssModule = _omit.cssModule,
|
|
dropup = _omit.dropup,
|
|
isOpen = _omit.isOpen,
|
|
group = _omit.group,
|
|
size = _omit.size,
|
|
nav = _omit.nav,
|
|
attrs = objectWithoutProperties(_omit, ['className', 'cssModule', 'dropup', 'isOpen', 'group', 'size', 'nav']);
|
|
|
|
attrs.tag = attrs.tag || (nav ? 'li' : 'div');
|
|
|
|
var classes = mapToCssModules(classnames(className, (_classNames = {
|
|
'btn-group': group
|
|
}, defineProperty(_classNames, 'btn-group-' + size, !!size), defineProperty(_classNames, 'dropdown', !group), defineProperty(_classNames, 'show', isOpen), defineProperty(_classNames, 'dropup', dropup), defineProperty(_classNames, 'nav-item', nav), _classNames)), cssModule);
|
|
return React__default.createElement(reactPopper_4, _extends({}, attrs, { className: classes, onKeyDown: this.handleKeyDown }));
|
|
}
|
|
}]);
|
|
return Dropdown;
|
|
}(React__default.Component);
|
|
|
|
Dropdown.propTypes = propTypes$9;
|
|
Dropdown.defaultProps = defaultProps$8;
|
|
Dropdown.childContextTypes = childContextTypes;
|
|
|
|
function NavDropdown(props) {
|
|
warnOnce('The "NavDropdown" component has been deprecated.\nPlease use component "Dropdown" with nav prop.');
|
|
return React__default.createElement(Dropdown, _extends({ nav: true }, props));
|
|
}
|
|
|
|
var propTypes$10 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
innerRef: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
disabled: propTypes$1.bool,
|
|
active: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
onClick: propTypes$1.func,
|
|
href: propTypes$1.any
|
|
};
|
|
|
|
var defaultProps$9 = {
|
|
tag: 'a'
|
|
};
|
|
|
|
var NavLink = function (_React$Component) {
|
|
inherits(NavLink, _React$Component);
|
|
|
|
function NavLink(props) {
|
|
classCallCheck(this, NavLink);
|
|
|
|
var _this = possibleConstructorReturn(this, (NavLink.__proto__ || Object.getPrototypeOf(NavLink)).call(this, props));
|
|
|
|
_this.onClick = _this.onClick.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(NavLink, [{
|
|
key: 'onClick',
|
|
value: function onClick(e) {
|
|
if (this.props.disabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.props.href === '#') {
|
|
e.preventDefault();
|
|
}
|
|
|
|
if (this.props.onClick) {
|
|
this.props.onClick(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
className = _props.className,
|
|
cssModule = _props.cssModule,
|
|
active = _props.active,
|
|
Tag = _props.tag,
|
|
innerRef = _props.innerRef,
|
|
attributes = objectWithoutProperties(_props, ['className', 'cssModule', 'active', 'tag', 'innerRef']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'nav-link', {
|
|
disabled: attributes.disabled,
|
|
active: active
|
|
}), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { ref: innerRef, onClick: this.onClick, className: classes }));
|
|
}
|
|
}]);
|
|
return NavLink;
|
|
}(React__default.Component);
|
|
|
|
NavLink.propTypes = propTypes$10;
|
|
NavLink.defaultProps = defaultProps$9;
|
|
|
|
var propTypes$11 = {
|
|
tag: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$10 = {
|
|
tag: 'ol'
|
|
};
|
|
|
|
var Breadcrumb = function Breadcrumb(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'breadcrumb'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Breadcrumb.propTypes = propTypes$11;
|
|
Breadcrumb.defaultProps = defaultProps$10;
|
|
|
|
var propTypes$12 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
active: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$11 = {
|
|
tag: 'li'
|
|
};
|
|
|
|
var BreadcrumbItem = function BreadcrumbItem(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
active = props.active,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'active', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, active ? 'active' : false, 'breadcrumb-item'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
BreadcrumbItem.propTypes = propTypes$12;
|
|
BreadcrumbItem.defaultProps = defaultProps$11;
|
|
|
|
var propTypes$13 = {
|
|
active: propTypes$1.bool,
|
|
block: propTypes$1.bool,
|
|
color: propTypes$1.string,
|
|
disabled: propTypes$1.bool,
|
|
outline: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
innerRef: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
onClick: propTypes$1.func,
|
|
size: propTypes$1.string,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$12 = {
|
|
color: 'secondary',
|
|
tag: 'button'
|
|
};
|
|
|
|
var Button = function (_React$Component) {
|
|
inherits(Button, _React$Component);
|
|
|
|
function Button(props) {
|
|
classCallCheck(this, Button);
|
|
|
|
var _this = possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this, props));
|
|
|
|
_this.onClick = _this.onClick.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Button, [{
|
|
key: 'onClick',
|
|
value: function onClick(e) {
|
|
if (this.props.disabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.props.onClick) {
|
|
this.props.onClick(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
active = _props.active,
|
|
block = _props.block,
|
|
className = _props.className,
|
|
cssModule = _props.cssModule,
|
|
color = _props.color,
|
|
outline = _props.outline,
|
|
size = _props.size,
|
|
Tag = _props.tag,
|
|
innerRef = _props.innerRef,
|
|
attributes = objectWithoutProperties(_props, ['active', 'block', 'className', 'cssModule', 'color', 'outline', 'size', 'tag', 'innerRef']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'btn', 'btn' + (outline ? '-outline' : '') + '-' + color, size ? 'btn-' + size : false, block ? 'btn-block' : false, { active: active, disabled: this.props.disabled }), cssModule);
|
|
|
|
if (attributes.href && Tag === 'button') {
|
|
Tag = 'a';
|
|
}
|
|
|
|
return React__default.createElement(Tag, _extends({
|
|
type: Tag === 'button' && attributes.onClick ? 'button' : undefined
|
|
}, attributes, {
|
|
className: classes,
|
|
ref: innerRef,
|
|
onClick: this.onClick
|
|
}));
|
|
}
|
|
}]);
|
|
return Button;
|
|
}(React__default.Component);
|
|
|
|
Button.propTypes = propTypes$13;
|
|
Button.defaultProps = defaultProps$12;
|
|
|
|
var propTypes$14 = {
|
|
children: propTypes$1.node
|
|
};
|
|
|
|
var ButtonDropdown = function ButtonDropdown(props) {
|
|
return React__default.createElement(Dropdown, _extends({ group: true }, props));
|
|
};
|
|
|
|
ButtonDropdown.propTypes = propTypes$14;
|
|
|
|
var propTypes$15 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
'aria-label': propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
role: propTypes$1.string,
|
|
size: propTypes$1.string,
|
|
vertical: propTypes$1.bool
|
|
};
|
|
|
|
var defaultProps$13 = {
|
|
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 = objectWithoutProperties(props, ['className', 'cssModule', 'size', 'vertical', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, size ? 'btn-group-' + size : false, vertical ? 'btn-group-vertical' : 'btn-group'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ButtonGroup.propTypes = propTypes$15;
|
|
ButtonGroup.defaultProps = defaultProps$13;
|
|
|
|
var propTypes$16 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
'aria-label': propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
role: propTypes$1.string
|
|
};
|
|
|
|
var defaultProps$14 = {
|
|
tag: 'div',
|
|
role: 'toolbar'
|
|
};
|
|
|
|
var ButtonToolbar = function ButtonToolbar(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'btn-toolbar'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ButtonToolbar.propTypes = propTypes$16;
|
|
ButtonToolbar.defaultProps = defaultProps$14;
|
|
|
|
var propTypes$17 = {
|
|
children: propTypes$1.node,
|
|
active: propTypes$1.bool,
|
|
disabled: propTypes$1.bool,
|
|
divider: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
header: propTypes$1.bool,
|
|
onClick: propTypes$1.func,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
toggle: propTypes$1.bool
|
|
};
|
|
|
|
var contextTypes = {
|
|
toggle: propTypes$1.func
|
|
};
|
|
|
|
var defaultProps$15 = {
|
|
tag: 'button',
|
|
toggle: true
|
|
};
|
|
|
|
var DropdownItem = function (_React$Component) {
|
|
inherits(DropdownItem, _React$Component);
|
|
|
|
function DropdownItem(props) {
|
|
classCallCheck(this, DropdownItem);
|
|
|
|
var _this = possibleConstructorReturn(this, (DropdownItem.__proto__ || Object.getPrototypeOf(DropdownItem)).call(this, props));
|
|
|
|
_this.onClick = _this.onClick.bind(_this);
|
|
_this.getTabIndex = _this.getTabIndex.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(DropdownItem, [{
|
|
key: 'onClick',
|
|
value: function onClick(e) {
|
|
if (this.props.disabled || this.props.header || this.props.divider) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.props.onClick) {
|
|
this.props.onClick(e);
|
|
}
|
|
|
|
if (this.props.toggle) {
|
|
this.context.toggle(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getTabIndex',
|
|
value: function getTabIndex() {
|
|
if (this.props.disabled || this.props.header || this.props.divider) {
|
|
return '-1';
|
|
}
|
|
|
|
return '0';
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var tabIndex = this.getTabIndex();
|
|
|
|
var _omit = omit(this.props, ['toggle']),
|
|
className = _omit.className,
|
|
cssModule = _omit.cssModule,
|
|
divider = _omit.divider,
|
|
Tag = _omit.tag,
|
|
header = _omit.header,
|
|
active = _omit.active,
|
|
props = objectWithoutProperties(_omit, ['className', 'cssModule', 'divider', 'tag', 'header', 'active']);
|
|
|
|
var classes = mapToCssModules(classnames(className, {
|
|
disabled: props.disabled,
|
|
'dropdown-item': !divider && !header,
|
|
active: active,
|
|
'dropdown-header': header,
|
|
'dropdown-divider': divider
|
|
}), cssModule);
|
|
|
|
if (Tag === 'button') {
|
|
if (header) {
|
|
Tag = 'h6';
|
|
} else if (divider) {
|
|
Tag = 'div';
|
|
} else if (props.href) {
|
|
Tag = 'a';
|
|
}
|
|
}
|
|
|
|
return React__default.createElement(Tag, _extends({
|
|
type: Tag === 'button' && (props.onClick || this.props.toggle) ? 'button' : undefined
|
|
}, props, {
|
|
tabIndex: tabIndex,
|
|
className: classes,
|
|
onClick: this.onClick
|
|
}));
|
|
}
|
|
}]);
|
|
return DropdownItem;
|
|
}(React__default.Component);
|
|
|
|
DropdownItem.propTypes = propTypes$17;
|
|
DropdownItem.defaultProps = defaultProps$15;
|
|
DropdownItem.contextTypes = contextTypes;
|
|
|
|
var propTypes$18 = {
|
|
tag: propTypes$1.string,
|
|
children: propTypes$1.node.isRequired,
|
|
right: propTypes$1.bool,
|
|
flip: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$16 = {
|
|
tag: 'div',
|
|
flip: true
|
|
};
|
|
|
|
var contextTypes$1 = {
|
|
isOpen: propTypes$1.bool.isRequired,
|
|
dropup: propTypes$1.bool.isRequired
|
|
};
|
|
|
|
var noFlipModifier = { flip: { enabled: false } };
|
|
|
|
var DropdownMenu = function DropdownMenu(props, context) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
right = props.right,
|
|
tag = props.tag,
|
|
flip = props.flip,
|
|
attrs = objectWithoutProperties(props, ['className', 'cssModule', 'right', 'tag', 'flip']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'dropdown-menu', {
|
|
'dropdown-menu-right': right,
|
|
show: context.isOpen
|
|
}), cssModule);
|
|
|
|
var Tag = tag;
|
|
|
|
if (context.isOpen) {
|
|
Tag = reactPopper_2;
|
|
var position1 = context.dropup ? 'top' : 'bottom';
|
|
var position2 = right ? 'end' : 'start';
|
|
attrs.placement = position1 + '-' + position2;
|
|
attrs.component = tag;
|
|
attrs.modifiers = !flip ? noFlipModifier : undefined;
|
|
}
|
|
|
|
return React__default.createElement(Tag, _extends({
|
|
tabIndex: '-1',
|
|
role: 'menu'
|
|
}, attrs, {
|
|
'aria-hidden': !context.isOpen,
|
|
className: classes
|
|
}));
|
|
};
|
|
|
|
DropdownMenu.propTypes = propTypes$18;
|
|
DropdownMenu.defaultProps = defaultProps$16;
|
|
DropdownMenu.contextTypes = contextTypes$1;
|
|
|
|
var propTypes$19 = {
|
|
caret: propTypes$1.bool,
|
|
color: propTypes$1.string,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
disabled: propTypes$1.bool,
|
|
onClick: propTypes$1.func,
|
|
'aria-haspopup': propTypes$1.bool,
|
|
split: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
nav: propTypes$1.bool
|
|
};
|
|
|
|
var defaultProps$17 = {
|
|
'aria-haspopup': true,
|
|
color: 'secondary'
|
|
};
|
|
|
|
var contextTypes$2 = {
|
|
isOpen: propTypes$1.bool.isRequired,
|
|
toggle: propTypes$1.func.isRequired
|
|
};
|
|
|
|
var DropdownToggle = function (_React$Component) {
|
|
inherits(DropdownToggle, _React$Component);
|
|
|
|
function DropdownToggle(props) {
|
|
classCallCheck(this, DropdownToggle);
|
|
|
|
var _this = possibleConstructorReturn(this, (DropdownToggle.__proto__ || Object.getPrototypeOf(DropdownToggle)).call(this, props));
|
|
|
|
_this.onClick = _this.onClick.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(DropdownToggle, [{
|
|
key: 'onClick',
|
|
value: function onClick(e) {
|
|
if (this.props.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);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
className = _props.className,
|
|
color = _props.color,
|
|
cssModule = _props.cssModule,
|
|
caret = _props.caret,
|
|
split = _props.split,
|
|
nav = _props.nav,
|
|
tag = _props.tag,
|
|
props = objectWithoutProperties(_props, ['className', 'color', 'cssModule', 'caret', 'split', 'nav', 'tag']);
|
|
|
|
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 = props.children || React__default.createElement(
|
|
'span',
|
|
{ className: 'sr-only' },
|
|
ariaLabel
|
|
);
|
|
|
|
var Tag = void 0;
|
|
|
|
if (nav && !tag) {
|
|
Tag = 'a';
|
|
props.href = '#';
|
|
} else if (!tag) {
|
|
Tag = Button;
|
|
props.color = color;
|
|
props.cssModule = cssModule;
|
|
} else {
|
|
Tag = tag;
|
|
}
|
|
|
|
return React__default.createElement(reactPopper_3, _extends({}, props, {
|
|
className: classes,
|
|
component: Tag,
|
|
onClick: this.onClick,
|
|
'aria-expanded': this.context.isOpen,
|
|
children: children
|
|
}));
|
|
}
|
|
}]);
|
|
return DropdownToggle;
|
|
}(React__default.Component);
|
|
|
|
DropdownToggle.propTypes = propTypes$19;
|
|
DropdownToggle.defaultProps = defaultProps$17;
|
|
DropdownToggle.contextTypes = contextTypes$2;
|
|
|
|
var PropTypes$1 = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
exports.classNamesShape = exports.timeoutsShape = undefined;
|
|
exports.transitionTimeout = transitionTimeout;
|
|
|
|
var _propTypes2 = _interopRequireDefault(propTypes$1);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
function transitionTimeout(transitionType) {
|
|
var timeoutPropName = 'transition' + transitionType + 'Timeout';
|
|
var enabledPropName = 'transition' + transitionType;
|
|
|
|
return function (props) {
|
|
// If the transition is enabled
|
|
if (props[enabledPropName]) {
|
|
// If no timeout duration is provided
|
|
if (props[timeoutPropName] == null) {
|
|
return new Error(timeoutPropName + ' wasn\'t supplied to CSSTransitionGroup: ' + 'this can cause unreliable animations and won\'t be supported in ' + 'a future version of React. See ' + 'https://fb.me/react-animation-transition-group-timeout for more ' + 'information.');
|
|
|
|
// If the duration isn't a number
|
|
} else if (typeof props[timeoutPropName] !== 'number') {
|
|
return new Error(timeoutPropName + ' must be a number (in milliseconds)');
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
}
|
|
|
|
var timeoutsShape = exports.timeoutsShape = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({
|
|
enter: _propTypes2.default.number,
|
|
exit: _propTypes2.default.number
|
|
}).isRequired]);
|
|
|
|
var classNamesShape = exports.classNamesShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
|
|
enter: _propTypes2.default.string,
|
|
exit: _propTypes2.default.string,
|
|
active: _propTypes2.default.string
|
|
}), _propTypes2.default.shape({
|
|
enter: _propTypes2.default.string,
|
|
enterActive: _propTypes2.default.string,
|
|
exit: _propTypes2.default.string,
|
|
exitActive: _propTypes2.default.string
|
|
})]);
|
|
});
|
|
|
|
unwrapExports(PropTypes$1);
|
|
|
|
var Transition_1 = createCommonjsModule(function (module, exports) {
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
exports.EXITING = exports.ENTERED = exports.ENTERING = exports.EXITED = exports.UNMOUNTED = undefined;
|
|
|
|
var PropTypes = _interopRequireWildcard(propTypes$1);
|
|
|
|
var _react2 = _interopRequireDefault(React__default);
|
|
|
|
var _reactDom2 = _interopRequireDefault(ReactDOM);
|
|
|
|
function _interopRequireDefault(obj) {
|
|
return obj && obj.__esModule ? obj : { default: obj };
|
|
}
|
|
|
|
function _interopRequireWildcard(obj) {
|
|
if (obj && obj.__esModule) {
|
|
return obj;
|
|
} else {
|
|
var newObj = {};if (obj != null) {
|
|
for (var key in obj) {
|
|
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
|
|
}
|
|
}newObj.default = obj;return newObj;
|
|
}
|
|
}
|
|
|
|
function _objectWithoutProperties(obj, keys) {
|
|
var target = {};for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
|
|
}return target;
|
|
}
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _possibleConstructorReturn(self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}return call && ((typeof call === 'undefined' ? 'undefined' : _typeof(call)) === "object" || typeof call === "function") ? call : self;
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof(superClass)));
|
|
}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
}
|
|
|
|
var UNMOUNTED = exports.UNMOUNTED = 'unmounted';
|
|
var EXITED = exports.EXITED = 'exited';
|
|
var ENTERING = exports.ENTERING = 'entering';
|
|
var ENTERED = exports.ENTERED = 'entered';
|
|
var EXITING = exports.EXITING = 'exiting';
|
|
|
|
/**
|
|
* The Transition component lets you describe a transition from one component
|
|
* state to another _over time_ with a simple declarative API. Most commonly
|
|
* it's used to animate the mounting and unmounting of a component, but can also
|
|
* be used to describe in-place transition states as well.
|
|
*
|
|
* By default the `Transition` component does not alter the behavior of the
|
|
* component it renders, it only tracks "enter" and "exit" states for the components.
|
|
* It's up to you to give meaning and effect to those states. For example we can
|
|
* add styles to a component when it enters or exits:
|
|
*
|
|
* ```jsx
|
|
* import Transition from 'react-transition-group/Transition';
|
|
*
|
|
* const duration = 300;
|
|
*
|
|
* const defaultStyle = {
|
|
* transition: `opacity ${duration}ms ease-in-out`,
|
|
* opacity: 0,
|
|
* }
|
|
*
|
|
* const transitionStyles = {
|
|
* entering: { opacity: 0 },
|
|
* entered: { opacity: 1 },
|
|
* };
|
|
*
|
|
* const Fade = ({ in: inProp }) => (
|
|
* <Transition in={inProp} timeout={duration}>
|
|
* {(state) => (
|
|
* <div style={{
|
|
* ...defaultStyle,
|
|
* ...transitionStyles[state]
|
|
* }}>
|
|
* I'm A fade Transition!
|
|
* </div>
|
|
* )}
|
|
* </Transition>
|
|
* );
|
|
* ```
|
|
*
|
|
* As noted the `Transition` component doesn't _do_ anything by itself to its child component.
|
|
* What it does do is track transition states over time so you can update the
|
|
* component (such as by adding styles or classes) when it changes states.
|
|
*
|
|
* There are 4 main states a Transition can be in:
|
|
* - `ENTERING`
|
|
* - `ENTERED`
|
|
* - `EXITING`
|
|
* - `EXITED`
|
|
*
|
|
* Transition state is toggled via the `in` prop. When `true` the component begins the
|
|
* "Enter" stage. During this stage, the component will shift from its current transition state,
|
|
* to `'entering'` for the duration of the transition and then to the `'entered'` stage once
|
|
* it's complete. Let's take the following example:
|
|
*
|
|
* ```jsx
|
|
* state= { in: false };
|
|
*
|
|
* toggleEnterState = () => {
|
|
* this.setState({ in: true });
|
|
* }
|
|
*
|
|
* render() {
|
|
* return (
|
|
* <div>
|
|
* <Transition in={this.state.in} timeout={500} />
|
|
* <button onClick={this.toggleEnterState}>Click to Enter</button>
|
|
* </div>
|
|
* );
|
|
* }
|
|
* ```
|
|
*
|
|
* When the button is clicked the component will shift to the `'entering'` state and
|
|
* stay there for 500ms (the value of `timeout`) when finally switches to `'entered'`.
|
|
*
|
|
* When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
|
|
*/
|
|
|
|
var Transition = function (_React$Component) {
|
|
_inherits(Transition, _React$Component);
|
|
|
|
function Transition(props, context) {
|
|
_classCallCheck(this, Transition);
|
|
|
|
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
|
|
|
|
var parentGroup = context.transitionGroup;
|
|
// In the context of a TransitionGroup all enters are really appears
|
|
var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
|
|
|
|
var initialStatus = void 0;
|
|
_this.nextStatus = null;
|
|
|
|
if (props.in) {
|
|
if (appear) {
|
|
initialStatus = EXITED;
|
|
_this.nextStatus = ENTERING;
|
|
} else {
|
|
initialStatus = ENTERED;
|
|
}
|
|
} else {
|
|
if (props.unmountOnExit || props.mountOnEnter) {
|
|
initialStatus = UNMOUNTED;
|
|
} else {
|
|
initialStatus = EXITED;
|
|
}
|
|
}
|
|
|
|
_this.state = { status: initialStatus };
|
|
|
|
_this.nextCallback = null;
|
|
return _this;
|
|
}
|
|
|
|
Transition.prototype.getChildContext = function getChildContext() {
|
|
return { transitionGroup: null }; // allows for nested Transitions
|
|
};
|
|
|
|
Transition.prototype.componentDidMount = function componentDidMount() {
|
|
this.updateStatus(true);
|
|
};
|
|
|
|
Transition.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
|
var _ref = this.pendingState || this.state,
|
|
status = _ref.status;
|
|
|
|
if (nextProps.in) {
|
|
if (status === UNMOUNTED) {
|
|
this.setState({ status: EXITED });
|
|
}
|
|
if (status !== ENTERING && status !== ENTERED) {
|
|
this.nextStatus = ENTERING;
|
|
}
|
|
} else {
|
|
if (status === ENTERING || status === ENTERED) {
|
|
this.nextStatus = EXITING;
|
|
}
|
|
}
|
|
};
|
|
|
|
Transition.prototype.componentDidUpdate = function componentDidUpdate() {
|
|
this.updateStatus();
|
|
};
|
|
|
|
Transition.prototype.componentWillUnmount = function componentWillUnmount() {
|
|
this.cancelNextCallback();
|
|
};
|
|
|
|
Transition.prototype.getTimeouts = function getTimeouts() {
|
|
var timeout = this.props.timeout;
|
|
|
|
var exit = void 0,
|
|
enter = void 0,
|
|
appear = void 0;
|
|
|
|
exit = enter = appear = timeout;
|
|
|
|
if (timeout != null && typeof timeout !== 'number') {
|
|
exit = timeout.exit;
|
|
enter = timeout.enter;
|
|
appear = timeout.appear;
|
|
}
|
|
return { exit: exit, enter: enter, appear: appear };
|
|
};
|
|
|
|
Transition.prototype.updateStatus = function updateStatus() {
|
|
var mounting = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
|
|
var nextStatus = this.nextStatus;
|
|
|
|
if (nextStatus !== null) {
|
|
this.nextStatus = null;
|
|
// nextStatus will always be ENTERING or EXITING.
|
|
this.cancelNextCallback();
|
|
var node = _reactDom2.default.findDOMNode(this);
|
|
|
|
if (nextStatus === ENTERING) {
|
|
this.performEnter(node, mounting);
|
|
} else {
|
|
this.performExit(node);
|
|
}
|
|
} else if (this.props.unmountOnExit && this.state.status === EXITED) {
|
|
this.setState({ status: UNMOUNTED });
|
|
}
|
|
};
|
|
|
|
Transition.prototype.performEnter = function performEnter(node, mounting) {
|
|
var _this2 = this;
|
|
|
|
var enter = this.props.enter;
|
|
|
|
var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;
|
|
|
|
var timeouts = this.getTimeouts();
|
|
|
|
// no enter animation skip right to ENTERED
|
|
// if we are mounting and running this it means appear _must_ be set
|
|
if (!mounting && !enter) {
|
|
this.safeSetState({ status: ENTERED }, function () {
|
|
_this2.props.onEntered(node);
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.props.onEnter(node, appearing);
|
|
|
|
this.safeSetState({ status: ENTERING }, function () {
|
|
_this2.props.onEntering(node, appearing);
|
|
|
|
// FIXME: appear timeout?
|
|
_this2.onTransitionEnd(node, timeouts.enter, function () {
|
|
_this2.safeSetState({ status: ENTERED }, function () {
|
|
_this2.props.onEntered(node, appearing);
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
Transition.prototype.performExit = function performExit(node) {
|
|
var _this3 = this;
|
|
|
|
var exit = this.props.exit;
|
|
|
|
var timeouts = this.getTimeouts();
|
|
|
|
// no exit animation skip right to EXITED
|
|
if (!exit) {
|
|
this.safeSetState({ status: EXITED }, function () {
|
|
_this3.props.onExited(node);
|
|
});
|
|
return;
|
|
}
|
|
this.props.onExit(node);
|
|
|
|
this.safeSetState({ status: EXITING }, function () {
|
|
_this3.props.onExiting(node);
|
|
|
|
_this3.onTransitionEnd(node, timeouts.exit, function () {
|
|
_this3.safeSetState({ status: EXITED }, function () {
|
|
_this3.props.onExited(node);
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
Transition.prototype.cancelNextCallback = function cancelNextCallback() {
|
|
if (this.nextCallback !== null) {
|
|
this.nextCallback.cancel();
|
|
this.nextCallback = null;
|
|
}
|
|
};
|
|
|
|
Transition.prototype.safeSetState = function safeSetState(nextState, callback) {
|
|
var _this4 = this;
|
|
|
|
// We need to track pending updates for instances where a cWRP fires quickly
|
|
// after cDM and before the state flushes, which would double trigger a
|
|
// transition
|
|
this.pendingState = nextState;
|
|
|
|
// This shouldn't be necessary, but there are weird race conditions with
|
|
// setState callbacks and unmounting in testing, so always make sure that
|
|
// we can cancel any pending setState callbacks after we unmount.
|
|
callback = this.setNextCallback(callback);
|
|
this.setState(nextState, function () {
|
|
_this4.pendingState = null;
|
|
callback();
|
|
});
|
|
};
|
|
|
|
Transition.prototype.setNextCallback = function setNextCallback(callback) {
|
|
var _this5 = this;
|
|
|
|
var active = true;
|
|
|
|
this.nextCallback = function (event) {
|
|
if (active) {
|
|
active = false;
|
|
_this5.nextCallback = null;
|
|
|
|
callback(event);
|
|
}
|
|
};
|
|
|
|
this.nextCallback.cancel = function () {
|
|
active = false;
|
|
};
|
|
|
|
return this.nextCallback;
|
|
};
|
|
|
|
Transition.prototype.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
|
|
this.setNextCallback(handler);
|
|
|
|
if (node) {
|
|
if (this.props.addEndListener) {
|
|
this.props.addEndListener(node, this.nextCallback);
|
|
}
|
|
if (timeout != null) {
|
|
setTimeout(this.nextCallback, timeout);
|
|
}
|
|
} else {
|
|
setTimeout(this.nextCallback, 0);
|
|
}
|
|
};
|
|
|
|
Transition.prototype.render = function render() {
|
|
var status = this.state.status;
|
|
if (status === UNMOUNTED) {
|
|
return null;
|
|
}
|
|
|
|
var _props = this.props,
|
|
children = _props.children,
|
|
childProps = _objectWithoutProperties(_props, ['children']);
|
|
// filter props for Transtition
|
|
|
|
|
|
delete childProps.in;
|
|
delete childProps.mountOnEnter;
|
|
delete childProps.unmountOnExit;
|
|
delete childProps.appear;
|
|
delete childProps.enter;
|
|
delete childProps.exit;
|
|
delete childProps.timeout;
|
|
delete childProps.addEndListener;
|
|
delete childProps.onEnter;
|
|
delete childProps.onEntering;
|
|
delete childProps.onEntered;
|
|
delete childProps.onExit;
|
|
delete childProps.onExiting;
|
|
delete childProps.onExited;
|
|
|
|
if (typeof children === 'function') {
|
|
return children(status, childProps);
|
|
}
|
|
|
|
var child = _react2.default.Children.only(children);
|
|
return _react2.default.cloneElement(child, childProps);
|
|
};
|
|
|
|
return Transition;
|
|
}(_react2.default.Component);
|
|
|
|
Transition.contextTypes = {
|
|
transitionGroup: PropTypes.object
|
|
};
|
|
Transition.childContextTypes = {
|
|
transitionGroup: function transitionGroup() {}
|
|
};
|
|
|
|
Transition.propTypes = {};
|
|
|
|
// Name the function so it is clearer in the documentation
|
|
function noop() {}
|
|
|
|
Transition.defaultProps = {
|
|
in: false,
|
|
mountOnEnter: false,
|
|
unmountOnExit: false,
|
|
appear: false,
|
|
enter: true,
|
|
exit: true,
|
|
|
|
onEnter: noop,
|
|
onEntering: noop,
|
|
onEntered: noop,
|
|
|
|
onExit: noop,
|
|
onExiting: noop,
|
|
onExited: noop
|
|
};
|
|
|
|
Transition.UNMOUNTED = 0;
|
|
Transition.EXITED = 1;
|
|
Transition.ENTERING = 2;
|
|
Transition.ENTERED = 3;
|
|
Transition.EXITING = 4;
|
|
|
|
exports.default = Transition;
|
|
});
|
|
|
|
var Transition = unwrapExports(Transition_1);
|
|
|
|
var propTypes$20 = _extends({}, Transition.propTypes, {
|
|
children: propTypes$1.oneOfType([propTypes$1.arrayOf(propTypes$1.node), propTypes$1.node]),
|
|
tag: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func]),
|
|
baseClass: propTypes$1.string,
|
|
baseClassActive: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
});
|
|
|
|
var defaultProps$18 = _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,
|
|
otherProps = objectWithoutProperties(props, ['tag', 'baseClass', 'baseClassActive', 'className', 'cssModule', 'children']);
|
|
|
|
// In NODE_ENV=production the Transition.propTypes are wrapped which results in an
|
|
// empty object "{}". This is the result of the `react-transition-group` babel
|
|
// configuration settings. Therefore, to ensure that production builds work without
|
|
// error, we can either explicitly define keys or use the Transition.defaultProps.
|
|
// Using the Transition.defaultProps excludes any required props. Thus, the best
|
|
// solution is to explicitly define required props in our utilities and reference these.
|
|
// This also gives us more flexibility in the future to remove the prop-types
|
|
// dependency in distribution builds (Similar to how `react-transition-group` does).
|
|
// Note: Without omitting the `react-transition-group` props, the resulting child
|
|
// Tag component would inherit the Transition properties as attributes for the HTML
|
|
// element which results in errors/warnings for non-valid attributes.
|
|
|
|
var transitionProps = pick(otherProps, TransitionPropTypeKeys);
|
|
var childProps = omit(otherProps, TransitionPropTypeKeys);
|
|
|
|
return React__default.createElement(
|
|
Transition,
|
|
transitionProps,
|
|
function (status) {
|
|
var isActive = status === 'entered';
|
|
var classes = mapToCssModules(classnames(className, baseClass, isActive && baseClassActive), cssModule);
|
|
return React__default.createElement(
|
|
Tag,
|
|
_extends({ className: classes }, childProps),
|
|
children
|
|
);
|
|
}
|
|
);
|
|
}
|
|
|
|
Fade.propTypes = propTypes$20;
|
|
Fade.defaultProps = defaultProps$18;
|
|
|
|
var propTypes$21 = {
|
|
color: propTypes$1.string,
|
|
pill: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$19 = {
|
|
color: 'secondary',
|
|
pill: false,
|
|
tag: 'span'
|
|
};
|
|
|
|
var Badge = function Badge(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
color = props.color,
|
|
pill = props.pill,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'color', 'pill', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'badge', 'badge-' + color, pill ? 'badge-pill' : false), cssModule);
|
|
|
|
if (attributes.href && Tag === 'span') {
|
|
Tag = 'a';
|
|
}
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Badge.propTypes = propTypes$21;
|
|
Badge.defaultProps = defaultProps$19;
|
|
|
|
var propTypes$22 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
inverse: propTypes$1.bool,
|
|
color: propTypes$1.string,
|
|
block: deprecated(propTypes$1.bool, 'Please use the props "body"'),
|
|
body: propTypes$1.bool,
|
|
outline: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$20 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var Card = function Card(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
color = props.color,
|
|
block = props.block,
|
|
body = props.body,
|
|
inverse = props.inverse,
|
|
outline = props.outline,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'color', 'block', 'body', 'inverse', 'outline', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card', inverse ? 'text-white' : false, block || body ? 'card-body' : false, color ? (outline ? 'border' : 'bg') + '-' + color : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Card.propTypes = propTypes$22;
|
|
Card.defaultProps = defaultProps$20;
|
|
|
|
var propTypes$23 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$21 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardGroup = function CardGroup(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-group'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardGroup.propTypes = propTypes$23;
|
|
CardGroup.defaultProps = defaultProps$21;
|
|
|
|
var propTypes$24 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$22 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardDeck = function CardDeck(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-deck'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardDeck.propTypes = propTypes$24;
|
|
CardDeck.defaultProps = defaultProps$22;
|
|
|
|
var propTypes$25 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$23 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardColumns = function CardColumns(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-columns'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardColumns.propTypes = propTypes$25;
|
|
CardColumns.defaultProps = defaultProps$23;
|
|
|
|
var propTypes$26 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$24 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardBody = function CardBody(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-body'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardBody.propTypes = propTypes$26;
|
|
CardBody.defaultProps = defaultProps$24;
|
|
|
|
function CardBlock(props) {
|
|
warnOnce('The "CardBlock" component has been deprecated.\nPlease use component "CardBody".');
|
|
return React__default.createElement(CardBody, props);
|
|
}
|
|
|
|
var propTypes$27 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
innerRef: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$25 = {
|
|
tag: 'a'
|
|
};
|
|
|
|
var CardLink = function CardLink(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
innerRef = props.innerRef,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag', 'innerRef']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-link'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { ref: innerRef, className: classes }));
|
|
};
|
|
|
|
CardLink.propTypes = propTypes$27;
|
|
CardLink.defaultProps = defaultProps$25;
|
|
|
|
var propTypes$28 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$26 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardFooter = function CardFooter(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-footer'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardFooter.propTypes = propTypes$28;
|
|
CardFooter.defaultProps = defaultProps$26;
|
|
|
|
var propTypes$29 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$27 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardHeader = function CardHeader(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-header'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardHeader.propTypes = propTypes$29;
|
|
CardHeader.defaultProps = defaultProps$27;
|
|
|
|
var propTypes$30 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
top: propTypes$1.bool,
|
|
bottom: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$28 = {
|
|
tag: 'img'
|
|
};
|
|
|
|
var CardImg = function CardImg(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
top = props.top,
|
|
bottom = props.bottom,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(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 React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardImg.propTypes = propTypes$30;
|
|
CardImg.defaultProps = defaultProps$28;
|
|
|
|
var propTypes$31 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$29 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var CardImgOverlay = function CardImgOverlay(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-img-overlay'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardImgOverlay.propTypes = propTypes$31;
|
|
CardImgOverlay.defaultProps = defaultProps$29;
|
|
|
|
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 React__default.createElement(
|
|
'div',
|
|
{ className: classes },
|
|
React__default.createElement(
|
|
'h3',
|
|
null,
|
|
captionHeader
|
|
),
|
|
React__default.createElement(
|
|
'p',
|
|
null,
|
|
captionText
|
|
)
|
|
);
|
|
};
|
|
|
|
CarouselCaption.propTypes = {
|
|
captionHeader: propTypes$1.string,
|
|
captionText: propTypes$1.string.isRequired,
|
|
cssModule: propTypes$1.object,
|
|
className: propTypes$1.string
|
|
};
|
|
|
|
var CarouselItem = function (_React$Component) {
|
|
inherits(CarouselItem, _React$Component);
|
|
|
|
function CarouselItem(props) {
|
|
classCallCheck(this, CarouselItem);
|
|
|
|
var _this = possibleConstructorReturn(this, (CarouselItem.__proto__ || Object.getPrototypeOf(CarouselItem)).call(this, props));
|
|
|
|
_this.state = {
|
|
startAnimation: false
|
|
};
|
|
|
|
_this.onEnter = _this.onEnter.bind(_this);
|
|
_this.onEntering = _this.onEntering.bind(_this);
|
|
_this.onExit = _this.onExit.bind(_this);
|
|
_this.onExiting = _this.onExiting.bind(_this);
|
|
_this.onExited = _this.onExited.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(CarouselItem, [{
|
|
key: 'onEnter',
|
|
value: function onEnter(node, isAppearing) {
|
|
this.setState({ startAnimation: false });
|
|
this.props.onEnter(node, isAppearing);
|
|
}
|
|
}, {
|
|
key: 'onEntering',
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: 'onExit',
|
|
value: function onExit(node) {
|
|
this.setState({ startAnimation: false });
|
|
this.props.onExit(node);
|
|
}
|
|
}, {
|
|
key: 'onExiting',
|
|
value: function onExiting(node) {
|
|
this.setState({ startAnimation: true });
|
|
node.dispatchEvent(new CustomEvent('slide.bs.carousel'));
|
|
this.props.onExiting(node);
|
|
}
|
|
}, {
|
|
key: 'onExited',
|
|
value: function onExited(node) {
|
|
node.dispatchEvent(new CustomEvent('slid.bs.carousel'));
|
|
this.props.onExited(node);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
src = _props.src,
|
|
altText = _props.altText,
|
|
isIn = _props.in,
|
|
children = _props.children,
|
|
cssModule = _props.cssModule,
|
|
slide = _props.slide,
|
|
Tag = _props.tag,
|
|
className = _props.className,
|
|
transitionProps = objectWithoutProperties(_props, ['src', 'altText', 'in', 'children', 'cssModule', 'slide', 'tag', 'className']);
|
|
|
|
var imgClasses = mapToCssModules(classnames(className, 'd-block', 'img-fluid'), cssModule);
|
|
|
|
return React__default.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('carousel-item', isActive && 'active', directionClassName, orderClassName), cssModule);
|
|
|
|
return React__default.createElement(
|
|
'div',
|
|
{ className: itemClasses },
|
|
React__default.createElement(Tag, { className: imgClasses, src: src, alt: altText }),
|
|
children
|
|
);
|
|
}
|
|
);
|
|
}
|
|
}]);
|
|
return CarouselItem;
|
|
}(React__default.Component);
|
|
|
|
CarouselItem.propTypes = _extends({}, Transition.propTypes, {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
in: propTypes$1.bool,
|
|
src: propTypes$1.string,
|
|
altText: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
children: propTypes$1.shape({
|
|
type: propTypes$1.oneOf([CarouselCaption])
|
|
}),
|
|
slide: propTypes$1.bool,
|
|
className: propTypes$1.string
|
|
});
|
|
|
|
CarouselItem.defaultProps = _extends({}, Transition.defaultProps, {
|
|
tag: 'img',
|
|
timeout: TransitionTimeouts.Carousel,
|
|
slide: true
|
|
});
|
|
|
|
CarouselItem.contextTypes = {
|
|
direction: propTypes$1.string
|
|
};
|
|
|
|
var Carousel = function (_React$Component) {
|
|
inherits(Carousel, _React$Component);
|
|
|
|
function Carousel(props) {
|
|
classCallCheck(this, Carousel);
|
|
|
|
var _this = possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props));
|
|
|
|
_this.handleKeyPress = _this.handleKeyPress.bind(_this);
|
|
_this.renderItems = _this.renderItems.bind(_this);
|
|
_this.hoverStart = _this.hoverStart.bind(_this);
|
|
_this.hoverEnd = _this.hoverEnd.bind(_this);
|
|
_this.state = { direction: 'right' };
|
|
return _this;
|
|
}
|
|
|
|
createClass(Carousel, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return { direction: this.state.direction };
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: 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);
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
this.setInterval(nextProps);
|
|
// Calculate the direction to turn
|
|
if (this.props.activeIndex + 1 === nextProps.activeIndex) {
|
|
this.setState({ direction: 'right' });
|
|
} else if (this.props.activeIndex - 1 === nextProps.activeIndex) {
|
|
this.setState({ direction: 'left' });
|
|
} else if (this.props.activeIndex > nextProps.activeIndex) {
|
|
this.setState({ direction: 'right' });
|
|
} else if (this.props.activeIndex !== nextProps.activeIndex) {
|
|
this.setState({ direction: 'left' });
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.clearInterval();
|
|
document.removeEventListener('keyup', this.handleKeyPress);
|
|
}
|
|
}, {
|
|
key: 'setInterval',
|
|
value: function (_setInterval) {
|
|
function setInterval() {
|
|
return _setInterval.apply(this, arguments);
|
|
}
|
|
|
|
setInterval.toString = function () {
|
|
return _setInterval.toString();
|
|
};
|
|
|
|
return setInterval;
|
|
}(function () {
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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));
|
|
}
|
|
})
|
|
}, {
|
|
key: 'clearInterval',
|
|
value: function (_clearInterval) {
|
|
function clearInterval() {
|
|
return _clearInterval.apply(this, arguments);
|
|
}
|
|
|
|
clearInterval.toString = function () {
|
|
return _clearInterval.toString();
|
|
};
|
|
|
|
return clearInterval;
|
|
}(function () {
|
|
clearInterval(this.cycleInterval);
|
|
})
|
|
}, {
|
|
key: 'hoverStart',
|
|
value: function hoverStart() {
|
|
if (this.props.pause === 'hover') {
|
|
this.clearInterval();
|
|
}
|
|
if (this.props.mouseEnter) {
|
|
var _props;
|
|
|
|
(_props = this.props).mouseEnter.apply(_props, arguments);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'hoverEnd',
|
|
value: function hoverEnd() {
|
|
if (this.props.pause === 'hover') {
|
|
this.setInterval();
|
|
}
|
|
if (this.props.mouseLeave) {
|
|
var _props2;
|
|
|
|
(_props2 = this.props).mouseLeave.apply(_props2, arguments);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'handleKeyPress',
|
|
value: function handleKeyPress(evt) {
|
|
if (this.props.keyboard) {
|
|
if (evt.keyCode === 37) {
|
|
this.props.previous();
|
|
} else if (evt.keyCode === 39) {
|
|
this.props.next();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'renderItems',
|
|
value: function renderItems(carouselItems, className) {
|
|
var _this2 = this;
|
|
|
|
var slide = this.props.slide;
|
|
|
|
return React__default.createElement(
|
|
'div',
|
|
{ role: 'listbox', className: className },
|
|
carouselItems.map(function (item, index) {
|
|
var isIn = index === _this2.props.activeIndex;
|
|
return React__default.cloneElement(item, {
|
|
in: isIn,
|
|
slide: slide
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props3 = this.props,
|
|
children = _props3.children,
|
|
cssModule = _props3.cssModule,
|
|
slide = _props3.slide,
|
|
className = _props3.className;
|
|
|
|
var outerClasses = mapToCssModules(classnames(className, 'carousel', slide && 'slide'), cssModule);
|
|
|
|
var innerClasses = mapToCssModules(classnames('carousel-inner'), cssModule);
|
|
|
|
var slidesOnly = children.every(function (child) {
|
|
return child.type === CarouselItem;
|
|
});
|
|
|
|
// Rendering only slides
|
|
if (slidesOnly) {
|
|
return React__default.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 React__default.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 carouselItems = children[1];
|
|
var controlLeft = children[2];
|
|
var controlRight = children[3];
|
|
|
|
return React__default.createElement(
|
|
'div',
|
|
{ className: outerClasses, onMouseEnter: this.hoverStart, onMouseLeave: this.hoverEnd },
|
|
indicators,
|
|
this.renderItems(carouselItems, innerClasses),
|
|
controlLeft,
|
|
controlRight
|
|
);
|
|
}
|
|
}]);
|
|
return Carousel;
|
|
}(React__default.Component);
|
|
|
|
Carousel.propTypes = {
|
|
// the current active slide of the carousel
|
|
activeIndex: propTypes$1.number,
|
|
// a function which should advance the carousel to the next slide (via activeIndex)
|
|
next: propTypes$1.func.isRequired,
|
|
// a function which should advance the carousel to the previous slide (via activeIndex)
|
|
previous: propTypes$1.func.isRequired,
|
|
// controls if the left and right arrow keys should control the carousel
|
|
keyboard: propTypes$1.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$1.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$1.oneOf(['carousel']),
|
|
// the interval at which the carousel automatically cycles (default: 5000)
|
|
// eslint-disable-next-line react/no-unused-prop-types
|
|
interval: propTypes$1.oneOfType([propTypes$1.number, propTypes$1.string, propTypes$1.bool]),
|
|
children: propTypes$1.array,
|
|
// called when the mouse enters the Carousel
|
|
mouseEnter: propTypes$1.func,
|
|
// called when the mouse exits the Carousel
|
|
mouseLeave: propTypes$1.func,
|
|
// controls whether the slide animation on the Carousel works or not
|
|
slide: propTypes$1.bool,
|
|
cssModule: propTypes$1.object,
|
|
className: propTypes$1.string
|
|
};
|
|
|
|
Carousel.defaultProps = {
|
|
interval: 5000,
|
|
pause: 'hover',
|
|
keyboard: true,
|
|
slide: true
|
|
};
|
|
|
|
Carousel.childContextTypes = {
|
|
direction: propTypes$1.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 React__default.createElement(
|
|
'a',
|
|
{
|
|
className: anchorClasses,
|
|
role: 'button',
|
|
tabIndex: '0',
|
|
onClick: function onClick(e) {
|
|
e.preventDefault();
|
|
onClickHandler();
|
|
}
|
|
},
|
|
React__default.createElement('span', { className: iconClasses, 'aria-hidden': 'true' }),
|
|
React__default.createElement(
|
|
'span',
|
|
{ className: screenReaderClasses },
|
|
directionText || direction
|
|
)
|
|
);
|
|
};
|
|
|
|
CarouselControl.propTypes = {
|
|
direction: propTypes$1.oneOf(['prev', 'next']).isRequired,
|
|
onClickHandler: propTypes$1.func.isRequired,
|
|
cssModule: propTypes$1.object,
|
|
directionText: propTypes$1.string,
|
|
className: propTypes$1.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 React__default.createElement('li', {
|
|
key: '' + (item.key || item.src) + item.caption + item.altText,
|
|
onClick: function onClick(e) {
|
|
e.preventDefault();
|
|
onClickHandler(idx);
|
|
},
|
|
className: indicatorClasses
|
|
});
|
|
});
|
|
|
|
return React__default.createElement(
|
|
'ol',
|
|
{ className: listClasses },
|
|
indicators
|
|
);
|
|
};
|
|
|
|
CarouselIndicators.propTypes = {
|
|
items: propTypes$1.array.isRequired,
|
|
activeIndex: propTypes$1.number.isRequired,
|
|
cssModule: propTypes$1.object,
|
|
onClickHandler: propTypes$1.func.isRequired,
|
|
className: propTypes$1.string
|
|
};
|
|
|
|
var propTypes$32 = {
|
|
items: propTypes$1.array.isRequired,
|
|
indicators: propTypes$1.bool,
|
|
controls: propTypes$1.bool,
|
|
autoPlay: propTypes$1.bool,
|
|
activeIndex: propTypes$1.number,
|
|
next: propTypes$1.func,
|
|
previous: propTypes$1.func,
|
|
goToIndex: propTypes$1.func
|
|
};
|
|
|
|
var UncontrolledCarousel = function (_Component) {
|
|
inherits(UncontrolledCarousel, _Component);
|
|
|
|
function UncontrolledCarousel(props) {
|
|
classCallCheck(this, UncontrolledCarousel);
|
|
|
|
var _this = possibleConstructorReturn(this, (UncontrolledCarousel.__proto__ || Object.getPrototypeOf(UncontrolledCarousel)).call(this, props));
|
|
|
|
_this.animating = false;
|
|
_this.state = { activeIndex: 0 };
|
|
_this.next = _this.next.bind(_this);
|
|
_this.previous = _this.previous.bind(_this);
|
|
_this.goToIndex = _this.goToIndex.bind(_this);
|
|
_this.onExiting = _this.onExiting.bind(_this);
|
|
_this.onExited = _this.onExited.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(UncontrolledCarousel, [{
|
|
key: 'onExiting',
|
|
value: function onExiting() {
|
|
this.animating = true;
|
|
}
|
|
}, {
|
|
key: 'onExited',
|
|
value: function onExited() {
|
|
this.animating = false;
|
|
}
|
|
}, {
|
|
key: 'next',
|
|
value: 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 });
|
|
}
|
|
}, {
|
|
key: 'previous',
|
|
value: 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 });
|
|
}
|
|
}, {
|
|
key: 'goToIndex',
|
|
value: function goToIndex(newIndex) {
|
|
if (this.animating) return;
|
|
this.setState({ activeIndex: newIndex });
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
autoPlay = _props.autoPlay,
|
|
indicators = _props.indicators,
|
|
controls = _props.controls,
|
|
items = _props.items,
|
|
goToIndex = _props.goToIndex,
|
|
props = objectWithoutProperties(_props, ['autoPlay', 'indicators', 'controls', 'items', 'goToIndex']);
|
|
var activeIndex = this.state.activeIndex;
|
|
|
|
|
|
var slides = items.map(function (item) {
|
|
return React__default.createElement(
|
|
CarouselItem,
|
|
{
|
|
onExiting: _this2.onExiting,
|
|
onExited: _this2.onExited,
|
|
key: item.src,
|
|
src: item.src,
|
|
altText: item.altText
|
|
},
|
|
React__default.createElement(CarouselCaption, { captionText: item.caption, captionHeader: item.caption })
|
|
);
|
|
});
|
|
|
|
return React__default.createElement(
|
|
Carousel,
|
|
_extends({
|
|
activeIndex: activeIndex,
|
|
next: this.next,
|
|
previous: this.previous,
|
|
ride: autoPlay ? 'carousel' : undefined
|
|
}, props),
|
|
indicators && React__default.createElement(CarouselIndicators, {
|
|
items: items,
|
|
activeIndex: props.activeIndex || activeIndex,
|
|
onClickHandler: goToIndex || this.goToIndex
|
|
}),
|
|
slides,
|
|
controls && React__default.createElement(CarouselControl, {
|
|
direction: 'prev',
|
|
directionText: 'Previous',
|
|
onClickHandler: props.previous || this.previous
|
|
}),
|
|
controls && React__default.createElement(CarouselControl, {
|
|
direction: 'next',
|
|
directionText: 'Next',
|
|
onClickHandler: props.next || this.next
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return UncontrolledCarousel;
|
|
}(React.Component);
|
|
|
|
UncontrolledCarousel.propTypes = propTypes$32;
|
|
UncontrolledCarousel.defaultProps = {
|
|
controls: true,
|
|
indicators: true,
|
|
autoPlay: true
|
|
};
|
|
|
|
var propTypes$33 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$30 = {
|
|
tag: 'h6'
|
|
};
|
|
|
|
var CardSubtitle = function CardSubtitle(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-subtitle'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardSubtitle.propTypes = propTypes$33;
|
|
CardSubtitle.defaultProps = defaultProps$30;
|
|
|
|
var propTypes$34 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$31 = {
|
|
tag: 'p'
|
|
};
|
|
|
|
var CardText = function CardText(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-text'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardText.propTypes = propTypes$34;
|
|
CardText.defaultProps = defaultProps$31;
|
|
|
|
var propTypes$35 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$32 = {
|
|
tag: 'h4'
|
|
};
|
|
|
|
var CardTitle = function CardTitle(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'card-title'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
CardTitle.propTypes = propTypes$35;
|
|
CardTitle.defaultProps = defaultProps$32;
|
|
|
|
var propTypes$36 = {
|
|
children: propTypes$1.node.isRequired,
|
|
className: propTypes$1.string,
|
|
placement: propTypes$1.string,
|
|
placementPrefix: propTypes$1.string,
|
|
tag: propTypes$1.string,
|
|
isOpen: propTypes$1.bool.isRequired,
|
|
cssModule: propTypes$1.object,
|
|
offset: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.number]),
|
|
fallbackPlacement: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.array]),
|
|
flip: propTypes$1.bool,
|
|
container: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]),
|
|
target: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]).isRequired
|
|
};
|
|
|
|
var defaultProps$33 = {
|
|
placement: 'auto',
|
|
isOpen: false,
|
|
offset: 0,
|
|
fallbackPlacement: 'flip',
|
|
flip: true,
|
|
container: 'body'
|
|
};
|
|
|
|
var childContextTypes$1 = {
|
|
popperManager: propTypes$1.object.isRequired
|
|
};
|
|
|
|
var PopperContent = function (_React$Component) {
|
|
inherits(PopperContent, _React$Component);
|
|
|
|
function PopperContent(props) {
|
|
classCallCheck(this, PopperContent);
|
|
|
|
var _this = possibleConstructorReturn(this, (PopperContent.__proto__ || Object.getPrototypeOf(PopperContent)).call(this, props));
|
|
|
|
_this.handlePlacementChange = _this.handlePlacementChange.bind(_this);
|
|
_this.setTargetNode = _this.setTargetNode.bind(_this);
|
|
_this.getTargetNode = _this.getTargetNode.bind(_this);
|
|
_this.state = {};
|
|
return _this;
|
|
}
|
|
|
|
createClass(PopperContent, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return {
|
|
popperManager: {
|
|
setTargetNode: this.setTargetNode,
|
|
getTargetNode: this.getTargetNode
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this.handleProps();
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.props.isOpen !== prevProps.isOpen) {
|
|
this.handleProps();
|
|
} else if (this._element) {
|
|
// rerender
|
|
this.renderIntoSubtree();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.hide();
|
|
}
|
|
}, {
|
|
key: 'setTargetNode',
|
|
value: function setTargetNode(node) {
|
|
this.targetNode = node;
|
|
}
|
|
}, {
|
|
key: 'getTargetNode',
|
|
value: function getTargetNode() {
|
|
return this.targetNode;
|
|
}
|
|
}, {
|
|
key: 'getContainerNode',
|
|
value: function getContainerNode() {
|
|
return getTarget(this.props.container);
|
|
}
|
|
}, {
|
|
key: 'handlePlacementChange',
|
|
value: function handlePlacementChange(data) {
|
|
if (this.state.placement !== data.placement) {
|
|
this.setState({ placement: data.placement });
|
|
}
|
|
return data;
|
|
}
|
|
}, {
|
|
key: 'handleProps',
|
|
value: function handleProps() {
|
|
if (this.props.container !== 'inline') {
|
|
if (this.props.isOpen) {
|
|
this.show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'hide',
|
|
value: function hide() {
|
|
if (this._element) {
|
|
this.getContainerNode().removeChild(this._element);
|
|
ReactDOM.unmountComponentAtNode(this._element);
|
|
this._element = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show() {
|
|
this._element = document.createElement('div');
|
|
this.getContainerNode().appendChild(this._element);
|
|
this.renderIntoSubtree();
|
|
if (this._element.childNodes && this._element.childNodes[0] && this._element.childNodes[0].focus) {
|
|
this._element.childNodes[0].focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'renderIntoSubtree',
|
|
value: function renderIntoSubtree() {
|
|
ReactDOM.unstable_renderSubtreeIntoContainer(this, this.renderChildren(), this._element);
|
|
}
|
|
}, {
|
|
key: 'renderChildren',
|
|
value: function renderChildren() {
|
|
var _props = this.props,
|
|
cssModule = _props.cssModule,
|
|
children = _props.children,
|
|
isOpen = _props.isOpen,
|
|
flip = _props.flip,
|
|
target = _props.target,
|
|
offset = _props.offset,
|
|
fallbackPlacement = _props.fallbackPlacement,
|
|
placementPrefix = _props.placementPrefix,
|
|
className = _props.className,
|
|
tag = _props.tag,
|
|
container = _props.container,
|
|
attrs = objectWithoutProperties(_props, ['cssModule', 'children', 'isOpen', 'flip', 'target', 'offset', 'fallbackPlacement', 'placementPrefix', 'className', 'tag', 'container']);
|
|
|
|
var arrowClassName = mapToCssModules('arrow', cssModule);
|
|
var placement = (this.state.placement || attrs.placement).split('-')[0];
|
|
var popperClassName = mapToCssModules(classnames(className, placementPrefix ? placementPrefix + '-' + placement : placement), this.props.cssModule);
|
|
|
|
var modifiers = {
|
|
offset: { offset: offset },
|
|
flip: { enabled: flip, behavior: fallbackPlacement },
|
|
update: {
|
|
enabled: true,
|
|
order: 950,
|
|
fn: this.handlePlacementChange
|
|
}
|
|
};
|
|
|
|
return React__default.createElement(
|
|
reactPopper_2,
|
|
_extends({ modifiers: modifiers }, attrs, { component: tag, className: popperClassName }),
|
|
children,
|
|
React__default.createElement(reactPopper_1, { className: arrowClassName })
|
|
);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
this.setTargetNode(getTarget(this.props.target));
|
|
|
|
if (this.props.container === 'inline') {
|
|
return this.props.isOpen ? this.renderChildren() : null;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
return PopperContent;
|
|
}(React__default.Component);
|
|
|
|
PopperContent.propTypes = propTypes$36;
|
|
PopperContent.defaultProps = defaultProps$33;
|
|
PopperContent.childContextTypes = childContextTypes$1;
|
|
|
|
var PopperTargetHelper = function PopperTargetHelper(props, context) {
|
|
context.popperManager.setTargetNode(getTarget(props.target));
|
|
return null;
|
|
};
|
|
|
|
PopperTargetHelper.contextTypes = {
|
|
popperManager: propTypes$1.object.isRequired
|
|
};
|
|
|
|
PopperTargetHelper.propTypes = {
|
|
target: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]).isRequired
|
|
};
|
|
|
|
var propTypes$37 = {
|
|
placement: propTypes$1.oneOf(PopperPlacements),
|
|
target: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]).isRequired,
|
|
container: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]),
|
|
isOpen: propTypes$1.bool,
|
|
disabled: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
innerClassName: propTypes$1.string,
|
|
placementPrefix: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
toggle: propTypes$1.func,
|
|
delay: propTypes$1.oneOfType([propTypes$1.shape({ show: propTypes$1.number, hide: propTypes$1.number }), propTypes$1.number])
|
|
};
|
|
|
|
var DEFAULT_DELAYS = {
|
|
show: 0,
|
|
hide: 0
|
|
};
|
|
|
|
var defaultProps$34 = {
|
|
isOpen: false,
|
|
placement: 'right',
|
|
placementPrefix: 'bs-popover',
|
|
delay: DEFAULT_DELAYS,
|
|
toggle: function toggle() {}
|
|
};
|
|
|
|
var Popover = function (_React$Component) {
|
|
inherits(Popover, _React$Component);
|
|
|
|
function Popover(props) {
|
|
classCallCheck(this, Popover);
|
|
|
|
var _this = possibleConstructorReturn(this, (Popover.__proto__ || Object.getPrototypeOf(Popover)).call(this, props));
|
|
|
|
_this.addTargetEvents = _this.addTargetEvents.bind(_this);
|
|
_this.handleDocumentClick = _this.handleDocumentClick.bind(_this);
|
|
_this.removeTargetEvents = _this.removeTargetEvents.bind(_this);
|
|
_this.getRef = _this.getRef.bind(_this);
|
|
_this.toggle = _this.toggle.bind(_this);
|
|
_this.show = _this.show.bind(_this);
|
|
_this.hide = _this.hide.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Popover, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this._target = getTarget(this.props.target);
|
|
this.handleProps();
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate() {
|
|
this.handleProps();
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.clearShowTimeout();
|
|
this.clearHideTimeout();
|
|
this.removeTargetEvents();
|
|
}
|
|
}, {
|
|
key: 'getRef',
|
|
value: function getRef(ref) {
|
|
this._popover = ref;
|
|
}
|
|
}, {
|
|
key: 'getDelay',
|
|
value: function getDelay(key) {
|
|
var delay = this.props.delay;
|
|
|
|
if ((typeof delay === 'undefined' ? 'undefined' : _typeof(delay)) === 'object') {
|
|
return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key];
|
|
}
|
|
return delay;
|
|
}
|
|
}, {
|
|
key: 'handleProps',
|
|
value: function handleProps() {
|
|
if (this.props.isOpen) {
|
|
this.show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show() {
|
|
this.clearHideTimeout();
|
|
this.addTargetEvents();
|
|
if (!this.props.isOpen) {
|
|
this.clearShowTimeout();
|
|
this._showTimeout = setTimeout(this.toggle, this.getDelay('show'));
|
|
}
|
|
}
|
|
}, {
|
|
key: 'hide',
|
|
value: function hide() {
|
|
this.clearShowTimeout();
|
|
this.removeTargetEvents();
|
|
if (this.props.isOpen) {
|
|
this.clearHideTimeout();
|
|
this._hideTimeout = setTimeout(this.toggle, this.getDelay('hide'));
|
|
}
|
|
}
|
|
}, {
|
|
key: 'clearShowTimeout',
|
|
value: function clearShowTimeout() {
|
|
clearTimeout(this._showTimeout);
|
|
this._showTimeout = undefined;
|
|
}
|
|
}, {
|
|
key: 'clearHideTimeout',
|
|
value: function clearHideTimeout() {
|
|
clearTimeout(this._hideTimeout);
|
|
this._hideTimeout = undefined;
|
|
}
|
|
}, {
|
|
key: 'handleDocumentClick',
|
|
value: function handleDocumentClick(e) {
|
|
if (e.target !== this._target && !this._target.contains(e.target) && e.target !== this._popover && !(this._popover && this._popover.contains(e.target))) {
|
|
if (this._hideTimeout) {
|
|
this.clearHideTimeout();
|
|
}
|
|
|
|
if (this.props.isOpen) {
|
|
this.toggle();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'addTargetEvents',
|
|
value: function addTargetEvents() {
|
|
var _this2 = this;
|
|
|
|
['click', 'touchstart'].forEach(function (event) {
|
|
return document.addEventListener(event, _this2.handleDocumentClick, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'removeTargetEvents',
|
|
value: function removeTargetEvents() {
|
|
var _this3 = this;
|
|
|
|
['click', 'touchstart'].forEach(function (event) {
|
|
return document.removeEventListener(event, _this3.handleDocumentClick, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'toggle',
|
|
value: function toggle(e) {
|
|
if (this.props.disabled) {
|
|
return e && e.preventDefault();
|
|
}
|
|
|
|
return this.props.toggle();
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
if (!this.props.isOpen) {
|
|
return null;
|
|
}
|
|
|
|
var attributes = omit(this.props, Object.keys(propTypes$37));
|
|
var classes = mapToCssModules(classnames('popover-inner', this.props.innerClassName), this.props.cssModule);
|
|
|
|
var popperClasses = mapToCssModules(classnames('popover', 'show', this.props.className), this.props.cssModule);
|
|
|
|
return React__default.createElement(
|
|
PopperContent,
|
|
{
|
|
className: popperClasses,
|
|
target: this.props.target,
|
|
isOpen: this.props.isOpen,
|
|
placement: this.props.placement,
|
|
placementPrefix: this.props.placementPrefix,
|
|
container: this.props.container
|
|
},
|
|
React__default.createElement('div', _extends({}, attributes, { className: classes, ref: this.getRef }))
|
|
);
|
|
}
|
|
}]);
|
|
return Popover;
|
|
}(React__default.Component);
|
|
|
|
Popover.propTypes = propTypes$37;
|
|
Popover.defaultProps = defaultProps$34;
|
|
|
|
var propTypes$38 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$35 = {
|
|
tag: 'h3'
|
|
};
|
|
|
|
var PopoverHeader = function PopoverHeader(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'popover-header'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
PopoverHeader.propTypes = propTypes$38;
|
|
PopoverHeader.defaultProps = defaultProps$35;
|
|
|
|
function PopoverTitle(props) {
|
|
warnOnce('The "PopoverTitle" component has been deprecated.\nPlease use component "PopoverHeader".');
|
|
return React__default.createElement(PopoverHeader, props);
|
|
}
|
|
|
|
var propTypes$39 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$36 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var PopoverBody = function PopoverBody(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'popover-body'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
PopoverBody.propTypes = propTypes$39;
|
|
PopoverBody.defaultProps = defaultProps$36;
|
|
|
|
function PopoverContent(props) {
|
|
warnOnce('The "PopoverContent" component has been deprecated.\nPlease use component "PopoverBody".');
|
|
return React__default.createElement(PopoverBody, props);
|
|
}
|
|
|
|
/**
|
|
* lodash (Custom Build) <https://lodash.com/>
|
|
* Build: `lodash modularize exports="npm" -o ./`
|
|
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
|
|
* Released under MIT license <https://lodash.com/license>
|
|
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
|
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
|
*/
|
|
|
|
/** Used as references for various `Number` constants. */
|
|
var NAN = 0 / 0;
|
|
|
|
/** `Object#toString` result references. */
|
|
var symbolTag = '[object Symbol]';
|
|
|
|
/** Used to match leading and trailing whitespace. */
|
|
var reTrim = /^\s+|\s+$/g;
|
|
|
|
/** Used to detect bad signed hexadecimal string values. */
|
|
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
|
|
|
|
/** Used to detect binary string values. */
|
|
var reIsBinary = /^0b[01]+$/i;
|
|
|
|
/** Used to detect octal string values. */
|
|
var reIsOctal = /^0o[0-7]+$/i;
|
|
|
|
/** Built-in method references without a dependency on `root`. */
|
|
var freeParseInt = parseInt;
|
|
|
|
/** Used for built-in method references. */
|
|
var objectProto$1 = Object.prototype;
|
|
|
|
/**
|
|
* Used to resolve the
|
|
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
* of values.
|
|
*/
|
|
var objectToString$1 = objectProto$1.toString;
|
|
|
|
/**
|
|
* Checks if `value` is the
|
|
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
|
|
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @since 0.1.0
|
|
* @category Lang
|
|
* @param {*} value The value to check.
|
|
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
|
|
* @example
|
|
*
|
|
* _.isObject({});
|
|
* // => true
|
|
*
|
|
* _.isObject([1, 2, 3]);
|
|
* // => true
|
|
*
|
|
* _.isObject(_.noop);
|
|
* // => true
|
|
*
|
|
* _.isObject(null);
|
|
* // => false
|
|
*/
|
|
function isObject$2(value) {
|
|
var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
|
|
return !!value && (type == 'object' || type == 'function');
|
|
}
|
|
|
|
/**
|
|
* Checks if `value` is object-like. A value is object-like if it's not `null`
|
|
* and has a `typeof` result of "object".
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @since 4.0.0
|
|
* @category Lang
|
|
* @param {*} value The value to check.
|
|
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
|
|
* @example
|
|
*
|
|
* _.isObjectLike({});
|
|
* // => true
|
|
*
|
|
* _.isObjectLike([1, 2, 3]);
|
|
* // => true
|
|
*
|
|
* _.isObjectLike(_.noop);
|
|
* // => false
|
|
*
|
|
* _.isObjectLike(null);
|
|
* // => false
|
|
*/
|
|
function isObjectLike(value) {
|
|
return !!value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) == 'object';
|
|
}
|
|
|
|
/**
|
|
* Checks if `value` is classified as a `Symbol` primitive or object.
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @since 4.0.0
|
|
* @category Lang
|
|
* @param {*} value The value to check.
|
|
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
|
|
* @example
|
|
*
|
|
* _.isSymbol(Symbol.iterator);
|
|
* // => true
|
|
*
|
|
* _.isSymbol('abc');
|
|
* // => false
|
|
*/
|
|
function isSymbol(value) {
|
|
return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) == 'symbol' || isObjectLike(value) && objectToString$1.call(value) == symbolTag;
|
|
}
|
|
|
|
/**
|
|
* Converts `value` to a number.
|
|
*
|
|
* @static
|
|
* @memberOf _
|
|
* @since 4.0.0
|
|
* @category Lang
|
|
* @param {*} value The value to process.
|
|
* @returns {number} Returns the number.
|
|
* @example
|
|
*
|
|
* _.toNumber(3.2);
|
|
* // => 3.2
|
|
*
|
|
* _.toNumber(Number.MIN_VALUE);
|
|
* // => 5e-324
|
|
*
|
|
* _.toNumber(Infinity);
|
|
* // => Infinity
|
|
*
|
|
* _.toNumber('3.2');
|
|
* // => 3.2
|
|
*/
|
|
function toNumber(value) {
|
|
if (typeof value == 'number') {
|
|
return value;
|
|
}
|
|
if (isSymbol(value)) {
|
|
return NAN;
|
|
}
|
|
if (isObject$2(value)) {
|
|
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
|
|
value = isObject$2(other) ? other + '' : other;
|
|
}
|
|
if (typeof value != 'string') {
|
|
return value === 0 ? value : +value;
|
|
}
|
|
value = value.replace(reTrim, '');
|
|
var isBinary = reIsBinary.test(value);
|
|
return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
|
|
}
|
|
|
|
var lodash_tonumber = toNumber;
|
|
|
|
var propTypes$40 = {
|
|
children: propTypes$1.node,
|
|
bar: propTypes$1.bool,
|
|
multi: propTypes$1.bool,
|
|
tag: propTypes$1.string,
|
|
value: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.number]),
|
|
max: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.number]),
|
|
animated: propTypes$1.bool,
|
|
striped: propTypes$1.bool,
|
|
color: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
barClassName: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$37 = {
|
|
tag: 'div',
|
|
value: 0,
|
|
max: 100
|
|
};
|
|
|
|
var Progress = function Progress(props) {
|
|
var children = props.children,
|
|
className = props.className,
|
|
barClassName = props.barClassName,
|
|
cssModule = props.cssModule,
|
|
value = props.value,
|
|
max = props.max,
|
|
animated = props.animated,
|
|
striped = props.striped,
|
|
color = props.color,
|
|
bar = props.bar,
|
|
multi = props.multi,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['children', 'className', 'barClassName', 'cssModule', 'value', 'max', 'animated', 'striped', 'color', 'bar', 'multi', 'tag']);
|
|
|
|
|
|
var percent = lodash_tonumber(value) / lodash_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 ProgressBar = multi ? children : React__default.createElement('div', {
|
|
className: progressBarClasses,
|
|
style: { width: percent + '%' },
|
|
role: 'progressbar',
|
|
'aria-valuenow': value,
|
|
'aria-valuemin': '0',
|
|
'aria-valuemax': max,
|
|
children: children
|
|
});
|
|
|
|
if (bar) {
|
|
return ProgressBar;
|
|
}
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: progressClasses, children: ProgressBar }));
|
|
};
|
|
|
|
Progress.propTypes = propTypes$40;
|
|
Progress.defaultProps = defaultProps$37;
|
|
|
|
function noop() {}
|
|
|
|
var FadePropTypes = propTypes$1.shape(Fade.propTypes);
|
|
|
|
var propTypes$41 = {
|
|
isOpen: propTypes$1.bool,
|
|
autoFocus: propTypes$1.bool,
|
|
size: propTypes$1.string,
|
|
toggle: propTypes$1.func,
|
|
keyboard: propTypes$1.bool,
|
|
role: propTypes$1.string,
|
|
labelledBy: propTypes$1.string,
|
|
backdrop: propTypes$1.oneOfType([propTypes$1.bool, propTypes$1.oneOf(['static'])]),
|
|
onEnter: propTypes$1.func,
|
|
onExit: propTypes$1.func,
|
|
onOpened: propTypes$1.func,
|
|
onClosed: propTypes$1.func,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
wrapClassName: propTypes$1.string,
|
|
modalClassName: propTypes$1.string,
|
|
backdropClassName: propTypes$1.string,
|
|
contentClassName: propTypes$1.string,
|
|
fade: propTypes$1.bool,
|
|
cssModule: propTypes$1.object,
|
|
zIndex: propTypes$1.oneOfType([propTypes$1.number, propTypes$1.string]),
|
|
backdropTransition: FadePropTypes,
|
|
modalTransition: FadePropTypes
|
|
};
|
|
|
|
var propsToOmit = Object.keys(propTypes$41);
|
|
|
|
var defaultProps$38 = {
|
|
isOpen: false,
|
|
autoFocus: true,
|
|
role: 'dialog',
|
|
backdrop: true,
|
|
keyboard: true,
|
|
zIndex: 1050,
|
|
fade: true,
|
|
onOpened: noop,
|
|
onClosed: noop,
|
|
modalTransition: {
|
|
timeout: TransitionTimeouts.Modal
|
|
},
|
|
backdropTransition: {
|
|
mountOnEnter: true,
|
|
timeout: TransitionTimeouts.Fade // uses standard fade transition
|
|
}
|
|
};
|
|
|
|
var Modal = function (_React$Component) {
|
|
inherits(Modal, _React$Component);
|
|
|
|
function Modal(props) {
|
|
classCallCheck(this, Modal);
|
|
|
|
var _this = possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props));
|
|
|
|
_this.originalBodyPadding = null;
|
|
_this.isBodyOverflowing = false;
|
|
_this.togglePortal = _this.togglePortal.bind(_this);
|
|
_this.handleBackdropClick = _this.handleBackdropClick.bind(_this);
|
|
_this.handleEscape = _this.handleEscape.bind(_this);
|
|
_this.destroy = _this.destroy.bind(_this);
|
|
_this.onOpened = _this.onOpened.bind(_this);
|
|
_this.onClosed = _this.onClosed.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Modal, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
if (this.props.isOpen) {
|
|
this.togglePortal();
|
|
}
|
|
if (this.props.onEnter) {
|
|
this.props.onEnter();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.props.isOpen !== prevProps.isOpen) {
|
|
// handle portal events/dom updates
|
|
this.togglePortal();
|
|
} else if (this._element) {
|
|
// rerender portal
|
|
this.renderIntoSubtree();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.destroy();
|
|
if (this.props.onExit) {
|
|
this.props.onExit();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'onOpened',
|
|
value: function onOpened(node, isAppearing) {
|
|
this.props.onOpened();
|
|
(this.props.modalTransition.onEntered || noop)(node, isAppearing);
|
|
}
|
|
}, {
|
|
key: 'onClosed',
|
|
value: function onClosed(node) {
|
|
var _this2 = this;
|
|
|
|
// so all methods get called before it is unmounted
|
|
setTimeout(function () {
|
|
return _this2.destroy();
|
|
}, 0);
|
|
this.props.onClosed();
|
|
(this.props.modalTransition.onExited || noop)(node);
|
|
}
|
|
}, {
|
|
key: 'handleEscape',
|
|
value: function handleEscape(e) {
|
|
if (this.props.keyboard && e.keyCode === 27 && this.props.toggle) {
|
|
this.props.toggle();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'handleBackdropClick',
|
|
value: function handleBackdropClick(e) {
|
|
if (this.props.backdrop !== true) return;
|
|
|
|
var container = this._dialog;
|
|
|
|
if (e.target && !container.contains(e.target) && this.props.toggle) {
|
|
this.props.toggle();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'togglePortal',
|
|
value: function togglePortal() {
|
|
if (this.props.isOpen) {
|
|
if (this.props.autoFocus) {
|
|
this._focus = true;
|
|
}
|
|
this.show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
if (this._element) {
|
|
ReactDOM.unmountComponentAtNode(this._element);
|
|
document.body.removeChild(this._element);
|
|
this._element = null;
|
|
}
|
|
|
|
// Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`
|
|
var classes = document.body.className.replace(/(^| )modal-open( |$)/, ' ');
|
|
document.body.className = mapToCssModules(classnames(classes).trim(), this.props.cssModule);
|
|
setScrollbarWidth(this.originalBodyPadding);
|
|
}
|
|
}, {
|
|
key: 'hide',
|
|
value: function hide() {
|
|
this.renderIntoSubtree();
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show() {
|
|
if (this._dialog) {
|
|
this.props.toggle(true);
|
|
return;
|
|
}
|
|
var classes = document.body.className;
|
|
this._element = document.createElement('div');
|
|
this._element.setAttribute('tabindex', '-1');
|
|
this._element.style.position = 'relative';
|
|
this._element.style.zIndex = this.props.zIndex;
|
|
this.originalBodyPadding = getOriginalBodyPadding();
|
|
|
|
conditionallyUpdateScrollbar();
|
|
|
|
document.body.appendChild(this._element);
|
|
|
|
document.body.className = mapToCssModules(classnames(classes, 'modal-open'), this.props.cssModule);
|
|
|
|
this.renderIntoSubtree();
|
|
}
|
|
}, {
|
|
key: 'renderModalDialog',
|
|
value: function renderModalDialog() {
|
|
var _this3 = this;
|
|
|
|
var attributes = omit(this.props, propsToOmit);
|
|
|
|
return React__default.createElement(
|
|
'div',
|
|
_extends({
|
|
className: mapToCssModules(classnames('modal-dialog', this.props.className, defineProperty({}, 'modal-' + this.props.size, this.props.size)), this.props.cssModule),
|
|
role: 'document',
|
|
ref: function ref(c) {
|
|
_this3._dialog = c;
|
|
}
|
|
}, attributes),
|
|
React__default.createElement(
|
|
'div',
|
|
{
|
|
className: mapToCssModules(classnames('modal-content', this.props.contentClassName), this.props.cssModule)
|
|
},
|
|
this.props.children
|
|
)
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderIntoSubtree',
|
|
value: function renderIntoSubtree() {
|
|
ReactDOM.unstable_renderSubtreeIntoContainer(this, this.renderChildren(), this._element);
|
|
|
|
// check if modal should receive focus
|
|
if (this._focus) {
|
|
if (this._dialog && this._dialog.parentNode && typeof this._dialog.parentNode.focus === 'function') {
|
|
this._dialog.parentNode.focus();
|
|
}
|
|
this._focus = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'renderChildren',
|
|
value: function renderChildren() {
|
|
var _props = this.props,
|
|
wrapClassName = _props.wrapClassName,
|
|
modalClassName = _props.modalClassName,
|
|
backdropClassName = _props.backdropClassName,
|
|
cssModule = _props.cssModule,
|
|
isOpen = _props.isOpen,
|
|
backdrop = _props.backdrop,
|
|
role = _props.role,
|
|
labelledBy = _props.labelledBy;
|
|
|
|
|
|
var modalAttributes = {
|
|
onClickCapture: this.handleBackdropClick,
|
|
onKeyUp: this.handleEscape,
|
|
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
|
|
});
|
|
return React__default.createElement(
|
|
'div',
|
|
{ className: mapToCssModules(wrapClassName) },
|
|
React__default.createElement(
|
|
Fade,
|
|
_extends({}, modalAttributes, modalTransition, {
|
|
'in': isOpen,
|
|
onEntered: this.onOpened,
|
|
onExited: this.onClosed,
|
|
cssModule: cssModule,
|
|
className: mapToCssModules(classnames('modal', modalClassName), cssModule)
|
|
}),
|
|
this.renderModalDialog()
|
|
),
|
|
React__default.createElement(Fade, _extends({}, backdropTransition, {
|
|
'in': isOpen && !!backdrop,
|
|
cssModule: cssModule,
|
|
className: mapToCssModules(classnames('modal-backdrop', backdropClassName), cssModule)
|
|
}))
|
|
);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
return null;
|
|
}
|
|
}]);
|
|
return Modal;
|
|
}(React__default.Component);
|
|
|
|
Modal.propTypes = propTypes$41;
|
|
Modal.defaultProps = defaultProps$38;
|
|
|
|
var propTypes$42 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
wrapTag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
toggle: propTypes$1.func,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
children: propTypes$1.node,
|
|
closeAriaLabel: propTypes$1.string
|
|
};
|
|
|
|
var defaultProps$39 = {
|
|
tag: 'h4',
|
|
wrapTag: 'div',
|
|
closeAriaLabel: 'Close'
|
|
};
|
|
|
|
var ModalHeader = function ModalHeader(props) {
|
|
var closeButton = void 0;
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
children = props.children,
|
|
toggle = props.toggle,
|
|
Tag = props.tag,
|
|
WrapTag = props.wrapTag,
|
|
closeAriaLabel = props.closeAriaLabel,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'children', 'toggle', 'tag', 'wrapTag', 'closeAriaLabel']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'modal-header'), cssModule);
|
|
|
|
if (toggle) {
|
|
closeButton = React__default.createElement(
|
|
'button',
|
|
{ type: 'button', onClick: toggle, className: mapToCssModules('close', cssModule), 'aria-label': closeAriaLabel },
|
|
React__default.createElement(
|
|
'span',
|
|
{ 'aria-hidden': 'true' },
|
|
String.fromCharCode(215)
|
|
)
|
|
);
|
|
}
|
|
|
|
return React__default.createElement(
|
|
WrapTag,
|
|
_extends({}, attributes, { className: classes }),
|
|
React__default.createElement(
|
|
Tag,
|
|
{ className: mapToCssModules('modal-title', cssModule) },
|
|
children
|
|
),
|
|
closeButton
|
|
);
|
|
};
|
|
|
|
ModalHeader.propTypes = propTypes$42;
|
|
ModalHeader.defaultProps = defaultProps$39;
|
|
|
|
var propTypes$43 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$40 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var ModalBody = function ModalBody(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'modal-body'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ModalBody.propTypes = propTypes$43;
|
|
ModalBody.defaultProps = defaultProps$40;
|
|
|
|
var propTypes$44 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$41 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var ModalFooter = function ModalFooter(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'modal-footer'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ModalFooter.propTypes = propTypes$44;
|
|
ModalFooter.defaultProps = defaultProps$41;
|
|
|
|
var propTypes$45 = {
|
|
placement: propTypes$1.oneOf(PopperPlacements),
|
|
target: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]).isRequired,
|
|
container: propTypes$1.oneOfType([propTypes$1.string, propTypes$1.func, DOMElement]),
|
|
isOpen: propTypes$1.bool,
|
|
disabled: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
innerClassName: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
toggle: propTypes$1.func,
|
|
autohide: propTypes$1.bool,
|
|
placementPrefix: propTypes$1.string,
|
|
delay: propTypes$1.oneOfType([propTypes$1.shape({ show: propTypes$1.number, hide: propTypes$1.number }), propTypes$1.number])
|
|
};
|
|
|
|
var DEFAULT_DELAYS$1 = {
|
|
show: 0,
|
|
hide: 250
|
|
};
|
|
|
|
var defaultProps$42 = {
|
|
isOpen: false,
|
|
placement: 'top',
|
|
placementPrefix: 'bs-tooltip',
|
|
delay: DEFAULT_DELAYS$1,
|
|
autohide: true,
|
|
toggle: function toggle() {}
|
|
};
|
|
|
|
var Tooltip = function (_React$Component) {
|
|
inherits(Tooltip, _React$Component);
|
|
|
|
function Tooltip(props) {
|
|
classCallCheck(this, Tooltip);
|
|
|
|
var _this = possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).call(this, props));
|
|
|
|
_this.addTargetEvents = _this.addTargetEvents.bind(_this);
|
|
_this.handleDocumentClick = _this.handleDocumentClick.bind(_this);
|
|
_this.removeTargetEvents = _this.removeTargetEvents.bind(_this);
|
|
_this.toggle = _this.toggle.bind(_this);
|
|
_this.onMouseOverTooltip = _this.onMouseOverTooltip.bind(_this);
|
|
_this.onMouseLeaveTooltip = _this.onMouseLeaveTooltip.bind(_this);
|
|
_this.onMouseOverTooltipContent = _this.onMouseOverTooltipContent.bind(_this);
|
|
_this.onMouseLeaveTooltipContent = _this.onMouseLeaveTooltipContent.bind(_this);
|
|
_this.show = _this.show.bind(_this);
|
|
_this.hide = _this.hide.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Tooltip, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this._target = getTarget(this.props.target);
|
|
this.addTargetEvents();
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.removeTargetEvents();
|
|
}
|
|
}, {
|
|
key: 'onMouseOverTooltip',
|
|
value: function onMouseOverTooltip() {
|
|
if (this._hideTimeout) {
|
|
this.clearHideTimeout();
|
|
}
|
|
this._showTimeout = setTimeout(this.show, this.getDelay('show'));
|
|
}
|
|
}, {
|
|
key: 'onMouseLeaveTooltip',
|
|
value: function onMouseLeaveTooltip() {
|
|
if (this._showTimeout) {
|
|
this.clearShowTimeout();
|
|
}
|
|
this._hideTimeout = setTimeout(this.hide, this.getDelay('hide'));
|
|
}
|
|
}, {
|
|
key: 'onMouseOverTooltipContent',
|
|
value: function onMouseOverTooltipContent() {
|
|
if (this.props.autohide) {
|
|
return;
|
|
}
|
|
if (this._hideTimeout) {
|
|
this.clearHideTimeout();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'onMouseLeaveTooltipContent',
|
|
value: function onMouseLeaveTooltipContent() {
|
|
if (this.props.autohide) {
|
|
return;
|
|
}
|
|
if (this._showTimeout) {
|
|
this.clearShowTimeout();
|
|
}
|
|
this._hideTimeout = setTimeout(this.hide, this.getDelay('hide'));
|
|
}
|
|
}, {
|
|
key: 'getDelay',
|
|
value: function getDelay(key) {
|
|
var delay = this.props.delay;
|
|
|
|
if ((typeof delay === 'undefined' ? 'undefined' : _typeof(delay)) === 'object') {
|
|
return isNaN(delay[key]) ? DEFAULT_DELAYS$1[key] : delay[key];
|
|
}
|
|
return delay;
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show() {
|
|
if (!this.props.isOpen) {
|
|
this.clearShowTimeout();
|
|
this.toggle();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'hide',
|
|
value: function hide() {
|
|
if (this.props.isOpen) {
|
|
this.clearHideTimeout();
|
|
this.toggle();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'clearShowTimeout',
|
|
value: function clearShowTimeout() {
|
|
clearTimeout(this._showTimeout);
|
|
this._showTimeout = undefined;
|
|
}
|
|
}, {
|
|
key: 'clearHideTimeout',
|
|
value: function clearHideTimeout() {
|
|
clearTimeout(this._hideTimeout);
|
|
this._hideTimeout = undefined;
|
|
}
|
|
}, {
|
|
key: 'handleDocumentClick',
|
|
value: function handleDocumentClick(e) {
|
|
if (e.target === this._target || this._target.contains(e.target)) {
|
|
if (this._hideTimeout) {
|
|
this.clearHideTimeout();
|
|
}
|
|
|
|
if (!this.props.isOpen) {
|
|
this.toggle();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'addTargetEvents',
|
|
value: function addTargetEvents() {
|
|
var _this2 = this;
|
|
|
|
this._target.addEventListener('mouseover', this.onMouseOverTooltip, true);
|
|
this._target.addEventListener('mouseout', this.onMouseLeaveTooltip, true);
|
|
['click', 'touchstart'].forEach(function (event) {
|
|
return document.addEventListener(event, _this2.handleDocumentClick, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'removeTargetEvents',
|
|
value: function removeTargetEvents() {
|
|
var _this3 = this;
|
|
|
|
this._target.removeEventListener('mouseover', this.onMouseOverTooltip, true);
|
|
this._target.removeEventListener('mouseout', this.onMouseLeaveTooltip, true);
|
|
['click', 'touchstart'].forEach(function (event) {
|
|
return document.removeEventListener(event, _this3.handleDocumentClick, true);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'toggle',
|
|
value: function toggle(e) {
|
|
if (this.props.disabled) {
|
|
return e && e.preventDefault();
|
|
}
|
|
|
|
return this.props.toggle();
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
if (!this.props.isOpen) {
|
|
return null;
|
|
}
|
|
|
|
var attributes = omit(this.props, Object.keys(propTypes$45));
|
|
var classes = mapToCssModules(classnames('tooltip-inner', this.props.innerClassName), this.props.cssModule);
|
|
|
|
var popperClasses = mapToCssModules(classnames('tooltip', 'show', this.props.className), this.props.cssModule);
|
|
|
|
return React__default.createElement(
|
|
PopperContent,
|
|
{
|
|
className: popperClasses,
|
|
target: this.props.target,
|
|
isOpen: this.props.isOpen,
|
|
placement: this.props.placement,
|
|
placementPrefix: this.props.placementPrefix,
|
|
container: this.props.container
|
|
},
|
|
React__default.createElement('div', _extends({}, attributes, {
|
|
className: classes,
|
|
onMouseOver: this.onMouseOverTooltipContent,
|
|
onMouseLeave: this.onMouseLeaveTooltipContent
|
|
}))
|
|
);
|
|
}
|
|
}]);
|
|
return Tooltip;
|
|
}(React__default.Component);
|
|
|
|
Tooltip.propTypes = propTypes$45;
|
|
Tooltip.defaultProps = defaultProps$42;
|
|
|
|
var propTypes$46 = {
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
size: propTypes$1.string,
|
|
bordered: propTypes$1.bool,
|
|
striped: propTypes$1.bool,
|
|
inverse: propTypes$1.bool,
|
|
hover: propTypes$1.bool,
|
|
reflow: propTypes$1.bool,
|
|
responsive: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
responsiveTag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string])
|
|
};
|
|
|
|
var defaultProps$43 = {
|
|
tag: 'table',
|
|
responsiveTag: 'div'
|
|
};
|
|
|
|
var Table = function Table(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
size = props.size,
|
|
bordered = props.bordered,
|
|
striped = props.striped,
|
|
inverse = props.inverse,
|
|
hover = props.hover,
|
|
reflow = props.reflow,
|
|
responsive = props.responsive,
|
|
Tag = props.tag,
|
|
ResponsiveTag = props.responsiveTag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'size', 'bordered', 'striped', 'inverse', 'hover', 'reflow', 'responsive', 'tag', 'responsiveTag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'table', size ? 'table-' + size : false, bordered ? 'table-bordered' : false, striped ? 'table-striped' : false, inverse ? 'table-inverse' : false, hover ? 'table-hover' : false, reflow ? 'table-reflow' : false), cssModule);
|
|
|
|
var table = React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
|
|
if (responsive) {
|
|
return React__default.createElement(
|
|
ResponsiveTag,
|
|
{ className: 'table-responsive' },
|
|
table
|
|
);
|
|
}
|
|
|
|
return table;
|
|
};
|
|
|
|
Table.propTypes = propTypes$46;
|
|
Table.defaultProps = defaultProps$43;
|
|
|
|
var propTypes$47 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
flush: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$44 = {
|
|
tag: 'ul'
|
|
};
|
|
|
|
var ListGroup = function ListGroup(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
flush = props.flush,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag', 'flush']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'list-group', flush ? 'list-group-flush' : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ListGroup.propTypes = propTypes$47;
|
|
ListGroup.defaultProps = defaultProps$44;
|
|
|
|
var propTypes$48 = {
|
|
children: propTypes$1.node,
|
|
inline: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
innerRef: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$45 = {
|
|
tag: 'form'
|
|
};
|
|
|
|
var Form = function Form(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
inline = props.inline,
|
|
Tag = props.tag,
|
|
innerRef = props.innerRef,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'inline', 'tag', 'innerRef']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, inline ? 'form-inline' : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { ref: innerRef, className: classes }));
|
|
};
|
|
|
|
Form.propTypes = propTypes$48;
|
|
Form.defaultProps = defaultProps$45;
|
|
|
|
var propTypes$49 = {
|
|
children: propTypes$1.node,
|
|
tag: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$46 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var FormFeedback = function FormFeedback(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'invalid-feedback'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
FormFeedback.propTypes = propTypes$49;
|
|
FormFeedback.defaultProps = defaultProps$46;
|
|
|
|
var propTypes$50 = {
|
|
children: propTypes$1.node,
|
|
row: propTypes$1.bool,
|
|
check: propTypes$1.bool,
|
|
inline: propTypes$1.bool,
|
|
disabled: propTypes$1.bool,
|
|
tag: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$47 = {
|
|
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 = objectWithoutProperties(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);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
FormGroup.propTypes = propTypes$50;
|
|
FormGroup.defaultProps = defaultProps$47;
|
|
|
|
var propTypes$51 = {
|
|
children: propTypes$1.node,
|
|
inline: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
color: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$48 = {
|
|
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 = objectWithoutProperties(props, ['className', 'cssModule', 'inline', 'color', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, !inline ? 'form-text' : false, color ? 'text-' + color : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
FormText.propTypes = propTypes$51;
|
|
FormText.defaultProps = defaultProps$48;
|
|
|
|
/* eslint react/prefer-stateless-function: 0 */
|
|
|
|
var propTypes$52 = {
|
|
children: propTypes$1.node,
|
|
type: propTypes$1.string,
|
|
size: propTypes$1.string,
|
|
bsSize: propTypes$1.string,
|
|
state: deprecated(propTypes$1.string, 'Please use the prop "valid"'),
|
|
valid: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
innerRef: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
static: deprecated(propTypes$1.bool, 'Please use the prop "plaintext"'),
|
|
plaintext: propTypes$1.bool,
|
|
addon: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$49 = {
|
|
tag: 'p',
|
|
type: 'text'
|
|
};
|
|
|
|
var Input = function (_React$Component) {
|
|
inherits(Input, _React$Component);
|
|
|
|
function Input() {
|
|
classCallCheck(this, Input);
|
|
return possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Input, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
className = _props.className,
|
|
cssModule = _props.cssModule,
|
|
type = _props.type,
|
|
bsSize = _props.bsSize,
|
|
state = _props.state,
|
|
valid = _props.valid,
|
|
tag = _props.tag,
|
|
addon = _props.addon,
|
|
staticInput = _props.static,
|
|
plaintext = _props.plaintext,
|
|
innerRef = _props.innerRef,
|
|
attributes = objectWithoutProperties(_props, ['className', 'cssModule', 'type', 'bsSize', 'state', 'valid', 'tag', 'addon', 'static', '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 Tag = selectInput || textareaInput ? type : 'input';
|
|
|
|
var formControlClass = 'form-control';
|
|
|
|
if (plaintext || staticInput) {
|
|
formControlClass = formControlClass + '-plaintext';
|
|
Tag = tag;
|
|
} else if (fileInput) {
|
|
formControlClass = formControlClass + '-file';
|
|
} else if (checkInput) {
|
|
if (addon) {
|
|
formControlClass = null;
|
|
} else {
|
|
formControlClass = 'form-check-input';
|
|
}
|
|
}
|
|
|
|
if (state && typeof valid === 'undefined') {
|
|
if (state === 'danger') {
|
|
valid = false;
|
|
} else if (state === 'success') {
|
|
valid = true;
|
|
}
|
|
}
|
|
|
|
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, valid === false && 'is-invalid', valid && 'is-valid', bsSize ? 'form-control-' + bsSize : false, formControlClass), cssModule);
|
|
|
|
if (Tag === 'input') {
|
|
attributes.type = type;
|
|
}
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { ref: innerRef, className: classes }));
|
|
}
|
|
}]);
|
|
return Input;
|
|
}(React__default.Component);
|
|
|
|
Input.propTypes = propTypes$52;
|
|
Input.defaultProps = defaultProps$49;
|
|
|
|
var propTypes$53 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
size: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$50 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var InputGroup = function InputGroup(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
size = props.size,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag', 'size']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'input-group', size ? 'input-group-' + size : null), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
InputGroup.propTypes = propTypes$53;
|
|
InputGroup.defaultProps = defaultProps$50;
|
|
|
|
var propTypes$54 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$51 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var InputGroupAddon = function InputGroupAddon(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames(className, 'input-group-addon'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
InputGroupAddon.propTypes = propTypes$54;
|
|
InputGroupAddon.defaultProps = defaultProps$51;
|
|
|
|
var propTypes$55 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
children: propTypes$1.node,
|
|
groupClassName: propTypes$1.string,
|
|
groupAttributes: propTypes$1.object,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$52 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var InputGroupButton = function InputGroupButton(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
children = props.children,
|
|
groupClassName = props.groupClassName,
|
|
groupAttributes = props.groupAttributes,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag', 'children', 'groupClassName', 'groupAttributes']);
|
|
|
|
|
|
if (typeof children === 'string') {
|
|
var groupClasses = mapToCssModules(classnames(groupClassName, 'input-group-btn'), cssModule);
|
|
|
|
return React__default.createElement(
|
|
Tag,
|
|
_extends({}, groupAttributes, { className: groupClasses }),
|
|
React__default.createElement(Button, _extends({}, attributes, { className: className, children: children }))
|
|
);
|
|
}
|
|
|
|
var classes = mapToCssModules(classnames(className, 'input-group-btn'), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes, children: children }));
|
|
};
|
|
|
|
InputGroupButton.propTypes = propTypes$55;
|
|
InputGroupButton.defaultProps = defaultProps$52;
|
|
|
|
var colWidths$1 = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
|
|
var stringOrNumberProp$1 = propTypes$1.oneOfType([propTypes$1.number, propTypes$1.string]);
|
|
|
|
var columnProps$1 = propTypes$1.oneOfType([propTypes$1.string, propTypes$1.number, propTypes$1.shape({
|
|
size: stringOrNumberProp$1,
|
|
push: stringOrNumberProp$1,
|
|
pull: stringOrNumberProp$1,
|
|
offset: stringOrNumberProp$1
|
|
})]);
|
|
|
|
var propTypes$56 = {
|
|
children: propTypes$1.node,
|
|
hidden: propTypes$1.bool,
|
|
check: propTypes$1.bool,
|
|
size: propTypes$1.string,
|
|
for: propTypes$1.string,
|
|
tag: propTypes$1.string,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
xs: columnProps$1,
|
|
sm: columnProps$1,
|
|
md: columnProps$1,
|
|
lg: columnProps$1,
|
|
xl: columnProps$1,
|
|
widths: propTypes$1.array
|
|
};
|
|
|
|
var defaultProps$53 = {
|
|
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 = objectWithoutProperties(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 = void 0;
|
|
|
|
if (lodash_isobject(columnProp)) {
|
|
var _classNames;
|
|
|
|
var colSizeInterfix = isXs ? '-' : '-' + colWidth + '-';
|
|
colClass = getColumnSizeClass$1(isXs, colWidth, columnProp.size);
|
|
|
|
colClasses.push(mapToCssModules(classnames((_classNames = {}, defineProperty(_classNames, colClass, columnProp.size || columnProp.size === ''), defineProperty(_classNames, 'push' + colSizeInterfix + columnProp.push, columnProp.push || columnProp.push === 0), defineProperty(_classNames, 'pull' + colSizeInterfix + columnProp.pull, columnProp.pull || columnProp.pull === 0), defineProperty(_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, !check && !colClasses.length ? 'form-control-label' : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({ htmlFor: htmlFor }, attributes, { className: classes }));
|
|
};
|
|
|
|
Label.propTypes = propTypes$56;
|
|
Label.defaultProps = defaultProps$53;
|
|
|
|
var propTypes$57 = {
|
|
body: propTypes$1.bool,
|
|
bottom: propTypes$1.bool,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
heading: propTypes$1.bool,
|
|
left: propTypes$1.bool,
|
|
list: propTypes$1.bool,
|
|
middle: propTypes$1.bool,
|
|
object: propTypes$1.bool,
|
|
right: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
top: propTypes$1.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 = objectWithoutProperties(props, ['body', 'bottom', 'className', 'cssModule', 'heading', 'left', 'list', 'middle', 'object', 'right', 'tag', 'top']);
|
|
|
|
|
|
var defaultTag = void 0;
|
|
if (heading) {
|
|
defaultTag = 'h4';
|
|
} else if (left || right) {
|
|
defaultTag = 'a';
|
|
} else if (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 React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Media.propTypes = propTypes$57;
|
|
|
|
var propTypes$58 = {
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
size: propTypes$1.string,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string])
|
|
};
|
|
|
|
var defaultProps$54 = {
|
|
tag: 'ul'
|
|
};
|
|
|
|
var Pagination = function Pagination(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
size = props.size,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'size', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'pagination', defineProperty({}, 'pagination-' + size, !!size)), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Pagination.propTypes = propTypes$58;
|
|
Pagination.defaultProps = defaultProps$54;
|
|
|
|
var propTypes$59 = {
|
|
active: propTypes$1.bool,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
disabled: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string])
|
|
};
|
|
|
|
var defaultProps$55 = {
|
|
tag: 'li'
|
|
};
|
|
|
|
var PaginationItem = function PaginationItem(props) {
|
|
var active = props.active,
|
|
className = props.className,
|
|
cssModule = props.cssModule,
|
|
disabled = props.disabled,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['active', 'className', 'cssModule', 'disabled', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'page-item', {
|
|
active: active,
|
|
disabled: disabled
|
|
}), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
PaginationItem.propTypes = propTypes$59;
|
|
PaginationItem.defaultProps = defaultProps$55;
|
|
|
|
var propTypes$60 = {
|
|
'aria-label': propTypes$1.string,
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
next: propTypes$1.bool,
|
|
previous: propTypes$1.bool,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string])
|
|
};
|
|
|
|
var defaultProps$56 = {
|
|
tag: 'a'
|
|
};
|
|
|
|
var PaginationLink = function PaginationLink(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
next = props.next,
|
|
previous = props.previous,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'next', 'previous', 'tag']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'page-link'), cssModule);
|
|
|
|
var defaultAriaLabel = void 0;
|
|
if (previous) {
|
|
defaultAriaLabel = 'Previous';
|
|
} else if (next) {
|
|
defaultAriaLabel = 'Next';
|
|
}
|
|
var ariaLabel = props['aria-label'] || defaultAriaLabel;
|
|
|
|
var defaultCaret = void 0;
|
|
if (previous) {
|
|
defaultCaret = '\xAB';
|
|
} else if (next) {
|
|
defaultCaret = '\xBB';
|
|
}
|
|
|
|
var children = props.children;
|
|
if (children && Array.isArray(children) && children.length === 0) {
|
|
children = null;
|
|
}
|
|
|
|
if (previous || next) {
|
|
children = [React__default.createElement(
|
|
'span',
|
|
{
|
|
'aria-hidden': 'true',
|
|
key: 'caret'
|
|
},
|
|
children || defaultCaret
|
|
), React__default.createElement(
|
|
'span',
|
|
{
|
|
className: 'sr-only',
|
|
key: 'sr'
|
|
},
|
|
ariaLabel
|
|
)];
|
|
}
|
|
|
|
return React__default.createElement(
|
|
Tag,
|
|
_extends({}, attributes, {
|
|
className: classes,
|
|
'aria-label': ariaLabel
|
|
}),
|
|
children
|
|
);
|
|
};
|
|
|
|
PaginationLink.propTypes = propTypes$60;
|
|
PaginationLink.defaultProps = defaultProps$56;
|
|
|
|
var propTypes$61 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
activeTab: propTypes$1.any,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$57 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var childContextTypes$2 = {
|
|
activeTabId: propTypes$1.any
|
|
};
|
|
|
|
var TabContent = function (_Component) {
|
|
inherits(TabContent, _Component);
|
|
|
|
function TabContent(props) {
|
|
classCallCheck(this, TabContent);
|
|
|
|
var _this = possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).call(this, props));
|
|
|
|
_this.state = {
|
|
activeTab: _this.props.activeTab
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(TabContent, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
return {
|
|
activeTabId: this.state.activeTab
|
|
};
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
if (this.state.activeTab !== nextProps.activeTab) {
|
|
this.setState({
|
|
activeTab: nextProps.activeTab
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
className = _props.className,
|
|
cssModule = _props.cssModule,
|
|
Tag = _props.tag;
|
|
|
|
|
|
var attributes = omit(this.props, Object.keys(propTypes$61));
|
|
|
|
var classes = mapToCssModules(classnames('tab-content', className), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
}
|
|
}]);
|
|
return TabContent;
|
|
}(React.Component);
|
|
|
|
TabContent.propTypes = propTypes$61;
|
|
TabContent.defaultProps = defaultProps$57;
|
|
TabContent.childContextTypes = childContextTypes$2;
|
|
|
|
var propTypes$62 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
tabId: propTypes$1.any
|
|
};
|
|
|
|
var defaultProps$58 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var contextTypes$3 = {
|
|
activeTabId: propTypes$1.any
|
|
};
|
|
|
|
function TabPane(props, context) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
tabId = props.tabId,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tabId', 'tag']);
|
|
|
|
var classes = mapToCssModules(classnames('tab-pane', className, { active: tabId === context.activeTabId }), cssModule);
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
}
|
|
TabPane.propTypes = propTypes$62;
|
|
TabPane.defaultProps = defaultProps$58;
|
|
TabPane.contextTypes = contextTypes$3;
|
|
|
|
var propTypes$63 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
fluid: propTypes$1.bool,
|
|
className: propTypes$1.string,
|
|
cssModule: propTypes$1.object
|
|
};
|
|
|
|
var defaultProps$59 = {
|
|
tag: 'div'
|
|
};
|
|
|
|
var Jumbotron = function Jumbotron(props) {
|
|
var className = props.className,
|
|
cssModule = props.cssModule,
|
|
Tag = props.tag,
|
|
fluid = props.fluid,
|
|
attributes = objectWithoutProperties(props, ['className', 'cssModule', 'tag', 'fluid']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'jumbotron', fluid ? 'jumbotron-fluid' : false), cssModule);
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
Jumbotron.propTypes = propTypes$63;
|
|
Jumbotron.defaultProps = defaultProps$59;
|
|
|
|
var propTypes$64 = {
|
|
children: propTypes$1.node,
|
|
className: propTypes$1.string,
|
|
closeClassName: propTypes$1.string,
|
|
closeAriaLabel: propTypes$1.string,
|
|
cssModule: propTypes$1.object,
|
|
color: propTypes$1.string,
|
|
isOpen: propTypes$1.bool,
|
|
toggle: propTypes$1.func,
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
transition: propTypes$1.shape(Fade.propTypes)
|
|
};
|
|
|
|
var defaultProps$60 = {
|
|
color: 'success',
|
|
isOpen: true,
|
|
tag: 'div',
|
|
closeAriaLabel: 'Close',
|
|
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,
|
|
attributes = objectWithoutProperties(props, ['className', 'closeClassName', 'closeAriaLabel', 'cssModule', 'tag', 'color', 'isOpen', 'toggle', 'children', 'transition']);
|
|
|
|
|
|
var classes = mapToCssModules(classnames(className, 'alert', 'alert-' + color, { 'alert-dismissible': toggle }), cssModule);
|
|
|
|
var closeClasses = mapToCssModules(classnames('close', closeClassName), cssModule);
|
|
|
|
return React__default.createElement(
|
|
Fade,
|
|
_extends({}, attributes, transition, { tag: Tag, className: classes, 'in': isOpen, role: 'alert' }),
|
|
toggle ? React__default.createElement(
|
|
'button',
|
|
{ type: 'button', className: closeClasses, 'aria-label': closeAriaLabel, onClick: toggle },
|
|
React__default.createElement(
|
|
'span',
|
|
{ 'aria-hidden': 'true' },
|
|
'\xD7'
|
|
)
|
|
) : null,
|
|
children
|
|
);
|
|
}
|
|
|
|
Alert.propTypes = propTypes$64;
|
|
Alert.defaultProps = defaultProps$60;
|
|
|
|
var _transitionStatusToCl;
|
|
|
|
var propTypes$65 = _extends({}, Transition.propTypes, {
|
|
isOpen: propTypes$1.bool,
|
|
children: propTypes$1.oneOfType([propTypes$1.arrayOf(propTypes$1.node), propTypes$1.node]),
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.node,
|
|
navbar: propTypes$1.bool,
|
|
cssModule: propTypes$1.object
|
|
});
|
|
|
|
var defaultProps$61 = _extends({}, Transition.defaultProps, {
|
|
isOpen: false,
|
|
appear: false,
|
|
enter: true,
|
|
exit: true,
|
|
tag: 'div',
|
|
timeout: TransitionTimeouts.Collapse
|
|
});
|
|
|
|
var transitionStatusToClassHash = (_transitionStatusToCl = {}, defineProperty(_transitionStatusToCl, TransitionStatuses.ENTERING, 'collapsing'), defineProperty(_transitionStatusToCl, TransitionStatuses.ENTERED, 'collapse show'), defineProperty(_transitionStatusToCl, TransitionStatuses.EXITING, 'collapsing'), defineProperty(_transitionStatusToCl, TransitionStatuses.EXITED, 'collapse'), _transitionStatusToCl);
|
|
|
|
function getTransitionClass(status) {
|
|
return transitionStatusToClassHash[status] || 'collapse';
|
|
}
|
|
|
|
function getHeight(node) {
|
|
return node.scrollHeight;
|
|
}
|
|
|
|
var Collapse = function (_Component) {
|
|
inherits(Collapse, _Component);
|
|
|
|
function Collapse(props) {
|
|
classCallCheck(this, Collapse);
|
|
|
|
var _this = possibleConstructorReturn(this, (Collapse.__proto__ || Object.getPrototypeOf(Collapse)).call(this, props));
|
|
|
|
_this.state = {
|
|
height: null
|
|
};
|
|
|
|
['onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].forEach(function (name) {
|
|
_this[name] = _this[name].bind(_this);
|
|
});
|
|
return _this;
|
|
}
|
|
|
|
createClass(Collapse, [{
|
|
key: 'onEntering',
|
|
value: function onEntering(node, isAppearing) {
|
|
this.setState({ height: getHeight(node) });
|
|
this.props.onEntering(node, isAppearing);
|
|
}
|
|
}, {
|
|
key: 'onEntered',
|
|
value: function onEntered(node, isAppearing) {
|
|
this.setState({ height: null });
|
|
this.props.onEntered(node, isAppearing);
|
|
}
|
|
}, {
|
|
key: 'onExit',
|
|
value: function onExit(node) {
|
|
this.setState({ height: getHeight(node) });
|
|
this.props.onExit(node);
|
|
}
|
|
}, {
|
|
key: 'onExiting',
|
|
value: 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);
|
|
}
|
|
}, {
|
|
key: 'onExited',
|
|
value: function onExited(node) {
|
|
this.setState({ height: null });
|
|
this.props.onExited(node);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Tag = _props.tag,
|
|
isOpen = _props.isOpen,
|
|
className = _props.className,
|
|
navbar = _props.navbar,
|
|
cssModule = _props.cssModule,
|
|
children = _props.children,
|
|
otherProps = objectWithoutProperties(_props, ['tag', 'isOpen', 'className', 'navbar', 'cssModule', 'children']);
|
|
var height = this.state.height;
|
|
|
|
// In NODE_ENV=production the Transition.propTypes are wrapped which results in an
|
|
// empty object "{}". This is the result of the `react-transition-group` babel
|
|
// configuration settings. Therefore, to ensure that production builds work without
|
|
// error, we can either explicitly define keys or use the Transition.defaultProps.
|
|
// Using the Transition.defaultProps excludes any required props. Thus, the best
|
|
// solution is to explicitly define required props in our utilities and reference these.
|
|
// This also gives us more flexibility in the future to remove the prop-types
|
|
// dependency in distribution builds (Similar to how `react-transition-group` does).
|
|
// Note: Without omitting the `react-transition-group` props, the resulting child
|
|
// Tag component would inherit the Transition properties as attributes for the HTML
|
|
// element which results in errors/warnings for non-valid attributes.
|
|
|
|
var transitionProps = pick(otherProps, TransitionPropTypeKeys);
|
|
var childProps = omit(otherProps, TransitionPropTypeKeys);
|
|
|
|
return React__default.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 React__default.createElement(
|
|
Tag,
|
|
_extends({}, childProps, {
|
|
style: _extends({}, childProps.style, style),
|
|
className: classes
|
|
}),
|
|
children
|
|
);
|
|
}
|
|
);
|
|
}
|
|
}]);
|
|
return Collapse;
|
|
}(React.Component);
|
|
|
|
Collapse.propTypes = propTypes$65;
|
|
Collapse.defaultProps = defaultProps$61;
|
|
|
|
var propTypes$66 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
active: propTypes$1.bool,
|
|
disabled: propTypes$1.bool,
|
|
color: propTypes$1.string,
|
|
action: propTypes$1.bool,
|
|
className: propTypes$1.any
|
|
};
|
|
|
|
var defaultProps$62 = {
|
|
tag: 'li'
|
|
};
|
|
|
|
var handleDisabledOnClick = function handleDisabledOnClick(e) {
|
|
e.preventDefault();
|
|
};
|
|
|
|
var ListGroupItem = function ListGroupItem(props) {
|
|
var className = props.className,
|
|
Tag = props.tag,
|
|
active = props.active,
|
|
disabled = props.disabled,
|
|
action = props.action,
|
|
color = props.color,
|
|
attributes = objectWithoutProperties(props, ['className', 'tag', 'active', 'disabled', 'action', 'color']);
|
|
|
|
var classes = classnames(className, active ? 'active' : false, disabled ? 'disabled' : false, action ? 'list-group-item-action' : false, color ? 'list-group-item-' + color : false, 'list-group-item');
|
|
|
|
// Prevent click event when disabled.
|
|
if (disabled) {
|
|
attributes.onClick = handleDisabledOnClick;
|
|
}
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ListGroupItem.propTypes = propTypes$66;
|
|
ListGroupItem.defaultProps = defaultProps$62;
|
|
|
|
var propTypes$67 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.any
|
|
};
|
|
|
|
var defaultProps$63 = {
|
|
tag: 'h5'
|
|
};
|
|
|
|
var ListGroupItemHeading = function ListGroupItemHeading(props) {
|
|
var className = props.className,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'tag']);
|
|
|
|
var classes = classnames(className, 'list-group-item-heading');
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ListGroupItemHeading.propTypes = propTypes$67;
|
|
ListGroupItemHeading.defaultProps = defaultProps$63;
|
|
|
|
var propTypes$68 = {
|
|
tag: propTypes$1.oneOfType([propTypes$1.func, propTypes$1.string]),
|
|
className: propTypes$1.any
|
|
};
|
|
|
|
var defaultProps$64 = {
|
|
tag: 'p'
|
|
};
|
|
|
|
var ListGroupItemText = function ListGroupItemText(props) {
|
|
var className = props.className,
|
|
Tag = props.tag,
|
|
attributes = objectWithoutProperties(props, ['className', 'tag']);
|
|
|
|
var classes = classnames(className, 'list-group-item-text');
|
|
|
|
return React__default.createElement(Tag, _extends({}, attributes, { className: classes }));
|
|
};
|
|
|
|
ListGroupItemText.propTypes = propTypes$68;
|
|
ListGroupItemText.defaultProps = defaultProps$64;
|
|
|
|
var Component$1 = React__default.Component;
|
|
|
|
var components = {
|
|
UncontrolledAlert: Alert,
|
|
UncontrolledButtonDropdown: ButtonDropdown,
|
|
UncontrolledDropdown: Dropdown,
|
|
UncontrolledNavDropdown: NavDropdown,
|
|
UncontrolledTooltip: Tooltip
|
|
};
|
|
|
|
Object.keys(components).forEach(function (key) {
|
|
var Tag = components[key];
|
|
var defaultValue = Tag === Alert;
|
|
|
|
var Uncontrolled = function (_Component) {
|
|
inherits(Uncontrolled, _Component);
|
|
|
|
function Uncontrolled(props) {
|
|
classCallCheck(this, Uncontrolled);
|
|
|
|
var _this = possibleConstructorReturn(this, (Uncontrolled.__proto__ || Object.getPrototypeOf(Uncontrolled)).call(this, props));
|
|
|
|
_this.state = { isOpen: defaultValue };
|
|
|
|
_this.toggle = _this.toggle.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Uncontrolled, [{
|
|
key: 'toggle',
|
|
value: function toggle() {
|
|
this.setState({ isOpen: !this.state.isOpen });
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
if (key === 'UncontrolledNavDropdown') {
|
|
warnOnce('The "UncontrolledNavDropdown" component has been deprecated.\nPlease use component "UncontrolledDropdown" with nav prop.');
|
|
}
|
|
return React__default.createElement(Tag, _extends({ isOpen: this.state.isOpen, toggle: this.toggle }, this.props));
|
|
}
|
|
}]);
|
|
return Uncontrolled;
|
|
}(Component$1);
|
|
|
|
Uncontrolled.displayName = key;
|
|
|
|
components[key] = Uncontrolled;
|
|
});
|
|
|
|
var UncontrolledAlert = components.UncontrolledAlert;
|
|
var UncontrolledButtonDropdown = components.UncontrolledButtonDropdown;
|
|
var UncontrolledDropdown = components.UncontrolledDropdown;
|
|
var UncontrolledNavDropdown = components.UncontrolledNavDropdown;
|
|
var UncontrolledTooltip = components.UncontrolledTooltip;
|
|
|
|
exports.Alert = Alert;
|
|
exports.Container = Container;
|
|
exports.Row = Row;
|
|
exports.Col = Col;
|
|
exports.Navbar = Navbar;
|
|
exports.NavbarBrand = NavbarBrand;
|
|
exports.NavbarToggler = NavbarToggler;
|
|
exports.Nav = Nav;
|
|
exports.NavItem = NavItem;
|
|
exports.NavDropdown = NavDropdown;
|
|
exports.NavLink = NavLink;
|
|
exports.Breadcrumb = Breadcrumb;
|
|
exports.BreadcrumbItem = BreadcrumbItem;
|
|
exports.Button = Button;
|
|
exports.ButtonDropdown = ButtonDropdown;
|
|
exports.ButtonGroup = ButtonGroup;
|
|
exports.ButtonToolbar = ButtonToolbar;
|
|
exports.Dropdown = Dropdown;
|
|
exports.DropdownItem = DropdownItem;
|
|
exports.DropdownMenu = DropdownMenu;
|
|
exports.DropdownToggle = DropdownToggle;
|
|
exports.Fade = Fade;
|
|
exports.Badge = Badge;
|
|
exports.Card = Card;
|
|
exports.CardLink = CardLink;
|
|
exports.CardGroup = CardGroup;
|
|
exports.CardDeck = CardDeck;
|
|
exports.CardColumns = CardColumns;
|
|
exports.CardBody = CardBody;
|
|
exports.CardBlock = CardBlock;
|
|
exports.CardFooter = CardFooter;
|
|
exports.CardHeader = CardHeader;
|
|
exports.CardImg = CardImg;
|
|
exports.CardImgOverlay = CardImgOverlay;
|
|
exports.Carousel = Carousel;
|
|
exports.UncontrolledCarousel = UncontrolledCarousel;
|
|
exports.CarouselControl = CarouselControl;
|
|
exports.CarouselItem = CarouselItem;
|
|
exports.CarouselIndicators = CarouselIndicators;
|
|
exports.CarouselCaption = CarouselCaption;
|
|
exports.CardSubtitle = CardSubtitle;
|
|
exports.CardText = CardText;
|
|
exports.CardTitle = CardTitle;
|
|
exports.Popover = Popover;
|
|
exports.PopoverContent = PopoverContent;
|
|
exports.PopoverBody = PopoverBody;
|
|
exports.PopoverTitle = PopoverTitle;
|
|
exports.PopoverHeader = PopoverHeader;
|
|
exports.Progress = Progress;
|
|
exports.Modal = Modal;
|
|
exports.ModalHeader = ModalHeader;
|
|
exports.ModalBody = ModalBody;
|
|
exports.ModalFooter = ModalFooter;
|
|
exports.PopperContent = PopperContent;
|
|
exports.PopperTargetHelper = PopperTargetHelper;
|
|
exports.Tooltip = Tooltip;
|
|
exports.Table = Table;
|
|
exports.ListGroup = ListGroup;
|
|
exports.Form = Form;
|
|
exports.FormFeedback = FormFeedback;
|
|
exports.FormGroup = FormGroup;
|
|
exports.FormText = FormText;
|
|
exports.Input = Input;
|
|
exports.InputGroup = InputGroup;
|
|
exports.InputGroupAddon = InputGroupAddon;
|
|
exports.InputGroupButton = InputGroupButton;
|
|
exports.Label = Label;
|
|
exports.Media = Media;
|
|
exports.Pagination = Pagination;
|
|
exports.PaginationItem = PaginationItem;
|
|
exports.PaginationLink = PaginationLink;
|
|
exports.TabContent = TabContent;
|
|
exports.TabPane = TabPane;
|
|
exports.Jumbotron = Jumbotron;
|
|
exports.Collapse = Collapse;
|
|
exports.ListGroupItem = ListGroupItem;
|
|
exports.ListGroupItemText = ListGroupItemText;
|
|
exports.ListGroupItemHeading = ListGroupItemHeading;
|
|
exports.UncontrolledAlert = UncontrolledAlert;
|
|
exports.UncontrolledButtonDropdown = UncontrolledButtonDropdown;
|
|
exports.UncontrolledDropdown = UncontrolledDropdown;
|
|
exports.UncontrolledNavDropdown = UncontrolledNavDropdown;
|
|
exports.UncontrolledTooltip = UncontrolledTooltip;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
})));
|
|
//# sourceMappingURL=reactstrap.full.js.map
|