mesosphere-react-typeahead
Version:
React-based typeahead component
1,823 lines (1,506 loc) • 111 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["ReactBootstrapTypeahead"] = factory(require("react"), require("react-dom"));
else
root["ReactBootstrapTypeahead"] = factory(root["React"], root["ReactDOM"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var Typeahead = __webpack_require__(28);
module.exports = Typeahead;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
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;
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 (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
return classNames;
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {
window.classNames = classNames;
}
}());
/***/ },
/* 3 */
/***/ function(module, exports) {
"use strict";
/**
* KeyCode
*
* Map of common (non-printable) keycodes for the `keydown` and `keyup` events.
* Note that `keypress` handles things differently and may not return the same
* values.
*/
module.exports = {
BACKSPACE: 8,
TAB: 9,
RETURN: 13,
ESC: 27,
SPACE: 32,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var eq = __webpack_require__(58);
/**
* Gets the index at which the `key` is found in `array` of key-value pairs.
*
* @private
* @param {Array} array The array to search.
* @param {*} key The key to search for.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq(array[length][0], key)) {
return length;
}
}
return -1;
}
module.exports = assocIndexOf;
/***/ },
/* 5 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ },
/* 6 */
/***/ function(module, exports) {
/**
* Checks if `value` is classified as an `Array` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array, else `false`.
* @example
*
* _.isArray([1, 2, 3]);
* // => true
*
* _.isArray(document.body.children);
* // => false
*
* _.isArray('abc');
* // => false
*
* _.isArray(_.noop);
* // => false
*/
var isArray = Array.isArray;
module.exports = isArray;
/***/ },
/* 7 */
/***/ function(module, exports) {
/**
* 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 == 'object';
}
module.exports = isObjectLike;
/***/ },
/* 8 */
/***/ function(module, exports) {
/**
* This method returns the first argument it receives.
*
* @static
* @since 0.1.0
* @memberOf _
* @category Util
* @param {*} value Any value.
* @returns {*} Returns `value`.
* @example
*
* var object = { 'a': 1 };
*
* console.log(_.identity(object) === object);
* // => true
*/
function identity(value) {
return value;
}
module.exports = identity;
/***/ },
/* 9 */
/***/ function(module, exports) {
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/**
* The base implementation of `getTag`.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
function baseGetTag(value) {
return objectToString.call(value);
}
module.exports = baseGetTag;
/***/ },
/* 10 */
/***/ function(module, exports) {
/**
* Removes all key-value entries from the list cache.
*
* @private
* @name clear
* @memberOf ListCache
*/
function listCacheClear() {
this.__data__ = [];
}
module.exports = listCacheClear;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
var assocIndexOf = __webpack_require__(4);
/** Used for built-in method references. */
var arrayProto = Array.prototype;
/** Built-in value references. */
var splice = arrayProto.splice;
/**
* Removes `key` and its value from the list cache.
*
* @private
* @name delete
* @memberOf ListCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function listCacheDelete(key) {
var data = this.__data__,
index = assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
return true;
}
module.exports = listCacheDelete;
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
var assocIndexOf = __webpack_require__(4);
/**
* Gets the list cache value for `key`.
*
* @private
* @name get
* @memberOf ListCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function listCacheGet(key) {
var data = this.__data__,
index = assocIndexOf(data, key);
return index < 0 ? undefined : data[index][1];
}
module.exports = listCacheGet;
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
var assocIndexOf = __webpack_require__(4);
/**
* Checks if a list cache value for `key` exists.
*
* @private
* @name has
* @memberOf ListCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function listCacheHas(key) {
return assocIndexOf(this.__data__, key) > -1;
}
module.exports = listCacheHas;
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
var assocIndexOf = __webpack_require__(4);
/**
* Sets the list cache `key` to `value`.
*
* @private
* @name set
* @memberOf ListCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the list cache instance.
*/
function listCacheSet(key, value) {
var data = this.__data__,
index = assocIndexOf(data, key);
if (index < 0) {
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
module.exports = listCacheSet;
/***/ },
/* 15 */
/***/ function(module, exports) {
/**
* Creates a unary function that invokes `func` with its argument transformed.
*
* @private
* @param {Function} func The function to wrap.
* @param {Function} transform The argument transform.
* @returns {Function} Returns the new function.
*/
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
module.exports = overArg;
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
var isFunction = __webpack_require__(18),
isLength = __webpack_require__(65);
/**
* Checks if `value` is array-like. A value is considered array-like if it's
* not a function and has a `value.length` that's an integer greater than or
* equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is array-like, else `false`.
* @example
*
* _.isArrayLike([1, 2, 3]);
* // => true
*
* _.isArrayLike(document.body.children);
* // => true
*
* _.isArrayLike('abc');
* // => true
*
* _.isArrayLike(_.noop);
* // => false
*/
function isArrayLike(value) {
return value != null && isLength(value.length) && !isFunction(value);
}
module.exports = isArrayLike;
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
var baseIsEqual = __webpack_require__(43);
/**
* Performs a deep comparison between two values to determine if they are
* equivalent.
*
* **Note:** This method supports comparing arrays, array buffers, booleans,
* date objects, error objects, maps, numbers, `Object` objects, regexes,
* sets, strings, symbols, and typed arrays. `Object` objects are compared
* by their own, not inherited, enumerable properties. Functions and DOM
* nodes are **not** supported.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
* @example
*
* var object = { 'a': 1 };
* var other = { 'a': 1 };
*
* _.isEqual(object, other);
* // => true
*
* object === other;
* // => false
*/
function isEqual(value, other) {
return baseIsEqual(value, other);
}
module.exports = isEqual;
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(19);
/** `Object#toString` result references. */
var funcTag = '[object Function]',
genTag = '[object GeneratorFunction]';
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a function, 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 and weak map constructors,
// and PhantomJS 1.9 which returns 'function' for `NodeList` instances.
var tag = isObject(value) ? objectToString.call(value) : '';
return tag == funcTag || tag == genTag;
}
module.exports = isFunction;
/***/ },
/* 19 */
/***/ function(module, exports) {
/**
* 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(value) {
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
module.exports = isObject;
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
var overArg = __webpack_require__(15);
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeKeys = overArg(Object.keys, Object);
module.exports = nativeKeys;
/***/ },
/* 21 */
/***/ function(module, exports) {
/**
* This method returns `undefined`.
*
* @static
* @memberOf _
* @since 2.3.0
* @category Util
* @example
*
* _.times(2, _.noop);
* // => [undefined, undefined]
*/
function noop() {
// No operation performed.
}
module.exports = noop;
/***/ },
/* 22 */
/***/ function(module, exports, __webpack_require__) {
var arrayMap = __webpack_require__(39),
baseFlatten = __webpack_require__(42),
basePick = __webpack_require__(45),
baseRest = __webpack_require__(47),
toKey = __webpack_require__(57);
/**
* Creates an object composed of the picked `object` properties.
*
* @static
* @since 0.1.0
* @memberOf _
* @category Object
* @param {Object} object The source object.
* @param {...(string|string[])} [props] The property identifiers to pick.
* @returns {Object} Returns the new object.
* @example
*
* var object = { 'a': 1, 'b': '2', 'c': 3 };
*
* _.pick(object, ['a', 'c']);
* // => { 'a': 1, 'c': 3 }
*/
var pick = baseRest(function(object, props) {
return object == null ? {} : basePick(object, arrayMap(baseFlatten(props, 1), toKey));
});
module.exports = pick;
/***/ },
/* 23 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
* A higher-order-component for handling onClickOutside for React components.
*/
(function(root) {
"use strict";
// administrative
var registeredComponents = [];
var handlers = [];
var IGNORE_CLASS = 'ignore-react-onclickoutside';
var DEFAULT_EVENTS = ['mousedown', 'touchstart'];
/**
* Check whether some DOM node is our Component's node.
*/
var isNodeFound = function(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
}
// SVG <use/> elements do not technically reside in the rendered DOM, so
// they do not have classList directly, but they offer a link to their
// corresponding element, which can have classList. This extra check is for
// that case.
// See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement
// Discussion: https://github.com/Pomax/react-onclickoutside/pull/17
if (current.correspondingElement) {
return current.correspondingElement.classList.contains(ignoreClass);
}
return current.classList.contains(ignoreClass);
};
/**
* Generate the event handler that checks whether a clicked DOM node
* is inside of, or lives outside of, our Component's node tree.
*/
var generateOutsideCheck = function(componentNode, componentInstance, ignoreClass, preventDefault, stopPropagation) {
return function(evt) {
if (preventDefault) {
evt.preventDefault();
}
if (stopPropagation) {
evt.stopPropagation();
}
var current = evt.target;
var found = false;
// If source=local then this event came from "somewhere"
// inside and should be ignored. We could handle this with
// a layered approach, too, but that requires going back to
// thinking in terms of Dom node nesting, running counter
// to React's "you shouldn't care about the DOM" philosophy.
while(current.parentNode) {
found = isNodeFound(current, componentNode, ignoreClass);
if(found) return;
current = current.parentNode;
}
// If element is in a detached DOM, consider it "not clicked
// outside", as it cannot be known whether it was outside.
if(current !== document) return;
componentInstance.handleClickOutside.bind(componentInstance, evt)();
}
};
/**
* This function generates the HOC function that you'll use
* in order to impart onOutsideClick listening to an
* arbitrary component.
*/
function setupHOC(root, React, ReactDOM) {
// The actual Component-wrapping HOC:
return function(Component) {
var wrapComponentWithOnClickOutsideHandling = React.createClass({
statics: {
/**
* Access the wrapped Component's class.
*/
getClass: function() {
if (Component.getClass) {
return Component.getClass();
}
return Component;
}
},
/**
* Access the wrapped Component's instance.
*/
getInstance: function() {
return this.refs.instance;
},
// this is given meaning in componentDidMount
__outsideClickHandler: function(evt) {},
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
componentDidMount: function() {
var instance = this.getInstance();
if(typeof instance.handleClickOutside !== "function") {
throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");
}
var fn = this.__outsideClickHandler = generateOutsideCheck(
ReactDOM.findDOMNode(instance),
instance,
this.props.outsideClickIgnoreClass || IGNORE_CLASS,
this.props.preventDefault || false,
this.props.stopPropagation || false
);
var pos = registeredComponents.length;
registeredComponents.push(this);
handlers[pos] = fn;
// If there is a truthy disableOnClickOutside property for this
// component, don't immediately start listening for outside events.
if (!this.props.disableOnClickOutside) {
this.enableOnClickOutside();
}
},
/**
* Track for disableOnClickOutside props changes and enable/disable click outside
*/
componentWillReceiveProps: function(nextProps) {
if (this.props.disableOnClickOutside && !nextProps.disableOnClickOutside) {
this.enableOnClickOutside();
} else if (!this.props.disableOnClickOutside && nextProps.disableOnClickOutside) {
this.disableOnClickOutside();
}
},
/**
* Remove the document's event listeners
*/
componentWillUnmount: function() {
this.disableOnClickOutside();
this.__outsideClickHandler = false;
var pos = registeredComponents.indexOf(this);
if( pos>-1) {
// clean up so we don't leak memory
if (handlers[pos]) { handlers.splice(pos, 1); }
registeredComponents.splice(pos, 1);
}
},
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
enableOnClickOutside: function() {
var fn = this.__outsideClickHandler;
if (typeof document !== "undefined") {
var events = this.props.eventTypes || DEFAULT_EVENTS;
if (!events.forEach) { events = [events] };
events.forEach(function (eventName) {
document.addEventListener(eventName, fn);
});
}
},
/**
* Can be called to explicitly disable event listening
* for clicks and touches outside of this element.
*/
disableOnClickOutside: function() {
var fn = this.__outsideClickHandler;
if (typeof document !== "undefined") {
var events = this.props.eventTypes || DEFAULT_EVENTS;
if (!events.forEach) { events = [events] };
events.forEach(function (eventName) {
document.removeEventListener(eventName, fn);
});
}
},
/**
* Pass-through render
*/
render: function() {
var passedProps = this.props;
var props = { ref: 'instance' };
Object.keys(this.props).forEach(function(key) {
props[key] = passedProps[key];
});
return React.createElement(Component, props);
}
});
// Add display name for React devtools
(function bindWrappedComponentName(c, wrapper) {
var componentName = c.displayName || c.name || 'Component'
wrapper.displayName = 'OnClickOutside(' + componentName + ')';
}(Component, wrapComponentWithOnClickOutsideHandling));
return wrapComponentWithOnClickOutsideHandling;
};
}
/**
* This function sets up the library in ways that
* work with the various modulde loading solutions
* used in JavaScript land today.
*/
function setupBinding(root, factory) {
if (true) {
// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1),__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = function(React, ReactDom) {
return factory(root, React, ReactDom);
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports === 'object') {
// Node. Note that this does not work with strict
// CommonJS, but only CommonJS-like environments
// that support module.exports
module.exports = factory(root, require('react'), require('react-dom'));
} else {
// Browser globals (root is window)
root.onClickOutside = factory(root, React, ReactDOM);
}
}
// Make it all happen
setupBinding(root, setupHOC);
}(this));
/***/ },
/* 24 */
/***/ function(module, exports, __webpack_require__) {
'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 _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Menu = function Menu(props) {
return _react2.default.createElement(
'ul',
_extends({}, props, {
className: props.className }),
props.children
);
};
exports.default = Menu;
/***/ },
/* 25 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _noop2 = __webpack_require__(21);
var _noop3 = _interopRequireDefault(_noop2);
var _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _scrollIntoViewIfNeeded = __webpack_require__(32);
var _scrollIntoViewIfNeeded2 = _interopRequireDefault(_scrollIntoViewIfNeeded);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var MenuItem = _react2.default.createClass({
displayName: 'MenuItem',
getDefaultProps: function getDefaultProps() {
return {
onClick: _noop3.default
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.active) {
// Ensures that if the menu items exceed the bounds of the menu, the
// menu will scroll up or down as the user hits the arrow keys.
(0, _scrollIntoViewIfNeeded2.default)((0, _reactDom.findDOMNode)(this));
}
},
render: function render() {
var _props = this.props;
var active = _props.active;
var children = _props.children;
var className = _props.className;
var disabled = _props.disabled;
return _react2.default.createElement(
'li',
{
className: (0, _classnames2.default)({
'active': active,
'disabled': disabled
}, className),
onClick: this._handleClick },
children
);
},
_handleClick: function _handleClick(e) {
var _props2 = this.props;
var disabled = _props2.disabled;
var onClick = _props2.onClick;
e.preventDefault();
!disabled && onClick(e);
}
});
exports.default = MenuItem;
/***/ },
/* 26 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(5);
var _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _keyCode = __webpack_require__(3);
var _keyCode2 = _interopRequireDefault(_keyCode);
var _reactOnclickoutside = __webpack_require__(23);
var _reactOnclickoutside2 = _interopRequireDefault(_reactOnclickoutside);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Token
*
* Individual token component, generally displayed within the TokenizerInput
* component, but can also be rendered on its own.
*/
var Token = _react2.default.createClass({
displayName: 'Token',
propTypes: {
/**
* Handler for removing/deleting the token. If not defined, the token will
* be rendered in a read-only state.
*/
onRemove: _react.PropTypes.func
},
getInitialState: function getInitialState() {
return {
selected: false
};
},
render: function render() {
return this.props.onRemove && !this.props.disabled ? this._renderRemoveableToken() : this._renderToken();
},
_renderRemoveableToken: function _renderRemoveableToken() {
return _react2.default.createElement(
'div',
{
className: (0, _classnames2.default)('token', 'token-removeable', {
'token-selected': this.state.selected
}, this.props.className),
onBlur: this._handleBlur,
onClick: this._handleSelect,
onFocus: this._handleSelect,
onKeyDown: this._handleKeyDown,
tabIndex: 0 },
this.props.children,
_react2.default.createElement(
'span',
{
className: 'close-button',
onClick: this._handleRemove,
role: 'button' },
'×'
)
);
},
_renderToken: function _renderToken() {
var _props = this.props;
var className = _props.className;
var disabled = _props.disabled;
var href = _props.href;
var classnames = (0, _classnames2.default)('token', className);
if (href) {
return _react2.default.createElement(
'a',
{ className: classnames, disabled: disabled, href: href },
this.props.children
);
}
return _react2.default.createElement(
'div',
{ className: classnames, disabled: disabled },
this.props.children
);
},
_handleBlur: function _handleBlur(e) {
(0, _reactDom.findDOMNode)(this).blur();
this.setState({ selected: false });
},
_handleKeyDown: function _handleKeyDown(e) {
switch (e.keyCode) {
case _keyCode2.default.BACKSPACE:
if (this.state.selected) {
// Prevent backspace keypress from triggering the browser "back"
// action.
e.preventDefault();
this._handleRemove();
}
break;
}
},
/**
* From `onClickOutside` mixin.
*/
handleClickOutside: function handleClickOutside(e) {
this._handleBlur();
},
_handleRemove: function _handleRemove(e) {
this.props.onRemove && this.props.onRemove();
},
_handleSelect: function _handleSelect(e) {
e.stopPropagation();
this.setState({ selected: true });
}
});
exports.default = (0, _reactOnclickoutside2.default)(Token);
/***/ },
/* 27 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _reactInputAutosize = __webpack_require__(73);
var _reactInputAutosize2 = _interopRequireDefault(_reactInputAutosize);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _Token = __webpack_require__(26);
var _Token2 = _interopRequireDefault(_Token);
var _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _reactDom = __webpack_require__(5);
var _keyCode = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* TokenizerInput
*
* Accepts multiple selections from a Typeahead component and renders them as
* tokens within an input.
*/
var TokenizerInput = _react2.default.createClass({
displayName: 'TokenizerInput',
propTypes: {
disabled: _react.PropTypes.bool,
labelKey: _react.PropTypes.string,
placeholder: _react.PropTypes.string,
selected: _react.PropTypes.array
},
getInitialState: function getInitialState() {
return {
isFocused: false
};
},
render: function render() {
var _this = this;
var _props = this.props;
var disabled = _props.disabled;
var placeholder = _props.placeholder;
var selected = _props.selected;
var text = _props.text;
return _react2.default.createElement(
'div',
{
className: (0, _classnames2.default)('bootstrap-tokenizer', 'clearfix', 'form-control', { 'focus': this.state.isFocused }),
disabled: disabled,
onClick: this._handleInputFocus,
onFocus: this._handleInputFocus,
style: {
cursor: 'text',
height: 'auto'
},
tabIndex: -1 },
selected.map(this._renderToken),
_react2.default.createElement(_reactInputAutosize2.default, {
className: 'bootstrap-tokenizer-input',
disabled: disabled,
inputStyle: {
backgroundColor: 'inherit',
border: 0,
boxShadow: 'none',
cursor: 'inherit',
outline: 'none',
padding: 0
},
onBlur: this._handleBlur,
onChange: this._handleChange,
onFocus: this.props.onFocus,
onKeyDown: this._handleKeydown,
placeholder: selected.length ? null : placeholder,
ref: function ref(_ref) {
return _this.input = _ref;
},
type: 'text',
value: text
})
);
},
blur: function blur() {
this.input.blur();
},
focus: function focus() {
this._handleInputFocus();
},
_renderToken: function _renderToken(option, idx) {
var _props2 = this.props;
var disabled = _props2.disabled;
var labelKey = _props2.labelKey;
var _onRemove = _props2.onRemove;
return _react2.default.createElement(
_Token2.default,
{
disabled: disabled,
key: idx,
onRemove: function onRemove() {
return _onRemove(option);
} },
option[labelKey]
);
},
_handleBlur: function _handleBlur(e) {
this.setState({ isFocused: false });
this.props.onBlur(e);
},
_handleChange: function _handleChange(e) {
this.props.onChange(e.target.value);
},
_handleKeydown: function _handleKeydown(e) {
switch (e.keyCode) {
case _keyCode.BACKSPACE:
var inputNode = (0, _reactDom.findDOMNode)(this.input);
if (inputNode && inputNode.contains(document.activeElement) && !this.props.text) {
// If the input is selected and there is no text, select the last
// token when the user hits backspace.
var sibling = inputNode.previousSibling;
sibling && sibling.focus();
}
break;
}
this.props.onKeyDown(e);
},
_handleInputFocus: function _handleInputFocus(e) {
if (this.props.disabled) {
e.target.blur();
return;
}
// If the user clicks anywhere inside the tokenizer besides a token,
// focus the input.
this.input.focus();
this.setState({ isFocused: true });
}
});
exports.default = TokenizerInput;
/***/ },
/* 28 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _pick2 = __webpack_require__(22);
var _pick3 = _interopRequireDefault(_pick2);
var _noop2 = __webpack_require__(21);
var _noop3 = _interopRequireDefault(_noop2);
var _isEqual2 = __webpack_require__(17);
var _isEqual3 = _interopRequireDefault(_isEqual2);
var _isEmpty2 = __webpack_require__(64);
var _isEmpty3 = _interopRequireDefault(_isEmpty2);
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 _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _TokenizerInput = __webpack_require__(27);
var _TokenizerInput2 = _interopRequireDefault(_TokenizerInput);
var _TypeaheadInput = __webpack_require__(29);
var _TypeaheadInput2 = _interopRequireDefault(_TypeaheadInput);
var _TypeaheadMenu = __webpack_require__(30);
var _TypeaheadMenu2 = _interopRequireDefault(_TypeaheadMenu);
var _getFilteredOptions = __webpack_require__(31);
var _getFilteredOptions2 = _interopRequireDefault(_getFilteredOptions);
var _reactOnclickoutside = __webpack_require__(23);
var _reactOnclickoutside2 = _interopRequireDefault(_reactOnclickoutside);
var _keyCode = __webpack_require__(3);
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; }
/**
* Typeahead
*/
var Typeahead = _react2.default.createClass({
displayName: 'Typeahead',
propTypes: {
/**
* Specify menu alignment. The default value is `justify`, which makes the
* menu as wide as the input and truncates long values. Specifying `left`
* or `right` will align the menu to that side and the width will be
* determined by the length of menu item values.
*/
align: _react.PropTypes.oneOf(['justify', 'left', 'right']),
/**
* Allows the creation of new selections on the fly. Note that any new items
* will be added to the list of selections, but not the list of original
* options unless handled as such by `Typeahead`'s parent.
*/
allowNew: _react.PropTypes.bool,
/**
* Specify any pre-selected options. Use only if you want the component to
* be uncontrolled.
*/
defaultSelected: _react.PropTypes.array,
/**
* Whether to disable the input. Will also disable selections when
* `multiple={true}`.
*/
disabled: _react.PropTypes.bool,
/**
* Message to display in the menu if there are no valid results.
*/
emptyLabel: _react.PropTypes.string,
/**
* Specify which option key to use for display. By default, the selector
* will use the `label` key.
*/
labelKey: _react.PropTypes.string,
/**
* Maximum height of the dropdown menu, in px.
*/
maxHeight: _react.PropTypes.number,
/**
* Number of input characters that must be entered before showing results.
*/
minLength: _react.PropTypes.number,
/**
* Whether or not multiple selections are allowed.
*/
multiple: _react.PropTypes.bool,
/**
* Provides the ability to specify a prefix before the user-entered text to
* indicate that the selection will be new. No-op unless `allowNew={true}`.
*/
newSelectionPrefix: _react.PropTypes.string,
/**
* Callback fired when the input is blurred. Receives an event.
*/
onBlur: _react.PropTypes.func,
/**
* Callback fired whenever items are added or removed. Receives an array of
* the selected options.
*/
onChange: _react.PropTypes.func,
/**
* Callback for handling changes to the user-input text.
*/
onInputChange: _react.PropTypes.func,
/**
* Full set of options, including pre-selected options.
*/
options: _react.PropTypes.array.isRequired,
/**
* For large option sets, initially display a subset of results for improved
* performance. If users scroll to the end, the last item will be a link to
* display the next set of results. Value represents the number of results
* to display. `0` will display all results.
*/
paginateResults: _react.PropTypes.number,
/**
* Prompt displayed when large data sets are paginated.
*/
paginationText: _react.PropTypes.string,
/**
* Placeholder text for the input.
*/
placeholder: _react.PropTypes.string,
/**
* Provides a hook for customized rendering of menu item contents.
*/
renderMenuItemChildren: _react.PropTypes.func,
/**
* The selected option(s) displayed in the input. Use this prop if you want
* to control the component via its parent.
*/
selected: _react.PropTypes.array,
/**
* Class for typeahead dropdown component.
*/
typeaheadMenuClassName: _react.PropTypes.string,
/**
* Wrapper class for typeahead dropdown component.
*/
typeaheadMenuWrapperClassName: _react.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
allowNew: false,
defaultSelected: [],
labelKey: 'label',
onBlur: _noop3.default,
onChange: _noop3.default,
onInputChange: _noop3.default,
minLength: 0,
multiple: false,
selected: []
};
},
getInitialState: function getInitialState() {
var _props = this.props;
var defaultSelected = _props.defaultSelected;
var selected = _props.selected;
selected = selected.slice();
if (!(0, _isEmpty3.default)(defaultSelected)) {
selected = defaultSelected;
}
return {
activeIndex: -1,
selected: selected,
showMenu: false,
text: ''
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var multiple = nextProps.multiple;
var selected = nextProps.selected;
if (!(0, _isEqual3.default)(selected, this.props.selected)) {
// If new selections are passed in via props, treat the component as a
// controlled input.
this.setState({ selected: selected });
}
if (multiple !== this.props.multiple) {
this.setState({ text: '' });
}
},
render: function render() {
var _props2 = this.props;
var options = _props2.options;
var props = _objectWithoutProperties(_props2, ['options']);
var _state = this.state;
var selected = _state.selected;
var text = _state.text;
var filteredOptions = (0, _getFilteredOptions2.default)(options, text, selected, props);
return _react2.default.createElement(
'div',
{
className: 'bootstrap-typeahead open',
style: { position: 'relative' } },
this._renderInput(filteredOptions),
this._renderMenu(filteredOptions)
);
},
blur: function blur() {
this.input && this.input.blur();
},
/**
* Public method to allow external clearing of the input. Clears both text
* and selection(s).
*/
clear: function clear() {
var _getInitialState = this.getInitialState();
var activeIndex = _getInitialState.activeIndex;
var showMenu = _getInitialState.showMenu;
var selected = [];
var text = '';
this.setState({
activeIndex: activeIndex,
selected: selected,
showMenu: showMenu,
text: text
});
this.props.onChange(selected);
this.props.onInputChange(text);
},
focus: function focus() {
this.input && this.input.focus();
},
_renderInput: function _renderInput(filteredOptions) {
var _this = this;
var _props3 = this.props;
var labelKey = _props3.labelKey;
var multiple = _props3.multiple;
var _state2 = this.state;
var activeIndex = _state2.activeIndex;
var selected = _state2.selected;
var text = _state2.text;
var Input = multiple ? _TokenizerInput2.default : _TypeaheadInput2.default;
var inputProps = (0, _pick3.default)(this.props, ['disabled', 'placeholder']);
return _react2.default.createElement(Input, _extends({}, inputProps, {
activeIndex: activeIndex,
labelKey: labelKey,
onAdd: this._handleAddOption,
onBlur: this._handleBlur,
onChange: this._handleTextChange,
onFocus: this._handleFocus,
onKeyDown: function onKeyDown(e) {
return _this._handleKeydown(filteredOptions, e);
},
onRemove: this._handleRemoveOption,
options: filteredOptions,
ref: function ref(_ref) {
return _this.input = _ref;
},
selected: selected.slice(),
text: text
}));
},
_renderMenu: function _renderMenu(filteredOptions) {
var _props4 = this.props;
var labelKey = _props4.labelKey;
var minLength = _props4.minLength;
var typeaheadMenuClassName = _props4.typeaheadMenuClassName;
var typeaheadMenuWrapperClassName = _props4.typeaheadMenuWrapperClassName;
var _state3 = this.state;
var activeIndex = _state3.activeIndex;
var showMenu = _state3.showMenu;
var text = _state3.text;
if (!(showMenu && text.length >= minLength)) {
return null;
}
var menuProps = (0, _pick3.default)(this.props, ['align', 'emptyLabel', 'maxHeight', 'newSelectionPrefix', 'paginationText', 'renderMenuItemChildren']);
var typeaheadMenu = _react2.default.createElement(_TypeaheadMenu2.default, _extends({}, menuProps, {
activeIndex: activeIndex,
className: typeaheadMenuClassName,
initialResultCount: this.props.paginateResults,
labelKey: labelKey,
onClick: this._handleAddOption,
options: filteredOptions,
text: text
}));
if (typeaheadMenuWrapperClassName) {
return _react2.default.createElement(
'div',
{ className: typeaheadMenuWrapperClassName },
typeaheadMenu
);
}
return typeaheadMenu;
},
_handleBlur: function _handleBlur(e) {
// Note: Don't hide the menu here, since that interferes with other actions
// like making a selection by clicking on a menu item.
this.props.onBlur(e);
},
_handleFocus: function _handleFocus() {
this.setState({ showMenu: true });
},
_handleTextChange: function _handleTextChange(text) {
var _getInitialState2 = this.getInitialState();
var activeIndex = _getInitialState2.activeIndex;
this.setState({
activeIndex: activeIndex,
showMenu: true,
text: text
});
this.props.onInputChange(text);
},
_handleKeydown: function _handleKeydown(options, e) {
var activeIndex = this.state.activeIndex;
switch (e.keyCode) {
case _keyCode.UP:
case _keyCode.DOWN:
// Don't cycle through the options if the menu is hidden.
if (!this.state.showMenu) {
return;
}
// Prevents input cursor from going to the beginning when pressing up.
e.preventDefault();
// Increment or decrement index based on user keystroke.
activeIndex += e.keyCode === _keyCode.UP ? -1 : 1;
// If we've reached the end, go back to the beginning or vice-versa.
if (activeIndex === options.length) {
activeIndex = -1;
} else if (activeIndex === -2) {
activeIndex = options.length - 1;
}
this.setState({ activeIndex: activeIndex });
break;
case _keyCode.ESC:
case _keyCode.TAB:
// Prevent closing dialogs.
e.keyCode === _keyCode.ESC && e.preventDefault();
this._hideDropdown();
break;
case _keyCode.RETURN:
// Prevent submitting forms.
e.preventDefault();
if (this.state.showMenu) {
var selected = options[activeIndex];
selected && this._handleAddOption(selected);
}
break;
}
},
_handleAddOption: function _handleAddOption(selectedOption) {
var _props5 = this.props;
var multiple = _props5.multiple;
var labelKey = _props5.labelKey;
var onChange = _props5.onChange;
var onInputChange = _props5.onInputChange;
var selected = void 0;
var text = void 0;
if (multiple) {
// If multiple selections are allowed, add the new selection to the
// existing selections.
selected = this.state.selected.concat(selectedOption);
text = '';
} else {
// If only a single selection is allowed, replace the existing selection
// with the new one.
selected = [selectedOption];
text = selectedOption[labelKey];
}
this.setState({ selected: selected, text: text });
this._hideDropdown();
onChange(selected);
onInputChange(text);
},
_handleRemoveOption: function _handleRemoveOption(removedOption) {
var selected = this.state.selected.slice();
selected = selected.filter(function (option) {
return !(0, _isEqual3.default)(option, removedOption);
});
// Make sure the input stays focused after the item is removed.
this.focus();
this.setState({ selected: selected });
this._hideDropdown();
this.props.onChange(selected);
},
/**
* From `listensToClickOutside` HOC.
*/
handleClickOutside: function handleClickOutside(e) {
this._hideDropdown();
},
_hideDropdown: function _hideDropdown() {
var _getInitialState3 = this.getInitialState();
var activeIndex = _getInitialState3.activeIndex;
var showMenu = _getInitialState3.showMenu;
this.setState({
activeIndex: activeIndex,
showMenu: showMenu
});
}
});
exports.default = (0, _reactOnclickoutside2.default)(Typeahead);
/***/ },
/* 29 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _pick2 = __webpack_require__(22);
var _pick3 = _interopRequireDefault(_pick2);
var _head2 = __webpack_require__(61);
var _head3 = _interopRequireDefault(_head2);
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 _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(2);
var _classnames2 = _interopRequ