diff --git a/.gitignore b/.gitignore index f53a1f6f..8440b4a2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules coverage .nyc_output -dist demo/dist npm-debug.log yarn.lock diff --git a/dist/Autosuggest.js b/dist/Autosuggest.js new file mode 100644 index 00000000..88265339 --- /dev/null +++ b/dist/Autosuggest.js @@ -0,0 +1,961 @@ +'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 _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 _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _arrays = require('shallow-equal/arrays'); + +var _arrays2 = _interopRequireDefault(_arrays); + +var _reactAutowhatever = require('react-autowhatever'); + +var _reactAutowhatever2 = _interopRequireDefault(_reactAutowhatever); + +var _theme = require('./theme'); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +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 === '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 + ); + } + 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 alwaysTrue = function alwaysTrue() { + return true; +}; +var defaultShouldRenderSuggestions = function defaultShouldRenderSuggestions( + value +) { + return value.trim().length > 0; +}; +var defaultRenderSuggestionsContainer = function defaultRenderSuggestionsContainer( + _ref +) { + var containerProps = _ref.containerProps, + children = _ref.children; + return _react2.default.createElement('div', containerProps, children); +}; + +var Autosuggest = (function(_Component) { + _inherits(Autosuggest, _Component); + + function Autosuggest(_ref2) { + var alwaysRenderSuggestions = _ref2.alwaysRenderSuggestions, + highlightedSectionIndex = _ref2.highlightedSectionIndex, + highlightedSuggestionIndex = _ref2.highlightedSuggestionIndex; + + _classCallCheck(this, Autosuggest); + + var _this = _possibleConstructorReturn( + this, + (Autosuggest.__proto__ || Object.getPrototypeOf(Autosuggest)).call(this) + ); + + _initialiseProps.call(_this); + + _this.state = { + isFocused: false, + isCollapsed: !alwaysRenderSuggestions, + highlightedSectionIndex: highlightedSectionIndex, + highlightedSuggestionIndex: highlightedSuggestionIndex, + valueBeforeUpDown: null + }; + + _this.justPressedUpDown = false; + return _this; + } + + _createClass(Autosuggest, [ + { + key: 'componentDidMount', + value: function componentDidMount() { + document.addEventListener('mousedown', this.onDocumentMouseDown); + + this.input = this.autowhatever.input; + this.suggestionsContainer = this.autowhatever.itemsContainer; + } + }, + { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if ( + nextProps.highlightedSuggestionIndex !== + this.props.highlightedSuggestionIndex && + nextProps.highlightedSectionIndex !== + this.props.highlightedSectionIndex && + !( + nextProps.highlightedSuggestionIndex === + this.state.highlightedSuggestionIndex && + nextProps.highlightedSectionIndex === + this.state.highlightedSectionIndex + ) + ) { + this.setState({ + highlightedSuggestionIndex: nextProps.highlightedSuggestionIndex, + highlightedSectionIndex: nextProps.highlightedSectionIndex + }); + return; + } + + if ( + (0, _arrays2.default)(nextProps.suggestions, this.props.suggestions) + ) { + if ( + nextProps.highlightFirstSuggestion && + nextProps.suggestions.length > 0 && + this.justPressedUpDown === false && + this.justSelectedSuggestion === false + ) { + this.highlightFirstSuggestion(); + } + } else { + if (this.willRenderSuggestions(nextProps)) { + if (nextProps.highlightFirstSuggestion) { + this.highlightFirstSuggestion(); + } + + if (this.state.isCollapsed && !this.justSelectedSuggestion) { + this.revealSuggestions(); + } + } else { + this.resetHighlightedSuggestion(); + } + } + } + }, + { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps, prevState) { + var _props = this.props, + onSuggestionHighlighted = _props.onSuggestionHighlighted, + suggestions = _props.suggestions; + + if (!onSuggestionHighlighted) { + return; + } + + var _state = this.state, + highlightedSectionIndex = _state.highlightedSectionIndex, + highlightedSuggestionIndex = _state.highlightedSuggestionIndex; + var prevHighlightedSectionIndex = prevState.highlightedSectionIndex, + prevhighlightedSuggestionIndex = prevState.highlightedSuggestionIndex; + + var prevSuggestion = this.getSuggestion( + prevHighlightedSectionIndex, + prevhighlightedSuggestionIndex, + prevProps.suggestions + ); + var nextSuggestion = this.getSuggestion( + highlightedSectionIndex, + highlightedSuggestionIndex, + suggestions + ); + + if ( + highlightedSectionIndex !== prevState.highlightedSectionIndex || + highlightedSuggestionIndex !== prevState.highlightedSuggestionIndex || + prevSuggestion !== nextSuggestion + ) { + onSuggestionHighlighted({ suggestion: nextSuggestion }); + } + } + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + document.removeEventListener('mousedown', this.onDocumentMouseDown); + } + }, + { + key: 'updateHighlightedSuggestion', + value: function updateHighlightedSuggestion( + sectionIndex, + suggestionIndex, + prevValue + ) { + this.setState(function(state) { + var valueBeforeUpDown = state.valueBeforeUpDown; + + if (suggestionIndex === null) { + valueBeforeUpDown = null; + } else if ( + valueBeforeUpDown === null && + typeof prevValue !== 'undefined' + ) { + valueBeforeUpDown = prevValue; + } + + return { + highlightedSectionIndex: sectionIndex, + highlightedSuggestionIndex: suggestionIndex, + valueBeforeUpDown: valueBeforeUpDown + }; + }); + } + }, + { + key: 'resetHighlightedSuggestion', + value: function resetHighlightedSuggestion() { + var shouldResetValueBeforeUpDown = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : true; + + this.setState(function(state) { + var valueBeforeUpDown = state.valueBeforeUpDown; + + return { + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: shouldResetValueBeforeUpDown + ? null + : valueBeforeUpDown + }; + }); + } + }, + { + key: 'revealSuggestions', + value: function revealSuggestions() { + this.setState({ + isCollapsed: false + }); + } + }, + { + key: 'closeSuggestions', + value: function closeSuggestions() { + this.setState({ + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: null, + isCollapsed: true + }); + } + }, + { + key: 'getSuggestion', + value: function getSuggestion( + sectionIndex, + suggestionIndex, + pSuggestions + ) { + var _props2 = this.props, + suggestions = _props2.suggestions, + multiSection = _props2.multiSection, + getSectionSuggestions = _props2.getSectionSuggestions; + + var curSuggestions = pSuggestions || suggestions; + + if (multiSection) { + return getSectionSuggestions(curSuggestions[sectionIndex])[ + suggestionIndex + ]; + } + + return curSuggestions[suggestionIndex]; + } + }, + { + key: 'getHighlightedSuggestion', + value: function getHighlightedSuggestion() { + var _state2 = this.state, + highlightedSectionIndex = _state2.highlightedSectionIndex, + highlightedSuggestionIndex = _state2.highlightedSuggestionIndex; + + if (highlightedSuggestionIndex === null) { + return null; + } + + return this.getSuggestion( + highlightedSectionIndex, + highlightedSuggestionIndex + ); + } + }, + { + key: 'getSuggestionValueByIndex', + value: function getSuggestionValueByIndex(sectionIndex, suggestionIndex) { + var getSuggestionValue = this.props.getSuggestionValue; + + return getSuggestionValue( + this.getSuggestion(sectionIndex, suggestionIndex) + ); + } + }, + { + key: 'getSuggestionIndices', + value: function getSuggestionIndices(suggestionElement) { + var sectionIndex = suggestionElement.getAttribute('data-section-index'); + var suggestionIndex = suggestionElement.getAttribute( + 'data-suggestion-index' + ); + + return { + sectionIndex: + typeof sectionIndex === 'string' + ? parseInt(sectionIndex, 10) + : null, + suggestionIndex: parseInt(suggestionIndex, 10) + }; + } + }, + { + key: 'findSuggestionElement', + value: function findSuggestionElement(startNode) { + var node = startNode; + + do { + if (node.getAttribute('data-suggestion-index') !== null) { + return node; + } + + node = node.parentNode; + } while (node !== null); + + console.error('Clicked element:', startNode); // eslint-disable-line no-console + throw new Error("Couldn't find suggestion element"); + } + }, + { + key: 'maybeCallOnChange', + value: function maybeCallOnChange(event, newValue, method) { + var _props$inputProps = this.props.inputProps, + value = _props$inputProps.value, + onChange = _props$inputProps.onChange; + + if (newValue !== value) { + onChange(event, { newValue: newValue, method: method }); + } + } + }, + { + key: 'willRenderSuggestions', + value: function willRenderSuggestions(props) { + var suggestions = props.suggestions, + inputProps = props.inputProps, + shouldRenderSuggestions = props.shouldRenderSuggestions; + var value = inputProps.value; + + return suggestions.length > 0 && shouldRenderSuggestions(value); + } + }, + { + key: 'getQuery', + value: function getQuery() { + var inputProps = this.props.inputProps; + var value = inputProps.value; + var valueBeforeUpDown = this.state.valueBeforeUpDown; + + return (valueBeforeUpDown || value).trim(); + } + }, + { + key: 'render', + value: function render() { + var _this2 = this; + + var _props3 = this.props, + suggestions = _props3.suggestions, + renderInputComponent = _props3.renderInputComponent, + onSuggestionsFetchRequested = _props3.onSuggestionsFetchRequested, + renderSuggestion = _props3.renderSuggestion, + inputProps = _props3.inputProps, + multiSection = _props3.multiSection, + renderSectionTitle = _props3.renderSectionTitle, + id = _props3.id, + getSectionSuggestions = _props3.getSectionSuggestions, + theme = _props3.theme, + getSuggestionValue = _props3.getSuggestionValue, + alwaysRenderSuggestions = _props3.alwaysRenderSuggestions; + var _state3 = this.state, + isFocused = _state3.isFocused, + isCollapsed = _state3.isCollapsed, + highlightedSectionIndex = _state3.highlightedSectionIndex, + highlightedSuggestionIndex = _state3.highlightedSuggestionIndex, + valueBeforeUpDown = _state3.valueBeforeUpDown; + + var shouldRenderSuggestions = alwaysRenderSuggestions + ? alwaysTrue + : this.props.shouldRenderSuggestions; + var value = inputProps.value, + _onFocus = inputProps.onFocus, + _onKeyDown = inputProps.onKeyDown; + + var willRenderSuggestions = this.willRenderSuggestions(this.props); + var isOpen = + alwaysRenderSuggestions || + (isFocused && !isCollapsed && willRenderSuggestions); + var items = isOpen ? suggestions : []; + var autowhateverInputProps = _extends({}, inputProps, { + onFocus: function onFocus(event) { + if ( + !_this2.justSelectedSuggestion && + !_this2.justClickedOnSuggestionsContainer + ) { + var shouldRender = shouldRenderSuggestions(value); + + _this2.setState({ + isFocused: true, + isCollapsed: !shouldRender + }); + + _onFocus && _onFocus(event); + + if (shouldRender) { + onSuggestionsFetchRequested({ + value: value, + reason: 'input-focused' + }); + } + } + }, + onBlur: function onBlur(event) { + if (_this2.justClickedOnSuggestionsContainer) { + _this2.input.focus(); + return; + } + + _this2.blurEvent = event; + + if (!_this2.justSelectedSuggestion) { + _this2.onBlur(); + _this2.onSuggestionsClearRequested(); + } + }, + onChange: function onChange(event) { + var value = event.target.value; + + var shouldRender = shouldRenderSuggestions(value); + + _this2.maybeCallOnChange(event, value, 'type'); + + _this2.setState({ + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: null, + isCollapsed: !shouldRender + }); + + if (shouldRender) { + onSuggestionsFetchRequested({ + value: value, + reason: 'input-changed' + }); + } else { + _this2.onSuggestionsClearRequested(); + } + }, + onKeyDown: function onKeyDown(event, data) { + var keyCode = event.keyCode; + + switch (keyCode) { + case 40: // ArrowDown + case 38: + // ArrowUp + if (isCollapsed) { + if (shouldRenderSuggestions(value)) { + onSuggestionsFetchRequested({ + value: value, + reason: 'suggestions-revealed' + }); + _this2.revealSuggestions(); + } + } else if (suggestions.length > 0) { + var newHighlightedSectionIndex = + data.newHighlightedSectionIndex, + newHighlightedItemIndex = data.newHighlightedItemIndex; + + var newValue = void 0; + + if (newHighlightedItemIndex === null) { + // valueBeforeUpDown can be null if, for example, user + // hovers on the first suggestion and then pressed Up. + // If that happens, use the original input value. + newValue = + valueBeforeUpDown === null ? value : valueBeforeUpDown; + } else { + newValue = _this2.getSuggestionValueByIndex( + newHighlightedSectionIndex, + newHighlightedItemIndex + ); + } + + _this2.updateHighlightedSuggestion( + newHighlightedSectionIndex, + newHighlightedItemIndex, + value + ); + _this2.maybeCallOnChange( + event, + newValue, + keyCode === 40 ? 'down' : 'up' + ); + } + + event.preventDefault(); // Prevents the cursor from moving + + _this2.justPressedUpDown = true; + + setTimeout(function() { + _this2.justPressedUpDown = false; + }); + + break; + + // Enter + case 13: { + // See #388 + if (event.keyCode === 229) { + break; + } + + var highlightedSuggestion = _this2.getHighlightedSuggestion(); + + if (isOpen && !alwaysRenderSuggestions) { + _this2.closeSuggestions(); + } + + if (highlightedSuggestion !== null) { + var _newValue = getSuggestionValue(highlightedSuggestion); + + _this2.maybeCallOnChange(event, _newValue, 'enter'); + + _this2.onSuggestionSelected(event, { + suggestion: highlightedSuggestion, + suggestionValue: _newValue, + suggestionIndex: highlightedSuggestionIndex, + sectionIndex: highlightedSectionIndex, + method: 'enter' + }); + + _this2.justSelectedSuggestion = true; + + setTimeout(function() { + _this2.justSelectedSuggestion = false; + }); + } + + break; + } + + // Escape + case 27: { + if (isOpen) { + // If input.type === 'search', the browser clears the input + // when Escape is pressed. We want to disable this default + // behaviour so that, when suggestions are shown, we just hide + // them, without clearing the input. + event.preventDefault(); + } + + var willCloseSuggestions = isOpen && !alwaysRenderSuggestions; + + if (valueBeforeUpDown === null) { + // Didn't interact with Up/Down + if (!willCloseSuggestions) { + var _newValue2 = ''; + + _this2.maybeCallOnChange(event, _newValue2, 'escape'); + + if (shouldRenderSuggestions(_newValue2)) { + onSuggestionsFetchRequested({ + value: _newValue2, + reason: 'escape-pressed' + }); + } else { + _this2.onSuggestionsClearRequested(); + } + } + } else { + // Interacted with Up/Down + _this2.maybeCallOnChange(event, valueBeforeUpDown, 'escape'); + } + + if (willCloseSuggestions) { + _this2.onSuggestionsClearRequested(); + _this2.closeSuggestions(); + } else { + _this2.resetHighlightedSuggestion(); + } + + break; + } + } + + _onKeyDown && _onKeyDown(event); + } + }); + var renderSuggestionData = { + query: this.getQuery() + }; + + return _react2.default.createElement(_reactAutowhatever2.default, { + multiSection: multiSection, + items: items, + renderInputComponent: renderInputComponent, + renderItemsContainer: this.renderSuggestionsContainer, + renderItem: renderSuggestion, + renderItemData: renderSuggestionData, + renderSectionTitle: renderSectionTitle, + getSectionItems: getSectionSuggestions, + highlightedSectionIndex: highlightedSectionIndex, + highlightedItemIndex: highlightedSuggestionIndex, + inputProps: autowhateverInputProps, + itemProps: this.itemProps, + theme: (0, _theme.mapToAutowhateverTheme)(theme), + id: id, + ref: this.storeAutowhateverRef + }); + } + } + ]); + + return Autosuggest; +})(_react.Component); + +Autosuggest.propTypes = { + suggestions: _propTypes2.default.array.isRequired, + onSuggestionsFetchRequested: function onSuggestionsFetchRequested( + props, + propName + ) { + var onSuggestionsFetchRequested = props[propName]; + + if (typeof onSuggestionsFetchRequested !== 'function') { + throw new Error( + "'onSuggestionsFetchRequested' must be implemented. See: https://github.com/moroshko/react-autosuggest#onSuggestionsFetchRequestedProp" + ); + } + }, + onSuggestionsClearRequested: function onSuggestionsClearRequested( + props, + propName + ) { + var onSuggestionsClearRequested = props[propName]; + + if ( + props.alwaysRenderSuggestions === false && + typeof onSuggestionsClearRequested !== 'function' + ) { + throw new Error( + "'onSuggestionsClearRequested' must be implemented. See: https://github.com/moroshko/react-autosuggest#onSuggestionsClearRequestedProp" + ); + } + }, + onSuggestionSelected: _propTypes2.default.func, + onSuggestionHighlighted: _propTypes2.default.func, + renderInputComponent: _propTypes2.default.func, + renderSuggestionsContainer: _propTypes2.default.func, + getSuggestionValue: _propTypes2.default.func.isRequired, + renderSuggestion: _propTypes2.default.func.isRequired, + inputProps: function inputProps(props, propName) { + var inputProps = props[propName]; + + if (!inputProps.hasOwnProperty('value')) { + throw new Error("'inputProps' must have 'value'."); + } + + if (!inputProps.hasOwnProperty('onChange')) { + throw new Error("'inputProps' must have 'onChange'."); + } + }, + shouldRenderSuggestions: _propTypes2.default.func, + alwaysRenderSuggestions: _propTypes2.default.bool, + multiSection: _propTypes2.default.bool, + renderSectionTitle: function renderSectionTitle(props, propName) { + var renderSectionTitle = props[propName]; + + if ( + props.multiSection === true && + typeof renderSectionTitle !== 'function' + ) { + throw new Error( + "'renderSectionTitle' must be implemented. See: https://github.com/moroshko/react-autosuggest#renderSectionTitleProp" + ); + } + }, + getSectionSuggestions: function getSectionSuggestions(props, propName) { + var getSectionSuggestions = props[propName]; + + if ( + props.multiSection === true && + typeof getSectionSuggestions !== 'function' + ) { + throw new Error( + "'getSectionSuggestions' must be implemented. See: https://github.com/moroshko/react-autosuggest#getSectionSuggestionsProp" + ); + } + }, + focusInputOnSuggestionClick: _propTypes2.default.bool, + highlightFirstSuggestion: _propTypes2.default.bool, + theme: _propTypes2.default.object, + id: _propTypes2.default.string +}; +Autosuggest.defaultProps = { + renderSuggestionsContainer: defaultRenderSuggestionsContainer, + shouldRenderSuggestions: defaultShouldRenderSuggestions, + alwaysRenderSuggestions: false, + multiSection: false, + focusInputOnSuggestionClick: true, + highlightFirstSuggestion: false, + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + theme: _theme.defaultTheme, + id: '1' +}; + +var _initialiseProps = function _initialiseProps() { + var _this3 = this; + + this.onDocumentMouseDown = function(event) { + _this3.justClickedOnSuggestionsContainer = false; + + var node = + (event.detail && event.detail.target) || // This is for testing only. Please show me a better way to emulate this. + event.target; + + while (node !== null && node !== document) { + if (node.getAttribute('data-suggestion-index') !== null) { + // Suggestion was clicked + return; + } + + if (node === _this3.suggestionsContainer) { + // Something else inside suggestions container was clicked + _this3.justClickedOnSuggestionsContainer = true; + return; + } + + node = node.parentNode; + } + }; + + this.storeAutowhateverRef = function(autowhatever) { + if (autowhatever !== null) { + _this3.autowhatever = autowhatever; + } + }; + + this.highlightFirstSuggestion = function() { + _this3.updateHighlightedSuggestion(_this3.props.multiSection ? 0 : null, 0); + }; + + this.onSuggestionMouseDown = function() { + _this3.justSelectedSuggestion = true; + }; + + this.onSuggestionsClearRequested = function() { + var onSuggestionsClearRequested = _this3.props.onSuggestionsClearRequested; + + onSuggestionsClearRequested && onSuggestionsClearRequested(); + }; + + this.onSuggestionSelected = function(event, data) { + var _props4 = _this3.props, + alwaysRenderSuggestions = _props4.alwaysRenderSuggestions, + onSuggestionSelected = _props4.onSuggestionSelected, + onSuggestionsFetchRequested = _props4.onSuggestionsFetchRequested; + + onSuggestionSelected && onSuggestionSelected(event, data); + + if (alwaysRenderSuggestions) { + onSuggestionsFetchRequested({ + value: data.suggestionValue, + reason: 'suggestion-selected' + }); + } else { + _this3.onSuggestionsClearRequested(); + } + + _this3.resetHighlightedSuggestion(); + }; + + this.onSuggestionClick = function(event) { + var _props5 = _this3.props, + alwaysRenderSuggestions = _props5.alwaysRenderSuggestions, + focusInputOnSuggestionClick = _props5.focusInputOnSuggestionClick; + + var _getSuggestionIndices = _this3.getSuggestionIndices( + _this3.findSuggestionElement(event.target) + ), + sectionIndex = _getSuggestionIndices.sectionIndex, + suggestionIndex = _getSuggestionIndices.suggestionIndex; + + _this3.updateHighlightedSuggestion(sectionIndex, suggestionIndex); + + if (focusInputOnSuggestionClick === true) { + _this3.input.focus(); + } else { + _this3.onBlur(); + } + + setTimeout(function() { + _this3.justSelectedSuggestion = false; + }); + }; + + this.onSuggestionDoubleClick = function(event) { + var _props6 = _this3.props, + alwaysRenderSuggestions = _props6.alwaysRenderSuggestions, + focusInputOnSuggestionClick = _props6.focusInputOnSuggestionClick; + + var _getSuggestionIndices2 = _this3.getSuggestionIndices( + _this3.findSuggestionElement(event.target) + ), + sectionIndex = _getSuggestionIndices2.sectionIndex, + suggestionIndex = _getSuggestionIndices2.suggestionIndex; + + var clickedSuggestion = _this3.getSuggestion(sectionIndex, suggestionIndex); + var clickedSuggestionValue = _this3.props.getSuggestionValue( + clickedSuggestion + ); + + _this3.maybeCallOnChange(event, clickedSuggestionValue, 'click'); + _this3.onSuggestionSelected(event, { + suggestion: clickedSuggestion, + suggestionValue: clickedSuggestionValue, + suggestionIndex: suggestionIndex, + sectionIndex: sectionIndex, + method: 'doubleClick' + }); + + if (!alwaysRenderSuggestions) { + _this3.closeSuggestions(); + } + + if (focusInputOnSuggestionClick === true) { + _this3.input.focus(); + } else { + _this3.onBlur(); + } + + setTimeout(function() { + _this3.justSelectedSuggestion = false; + }); + }; + + this.onBlur = function() { + var _props7 = _this3.props, + inputProps = _props7.inputProps, + shouldRenderSuggestions = _props7.shouldRenderSuggestions; + var value = inputProps.value, + onBlur = inputProps.onBlur; + + var highlightedSuggestion = _this3.getHighlightedSuggestion(); + var shouldRender = shouldRenderSuggestions(value); + + _this3.setState({ + isFocused: false, + isCollapsed: !shouldRender + }); + + onBlur && + onBlur(_this3.blurEvent, { + highlightedSuggestion: highlightedSuggestion + }); + }; + + this.itemProps = function(_ref3) { + var sectionIndex = _ref3.sectionIndex, + itemIndex = _ref3.itemIndex; + + return { + 'data-section-index': sectionIndex, + 'data-suggestion-index': itemIndex, + onMouseDown: _this3.onSuggestionMouseDown, + onTouchStart: _this3.onSuggestionMouseDown, // Because on iOS `onMouseDown` is not triggered + onClick: _this3.onSuggestionClick, + onDoubleClick: _this3.onSuggestionDoubleClick + }; + }; + + this.renderSuggestionsContainer = function(_ref4) { + var containerProps = _ref4.containerProps, + children = _ref4.children; + var renderSuggestionsContainer = _this3.props.renderSuggestionsContainer; + + return renderSuggestionsContainer({ + containerProps: containerProps, + children: children, + query: _this3.getQuery() + }); + }; +}; + +exports.default = Autosuggest; diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 00000000..aed310f7 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,3 @@ +'use strict'; + +module.exports = require('./Autosuggest').default; diff --git a/dist/standalone/autosuggest.js b/dist/standalone/autosuggest.js new file mode 100644 index 00000000..773896c2 --- /dev/null +++ b/dist/standalone/autosuggest.js @@ -0,0 +1,4468 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if (typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require('React')); + else if (typeof define === 'function' && define.amd) + define(['React'], factory); + else if (typeof exports === 'object') + exports['Autosuggest'] = factory(require('React')); + else root['Autosuggest'] = factory(root['React']); +})(this, function(__WEBPACK_EXTERNAL_MODULE_3__) { + 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'; + + module.exports = __webpack_require__(1).default; + + /***/ + }, + /* 1 */ + /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */ (function(process) { + '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 _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 _react = __webpack_require__(3); + + var _react2 = _interopRequireDefault(_react); + + var _propTypes = __webpack_require__(4); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _arrays = __webpack_require__(13); + + var _arrays2 = _interopRequireDefault(_arrays); + + var _reactAutowhatever = __webpack_require__(14); + + var _reactAutowhatever2 = _interopRequireDefault(_reactAutowhatever); + + var _theme = __webpack_require__(23); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; + } + + 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 === '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 + ); + } + 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 alwaysTrue = function alwaysTrue() { + return true; + }; + var defaultShouldRenderSuggestions = function defaultShouldRenderSuggestions( + value + ) { + return value.trim().length > 0; + }; + var defaultRenderSuggestionsContainer = function defaultRenderSuggestionsContainer( + _ref + ) { + var containerProps = _ref.containerProps, + children = _ref.children; + return _react2.default.createElement( + 'div', + containerProps, + children + ); + }; + + var Autosuggest = (function(_Component) { + _inherits(Autosuggest, _Component); + + function Autosuggest(_ref2) { + var alwaysRenderSuggestions = _ref2.alwaysRenderSuggestions, + highlightedSectionIndex = _ref2.highlightedSectionIndex, + highlightedSuggestionIndex = _ref2.highlightedSuggestionIndex; + + _classCallCheck(this, Autosuggest); + + var _this = _possibleConstructorReturn( + this, + ( + Autosuggest.__proto__ || Object.getPrototypeOf(Autosuggest) + ).call(this) + ); + + _initialiseProps.call(_this); + + _this.state = { + isFocused: false, + isCollapsed: !alwaysRenderSuggestions, + highlightedSectionIndex: highlightedSectionIndex, + highlightedSuggestionIndex: highlightedSuggestionIndex, + valueBeforeUpDown: null + }; + + _this.justPressedUpDown = false; + return _this; + } + + _createClass(Autosuggest, [ + { + key: 'componentDidMount', + value: function componentDidMount() { + document.addEventListener( + 'mousedown', + this.onDocumentMouseDown + ); + + this.input = this.autowhatever.input; + this.suggestionsContainer = this.autowhatever.itemsContainer; + } + }, + { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if ( + nextProps.highlightedSuggestionIndex !== + this.props.highlightedSuggestionIndex && + nextProps.highlightedSectionIndex !== + this.props.highlightedSectionIndex && + !( + nextProps.highlightedSuggestionIndex === + this.state.highlightedSuggestionIndex && + nextProps.highlightedSectionIndex === + this.state.highlightedSectionIndex + ) + ) { + this.setState({ + highlightedSuggestionIndex: + nextProps.highlightedSuggestionIndex, + highlightedSectionIndex: nextProps.highlightedSectionIndex + }); + return; + } + + if ( + (0, _arrays2.default)( + nextProps.suggestions, + this.props.suggestions + ) + ) { + if ( + nextProps.highlightFirstSuggestion && + nextProps.suggestions.length > 0 && + this.justPressedUpDown === false && + this.justSelectedSuggestion === false + ) { + this.highlightFirstSuggestion(); + } + } else { + if (this.willRenderSuggestions(nextProps)) { + if (nextProps.highlightFirstSuggestion) { + this.highlightFirstSuggestion(); + } + + if ( + this.state.isCollapsed && + !this.justSelectedSuggestion + ) { + this.revealSuggestions(); + } + } else { + this.resetHighlightedSuggestion(); + } + } + } + }, + { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps, prevState) { + var _props = this.props, + onSuggestionHighlighted = _props.onSuggestionHighlighted, + suggestions = _props.suggestions; + + if (!onSuggestionHighlighted) { + return; + } + + var _state = this.state, + highlightedSectionIndex = _state.highlightedSectionIndex, + highlightedSuggestionIndex = + _state.highlightedSuggestionIndex; + var prevHighlightedSectionIndex = + prevState.highlightedSectionIndex, + prevhighlightedSuggestionIndex = + prevState.highlightedSuggestionIndex; + + var prevSuggestion = this.getSuggestion( + prevHighlightedSectionIndex, + prevhighlightedSuggestionIndex, + prevProps.suggestions + ); + var nextSuggestion = this.getSuggestion( + highlightedSectionIndex, + highlightedSuggestionIndex, + suggestions + ); + + if ( + highlightedSectionIndex !== + prevState.highlightedSectionIndex || + highlightedSuggestionIndex !== + prevState.highlightedSuggestionIndex || + prevSuggestion !== nextSuggestion + ) { + onSuggestionHighlighted({ suggestion: nextSuggestion }); + } + } + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + document.removeEventListener( + 'mousedown', + this.onDocumentMouseDown + ); + } + }, + { + key: 'updateHighlightedSuggestion', + value: function updateHighlightedSuggestion( + sectionIndex, + suggestionIndex, + prevValue + ) { + this.setState(function(state) { + var valueBeforeUpDown = state.valueBeforeUpDown; + + if (suggestionIndex === null) { + valueBeforeUpDown = null; + } else if ( + valueBeforeUpDown === null && + typeof prevValue !== 'undefined' + ) { + valueBeforeUpDown = prevValue; + } + + return { + highlightedSectionIndex: sectionIndex, + highlightedSuggestionIndex: suggestionIndex, + valueBeforeUpDown: valueBeforeUpDown + }; + }); + } + }, + { + key: 'resetHighlightedSuggestion', + value: function resetHighlightedSuggestion() { + var shouldResetValueBeforeUpDown = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : true; + + this.setState(function(state) { + var valueBeforeUpDown = state.valueBeforeUpDown; + + return { + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: shouldResetValueBeforeUpDown + ? null + : valueBeforeUpDown + }; + }); + } + }, + { + key: 'revealSuggestions', + value: function revealSuggestions() { + this.setState({ + isCollapsed: false + }); + } + }, + { + key: 'closeSuggestions', + value: function closeSuggestions() { + this.setState({ + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: null, + isCollapsed: true + }); + } + }, + { + key: 'getSuggestion', + value: function getSuggestion( + sectionIndex, + suggestionIndex, + pSuggestions + ) { + var _props2 = this.props, + suggestions = _props2.suggestions, + multiSection = _props2.multiSection, + getSectionSuggestions = _props2.getSectionSuggestions; + + var curSuggestions = pSuggestions || suggestions; + + if (multiSection) { + return getSectionSuggestions(curSuggestions[sectionIndex])[ + suggestionIndex + ]; + } + + return curSuggestions[suggestionIndex]; + } + }, + { + key: 'getHighlightedSuggestion', + value: function getHighlightedSuggestion() { + var _state2 = this.state, + highlightedSectionIndex = _state2.highlightedSectionIndex, + highlightedSuggestionIndex = + _state2.highlightedSuggestionIndex; + + if (highlightedSuggestionIndex === null) { + return null; + } + + return this.getSuggestion( + highlightedSectionIndex, + highlightedSuggestionIndex + ); + } + }, + { + key: 'getSuggestionValueByIndex', + value: function getSuggestionValueByIndex( + sectionIndex, + suggestionIndex + ) { + var getSuggestionValue = this.props.getSuggestionValue; + + return getSuggestionValue( + this.getSuggestion(sectionIndex, suggestionIndex) + ); + } + }, + { + key: 'getSuggestionIndices', + value: function getSuggestionIndices(suggestionElement) { + var sectionIndex = suggestionElement.getAttribute( + 'data-section-index' + ); + var suggestionIndex = suggestionElement.getAttribute( + 'data-suggestion-index' + ); + + return { + sectionIndex: + typeof sectionIndex === 'string' + ? parseInt(sectionIndex, 10) + : null, + suggestionIndex: parseInt(suggestionIndex, 10) + }; + } + }, + { + key: 'findSuggestionElement', + value: function findSuggestionElement(startNode) { + var node = startNode; + + do { + if (node.getAttribute('data-suggestion-index') !== null) { + return node; + } + + node = node.parentNode; + } while (node !== null); + + console.error('Clicked element:', startNode); // eslint-disable-line no-console + throw new Error("Couldn't find suggestion element"); + } + }, + { + key: 'maybeCallOnChange', + value: function maybeCallOnChange(event, newValue, method) { + var _props$inputProps = this.props.inputProps, + value = _props$inputProps.value, + onChange = _props$inputProps.onChange; + + if (newValue !== value) { + onChange(event, { newValue: newValue, method: method }); + } + } + }, + { + key: 'willRenderSuggestions', + value: function willRenderSuggestions(props) { + var suggestions = props.suggestions, + inputProps = props.inputProps, + shouldRenderSuggestions = props.shouldRenderSuggestions; + var value = inputProps.value; + + return ( + suggestions.length > 0 && shouldRenderSuggestions(value) + ); + } + }, + { + key: 'getQuery', + value: function getQuery() { + var inputProps = this.props.inputProps; + var value = inputProps.value; + var valueBeforeUpDown = this.state.valueBeforeUpDown; + + return (valueBeforeUpDown || value).trim(); + } + }, + { + key: 'render', + value: function render() { + var _this2 = this; + + var _props3 = this.props, + suggestions = _props3.suggestions, + renderInputComponent = _props3.renderInputComponent, + onSuggestionsFetchRequested = + _props3.onSuggestionsFetchRequested, + renderSuggestion = _props3.renderSuggestion, + inputProps = _props3.inputProps, + multiSection = _props3.multiSection, + renderSectionTitle = _props3.renderSectionTitle, + id = _props3.id, + getSectionSuggestions = _props3.getSectionSuggestions, + theme = _props3.theme, + getSuggestionValue = _props3.getSuggestionValue, + alwaysRenderSuggestions = _props3.alwaysRenderSuggestions; + var _state3 = this.state, + isFocused = _state3.isFocused, + isCollapsed = _state3.isCollapsed, + highlightedSectionIndex = _state3.highlightedSectionIndex, + highlightedSuggestionIndex = + _state3.highlightedSuggestionIndex, + valueBeforeUpDown = _state3.valueBeforeUpDown; + + var shouldRenderSuggestions = alwaysRenderSuggestions + ? alwaysTrue + : this.props.shouldRenderSuggestions; + var value = inputProps.value, + _onFocus = inputProps.onFocus, + _onKeyDown = inputProps.onKeyDown; + + var willRenderSuggestions = this.willRenderSuggestions( + this.props + ); + var isOpen = + alwaysRenderSuggestions || + (isFocused && !isCollapsed && willRenderSuggestions); + var items = isOpen ? suggestions : []; + var autowhateverInputProps = _extends({}, inputProps, { + onFocus: function onFocus(event) { + if ( + !_this2.justSelectedSuggestion && + !_this2.justClickedOnSuggestionsContainer + ) { + var shouldRender = shouldRenderSuggestions(value); + + _this2.setState({ + isFocused: true, + isCollapsed: !shouldRender + }); + + _onFocus && _onFocus(event); + + if (shouldRender) { + onSuggestionsFetchRequested({ + value: value, + reason: 'input-focused' + }); + } + } + }, + onBlur: function onBlur(event) { + if (_this2.justClickedOnSuggestionsContainer) { + _this2.input.focus(); + return; + } + + _this2.blurEvent = event; + + if (!_this2.justSelectedSuggestion) { + _this2.onBlur(); + _this2.onSuggestionsClearRequested(); + } + }, + onChange: function onChange(event) { + var value = event.target.value; + + var shouldRender = shouldRenderSuggestions(value); + + _this2.maybeCallOnChange(event, value, 'type'); + + _this2.setState({ + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: null, + isCollapsed: !shouldRender + }); + + if (shouldRender) { + onSuggestionsFetchRequested({ + value: value, + reason: 'input-changed' + }); + } else { + _this2.onSuggestionsClearRequested(); + } + }, + onKeyDown: function onKeyDown(event, data) { + var keyCode = event.keyCode; + + switch (keyCode) { + case 40: // ArrowDown + case 38: + // ArrowUp + if (isCollapsed) { + if (shouldRenderSuggestions(value)) { + onSuggestionsFetchRequested({ + value: value, + reason: 'suggestions-revealed' + }); + _this2.revealSuggestions(); + } + } else if (suggestions.length > 0) { + var newHighlightedSectionIndex = + data.newHighlightedSectionIndex, + newHighlightedItemIndex = + data.newHighlightedItemIndex; + + var newValue = void 0; + + if (newHighlightedItemIndex === null) { + // valueBeforeUpDown can be null if, for example, user + // hovers on the first suggestion and then pressed Up. + // If that happens, use the original input value. + newValue = + valueBeforeUpDown === null + ? value + : valueBeforeUpDown; + } else { + newValue = _this2.getSuggestionValueByIndex( + newHighlightedSectionIndex, + newHighlightedItemIndex + ); + } + + _this2.updateHighlightedSuggestion( + newHighlightedSectionIndex, + newHighlightedItemIndex, + value + ); + _this2.maybeCallOnChange( + event, + newValue, + keyCode === 40 ? 'down' : 'up' + ); + } + + event.preventDefault(); // Prevents the cursor from moving + + _this2.justPressedUpDown = true; + + setTimeout(function() { + _this2.justPressedUpDown = false; + }); + + break; + + // Enter + case 13: { + // See #388 + if (event.keyCode === 229) { + break; + } + + var highlightedSuggestion = _this2.getHighlightedSuggestion(); + + if (isOpen && !alwaysRenderSuggestions) { + _this2.closeSuggestions(); + } + + if (highlightedSuggestion !== null) { + var _newValue = getSuggestionValue( + highlightedSuggestion + ); + + _this2.maybeCallOnChange(event, _newValue, 'enter'); + + _this2.onSuggestionSelected(event, { + suggestion: highlightedSuggestion, + suggestionValue: _newValue, + suggestionIndex: highlightedSuggestionIndex, + sectionIndex: highlightedSectionIndex, + method: 'enter' + }); + + _this2.justSelectedSuggestion = true; + + setTimeout(function() { + _this2.justSelectedSuggestion = false; + }); + } + + break; + } + + // Escape + case 27: { + if (isOpen) { + // If input.type === 'search', the browser clears the input + // when Escape is pressed. We want to disable this default + // behaviour so that, when suggestions are shown, we just hide + // them, without clearing the input. + event.preventDefault(); + } + + var willCloseSuggestions = + isOpen && !alwaysRenderSuggestions; + + if (valueBeforeUpDown === null) { + // Didn't interact with Up/Down + if (!willCloseSuggestions) { + var _newValue2 = ''; + + _this2.maybeCallOnChange( + event, + _newValue2, + 'escape' + ); + + if (shouldRenderSuggestions(_newValue2)) { + onSuggestionsFetchRequested({ + value: _newValue2, + reason: 'escape-pressed' + }); + } else { + _this2.onSuggestionsClearRequested(); + } + } + } else { + // Interacted with Up/Down + _this2.maybeCallOnChange( + event, + valueBeforeUpDown, + 'escape' + ); + } + + if (willCloseSuggestions) { + _this2.onSuggestionsClearRequested(); + _this2.closeSuggestions(); + } else { + _this2.resetHighlightedSuggestion(); + } + + break; + } + } + + _onKeyDown && _onKeyDown(event); + } + }); + var renderSuggestionData = { + query: this.getQuery() + }; + + return _react2.default.createElement( + _reactAutowhatever2.default, + { + multiSection: multiSection, + items: items, + renderInputComponent: renderInputComponent, + renderItemsContainer: this.renderSuggestionsContainer, + renderItem: renderSuggestion, + renderItemData: renderSuggestionData, + renderSectionTitle: renderSectionTitle, + getSectionItems: getSectionSuggestions, + highlightedSectionIndex: highlightedSectionIndex, + highlightedItemIndex: highlightedSuggestionIndex, + inputProps: autowhateverInputProps, + itemProps: this.itemProps, + theme: (0, _theme.mapToAutowhateverTheme)(theme), + id: id, + ref: this.storeAutowhateverRef + } + ); + } + } + ]); + + return Autosuggest; + })(_react.Component); + + Autosuggest.defaultProps = { + renderSuggestionsContainer: defaultRenderSuggestionsContainer, + shouldRenderSuggestions: defaultShouldRenderSuggestions, + alwaysRenderSuggestions: false, + multiSection: false, + focusInputOnSuggestionClick: true, + highlightFirstSuggestion: false, + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + theme: _theme.defaultTheme, + id: '1' + }; + + var _initialiseProps = function _initialiseProps() { + var _this3 = this; + + this.onDocumentMouseDown = function(event) { + _this3.justClickedOnSuggestionsContainer = false; + + var node = + (event.detail && event.detail.target) || // This is for testing only. Please show me a better way to emulate this. + event.target; + + while (node !== null && node !== document) { + if (node.getAttribute('data-suggestion-index') !== null) { + // Suggestion was clicked + return; + } + + if (node === _this3.suggestionsContainer) { + // Something else inside suggestions container was clicked + _this3.justClickedOnSuggestionsContainer = true; + return; + } + + node = node.parentNode; + } + }; + + this.storeAutowhateverRef = function(autowhatever) { + if (autowhatever !== null) { + _this3.autowhatever = autowhatever; + } + }; + + this.highlightFirstSuggestion = function() { + _this3.updateHighlightedSuggestion( + _this3.props.multiSection ? 0 : null, + 0 + ); + }; + + this.onSuggestionMouseDown = function() { + _this3.justSelectedSuggestion = true; + }; + + this.onSuggestionsClearRequested = function() { + var onSuggestionsClearRequested = + _this3.props.onSuggestionsClearRequested; + + onSuggestionsClearRequested && onSuggestionsClearRequested(); + }; + + this.onSuggestionSelected = function(event, data) { + var _props4 = _this3.props, + alwaysRenderSuggestions = _props4.alwaysRenderSuggestions, + onSuggestionSelected = _props4.onSuggestionSelected, + onSuggestionsFetchRequested = + _props4.onSuggestionsFetchRequested; + + onSuggestionSelected && onSuggestionSelected(event, data); + + if (alwaysRenderSuggestions) { + onSuggestionsFetchRequested({ + value: data.suggestionValue, + reason: 'suggestion-selected' + }); + } else { + _this3.onSuggestionsClearRequested(); + } + + _this3.resetHighlightedSuggestion(); + }; + + this.onSuggestionClick = function(event) { + var _props5 = _this3.props, + alwaysRenderSuggestions = _props5.alwaysRenderSuggestions, + focusInputOnSuggestionClick = + _props5.focusInputOnSuggestionClick; + + var _getSuggestionIndices = _this3.getSuggestionIndices( + _this3.findSuggestionElement(event.target) + ), + sectionIndex = _getSuggestionIndices.sectionIndex, + suggestionIndex = _getSuggestionIndices.suggestionIndex; + + _this3.updateHighlightedSuggestion(sectionIndex, suggestionIndex); + + if (focusInputOnSuggestionClick === true) { + _this3.input.focus(); + } else { + _this3.onBlur(); + } + + setTimeout(function() { + _this3.justSelectedSuggestion = false; + }); + }; + + this.onSuggestionDoubleClick = function(event) { + var _props6 = _this3.props, + alwaysRenderSuggestions = _props6.alwaysRenderSuggestions, + focusInputOnSuggestionClick = + _props6.focusInputOnSuggestionClick; + + var _getSuggestionIndices2 = _this3.getSuggestionIndices( + _this3.findSuggestionElement(event.target) + ), + sectionIndex = _getSuggestionIndices2.sectionIndex, + suggestionIndex = _getSuggestionIndices2.suggestionIndex; + + var clickedSuggestion = _this3.getSuggestion( + sectionIndex, + suggestionIndex + ); + var clickedSuggestionValue = _this3.props.getSuggestionValue( + clickedSuggestion + ); + + _this3.maybeCallOnChange(event, clickedSuggestionValue, 'click'); + _this3.onSuggestionSelected(event, { + suggestion: clickedSuggestion, + suggestionValue: clickedSuggestionValue, + suggestionIndex: suggestionIndex, + sectionIndex: sectionIndex, + method: 'doubleClick' + }); + + if (!alwaysRenderSuggestions) { + _this3.closeSuggestions(); + } + + if (focusInputOnSuggestionClick === true) { + _this3.input.focus(); + } else { + _this3.onBlur(); + } + + setTimeout(function() { + _this3.justSelectedSuggestion = false; + }); + }; + + this.onBlur = function() { + var _props7 = _this3.props, + inputProps = _props7.inputProps, + shouldRenderSuggestions = _props7.shouldRenderSuggestions; + var value = inputProps.value, + onBlur = inputProps.onBlur; + + var highlightedSuggestion = _this3.getHighlightedSuggestion(); + var shouldRender = shouldRenderSuggestions(value); + + _this3.setState({ + isFocused: false, + isCollapsed: !shouldRender + }); + + onBlur && + onBlur(_this3.blurEvent, { + highlightedSuggestion: highlightedSuggestion + }); + }; + + this.itemProps = function(_ref3) { + var sectionIndex = _ref3.sectionIndex, + itemIndex = _ref3.itemIndex; + + return { + 'data-section-index': sectionIndex, + 'data-suggestion-index': itemIndex, + onMouseDown: _this3.onSuggestionMouseDown, + onTouchStart: _this3.onSuggestionMouseDown, // Because on iOS `onMouseDown` is not triggered + onClick: _this3.onSuggestionClick, + onDoubleClick: _this3.onSuggestionDoubleClick + }; + }; + + this.renderSuggestionsContainer = function(_ref4) { + var containerProps = _ref4.containerProps, + children = _ref4.children; + var renderSuggestionsContainer = + _this3.props.renderSuggestionsContainer; + + return renderSuggestionsContainer({ + containerProps: containerProps, + children: children, + query: _this3.getQuery() + }); + }; + }; + + exports.default = Autosuggest; + Autosuggest.propTypes = + process.env.NODE_ENV !== 'production' + ? { + suggestions: _propTypes2.default.array.isRequired, + onSuggestionsFetchRequested: function onSuggestionsFetchRequested( + props, + propName + ) { + var onSuggestionsFetchRequested = props[propName]; + + if (typeof onSuggestionsFetchRequested !== 'function') { + throw new Error( + "'onSuggestionsFetchRequested' must be implemented. See: https://github.com/moroshko/react-autosuggest#onSuggestionsFetchRequestedProp" + ); + } + }, + onSuggestionsClearRequested: function onSuggestionsClearRequested( + props, + propName + ) { + var onSuggestionsClearRequested = props[propName]; + + if ( + props.alwaysRenderSuggestions === false && + typeof onSuggestionsClearRequested !== 'function' + ) { + throw new Error( + "'onSuggestionsClearRequested' must be implemented. See: https://github.com/moroshko/react-autosuggest#onSuggestionsClearRequestedProp" + ); + } + }, + onSuggestionSelected: _propTypes2.default.func, + onSuggestionHighlighted: _propTypes2.default.func, + renderInputComponent: _propTypes2.default.func, + renderSuggestionsContainer: _propTypes2.default.func, + getSuggestionValue: _propTypes2.default.func.isRequired, + renderSuggestion: _propTypes2.default.func.isRequired, + inputProps: function inputProps(props, propName) { + var inputProps = props[propName]; + + if (!inputProps.hasOwnProperty('value')) { + throw new Error("'inputProps' must have 'value'."); + } + + if (!inputProps.hasOwnProperty('onChange')) { + throw new Error("'inputProps' must have 'onChange'."); + } + }, + shouldRenderSuggestions: _propTypes2.default.func, + alwaysRenderSuggestions: _propTypes2.default.bool, + multiSection: _propTypes2.default.bool, + renderSectionTitle: function renderSectionTitle( + props, + propName + ) { + var renderSectionTitle = props[propName]; + + if ( + props.multiSection === true && + typeof renderSectionTitle !== 'function' + ) { + throw new Error( + "'renderSectionTitle' must be implemented. See: https://github.com/moroshko/react-autosuggest#renderSectionTitleProp" + ); + } + }, + getSectionSuggestions: function getSectionSuggestions( + props, + propName + ) { + var getSectionSuggestions = props[propName]; + + if ( + props.multiSection === true && + typeof getSectionSuggestions !== 'function' + ) { + throw new Error( + "'getSectionSuggestions' must be implemented. See: https://github.com/moroshko/react-autosuggest#getSectionSuggestionsProp" + ); + } + }, + focusInputOnSuggestionClick: _propTypes2.default.bool, + highlightFirstSuggestion: _propTypes2.default.bool, + theme: _propTypes2.default.object, + id: _propTypes2.default.string + } + : {}; + /* WEBPACK VAR INJECTION */ + }.call(exports, __webpack_require__(2))); + + /***/ + }, + /* 2 */ + /***/ function(module, exports) { + // shim for using process in browser + var process = (module.exports = {}); + + // cached from whatever global is present so that test runners that stub it + // don't break things. But we need to wrap it in a try catch in case it is + // wrapped in strict mode code which doesn't define any globals. It's inside a + // function because try/catches deoptimize in certain engines. + + var cachedSetTimeout; + var cachedClearTimeout; + + function defaultSetTimout() { + throw new Error('setTimeout has not been defined'); + } + function defaultClearTimeout() { + throw new Error('clearTimeout has not been defined'); + } + (function() { + try { + if (typeof setTimeout === 'function') { + cachedSetTimeout = setTimeout; + } else { + cachedSetTimeout = defaultSetTimout; + } + } catch (e) { + cachedSetTimeout = defaultSetTimout; + } + try { + if (typeof clearTimeout === 'function') { + cachedClearTimeout = clearTimeout; + } else { + cachedClearTimeout = defaultClearTimeout; + } + } catch (e) { + cachedClearTimeout = defaultClearTimeout; + } + })(); + function runTimeout(fun) { + if (cachedSetTimeout === setTimeout) { + //normal enviroments in sane situations + return setTimeout(fun, 0); + } + // if setTimeout wasn't available but was latter defined + if ( + (cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && + setTimeout + ) { + cachedSetTimeout = setTimeout; + return setTimeout(fun, 0); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedSetTimeout(fun, 0); + } catch (e) { + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedSetTimeout.call(null, fun, 0); + } catch (e) { + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error + return cachedSetTimeout.call(this, fun, 0); + } + } + } + function runClearTimeout(marker) { + if (cachedClearTimeout === clearTimeout) { + //normal enviroments in sane situations + return clearTimeout(marker); + } + // if clearTimeout wasn't available but was latter defined + if ( + (cachedClearTimeout === defaultClearTimeout || + !cachedClearTimeout) && + clearTimeout + ) { + cachedClearTimeout = clearTimeout; + return clearTimeout(marker); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedClearTimeout(marker); + } catch (e) { + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedClearTimeout.call(null, marker); + } catch (e) { + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. + // Some versions of I.E. have different rules for clearTimeout vs setTimeout + return cachedClearTimeout.call(this, marker); + } + } + } + var queue = []; + var draining = false; + var currentQueue; + var queueIndex = -1; + + function cleanUpNextTick() { + if (!draining || !currentQueue) { + return; + } + draining = false; + if (currentQueue.length) { + queue = currentQueue.concat(queue); + } else { + queueIndex = -1; + } + if (queue.length) { + drainQueue(); + } + } + + function drainQueue() { + if (draining) { + return; + } + var timeout = runTimeout(cleanUpNextTick); + draining = true; + + var len = queue.length; + while (len) { + currentQueue = queue; + queue = []; + while (++queueIndex < len) { + if (currentQueue) { + currentQueue[queueIndex].run(); + } + } + queueIndex = -1; + len = queue.length; + } + currentQueue = null; + draining = false; + runClearTimeout(timeout); + } + + process.nextTick = function(fun) { + var args = new Array(arguments.length - 1); + if (arguments.length > 1) { + for (var i = 1; i < arguments.length; i++) { + args[i - 1] = arguments[i]; + } + } + queue.push(new Item(fun, args)); + if (queue.length === 1 && !draining) { + runTimeout(drainQueue); + } + }; + + // v8 likes predictible objects + function Item(fun, array) { + this.fun = fun; + this.array = array; + } + Item.prototype.run = function() { + this.fun.apply(null, this.array); + }; + process.title = 'browser'; + process.browser = true; + process.env = {}; + process.argv = []; + process.version = ''; // empty string to avoid regexp issues + process.versions = {}; + + function noop() {} + + process.on = noop; + process.addListener = noop; + process.once = noop; + process.off = noop; + process.removeListener = noop; + process.removeAllListeners = noop; + process.emit = noop; + process.prependListener = noop; + process.prependOnceListener = noop; + + process.listeners = function(name) { + return []; + }; + + process.binding = function(name) { + throw new Error('process.binding is not supported'); + }; + + process.cwd = function() { + return '/'; + }; + process.chdir = function(dir) { + throw new Error('process.chdir is not supported'); + }; + process.umask = function() { + return 0; + }; + + /***/ + }, + /* 3 */ + /***/ function(module, exports) { + module.exports = __WEBPACK_EXTERNAL_MODULE_3__; + + /***/ + }, + /* 4 */ + /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */ (function(process) { + /** + * 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. + */ + + if (process.env.NODE_ENV !== 'production') { + var REACT_ELEMENT_TYPE = + (typeof Symbol === 'function' && + Symbol.for && + Symbol.for('react.element')) || + 0xeac7; + + var isValidElement = function(object) { + return ( + typeof object === 'object' && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE + ); + }; + + // By explicitly using `prop-types` you are opting into new development behavior. + // http://fb.me/prop-types-in-prod + var throwOnDirectAccess = true; + module.exports = __webpack_require__(5)( + isValidElement, + throwOnDirectAccess + ); + } else { + // By explicitly using `prop-types` you are opting into new production behavior. + // http://fb.me/prop-types-in-prod + module.exports = __webpack_require__(12)(); + } + + /* WEBPACK VAR INJECTION */ + }.call(exports, __webpack_require__(2))); + + /***/ + }, + /* 5 */ + /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */ (function(process) { + /** + * 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 strict'; + + var emptyFunction = __webpack_require__(6); + var invariant = __webpack_require__(7); + var warning = __webpack_require__(8); + var assign = __webpack_require__(9); + + var ReactPropTypesSecret = __webpack_require__(10); + var checkPropTypes = __webpack_require__(11); + + module.exports = function(isValidElement, throwOnDirectAccess) { + /* global Symbol */ + var ITERATOR_SYMBOL = + typeof Symbol === 'function' && Symbol.iterator; + var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec. + + /** + * Returns the iterator method function contained on the iterable object. + * + * Be sure to invoke the function with the iterable as context: + * + * var iteratorFn = getIteratorFn(myIterable); + * if (iteratorFn) { + * var iterator = iteratorFn.call(myIterable); + * ... + * } + * + * @param {?object} maybeIterable + * @return {?function} + */ + function getIteratorFn(maybeIterable) { + var iteratorFn = + maybeIterable && + ((ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL]) || + maybeIterable[FAUX_ITERATOR_SYMBOL]); + if (typeof iteratorFn === 'function') { + return iteratorFn; + } + } + + /** + * Collection of methods that allow declaration and validation of props that are + * supplied to React components. Example usage: + * + * var Props = require('ReactPropTypes'); + * var MyArticle = React.createClass({ + * propTypes: { + * // An optional string prop named "description". + * description: Props.string, + * + * // A required enum prop named "category". + * category: Props.oneOf(['News','Photos']).isRequired, + * + * // A prop named "dialog" that requires an instance of Dialog. + * dialog: Props.instanceOf(Dialog).isRequired + * }, + * render: function() { ... } + * }); + * + * A more formal specification of how these methods are used: + * + * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...) + * decl := ReactPropTypes.{type}(.isRequired)? + * + * Each and every declaration produces a function with the same signature. This + * allows the creation of custom validation functions. For example: + * + * var MyLink = React.createClass({ + * propTypes: { + * // An optional string or URI prop named "href". + * href: function(props, propName, componentName) { + * var propValue = props[propName]; + * if (propValue != null && typeof propValue !== 'string' && + * !(propValue instanceof URI)) { + * return new Error( + * 'Expected a string or an URI for ' + propName + ' in ' + + * componentName + * ); + * } + * } + * }, + * render: function() {...} + * }); + * + * @internal + */ + + var ANONYMOUS = '<>'; + + // Important! + // Keep this list in sync with production version in `./factoryWithThrowingShims.js`. + var ReactPropTypes = { + array: createPrimitiveTypeChecker('array'), + bool: createPrimitiveTypeChecker('boolean'), + func: createPrimitiveTypeChecker('function'), + number: createPrimitiveTypeChecker('number'), + object: createPrimitiveTypeChecker('object'), + string: createPrimitiveTypeChecker('string'), + symbol: createPrimitiveTypeChecker('symbol'), + + any: createAnyTypeChecker(), + arrayOf: createArrayOfTypeChecker, + element: createElementTypeChecker(), + instanceOf: createInstanceTypeChecker, + node: createNodeChecker(), + objectOf: createObjectOfTypeChecker, + oneOf: createEnumTypeChecker, + oneOfType: createUnionTypeChecker, + shape: createShapeTypeChecker, + exact: createStrictShapeTypeChecker + }; + + /** + * inlined Object.is polyfill to avoid requiring consumers ship their own + * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is + */ + /*eslint-disable no-self-compare*/ + function is(x, y) { + // SameValue algorithm + if (x === y) { + // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && y !== y; + } + } + /*eslint-enable no-self-compare*/ + + /** + * We use an Error-like object for backward compatibility as people may call + * PropTypes directly and inspect their output. However, we don't use real + * Errors anymore. We don't inspect their stack anyway, and creating them + * is prohibitively expensive if they are created too often, such as what + * happens in oneOfType() for any type before the one that matched. + */ + function PropTypeError(message) { + this.message = message; + this.stack = ''; + } + // Make `instanceof Error` still work for returned errors. + PropTypeError.prototype = Error.prototype; + + function createChainableTypeChecker(validate) { + if (process.env.NODE_ENV !== 'production') { + var manualPropTypeCallCache = {}; + var manualPropTypeWarningCount = 0; + } + function checkType( + isRequired, + props, + propName, + componentName, + location, + propFullName, + secret + ) { + componentName = componentName || ANONYMOUS; + propFullName = propFullName || propName; + + if (secret !== ReactPropTypesSecret) { + if (throwOnDirectAccess) { + // New behavior only for users of `prop-types` package + invariant( + 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' + ); + } else if ( + process.env.NODE_ENV !== 'production' && + typeof console !== 'undefined' + ) { + // Old behavior for people using React.PropTypes + var cacheKey = componentName + ':' + propName; + if ( + !manualPropTypeCallCache[cacheKey] && + // Avoid spamming the console because they are often not actionable except for lib authors + manualPropTypeWarningCount < 3 + ) { + warning( + false, + 'You are manually calling a React.PropTypes validation ' + + 'function for the `%s` prop on `%s`. This is deprecated ' + + 'and will throw in the standalone `prop-types` package. ' + + 'You may be seeing this warning due to a third-party PropTypes ' + + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + + 'for details.', + propFullName, + componentName + ); + manualPropTypeCallCache[cacheKey] = true; + manualPropTypeWarningCount++; + } + } + } + if (props[propName] == null) { + if (isRequired) { + if (props[propName] === null) { + return new PropTypeError( + 'The ' + + location + + ' `' + + propFullName + + '` is marked as required ' + + ('in `' + + componentName + + '`, but its value is `null`.') + ); + } + return new PropTypeError( + 'The ' + + location + + ' `' + + propFullName + + '` is marked as required in ' + + ('`' + + componentName + + '`, but its value is `undefined`.') + ); + } + return null; + } else { + return validate( + props, + propName, + componentName, + location, + propFullName + ); + } + } + + var chainedCheckType = checkType.bind(null, false); + chainedCheckType.isRequired = checkType.bind(null, true); + + return chainedCheckType; + } + + function createPrimitiveTypeChecker(expectedType) { + function validate( + props, + propName, + componentName, + location, + propFullName, + secret + ) { + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== expectedType) { + // `propValue` being instance of, say, date/regexp, pass the 'object' + // check, but we can offer a more precise error message here rather than + // 'of type `object`'. + var preciseType = getPreciseType(propValue); + + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type ' + + ('`' + + preciseType + + '` supplied to `' + + componentName + + '`, expected ') + + ('`' + expectedType + '`.') + ); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createAnyTypeChecker() { + return createChainableTypeChecker(emptyFunction.thatReturnsNull); + } + + function createArrayOfTypeChecker(typeChecker) { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + if (typeof typeChecker !== 'function') { + return new PropTypeError( + 'Property `' + + propFullName + + '` of component `' + + componentName + + '` has invalid PropType notation inside arrayOf.' + ); + } + var propValue = props[propName]; + if (!Array.isArray(propValue)) { + var propType = getPropType(propValue); + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type ' + + ('`' + + propType + + '` supplied to `' + + componentName + + '`, expected an array.') + ); + } + for (var i = 0; i < propValue.length; i++) { + var error = typeChecker( + propValue, + i, + componentName, + location, + propFullName + '[' + i + ']', + ReactPropTypesSecret + ); + if (error instanceof Error) { + return error; + } + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createElementTypeChecker() { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + var propValue = props[propName]; + if (!isValidElement(propValue)) { + var propType = getPropType(propValue); + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type ' + + ('`' + + propType + + '` supplied to `' + + componentName + + '`, expected a single ReactElement.') + ); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createInstanceTypeChecker(expectedClass) { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + if (!(props[propName] instanceof expectedClass)) { + var expectedClassName = expectedClass.name || ANONYMOUS; + var actualClassName = getClassName(props[propName]); + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type ' + + ('`' + + actualClassName + + '` supplied to `' + + componentName + + '`, expected ') + + ('instance of `' + expectedClassName + '`.') + ); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createEnumTypeChecker(expectedValues) { + if (!Array.isArray(expectedValues)) { + process.env.NODE_ENV !== 'production' + ? warning( + false, + 'Invalid argument supplied to oneOf, expected an instance of array.' + ) + : void 0; + return emptyFunction.thatReturnsNull; + } + + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + var propValue = props[propName]; + for (var i = 0; i < expectedValues.length; i++) { + if (is(propValue, expectedValues[i])) { + return null; + } + } + + var valuesString = JSON.stringify(expectedValues); + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of value `' + + propValue + + '` ' + + ('supplied to `' + + componentName + + '`, expected one of ' + + valuesString + + '.') + ); + } + return createChainableTypeChecker(validate); + } + + function createObjectOfTypeChecker(typeChecker) { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + if (typeof typeChecker !== 'function') { + return new PropTypeError( + 'Property `' + + propFullName + + '` of component `' + + componentName + + '` has invalid PropType notation inside objectOf.' + ); + } + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== 'object') { + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type ' + + ('`' + + propType + + '` supplied to `' + + componentName + + '`, expected an object.') + ); + } + for (var key in propValue) { + if (propValue.hasOwnProperty(key)) { + var error = typeChecker( + propValue, + key, + componentName, + location, + propFullName + '.' + key, + ReactPropTypesSecret + ); + if (error instanceof Error) { + return error; + } + } + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createUnionTypeChecker(arrayOfTypeCheckers) { + if (!Array.isArray(arrayOfTypeCheckers)) { + process.env.NODE_ENV !== 'production' + ? warning( + false, + 'Invalid argument supplied to oneOfType, expected an instance of array.' + ) + : void 0; + return emptyFunction.thatReturnsNull; + } + + for (var i = 0; i < arrayOfTypeCheckers.length; i++) { + var checker = arrayOfTypeCheckers[i]; + if (typeof checker !== 'function') { + warning( + false, + 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + + 'received %s at index %s.', + getPostfixForTypeWarning(checker), + i + ); + return emptyFunction.thatReturnsNull; + } + } + + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + for (var i = 0; i < arrayOfTypeCheckers.length; i++) { + var checker = arrayOfTypeCheckers[i]; + if ( + checker( + props, + propName, + componentName, + location, + propFullName, + ReactPropTypesSecret + ) == null + ) { + return null; + } + } + + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` supplied to ' + + ('`' + componentName + '`.') + ); + } + return createChainableTypeChecker(validate); + } + + function createNodeChecker() { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + if (!isNode(props[propName])) { + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` supplied to ' + + ('`' + componentName + '`, expected a ReactNode.') + ); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createShapeTypeChecker(shapeTypes) { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== 'object') { + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type `' + + propType + + '` ' + + ('supplied to `' + + componentName + + '`, expected `object`.') + ); + } + for (var key in shapeTypes) { + var checker = shapeTypes[key]; + if (!checker) { + continue; + } + var error = checker( + propValue, + key, + componentName, + location, + propFullName + '.' + key, + ReactPropTypesSecret + ); + if (error) { + return error; + } + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createStrictShapeTypeChecker(shapeTypes) { + function validate( + props, + propName, + componentName, + location, + propFullName + ) { + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== 'object') { + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` of type `' + + propType + + '` ' + + ('supplied to `' + + componentName + + '`, expected `object`.') + ); + } + // We need to check all keys in case some are required but missing from + // props. + var allKeys = assign({}, props[propName], shapeTypes); + for (var key in allKeys) { + var checker = shapeTypes[key]; + if (!checker) { + return new PropTypeError( + 'Invalid ' + + location + + ' `' + + propFullName + + '` key `' + + key + + '` supplied to `' + + componentName + + '`.' + + '\nBad object: ' + + JSON.stringify(props[propName], null, ' ') + + '\nValid keys: ' + + JSON.stringify(Object.keys(shapeTypes), null, ' ') + ); + } + var error = checker( + propValue, + key, + componentName, + location, + propFullName + '.' + key, + ReactPropTypesSecret + ); + if (error) { + return error; + } + } + return null; + } + + return createChainableTypeChecker(validate); + } + + function isNode(propValue) { + switch (typeof propValue) { + case 'number': + case 'string': + case 'undefined': + return true; + case 'boolean': + return !propValue; + case 'object': + if (Array.isArray(propValue)) { + return propValue.every(isNode); + } + if (propValue === null || isValidElement(propValue)) { + return true; + } + + var iteratorFn = getIteratorFn(propValue); + if (iteratorFn) { + var iterator = iteratorFn.call(propValue); + var step; + if (iteratorFn !== propValue.entries) { + while (!(step = iterator.next()).done) { + if (!isNode(step.value)) { + return false; + } + } + } else { + // Iterator will provide entry [k,v] tuples rather than values. + while (!(step = iterator.next()).done) { + var entry = step.value; + if (entry) { + if (!isNode(entry[1])) { + return false; + } + } + } + } + } else { + return false; + } + + return true; + default: + return false; + } + } + + function isSymbol(propType, propValue) { + // Native Symbol. + if (propType === 'symbol') { + return true; + } + + // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol' + if (propValue['@@toStringTag'] === 'Symbol') { + return true; + } + + // Fallback for non-spec compliant Symbols which are polyfilled. + if (typeof Symbol === 'function' && propValue instanceof Symbol) { + return true; + } + + return false; + } + + // Equivalent of `typeof` but with special handling for array and regexp. + function getPropType(propValue) { + var propType = typeof propValue; + if (Array.isArray(propValue)) { + return 'array'; + } + if (propValue instanceof RegExp) { + // Old webkits (at least until Android 4.0) return 'function' rather than + // 'object' for typeof a RegExp. We'll normalize this here so that /bla/ + // passes PropTypes.object. + return 'object'; + } + if (isSymbol(propType, propValue)) { + return 'symbol'; + } + return propType; + } + + // This handles more types than `getPropType`. Only used for error messages. + // See `createPrimitiveTypeChecker`. + function getPreciseType(propValue) { + if (typeof propValue === 'undefined' || propValue === null) { + return '' + propValue; + } + var propType = getPropType(propValue); + if (propType === 'object') { + if (propValue instanceof Date) { + return 'date'; + } else if (propValue instanceof RegExp) { + return 'regexp'; + } + } + return propType; + } + + // Returns a string that is postfixed to a warning about an invalid type. + // For example, "undefined" or "of type array" + function getPostfixForTypeWarning(value) { + var type = getPreciseType(value); + switch (type) { + case 'array': + case 'object': + return 'an ' + type; + case 'boolean': + case 'date': + case 'regexp': + return 'a ' + type; + default: + return type; + } + } + + // Returns class name of the object, if any. + function getClassName(propValue) { + if (!propValue.constructor || !propValue.constructor.name) { + return ANONYMOUS; + } + return propValue.constructor.name; + } + + ReactPropTypes.checkPropTypes = checkPropTypes; + ReactPropTypes.PropTypes = ReactPropTypes; + + return ReactPropTypes; + }; + + /* WEBPACK VAR INJECTION */ + }.call(exports, __webpack_require__(2))); + + /***/ + }, + /* 6 */ + /***/ function(module, exports) { + 'use strict'; + + /** + * 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; + }; + + module.exports = emptyFunction; + + /***/ + }, + /* 7 */ + /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */ (function(process) { + /** + * 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 strict'; + + /** + * 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) {}; + + if (process.env.NODE_ENV !== 'production') { + validateFormat = function validateFormat(format) { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + }; + } + + 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; + } + } + + module.exports = invariant; + /* WEBPACK VAR INJECTION */ + }.call(exports, __webpack_require__(2))); + + /***/ + }, + /* 8 */ + /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */ (function(process) { + /** + * Copyright (c) 2014-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 strict'; + + var emptyFunction = __webpack_require__(6); + + /** + * Similar to invariant but only logs a warning if the condition is not met. + * This can be used to log issues in development environments in critical + * paths. Removing the logging code for production environments will keep the + * same logic and follow the same code paths. + */ + + var warning = emptyFunction; + + if (process.env.NODE_ENV !== 'production') { + var printWarning = function printWarning(format) { + for ( + var _len = arguments.length, + args = Array(_len > 1 ? _len - 1 : 0), + _key = 1; + _key < _len; + _key++ + ) { + args[_key - 1] = arguments[_key]; + } + + var argIndex = 0; + var message = + 'Warning: ' + + format.replace(/%s/g, function() { + return args[argIndex++]; + }); + if (typeof console !== 'undefined') { + console.error(message); + } + try { + // --- Welcome to debugging React --- + // This error was thrown as a convenience so that you can use this stack + // to find the callsite that caused this warning to fire. + throw new Error(message); + } catch (x) {} + }; + + warning = function warning(condition, format) { + if (format === undefined) { + throw new Error( + '`warning(condition, format, ...args)` requires a warning ' + + 'message argument' + ); + } + + if (format.indexOf('Failed Composite propType: ') === 0) { + return; // Ignore CompositeComponent proptype check. + } + + if (!condition) { + for ( + var _len2 = arguments.length, + args = Array(_len2 > 2 ? _len2 - 2 : 0), + _key2 = 2; + _key2 < _len2; + _key2++ + ) { + args[_key2 - 2] = arguments[_key2]; + } + + printWarning.apply(undefined, [format].concat(args)); + } + }; + } + + module.exports = warning; + /* WEBPACK VAR INJECTION */ + }.call(exports, __webpack_require__(2))); + + /***/ + }, + /* 9 */ + /***/ function(module, exports) { + /* + object-assign + (c) Sindre Sorhus + @license MIT + */ + + 'use strict'; + /* 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; + } + } + + module.exports = 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; + }; + + /***/ + }, + /* 10 */ + /***/ function(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. + */ + + 'use strict'; + + var ReactPropTypesSecret = + 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; + + module.exports = ReactPropTypesSecret; + + /***/ + }, + /* 11 */ + /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */ (function(process) { + /** + * 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 strict'; + + if (process.env.NODE_ENV !== 'production') { + var invariant = __webpack_require__(7); + var warning = __webpack_require__(8); + var ReactPropTypesSecret = __webpack_require__(10); + var loggedTypeFailures = {}; + } + + /** + * Assert that the values match with the type specs. + * Error messages are memorized and will only be shown once. + * + * @param {object} typeSpecs Map of name to a ReactPropType + * @param {object} values Runtime values that need to be type-checked + * @param {string} location e.g. "prop", "context", "child context" + * @param {string} componentName Name of the component for error messages. + * @param {?Function} getStack Returns the component stack. + * @private + */ + function checkPropTypes( + typeSpecs, + values, + location, + componentName, + getStack + ) { + if (process.env.NODE_ENV !== 'production') { + for (var typeSpecName in typeSpecs) { + if (typeSpecs.hasOwnProperty(typeSpecName)) { + var error; + // Prop type validation may throw. In case they do, we don't want to + // fail the render phase where it didn't fail before. So we log it. + // After these have been cleaned up, we'll let them throw. + try { + // This is intentionally an invariant that gets caught. It's the same + // behavior as without this statement except with a better message. + invariant( + typeof typeSpecs[typeSpecName] === 'function', + '%s: %s type `%s` is invalid; it must be a function, usually from ' + + 'the `prop-types` package, but received `%s`.', + componentName || 'React class', + location, + typeSpecName, + typeof typeSpecs[typeSpecName] + ); + error = typeSpecs[typeSpecName]( + values, + typeSpecName, + componentName, + location, + null, + ReactPropTypesSecret + ); + } catch (ex) { + error = ex; + } + warning( + !error || error instanceof Error, + '%s: type specification of %s `%s` is invalid; the type checker ' + + 'function must return `null` or an `Error` but returned a %s. ' + + 'You may have forgotten to pass an argument to the type checker ' + + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + + 'shape all require an argument).', + componentName || 'React class', + location, + typeSpecName, + typeof error + ); + if ( + error instanceof Error && + !(error.message in loggedTypeFailures) + ) { + // Only monitor this failure once because there tends to be a lot of the + // same error. + loggedTypeFailures[error.message] = true; + + var stack = getStack ? getStack() : ''; + + warning( + false, + 'Failed %s type: %s%s', + location, + error.message, + stack != null ? stack : '' + ); + } + } + } + } + } + + module.exports = checkPropTypes; + + /* WEBPACK VAR INJECTION */ + }.call(exports, __webpack_require__(2))); + + /***/ + }, + /* 12 */ + /***/ function(module, exports, __webpack_require__) { + /** + * 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 strict'; + + var emptyFunction = __webpack_require__(6); + var invariant = __webpack_require__(7); + var ReactPropTypesSecret = __webpack_require__(10); + + module.exports = function() { + function shim( + props, + propName, + componentName, + location, + propFullName, + secret + ) { + if (secret === ReactPropTypesSecret) { + // It is still safe when called from React. + return; + } + invariant( + 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; + ReactPropTypes.PropTypes = ReactPropTypes; + + return ReactPropTypes; + }; + + /***/ + }, + /* 13 */ + /***/ function(module, exports) { + module.exports = function shallowEqualArrays(arrA, arrB) { + if (arrA === arrB) { + return true; + } + + var len = arrA.length; + + if (arrB.length !== len) { + return false; + } + + for (var i = 0; i < len; i++) { + if (arrA[i] !== arrB[i]) { + return false; + } + } + + return true; + }; + + /***/ + }, + /* 14 */ + /***/ function(module, exports, __webpack_require__) { + 'use strict'; + + module.exports = __webpack_require__(15).default; + + /***/ + }, + /* 15 */ + /***/ 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 _slicedToArray = (function() { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + try { + for ( + var _i = arr[Symbol.iterator](), _s; + !(_n = (_s = _i.next()).done); + _n = true + ) { + _arr.push(_s.value); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i['return']) _i['return'](); + } finally { + if (_d) throw _e; + } + } + return _arr; + } + return function(arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance' + ); + } + }; + })(); + + 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 _react = __webpack_require__(3); + + var _react2 = _interopRequireDefault(_react); + + var _propTypes = __webpack_require__(4); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _sectionIterator = __webpack_require__(16); + + var _sectionIterator2 = _interopRequireDefault(_sectionIterator); + + var _reactThemeable = __webpack_require__(17); + + var _reactThemeable2 = _interopRequireDefault(_reactThemeable); + + var _SectionTitle = __webpack_require__(19); + + var _SectionTitle2 = _interopRequireDefault(_SectionTitle); + + var _ItemsList = __webpack_require__(21); + + var _ItemsList2 = _interopRequireDefault(_ItemsList); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; + } + + 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 === '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 + ); + } + 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 emptyObject = {}; + var defaultRenderInputComponent = function defaultRenderInputComponent( + props + ) { + return _react2.default.createElement('input', props); + }; + var defaultRenderItemsContainer = function defaultRenderItemsContainer( + _ref + ) { + var containerProps = _ref.containerProps, + children = _ref.children; + return _react2.default.createElement('div', containerProps, children); + }; + var defaultTheme = { + container: 'react-autowhatever__container', + containerOpen: 'react-autowhatever__container--open', + input: 'react-autowhatever__input', + inputOpen: 'react-autowhatever__input--open', + inputFocused: 'react-autowhatever__input--focused', + itemsContainer: 'react-autowhatever__items-container', + itemsContainerOpen: 'react-autowhatever__items-container--open', + itemsList: 'react-autowhatever__items-list', + item: 'react-autowhatever__item', + itemFirst: 'react-autowhatever__item--first', + itemHighlighted: 'react-autowhatever__item--highlighted', + sectionContainer: 'react-autowhatever__section-container', + sectionContainerFirst: 'react-autowhatever__section-container--first', + sectionTitle: 'react-autowhatever__section-title' + }; + + var Autowhatever = (function(_Component) { + _inherits(Autowhatever, _Component); + + function Autowhatever(props) { + _classCallCheck(this, Autowhatever); + + var _this = _possibleConstructorReturn( + this, + ( + Autowhatever.__proto__ || Object.getPrototypeOf(Autowhatever) + ).call(this, props) + ); + + _this.storeInputReference = function(input) { + if (input !== null) { + _this.input = input; + } + }; + + _this.storeItemsContainerReference = function(itemsContainer) { + if (itemsContainer !== null) { + _this.itemsContainer = itemsContainer; + } + }; + + _this.onHighlightedItemChange = function(highlightedItem) { + _this.highlightedItem = highlightedItem; + }; + + _this.getItemId = function(sectionIndex, itemIndex) { + if (itemIndex === null) { + return null; + } + + var id = _this.props.id; + + var section = + sectionIndex === null ? '' : 'section-' + sectionIndex; + + return ( + 'react-autowhatever-' + + id + + '-' + + section + + '-item-' + + itemIndex + ); + }; + + _this.onFocus = function(event) { + var inputProps = _this.props.inputProps; + + _this.setState({ + isInputFocused: true + }); + + inputProps.onFocus && inputProps.onFocus(event); + }; + + _this.onBlur = function(event) { + var inputProps = _this.props.inputProps; + + _this.setState({ + isInputFocused: false + }); + + inputProps.onBlur && inputProps.onBlur(event); + }; + + _this.onKeyDown = function(event) { + var _this$props = _this.props, + inputProps = _this$props.inputProps, + highlightedSectionIndex = _this$props.highlightedSectionIndex, + highlightedItemIndex = _this$props.highlightedItemIndex; + + switch (event.key) { + case 'ArrowDown': + case 'ArrowUp': { + var nextPrev = event.key === 'ArrowDown' ? 'next' : 'prev'; + + var _this$sectionIterator = _this.sectionIterator[nextPrev]([ + highlightedSectionIndex, + highlightedItemIndex + ]), + _this$sectionIterator2 = _slicedToArray( + _this$sectionIterator, + 2 + ), + newHighlightedSectionIndex = _this$sectionIterator2[0], + newHighlightedItemIndex = _this$sectionIterator2[1]; + + inputProps.onKeyDown(event, { + newHighlightedSectionIndex: newHighlightedSectionIndex, + newHighlightedItemIndex: newHighlightedItemIndex + }); + break; + } + + default: + inputProps.onKeyDown(event, { + highlightedSectionIndex: highlightedSectionIndex, + highlightedItemIndex: highlightedItemIndex + }); + } + }; + + _this.highlightedItem = null; + + _this.state = { + isInputFocused: false + }; + + _this.setSectionsItems(props); + _this.setSectionIterator(props); + _this.setTheme(props); + return _this; + } + + _createClass(Autowhatever, [ + { + key: 'componentDidMount', + value: function componentDidMount() { + this.ensureHighlightedItemIsVisible(); + } + }, + { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.items !== this.props.items) { + this.setSectionsItems(nextProps); + } + + if ( + nextProps.items !== this.props.items || + nextProps.multiSection !== this.props.multiSection + ) { + this.setSectionIterator(nextProps); + } + + if (nextProps.theme !== this.props.theme) { + this.setTheme(nextProps); + } + } + }, + { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.ensureHighlightedItemIsVisible(); + } + }, + { + key: 'setSectionsItems', + value: function setSectionsItems(props) { + if (props.multiSection) { + this.sectionsItems = props.items.map(function(section) { + return props.getSectionItems(section); + }); + this.sectionsLengths = this.sectionsItems.map(function( + items + ) { + return items.length; + }); + this.allSectionsAreEmpty = this.sectionsLengths.every( + function(itemsCount) { + return itemsCount === 0; + } + ); + } + } + }, + { + key: 'setSectionIterator', + value: function setSectionIterator(props) { + this.sectionIterator = (0, _sectionIterator2.default)({ + multiSection: props.multiSection, + data: props.multiSection + ? this.sectionsLengths + : props.items.length + }); + } + }, + { + key: 'setTheme', + value: function setTheme(props) { + this.theme = (0, _reactThemeable2.default)(props.theme); + } + }, + { + key: 'renderSections', + value: function renderSections() { + var _this2 = this; + + if (this.allSectionsAreEmpty) { + return null; + } + + var theme = this.theme; + var _props = this.props, + id = _props.id, + items = _props.items, + renderItem = _props.renderItem, + renderItemData = _props.renderItemData, + renderSectionTitle = _props.renderSectionTitle, + highlightedSectionIndex = _props.highlightedSectionIndex, + highlightedItemIndex = _props.highlightedItemIndex, + itemProps = _props.itemProps; + + return items.map(function(section, sectionIndex) { + var keyPrefix = 'react-autowhatever-' + id + '-'; + var sectionKeyPrefix = + keyPrefix + 'section-' + sectionIndex + '-'; + var isFirstSection = sectionIndex === 0; + + // `key` is provided by theme() + /* eslint-disable react/jsx-key */ + return _react2.default.createElement( + 'div', + theme( + sectionKeyPrefix + 'container', + 'sectionContainer', + isFirstSection && 'sectionContainerFirst' + ), + _react2.default.createElement(_SectionTitle2.default, { + section: section, + renderSectionTitle: renderSectionTitle, + theme: theme, + sectionKeyPrefix: sectionKeyPrefix + }), + _react2.default.createElement(_ItemsList2.default, { + items: _this2.sectionsItems[sectionIndex], + itemProps: itemProps, + renderItem: renderItem, + renderItemData: renderItemData, + sectionIndex: sectionIndex, + highlightedItemIndex: + highlightedSectionIndex === sectionIndex + ? highlightedItemIndex + : null, + onHighlightedItemChange: _this2.onHighlightedItemChange, + getItemId: _this2.getItemId, + theme: theme, + keyPrefix: keyPrefix, + ref: _this2.storeItemsListReference + }) + ); + /* eslint-enable react/jsx-key */ + }); + } + }, + { + key: 'renderItems', + value: function renderItems() { + var items = this.props.items; + + if (items.length === 0) { + return null; + } + + var theme = this.theme; + var _props2 = this.props, + id = _props2.id, + renderItem = _props2.renderItem, + renderItemData = _props2.renderItemData, + highlightedSectionIndex = _props2.highlightedSectionIndex, + highlightedItemIndex = _props2.highlightedItemIndex, + itemProps = _props2.itemProps; + + return _react2.default.createElement(_ItemsList2.default, { + items: items, + itemProps: itemProps, + renderItem: renderItem, + renderItemData: renderItemData, + highlightedItemIndex: + highlightedSectionIndex === null + ? highlightedItemIndex + : null, + onHighlightedItemChange: this.onHighlightedItemChange, + getItemId: this.getItemId, + theme: theme, + keyPrefix: 'react-autowhatever-' + id + '-' + }); + } + }, + { + key: 'ensureHighlightedItemIsVisible', + value: function ensureHighlightedItemIsVisible() { + var highlightedItem = this.highlightedItem; + + if (!highlightedItem) { + return; + } + + var itemsContainer = this.itemsContainer; + + var itemOffsetRelativeToContainer = + highlightedItem.offsetParent === itemsContainer + ? highlightedItem.offsetTop + : highlightedItem.offsetTop - itemsContainer.offsetTop; + + var scrollTop = itemsContainer.scrollTop; // Top of the visible area + + if (itemOffsetRelativeToContainer < scrollTop) { + // Item is off the top of the visible area + scrollTop = itemOffsetRelativeToContainer; + } else if ( + itemOffsetRelativeToContainer + highlightedItem.offsetHeight > + scrollTop + itemsContainer.offsetHeight + ) { + // Item is off the bottom of the visible area + scrollTop = + itemOffsetRelativeToContainer + + highlightedItem.offsetHeight - + itemsContainer.offsetHeight; + } + + if (scrollTop !== itemsContainer.scrollTop) { + itemsContainer.scrollTop = scrollTop; + } + } + }, + { + key: 'render', + value: function render() { + var theme = this.theme; + var _props3 = this.props, + id = _props3.id, + multiSection = _props3.multiSection, + renderInputComponent = _props3.renderInputComponent, + renderItemsContainer = _props3.renderItemsContainer, + highlightedSectionIndex = _props3.highlightedSectionIndex, + highlightedItemIndex = _props3.highlightedItemIndex; + var isInputFocused = this.state.isInputFocused; + + var renderedItems = multiSection + ? this.renderSections() + : this.renderItems(); + var isOpen = renderedItems !== null; + var ariaActivedescendant = this.getItemId( + highlightedSectionIndex, + highlightedItemIndex + ); + var containerProps = theme( + 'react-autowhatever-' + id + '-container', + 'container', + isOpen && 'containerOpen' + ); + var itemsContainerId = 'react-autowhatever-' + id; + var inputComponent = renderInputComponent( + _extends( + { + type: 'text', + value: '', + autoComplete: 'off', + role: 'combobox', + 'aria-autocomplete': 'list', + 'aria-owns': itemsContainerId, + 'aria-expanded': isOpen, + 'aria-activedescendant': ariaActivedescendant + }, + theme( + 'react-autowhatever-' + id + '-input', + 'input', + isOpen && 'inputOpen', + isInputFocused && 'inputFocused' + ), + this.props.inputProps, + { + onFocus: this.onFocus, + onBlur: this.onBlur, + onKeyDown: + this.props.inputProps.onKeyDown && this.onKeyDown, + ref: this.storeInputReference + } + ) + ); + var itemsContainer = renderItemsContainer({ + containerProps: _extends( + { + id: itemsContainerId + }, + theme( + 'react-autowhatever-' + id + '-items-container', + 'itemsContainer', + isOpen && 'itemsContainerOpen' + ), + { + ref: this.storeItemsContainerReference + } + ), + children: renderedItems + }); + + return _react2.default.createElement( + 'div', + containerProps, + inputComponent, + itemsContainer + ); + } + } + ]); + + return Autowhatever; + })(_react.Component); + + Autowhatever.propTypes = { + id: _propTypes2.default.string, // Used in aria-* attributes. If multiple Autowhatever's are rendered on a page, they must have unique ids. + multiSection: _propTypes2.default.bool, // Indicates whether a multi section layout should be rendered. + renderInputComponent: _propTypes2.default.func, // When specified, it is used to render the input element. + renderItemsContainer: _propTypes2.default.func, // Renders the items container. + items: _propTypes2.default.array.isRequired, // Array of items or sections to render. + renderItem: _propTypes2.default.func, // This function renders a single item. + renderItemData: _propTypes2.default.object, // Arbitrary data that will be passed to renderItem() + renderSectionTitle: _propTypes2.default.func, // This function gets a section and renders its title. + getSectionItems: _propTypes2.default.func, // This function gets a section and returns its items, which will be passed into `renderItem` for rendering. + inputProps: _propTypes2.default.object, // Arbitrary input props + itemProps: _propTypes2.default.oneOfType([ + // Arbitrary item props + _propTypes2.default.object, + _propTypes2.default.func + ]), + highlightedSectionIndex: _propTypes2.default.number, // Section index of the highlighted item + highlightedItemIndex: _propTypes2.default.number, // Highlighted item index (within a section) + theme: _propTypes2.default.oneOfType([ + // Styles. See: https://github.com/markdalgleish/react-themeable + _propTypes2.default.object, + _propTypes2.default.array + ]) + }; + Autowhatever.defaultProps = { + id: '1', + multiSection: false, + renderInputComponent: defaultRenderInputComponent, + renderItemsContainer: defaultRenderItemsContainer, + renderItem: function renderItem() { + throw new Error('`renderItem` must be provided'); + }, + renderItemData: emptyObject, + renderSectionTitle: function renderSectionTitle() { + throw new Error('`renderSectionTitle` must be provided'); + }, + getSectionItems: function getSectionItems() { + throw new Error('`getSectionItems` must be provided'); + }, + inputProps: emptyObject, + itemProps: emptyObject, + highlightedSectionIndex: null, + highlightedItemIndex: null, + theme: defaultTheme + }; + exports.default = Autowhatever; + + /***/ + }, + /* 16 */ + /***/ function(module, exports) { + 'use strict'; + + var _slicedToArray = (function() { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + try { + for ( + var _i = arr[Symbol.iterator](), _s; + !(_n = (_s = _i.next()).done); + _n = true + ) { + _arr.push(_s.value); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i['return']) _i['return'](); + } finally { + if (_d) throw _e; + } + } + return _arr; + } + return function(arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance' + ); + } + }; + })(); + + module.exports = function(_ref) { + var data = _ref.data; + var multiSection = _ref.multiSection; + + function nextNonEmptySectionIndex(sectionIndex) { + if (sectionIndex === null) { + sectionIndex = 0; + } else { + sectionIndex++; + } + + while (sectionIndex < data.length && data[sectionIndex] === 0) { + sectionIndex++; + } + + return sectionIndex === data.length ? null : sectionIndex; + } + + function prevNonEmptySectionIndex(sectionIndex) { + if (sectionIndex === null) { + sectionIndex = data.length - 1; + } else { + sectionIndex--; + } + + while (sectionIndex >= 0 && data[sectionIndex] === 0) { + sectionIndex--; + } + + return sectionIndex === -1 ? null : sectionIndex; + } + + function next(position) { + var _position = _slicedToArray(position, 2); + + var sectionIndex = _position[0]; + var itemIndex = _position[1]; + + if (multiSection) { + if (itemIndex === null || itemIndex === data[sectionIndex] - 1) { + sectionIndex = nextNonEmptySectionIndex(sectionIndex); + + if (sectionIndex === null) { + return [null, null]; + } + + return [sectionIndex, 0]; + } + + return [sectionIndex, itemIndex + 1]; + } + + if (data === 0 || itemIndex === data - 1) { + return [null, null]; + } + + if (itemIndex === null) { + return [null, 0]; + } + + return [null, itemIndex + 1]; + } + + function prev(position) { + var _position2 = _slicedToArray(position, 2); + + var sectionIndex = _position2[0]; + var itemIndex = _position2[1]; + + if (multiSection) { + if (itemIndex === null || itemIndex === 0) { + sectionIndex = prevNonEmptySectionIndex(sectionIndex); + + if (sectionIndex === null) { + return [null, null]; + } + + return [sectionIndex, data[sectionIndex] - 1]; + } + + return [sectionIndex, itemIndex - 1]; + } + + if (data === 0 || itemIndex === 0) { + return [null, null]; + } + + if (itemIndex === null) { + return [null, data - 1]; + } + + return [null, itemIndex - 1]; + } + + function isLast(position) { + return next(position)[1] === null; + } + + return { + next: next, + prev: prev, + isLast: isLast + }; + }; + + /***/ + }, + /* 17 */ + /***/ function(module, exports, __webpack_require__) { + 'use strict'; + + Object.defineProperty(exports, '__esModule', { + value: true + }); + + var _slicedToArray = (function() { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + try { + for ( + var _i = arr[Symbol.iterator](), _s; + !(_n = (_s = _i.next()).done); + _n = true + ) { + _arr.push(_s.value); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i['return']) _i['return'](); + } finally { + if (_d) throw _e; + } + } + return _arr; + } + return function(arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance' + ); + } + }; + })(); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; + } + + function _toConsumableArray(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) + arr2[i] = arr[i]; + return arr2; + } else { + return Array.from(arr); + } + } + + var _objectAssign = __webpack_require__(18); + + var _objectAssign2 = _interopRequireDefault(_objectAssign); + + var truthy = function truthy(x) { + return x; + }; + + exports['default'] = function(input) { + var _ref = + Array.isArray(input) && input.length === 2 ? input : [input, null]; + + var _ref2 = _slicedToArray(_ref, 2); + + var theme = _ref2[0]; + var classNameDecorator = _ref2[1]; + + return function(key) { + for ( + var _len = arguments.length, + names = Array(_len > 1 ? _len - 1 : 0), + _key = 1; + _key < _len; + _key++ + ) { + names[_key - 1] = arguments[_key]; + } + + var styles = names + .map(function(name) { + return theme[name]; + }) + .filter(truthy); + + return typeof styles[0] === 'string' || + typeof classNameDecorator === 'function' + ? { + key: key, + className: classNameDecorator + ? classNameDecorator.apply( + undefined, + _toConsumableArray(styles) + ) + : styles.join(' ') + } + : { + key: key, + style: _objectAssign2['default'].apply( + undefined, + [{}].concat(_toConsumableArray(styles)) + ) + }; + }; + }; + + module.exports = exports['default']; + + /***/ + }, + /* 18 */ + /***/ function(module, exports) { + 'use strict'; + var propIsEnumerable = Object.prototype.propertyIsEnumerable; + + function ToObject(val) { + if (val == null) { + throw new TypeError( + 'Object.assign cannot be called with null or undefined' + ); + } + + return Object(val); + } + + function ownEnumerableKeys(obj) { + var keys = Object.getOwnPropertyNames(obj); + + if (Object.getOwnPropertySymbols) { + keys = keys.concat(Object.getOwnPropertySymbols(obj)); + } + + return keys.filter(function(key) { + return propIsEnumerable.call(obj, key); + }); + } + + module.exports = + Object.assign || + function(target, source) { + var from; + var keys; + var to = ToObject(target); + + for (var s = 1; s < arguments.length; s++) { + from = arguments[s]; + keys = ownEnumerableKeys(Object(from)); + + for (var i = 0; i < keys.length; i++) { + to[keys[i]] = from[keys[i]]; + } + } + + return to; + }; + + /***/ + }, + /* 19 */ + /***/ function(module, exports, __webpack_require__) { + '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 _react = __webpack_require__(3); + + var _react2 = _interopRequireDefault(_react); + + var _propTypes = __webpack_require__(4); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _compareObjects = __webpack_require__(20); + + var _compareObjects2 = _interopRequireDefault(_compareObjects); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; + } + + 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 === '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 + ); + } + 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 SectionTitle = (function(_Component) { + _inherits(SectionTitle, _Component); + + function SectionTitle() { + _classCallCheck(this, SectionTitle); + + return _possibleConstructorReturn( + this, + ( + SectionTitle.__proto__ || Object.getPrototypeOf(SectionTitle) + ).apply(this, arguments) + ); + } + + _createClass(SectionTitle, [ + { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps) { + return (0, _compareObjects2.default)(nextProps, this.props); + } + }, + { + key: 'render', + value: function render() { + var _props = this.props, + section = _props.section, + renderSectionTitle = _props.renderSectionTitle, + theme = _props.theme, + sectionKeyPrefix = _props.sectionKeyPrefix; + + var sectionTitle = renderSectionTitle(section); + + if (!sectionTitle) { + return null; + } + + return _react2.default.createElement( + 'div', + theme(sectionKeyPrefix + 'title', 'sectionTitle'), + sectionTitle + ); + } + } + ]); + + return SectionTitle; + })(_react.Component); + + SectionTitle.propTypes = { + section: _propTypes2.default.any.isRequired, + renderSectionTitle: _propTypes2.default.func.isRequired, + theme: _propTypes2.default.func.isRequired, + sectionKeyPrefix: _propTypes2.default.string.isRequired + }; + exports.default = SectionTitle; + + /***/ + }, + /* 20 */ + /***/ function(module, exports) { + 'use strict'; + + Object.defineProperty(exports, '__esModule', { + value: true + }); + + 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; + }; + + exports.default = compareObjects; + function compareObjects(objA, objB) { + var keys = + arguments.length > 2 && arguments[2] !== undefined + ? arguments[2] + : []; + + if (objA === objB) { + return false; + } + + var aKeys = Object.keys(objA); + var bKeys = Object.keys(objB); + + if (aKeys.length !== bKeys.length) { + return true; + } + + var keysMap = {}; + var i = void 0, + len = void 0; + + for (i = 0, len = keys.length; i < len; i++) { + keysMap[keys[i]] = true; + } + + for (i = 0, len = aKeys.length; i < len; i++) { + var key = aKeys[i]; + var aValue = objA[key]; + var bValue = objB[key]; + + if (aValue === bValue) { + continue; + } + + if ( + !keysMap[key] || + aValue === null || + bValue === null || + (typeof aValue === 'undefined' + ? 'undefined' + : _typeof(aValue)) !== 'object' || + (typeof bValue === 'undefined' + ? 'undefined' + : _typeof(bValue)) !== 'object' + ) { + return true; + } + + var aValueKeys = Object.keys(aValue); + var bValueKeys = Object.keys(bValue); + + if (aValueKeys.length !== bValueKeys.length) { + return true; + } + + for (var n = 0, length = aValueKeys.length; n < length; n++) { + var aValueKey = aValueKeys[n]; + + if (aValue[aValueKey] !== bValue[aValueKey]) { + return true; + } + } + } + + return false; + } + + /***/ + }, + /* 21 */ + /***/ 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 _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 _react = __webpack_require__(3); + + var _react2 = _interopRequireDefault(_react); + + var _propTypes = __webpack_require__(4); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _Item = __webpack_require__(22); + + var _Item2 = _interopRequireDefault(_Item); + + var _compareObjects = __webpack_require__(20); + + var _compareObjects2 = _interopRequireDefault(_compareObjects); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; + } + + 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 === '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 + ); + } + 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 ItemsList = (function(_Component) { + _inherits(ItemsList, _Component); + + function ItemsList() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, ItemsList); + + for ( + var _len = arguments.length, args = Array(_len), _key = 0; + _key < _len; + _key++ + ) { + args[_key] = arguments[_key]; + } + + return ( + (_ret = ((_temp = ((_this = _possibleConstructorReturn( + this, + (_ref = + ItemsList.__proto__ || + Object.getPrototypeOf(ItemsList)).call.apply( + _ref, + [this].concat(args) + ) + )), + _this)), + (_this.storeHighlightedItemReference = function(highlightedItem) { + _this.props.onHighlightedItemChange( + highlightedItem === null ? null : highlightedItem.item + ); + }), + _temp)), + _possibleConstructorReturn(_this, _ret) + ); + } + + _createClass(ItemsList, [ + { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps) { + return (0, _compareObjects2.default)(nextProps, this.props, [ + 'itemProps' + ]); + } + }, + { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + items = _props.items, + itemProps = _props.itemProps, + renderItem = _props.renderItem, + renderItemData = _props.renderItemData, + sectionIndex = _props.sectionIndex, + highlightedItemIndex = _props.highlightedItemIndex, + getItemId = _props.getItemId, + theme = _props.theme, + keyPrefix = _props.keyPrefix; + + var sectionPrefix = + sectionIndex === null + ? keyPrefix + : keyPrefix + 'section-' + sectionIndex + '-'; + var isItemPropsFunction = typeof itemProps === 'function'; + + return _react2.default.createElement( + 'ul', + _extends( + { role: 'listbox' }, + theme(sectionPrefix + 'items-list', 'itemsList') + ), + items.map(function(item, itemIndex) { + var isFirst = itemIndex === 0; + var isHighlighted = itemIndex === highlightedItemIndex; + var itemKey = sectionPrefix + 'item-' + itemIndex; + var itemPropsObj = isItemPropsFunction + ? itemProps({ + sectionIndex: sectionIndex, + itemIndex: itemIndex + }) + : itemProps; + var allItemProps = _extends( + { + id: getItemId(sectionIndex, itemIndex) + }, + theme( + itemKey, + 'item', + isFirst && 'itemFirst', + isHighlighted && 'itemHighlighted' + ), + itemPropsObj + ); + + if (isHighlighted) { + allItemProps.ref = _this2.storeHighlightedItemReference; + } + + // `key` is provided by theme() + /* eslint-disable react/jsx-key */ + return _react2.default.createElement( + _Item2.default, + _extends({}, allItemProps, { + sectionIndex: sectionIndex, + isHighlighted: isHighlighted, + itemIndex: itemIndex, + item: item, + renderItem: renderItem, + renderItemData: renderItemData + }) + ); + /* eslint-enable react/jsx-key */ + }) + ); + } + } + ]); + + return ItemsList; + })(_react.Component); + + ItemsList.propTypes = { + items: _propTypes2.default.array.isRequired, + itemProps: _propTypes2.default.oneOfType([ + _propTypes2.default.object, + _propTypes2.default.func + ]), + renderItem: _propTypes2.default.func.isRequired, + renderItemData: _propTypes2.default.object.isRequired, + sectionIndex: _propTypes2.default.number, + highlightedItemIndex: _propTypes2.default.number, + onHighlightedItemChange: _propTypes2.default.func.isRequired, + getItemId: _propTypes2.default.func.isRequired, + theme: _propTypes2.default.func.isRequired, + keyPrefix: _propTypes2.default.string.isRequired + }; + ItemsList.defaultProps = { + sectionIndex: null + }; + exports.default = ItemsList; + + /***/ + }, + /* 22 */ + /***/ 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 _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 _react = __webpack_require__(3); + + var _react2 = _interopRequireDefault(_react); + + var _propTypes = __webpack_require__(4); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _compareObjects = __webpack_require__(20); + + var _compareObjects2 = _interopRequireDefault(_compareObjects); + + 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 === '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 + ); + } + 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 Item = (function(_Component) { + _inherits(Item, _Component); + + function Item() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, Item); + + for ( + var _len = arguments.length, args = Array(_len), _key = 0; + _key < _len; + _key++ + ) { + args[_key] = arguments[_key]; + } + + return ( + (_ret = ((_temp = ((_this = _possibleConstructorReturn( + this, + (_ref = + Item.__proto__ || Object.getPrototypeOf(Item)).call.apply( + _ref, + [this].concat(args) + ) + )), + _this)), + (_this.storeItemReference = function(item) { + if (item !== null) { + _this.item = item; + } + }), + (_this.onMouseEnter = function(event) { + var _this$props = _this.props, + sectionIndex = _this$props.sectionIndex, + itemIndex = _this$props.itemIndex; + + _this.props.onMouseEnter(event, { + sectionIndex: sectionIndex, + itemIndex: itemIndex + }); + }), + (_this.onMouseLeave = function(event) { + var _this$props2 = _this.props, + sectionIndex = _this$props2.sectionIndex, + itemIndex = _this$props2.itemIndex; + + _this.props.onMouseLeave(event, { + sectionIndex: sectionIndex, + itemIndex: itemIndex + }); + }), + (_this.onMouseDown = function(event) { + var _this$props3 = _this.props, + sectionIndex = _this$props3.sectionIndex, + itemIndex = _this$props3.itemIndex; + + _this.props.onMouseDown(event, { + sectionIndex: sectionIndex, + itemIndex: itemIndex + }); + }), + (_this.onClick = function(event) { + var _this$props4 = _this.props, + sectionIndex = _this$props4.sectionIndex, + itemIndex = _this$props4.itemIndex; + + _this.props.onClick(event, { + sectionIndex: sectionIndex, + itemIndex: itemIndex + }); + }), + _temp)), + _possibleConstructorReturn(_this, _ret) + ); + } + + _createClass(Item, [ + { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps) { + return (0, _compareObjects2.default)(nextProps, this.props, [ + 'renderItemData' + ]); + } + }, + { + key: 'render', + value: function render() { + var _props = this.props, + isHighlighted = _props.isHighlighted, + item = _props.item, + renderItem = _props.renderItem, + renderItemData = _props.renderItemData, + restProps = _objectWithoutProperties(_props, [ + 'isHighlighted', + 'item', + 'renderItem', + 'renderItemData' + ]); + + delete restProps.sectionIndex; + delete restProps.itemIndex; + + if (typeof restProps.onMouseEnter === 'function') { + restProps.onMouseEnter = this.onMouseEnter; + } + + if (typeof restProps.onMouseLeave === 'function') { + restProps.onMouseLeave = this.onMouseLeave; + } + + if (typeof restProps.onMouseDown === 'function') { + restProps.onMouseDown = this.onMouseDown; + } + + if (typeof restProps.onClick === 'function') { + restProps.onClick = this.onClick; + } + + return _react2.default.createElement( + 'li', + _extends({ role: 'option' }, restProps, { + ref: this.storeItemReference + }), + renderItem( + item, + _extends({ isHighlighted: isHighlighted }, renderItemData) + ) + ); + } + } + ]); + + return Item; + })(_react.Component); + + Item.propTypes = { + sectionIndex: _propTypes2.default.number, + isHighlighted: _propTypes2.default.bool.isRequired, + itemIndex: _propTypes2.default.number.isRequired, + item: _propTypes2.default.any.isRequired, + renderItem: _propTypes2.default.func.isRequired, + renderItemData: _propTypes2.default.object.isRequired, + onMouseEnter: _propTypes2.default.func, + onMouseLeave: _propTypes2.default.func, + onMouseDown: _propTypes2.default.func, + onClick: _propTypes2.default.func + }; + exports.default = Item; + + /***/ + }, + /* 23 */ + /***/ function(module, exports) { + 'use strict'; + + Object.defineProperty(exports, '__esModule', { + value: true + }); + var defaultTheme = (exports.defaultTheme = { + container: 'react-autosuggest__container', + containerOpen: 'react-autosuggest__container--open', + input: 'react-autosuggest__input', + inputOpen: 'react-autosuggest__input--open', + inputFocused: 'react-autosuggest__input--focused', + suggestionsContainer: 'react-autosuggest__suggestions-container', + suggestionsContainerOpen: + 'react-autosuggest__suggestions-container--open', + suggestionsList: 'react-autosuggest__suggestions-list', + suggestion: 'react-autosuggest__suggestion', + suggestionFirst: 'react-autosuggest__suggestion--first', + suggestionHighlighted: 'react-autosuggest__suggestion--highlighted', + sectionContainer: 'react-autosuggest__section-container', + sectionContainerFirst: 'react-autosuggest__section-container--first', + sectionTitle: 'react-autosuggest__section-title' + }); + + var mapToAutowhateverTheme = (exports.mapToAutowhateverTheme = function mapToAutowhateverTheme( + theme + ) { + var result = {}; + + for (var key in theme) { + switch (key) { + case 'suggestionsContainer': + result['itemsContainer'] = theme[key]; + break; + + case 'suggestionsContainerOpen': + result['itemsContainerOpen'] = theme[key]; + break; + + case 'suggestion': + result['item'] = theme[key]; + break; + + case 'suggestionFirst': + result['itemFirst'] = theme[key]; + break; + + case 'suggestionHighlighted': + result['itemHighlighted'] = theme[key]; + break; + + case 'suggestionsList': + result['itemsList'] = theme[key]; + break; + + default: + result[key] = theme[key]; + } + } + + return result; + }); + + /***/ + } + /******/ + ] + ); +}); diff --git a/dist/standalone/autosuggest.min.js b/dist/standalone/autosuggest.min.js new file mode 100644 index 00000000..e2b23652 --- /dev/null +++ b/dist/standalone/autosuggest.min.js @@ -0,0 +1,1907 @@ +!(function(e, t) { + 'object' == typeof exports && 'object' == typeof module + ? (module.exports = t(require('React'))) + : 'function' == typeof define && define.amd + ? define(['React'], t) + : 'object' == typeof exports + ? (exports.Autosuggest = t(require('React'))) + : (e.Autosuggest = t(e.React)); +})(this, function(e) { + return (function(e) { + function t(i) { + if (n[i]) return n[i].exports; + var o = (n[i] = { exports: {}, id: i, loaded: !1 }); + return e[i].call(o.exports, o, o.exports, t), (o.loaded = !0), o.exports; + } + var n = {}; + return (t.m = e), (t.c = n), (t.p = ''), t(0); + })([ + function(e, t, n) { + 'use strict'; + e.exports = n(1).default; + }, + function(e, t, n) { + 'use strict'; + function i(e) { + return e && e.__esModule ? e : { default: e }; + } + function o(e, t) { + if (!(e instanceof t)) + throw new TypeError('Cannot call a class as a function'); + } + function r(e, t) { + if (!e) + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called" + ); + return !t || ('object' != typeof t && 'function' != typeof t) ? e : t; + } + function u(e, t) { + if ('function' != typeof t && null !== t) + throw new TypeError( + 'Super expression must either be null or a function, not ' + + typeof t + ); + (e.prototype = Object.create(t && t.prototype, { + constructor: { + value: e, + enumerable: !1, + writable: !0, + configurable: !0 + } + })), + t && + (Object.setPrototypeOf + ? Object.setPrototypeOf(e, t) + : (e.__proto__ = t)); + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var s = + Object.assign || + function(e) { + for (var t = 1; t < arguments.length; t++) { + var n = arguments[t]; + for (var i in n) + Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]); + } + return e; + }, + a = (function() { + function e(e, t) { + for (var n = 0; n < t.length; n++) { + var i = t[n]; + (i.enumerable = i.enumerable || !1), + (i.configurable = !0), + 'value' in i && (i.writable = !0), + Object.defineProperty(e, i.key, i); + } + } + return function(t, n, i) { + return n && e(t.prototype, n), i && e(t, i), t; + }; + })(), + l = n(2), + c = i(l), + g = n(3), + d = (i(g), n(8)), + h = i(d), + f = n(9), + p = i(f), + m = n(18), + v = function() { + return !0; + }, + y = function(e) { + return e.trim().length > 0; + }, + I = function(e) { + var t = e.containerProps, + n = e.children; + return c.default.createElement('div', t, n); + }, + S = (function(e) { + function t(e) { + var n = e.alwaysRenderSuggestions, + i = e.highlightedSectionIndex, + u = e.highlightedSuggestionIndex; + o(this, t); + var s = r( + this, + (t.__proto__ || Object.getPrototypeOf(t)).call(this) + ); + return ( + b.call(s), + (s.state = { + isFocused: !1, + isCollapsed: !n, + highlightedSectionIndex: i, + highlightedSuggestionIndex: u, + valueBeforeUpDown: null + }), + (s.justPressedUpDown = !1), + s + ); + } + return ( + u(t, e), + a(t, [ + { + key: 'componentDidMount', + value: function() { + document.addEventListener( + 'mousedown', + this.onDocumentMouseDown + ), + (this.input = this.autowhatever.input), + (this.suggestionsContainer = this.autowhatever.itemsContainer); + } + }, + { + key: 'componentWillReceiveProps', + value: function(e) { + return e.highlightedSuggestionIndex === + this.props.highlightedSuggestionIndex || + e.highlightedSectionIndex === + this.props.highlightedSectionIndex || + (e.highlightedSuggestionIndex === + this.state.highlightedSuggestionIndex && + e.highlightedSectionIndex === + this.state.highlightedSectionIndex) + ? void ((0, h.default)( + e.suggestions, + this.props.suggestions + ) + ? e.highlightFirstSuggestion && + e.suggestions.length > 0 && + this.justPressedUpDown === !1 && + this.justSelectedSuggestion === !1 && + this.highlightFirstSuggestion() + : this.willRenderSuggestions(e) + ? (e.highlightFirstSuggestion && + this.highlightFirstSuggestion(), + this.state.isCollapsed && + !this.justSelectedSuggestion && + this.revealSuggestions()) + : this.resetHighlightedSuggestion()) + : void this.setState({ + highlightedSuggestionIndex: + e.highlightedSuggestionIndex, + highlightedSectionIndex: e.highlightedSectionIndex + }); + } + }, + { + key: 'componentDidUpdate', + value: function(e, t) { + var n = this.props, + i = n.onSuggestionHighlighted, + o = n.suggestions; + if (i) { + var r = this.state, + u = r.highlightedSectionIndex, + s = r.highlightedSuggestionIndex, + a = t.highlightedSectionIndex, + l = t.highlightedSuggestionIndex, + c = this.getSuggestion(a, l, e.suggestions), + g = this.getSuggestion(u, s, o); + (u === t.highlightedSectionIndex && + s === t.highlightedSuggestionIndex && + c === g) || + i({ suggestion: g }); + } + } + }, + { + key: 'componentWillUnmount', + value: function() { + document.removeEventListener( + 'mousedown', + this.onDocumentMouseDown + ); + } + }, + { + key: 'updateHighlightedSuggestion', + value: function(e, t, n) { + this.setState(function(i) { + var o = i.valueBeforeUpDown; + return ( + null === t + ? (o = null) + : null === o && 'undefined' != typeof n && (o = n), + { + highlightedSectionIndex: e, + highlightedSuggestionIndex: t, + valueBeforeUpDown: o + } + ); + }); + } + }, + { + key: 'resetHighlightedSuggestion', + value: function() { + var e = + !(arguments.length > 0 && void 0 !== arguments[0]) || + arguments[0]; + this.setState(function(t) { + var n = t.valueBeforeUpDown; + return { + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: e ? null : n + }; + }); + } + }, + { + key: 'revealSuggestions', + value: function() { + this.setState({ isCollapsed: !1 }); + } + }, + { + key: 'closeSuggestions', + value: function() { + this.setState({ + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: null, + isCollapsed: !0 + }); + } + }, + { + key: 'getSuggestion', + value: function(e, t, n) { + var i = this.props, + o = i.suggestions, + r = i.multiSection, + u = i.getSectionSuggestions, + s = n || o; + return r ? u(s[e])[t] : s[t]; + } + }, + { + key: 'getHighlightedSuggestion', + value: function() { + var e = this.state, + t = e.highlightedSectionIndex, + n = e.highlightedSuggestionIndex; + return null === n ? null : this.getSuggestion(t, n); + } + }, + { + key: 'getSuggestionValueByIndex', + value: function(e, t) { + var n = this.props.getSuggestionValue; + return n(this.getSuggestion(e, t)); + } + }, + { + key: 'getSuggestionIndices', + value: function(e) { + var t = e.getAttribute('data-section-index'), + n = e.getAttribute('data-suggestion-index'); + return { + sectionIndex: 'string' == typeof t ? parseInt(t, 10) : null, + suggestionIndex: parseInt(n, 10) + }; + } + }, + { + key: 'findSuggestionElement', + value: function(e) { + var t = e; + do { + if (null !== t.getAttribute('data-suggestion-index')) + return t; + t = t.parentNode; + } while (null !== t); + throw (console.error('Clicked element:', e), + new Error("Couldn't find suggestion element")); + } + }, + { + key: 'maybeCallOnChange', + value: function(e, t, n) { + var i = this.props.inputProps, + o = i.value, + r = i.onChange; + t !== o && r(e, { newValue: t, method: n }); + } + }, + { + key: 'willRenderSuggestions', + value: function(e) { + var t = e.suggestions, + n = e.inputProps, + i = e.shouldRenderSuggestions, + o = n.value; + return t.length > 0 && i(o); + } + }, + { + key: 'getQuery', + value: function() { + var e = this.props.inputProps, + t = e.value, + n = this.state.valueBeforeUpDown; + return (n || t).trim(); + } + }, + { + key: 'render', + value: function() { + var e = this, + t = this.props, + n = t.suggestions, + i = t.renderInputComponent, + o = t.onSuggestionsFetchRequested, + r = t.renderSuggestion, + u = t.inputProps, + a = t.multiSection, + l = t.renderSectionTitle, + g = t.id, + d = t.getSectionSuggestions, + h = t.theme, + f = t.getSuggestionValue, + y = t.alwaysRenderSuggestions, + I = this.state, + S = I.isFocused, + b = I.isCollapsed, + w = I.highlightedSectionIndex, + x = I.highlightedSuggestionIndex, + _ = I.valueBeforeUpDown, + C = y ? v : this.props.shouldRenderSuggestions, + O = u.value, + j = u.onFocus, + P = u.onKeyDown, + k = this.willRenderSuggestions(this.props), + R = y || (S && !b && k), + T = R ? n : [], + D = s({}, u, { + onFocus: function(t) { + if ( + !e.justSelectedSuggestion && + !e.justClickedOnSuggestionsContainer + ) { + var n = C(O); + e.setState({ isFocused: !0, isCollapsed: !n }), + j && j(t), + n && o({ value: O, reason: 'input-focused' }); + } + }, + onBlur: function(t) { + return e.justClickedOnSuggestionsContainer + ? void e.input.focus() + : ((e.blurEvent = t), + void ( + e.justSelectedSuggestion || + (e.onBlur(), e.onSuggestionsClearRequested()) + )); + }, + onChange: function(t) { + var n = t.target.value, + i = C(n); + e.maybeCallOnChange(t, n, 'type'), + e.setState({ + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + valueBeforeUpDown: null, + isCollapsed: !i + }), + i + ? o({ value: n, reason: 'input-changed' }) + : e.onSuggestionsClearRequested(); + }, + onKeyDown: function(t, i) { + var r = t.keyCode; + switch (r) { + case 40: + case 38: + if (b) + C(O) && + (o({ + value: O, + reason: 'suggestions-revealed' + }), + e.revealSuggestions()); + else if (n.length > 0) { + var u = i.newHighlightedSectionIndex, + s = i.newHighlightedItemIndex, + a = void 0; + (a = + null === s + ? null === _ ? O : _ + : e.getSuggestionValueByIndex(u, s)), + e.updateHighlightedSuggestion(u, s, O), + e.maybeCallOnChange( + t, + a, + 40 === r ? 'down' : 'up' + ); + } + t.preventDefault(), + (e.justPressedUpDown = !0), + setTimeout(function() { + e.justPressedUpDown = !1; + }); + break; + case 13: + if (229 === t.keyCode) break; + var l = e.getHighlightedSuggestion(); + if ((R && !y && e.closeSuggestions(), null !== l)) { + var c = f(l); + e.maybeCallOnChange(t, c, 'enter'), + e.onSuggestionSelected(t, { + suggestion: l, + suggestionValue: c, + suggestionIndex: x, + sectionIndex: w, + method: 'enter' + }), + (e.justSelectedSuggestion = !0), + setTimeout(function() { + e.justSelectedSuggestion = !1; + }); + } + break; + case 27: + R && t.preventDefault(); + var g = R && !y; + if (null === _) { + if (!g) { + var d = ''; + e.maybeCallOnChange(t, d, 'escape'), + C(d) + ? o({ value: d, reason: 'escape-pressed' }) + : e.onSuggestionsClearRequested(); + } + } else e.maybeCallOnChange(t, _, 'escape'); + g + ? (e.onSuggestionsClearRequested(), + e.closeSuggestions()) + : e.resetHighlightedSuggestion(); + } + P && P(t); + } + }), + E = { query: this.getQuery() }; + return c.default.createElement(p.default, { + multiSection: a, + items: T, + renderInputComponent: i, + renderItemsContainer: this.renderSuggestionsContainer, + renderItem: r, + renderItemData: E, + renderSectionTitle: l, + getSectionItems: d, + highlightedSectionIndex: w, + highlightedItemIndex: x, + inputProps: D, + itemProps: this.itemProps, + theme: (0, m.mapToAutowhateverTheme)(h), + id: g, + ref: this.storeAutowhateverRef + }); + } + } + ]), + t + ); + })(l.Component); + S.defaultProps = { + renderSuggestionsContainer: I, + shouldRenderSuggestions: y, + alwaysRenderSuggestions: !1, + multiSection: !1, + focusInputOnSuggestionClick: !0, + highlightFirstSuggestion: !1, + highlightedSectionIndex: null, + highlightedSuggestionIndex: null, + theme: m.defaultTheme, + id: '1' + }; + var b = function() { + var e = this; + (this.onDocumentMouseDown = function(t) { + e.justClickedOnSuggestionsContainer = !1; + for ( + var n = (t.detail && t.detail.target) || t.target; + null !== n && n !== document; + + ) { + if (null !== n.getAttribute('data-suggestion-index')) return; + if (n === e.suggestionsContainer) + return void (e.justClickedOnSuggestionsContainer = !0); + n = n.parentNode; + } + }), + (this.storeAutowhateverRef = function(t) { + null !== t && (e.autowhatever = t); + }), + (this.highlightFirstSuggestion = function() { + e.updateHighlightedSuggestion(e.props.multiSection ? 0 : null, 0); + }), + (this.onSuggestionMouseDown = function() { + e.justSelectedSuggestion = !0; + }), + (this.onSuggestionsClearRequested = function() { + var t = e.props.onSuggestionsClearRequested; + t && t(); + }), + (this.onSuggestionSelected = function(t, n) { + var i = e.props, + o = i.alwaysRenderSuggestions, + r = i.onSuggestionSelected, + u = i.onSuggestionsFetchRequested; + r && r(t, n), + o + ? u({ value: n.suggestionValue, reason: 'suggestion-selected' }) + : e.onSuggestionsClearRequested(), + e.resetHighlightedSuggestion(); + }), + (this.onSuggestionClick = function(t) { + var n = e.props, + i = (n.alwaysRenderSuggestions, n.focusInputOnSuggestionClick), + o = e.getSuggestionIndices(e.findSuggestionElement(t.target)), + r = o.sectionIndex, + u = o.suggestionIndex; + e.updateHighlightedSuggestion(r, u), + i === !0 ? e.input.focus() : e.onBlur(), + setTimeout(function() { + e.justSelectedSuggestion = !1; + }); + }), + (this.onSuggestionDoubleClick = function(t) { + var n = e.props, + i = n.alwaysRenderSuggestions, + o = n.focusInputOnSuggestionClick, + r = e.getSuggestionIndices(e.findSuggestionElement(t.target)), + u = r.sectionIndex, + s = r.suggestionIndex, + a = e.getSuggestion(u, s), + l = e.props.getSuggestionValue(a); + e.maybeCallOnChange(t, l, 'click'), + e.onSuggestionSelected(t, { + suggestion: a, + suggestionValue: l, + suggestionIndex: s, + sectionIndex: u, + method: 'doubleClick' + }), + i || e.closeSuggestions(), + o === !0 ? e.input.focus() : e.onBlur(), + setTimeout(function() { + e.justSelectedSuggestion = !1; + }); + }), + (this.onBlur = function() { + var t = e.props, + n = t.inputProps, + i = t.shouldRenderSuggestions, + o = n.value, + r = n.onBlur, + u = e.getHighlightedSuggestion(), + s = i(o); + e.setState({ isFocused: !1, isCollapsed: !s }), + r && r(e.blurEvent, { highlightedSuggestion: u }); + }), + (this.itemProps = function(t) { + var n = t.sectionIndex, + i = t.itemIndex; + return { + 'data-section-index': n, + 'data-suggestion-index': i, + onMouseDown: e.onSuggestionMouseDown, + onTouchStart: e.onSuggestionMouseDown, + onClick: e.onSuggestionClick, + onDoubleClick: e.onSuggestionDoubleClick + }; + }), + (this.renderSuggestionsContainer = function(t) { + var n = t.containerProps, + i = t.children, + o = e.props.renderSuggestionsContainer; + return o({ containerProps: n, children: i, query: e.getQuery() }); + }); + }; + (t.default = S), (S.propTypes = {}); + }, + function(t, n) { + t.exports = e; + }, + function(e, t, n) { + e.exports = n(4)(); + }, + function(e, t, n) { + 'use strict'; + var i = n(5), + o = n(6), + r = n(7); + e.exports = function() { + function e(e, t, n, i, u, s) { + s !== r && + o( + !1, + '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' + ); + } + function t() { + return e; + } + e.isRequired = e; + var n = { + array: e, + bool: e, + func: e, + number: e, + object: e, + string: e, + symbol: e, + any: e, + arrayOf: t, + element: e, + instanceOf: t, + node: e, + objectOf: t, + oneOf: t, + oneOfType: t, + shape: t, + exact: t + }; + return (n.checkPropTypes = i), (n.PropTypes = n), n; + }; + }, + function(e, t) { + 'use strict'; + function n(e) { + return function() { + return e; + }; + } + var i = function() {}; + (i.thatReturns = n), + (i.thatReturnsFalse = n(!1)), + (i.thatReturnsTrue = n(!0)), + (i.thatReturnsNull = n(null)), + (i.thatReturnsThis = function() { + return this; + }), + (i.thatReturnsArgument = function(e) { + return e; + }), + (e.exports = i); + }, + function(e, t, n) { + 'use strict'; + function i(e, t, n, i, r, u, s, a) { + if ((o(t), !e)) { + var l; + if (void 0 === t) + l = new Error( + 'Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.' + ); + else { + var c = [n, i, r, u, s, a], + g = 0; + (l = new Error( + t.replace(/%s/g, function() { + return c[g++]; + }) + )), + (l.name = 'Invariant Violation'); + } + throw ((l.framesToPop = 1), l); + } + } + var o = function(e) {}; + e.exports = i; + }, + function(e, t) { + 'use strict'; + var n = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; + e.exports = n; + }, + function(e, t) { + e.exports = function(e, t) { + if (e === t) return !0; + var n = e.length; + if (t.length !== n) return !1; + for (var i = 0; i < n; i++) if (e[i] !== t[i]) return !1; + return !0; + }; + }, + function(e, t, n) { + 'use strict'; + e.exports = n(10).default; + }, + function(e, t, n) { + 'use strict'; + function i(e) { + return e && e.__esModule ? e : { default: e }; + } + function o(e, t) { + if (!(e instanceof t)) + throw new TypeError('Cannot call a class as a function'); + } + function r(e, t) { + if (!e) + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called" + ); + return !t || ('object' != typeof t && 'function' != typeof t) ? e : t; + } + function u(e, t) { + if ('function' != typeof t && null !== t) + throw new TypeError( + 'Super expression must either be null or a function, not ' + + typeof t + ); + (e.prototype = Object.create(t && t.prototype, { + constructor: { + value: e, + enumerable: !1, + writable: !0, + configurable: !0 + } + })), + t && + (Object.setPrototypeOf + ? Object.setPrototypeOf(e, t) + : (e.__proto__ = t)); + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var s = + Object.assign || + function(e) { + for (var t = 1; t < arguments.length; t++) { + var n = arguments[t]; + for (var i in n) + Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]); + } + return e; + }, + a = (function() { + function e(e, t) { + var n = [], + i = !0, + o = !1, + r = void 0; + try { + for ( + var u, s = e[Symbol.iterator](); + !(i = (u = s.next()).done) && + (n.push(u.value), !t || n.length !== t); + i = !0 + ); + } catch (e) { + (o = !0), (r = e); + } finally { + try { + !i && s.return && s.return(); + } finally { + if (o) throw r; + } + } + return n; + } + return function(t, n) { + if (Array.isArray(t)) return t; + if (Symbol.iterator in Object(t)) return e(t, n); + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance' + ); + }; + })(), + l = (function() { + function e(e, t) { + for (var n = 0; n < t.length; n++) { + var i = t[n]; + (i.enumerable = i.enumerable || !1), + (i.configurable = !0), + 'value' in i && (i.writable = !0), + Object.defineProperty(e, i.key, i); + } + } + return function(t, n, i) { + return n && e(t.prototype, n), i && e(t, i), t; + }; + })(), + c = n(2), + g = i(c), + d = n(3), + h = i(d), + f = n(11), + p = i(f), + m = n(12), + v = i(m), + y = n(14), + I = i(y), + S = n(16), + b = i(S), + w = {}, + x = function(e) { + return g.default.createElement('input', e); + }, + _ = function(e) { + var t = e.containerProps, + n = e.children; + return g.default.createElement('div', t, n); + }, + C = { + container: 'react-autowhatever__container', + containerOpen: 'react-autowhatever__container--open', + input: 'react-autowhatever__input', + inputOpen: 'react-autowhatever__input--open', + inputFocused: 'react-autowhatever__input--focused', + itemsContainer: 'react-autowhatever__items-container', + itemsContainerOpen: 'react-autowhatever__items-container--open', + itemsList: 'react-autowhatever__items-list', + item: 'react-autowhatever__item', + itemFirst: 'react-autowhatever__item--first', + itemHighlighted: 'react-autowhatever__item--highlighted', + sectionContainer: 'react-autowhatever__section-container', + sectionContainerFirst: 'react-autowhatever__section-container--first', + sectionTitle: 'react-autowhatever__section-title' + }, + O = (function(e) { + function t(e) { + o(this, t); + var n = r( + this, + (t.__proto__ || Object.getPrototypeOf(t)).call(this, e) + ); + return ( + (n.storeInputReference = function(e) { + null !== e && (n.input = e); + }), + (n.storeItemsContainerReference = function(e) { + null !== e && (n.itemsContainer = e); + }), + (n.onHighlightedItemChange = function(e) { + n.highlightedItem = e; + }), + (n.getItemId = function(e, t) { + if (null === t) return null; + var i = n.props.id, + o = null === e ? '' : 'section-' + e; + return 'react-autowhatever-' + i + '-' + o + '-item-' + t; + }), + (n.onFocus = function(e) { + var t = n.props.inputProps; + n.setState({ isInputFocused: !0 }), t.onFocus && t.onFocus(e); + }), + (n.onBlur = function(e) { + var t = n.props.inputProps; + n.setState({ isInputFocused: !1 }), t.onBlur && t.onBlur(e); + }), + (n.onKeyDown = function(e) { + var t = n.props, + i = t.inputProps, + o = t.highlightedSectionIndex, + r = t.highlightedItemIndex; + switch (e.key) { + case 'ArrowDown': + case 'ArrowUp': + var u = 'ArrowDown' === e.key ? 'next' : 'prev', + s = n.sectionIterator[u]([o, r]), + l = a(s, 2), + c = l[0], + g = l[1]; + i.onKeyDown(e, { + newHighlightedSectionIndex: c, + newHighlightedItemIndex: g + }); + break; + default: + i.onKeyDown(e, { + highlightedSectionIndex: o, + highlightedItemIndex: r + }); + } + }), + (n.highlightedItem = null), + (n.state = { isInputFocused: !1 }), + n.setSectionsItems(e), + n.setSectionIterator(e), + n.setTheme(e), + n + ); + } + return ( + u(t, e), + l(t, [ + { + key: 'componentDidMount', + value: function() { + this.ensureHighlightedItemIsVisible(); + } + }, + { + key: 'componentWillReceiveProps', + value: function(e) { + e.items !== this.props.items && this.setSectionsItems(e), + (e.items === this.props.items && + e.multiSection === this.props.multiSection) || + this.setSectionIterator(e), + e.theme !== this.props.theme && this.setTheme(e); + } + }, + { + key: 'componentDidUpdate', + value: function() { + this.ensureHighlightedItemIsVisible(); + } + }, + { + key: 'setSectionsItems', + value: function(e) { + e.multiSection && + ((this.sectionsItems = e.items.map(function(t) { + return e.getSectionItems(t); + })), + (this.sectionsLengths = this.sectionsItems.map(function(e) { + return e.length; + })), + (this.allSectionsAreEmpty = this.sectionsLengths.every( + function(e) { + return 0 === e; + } + ))); + } + }, + { + key: 'setSectionIterator', + value: function(e) { + this.sectionIterator = (0, p.default)({ + multiSection: e.multiSection, + data: e.multiSection ? this.sectionsLengths : e.items.length + }); + } + }, + { + key: 'setTheme', + value: function(e) { + this.theme = (0, v.default)(e.theme); + } + }, + { + key: 'renderSections', + value: function() { + var e = this; + if (this.allSectionsAreEmpty) return null; + var t = this.theme, + n = this.props, + i = n.id, + o = n.items, + r = n.renderItem, + u = n.renderItemData, + s = n.renderSectionTitle, + a = n.highlightedSectionIndex, + l = n.highlightedItemIndex, + c = n.itemProps; + return o.map(function(n, o) { + var d = 'react-autowhatever-' + i + '-', + h = d + 'section-' + o + '-', + f = 0 === o; + return g.default.createElement( + 'div', + t( + h + 'container', + 'sectionContainer', + f && 'sectionContainerFirst' + ), + g.default.createElement(I.default, { + section: n, + renderSectionTitle: s, + theme: t, + sectionKeyPrefix: h + }), + g.default.createElement(b.default, { + items: e.sectionsItems[o], + itemProps: c, + renderItem: r, + renderItemData: u, + sectionIndex: o, + highlightedItemIndex: a === o ? l : null, + onHighlightedItemChange: e.onHighlightedItemChange, + getItemId: e.getItemId, + theme: t, + keyPrefix: d, + ref: e.storeItemsListReference + }) + ); + }); + } + }, + { + key: 'renderItems', + value: function() { + var e = this.props.items; + if (0 === e.length) return null; + var t = this.theme, + n = this.props, + i = n.id, + o = n.renderItem, + r = n.renderItemData, + u = n.highlightedSectionIndex, + s = n.highlightedItemIndex, + a = n.itemProps; + return g.default.createElement(b.default, { + items: e, + itemProps: a, + renderItem: o, + renderItemData: r, + highlightedItemIndex: null === u ? s : null, + onHighlightedItemChange: this.onHighlightedItemChange, + getItemId: this.getItemId, + theme: t, + keyPrefix: 'react-autowhatever-' + i + '-' + }); + } + }, + { + key: 'ensureHighlightedItemIsVisible', + value: function() { + var e = this.highlightedItem; + if (e) { + var t = this.itemsContainer, + n = + e.offsetParent === t + ? e.offsetTop + : e.offsetTop - t.offsetTop, + i = t.scrollTop; + n < i + ? (i = n) + : n + e.offsetHeight > i + t.offsetHeight && + (i = n + e.offsetHeight - t.offsetHeight), + i !== t.scrollTop && (t.scrollTop = i); + } + } + }, + { + key: 'render', + value: function() { + var e = this.theme, + t = this.props, + n = t.id, + i = t.multiSection, + o = t.renderInputComponent, + r = t.renderItemsContainer, + u = t.highlightedSectionIndex, + a = t.highlightedItemIndex, + l = this.state.isInputFocused, + c = i ? this.renderSections() : this.renderItems(), + d = null !== c, + h = this.getItemId(u, a), + f = e( + 'react-autowhatever-' + n + '-container', + 'container', + d && 'containerOpen' + ), + p = 'react-autowhatever-' + n, + m = o( + s( + { + type: 'text', + value: '', + autoComplete: 'off', + role: 'combobox', + 'aria-autocomplete': 'list', + 'aria-owns': p, + 'aria-expanded': d, + 'aria-activedescendant': h + }, + e( + 'react-autowhatever-' + n + '-input', + 'input', + d && 'inputOpen', + l && 'inputFocused' + ), + this.props.inputProps, + { + onFocus: this.onFocus, + onBlur: this.onBlur, + onKeyDown: + this.props.inputProps.onKeyDown && this.onKeyDown, + ref: this.storeInputReference + } + ) + ), + v = r({ + containerProps: s( + { id: p }, + e( + 'react-autowhatever-' + n + '-items-container', + 'itemsContainer', + d && 'itemsContainerOpen' + ), + { ref: this.storeItemsContainerReference } + ), + children: c + }); + return g.default.createElement('div', f, m, v); + } + } + ]), + t + ); + })(c.Component); + (O.propTypes = { + id: h.default.string, + multiSection: h.default.bool, + renderInputComponent: h.default.func, + renderItemsContainer: h.default.func, + items: h.default.array.isRequired, + renderItem: h.default.func, + renderItemData: h.default.object, + renderSectionTitle: h.default.func, + getSectionItems: h.default.func, + inputProps: h.default.object, + itemProps: h.default.oneOfType([h.default.object, h.default.func]), + highlightedSectionIndex: h.default.number, + highlightedItemIndex: h.default.number, + theme: h.default.oneOfType([h.default.object, h.default.array]) + }), + (O.defaultProps = { + id: '1', + multiSection: !1, + renderInputComponent: x, + renderItemsContainer: _, + renderItem: function() { + throw new Error('`renderItem` must be provided'); + }, + renderItemData: w, + renderSectionTitle: function() { + throw new Error('`renderSectionTitle` must be provided'); + }, + getSectionItems: function() { + throw new Error('`getSectionItems` must be provided'); + }, + inputProps: w, + itemProps: w, + highlightedSectionIndex: null, + highlightedItemIndex: null, + theme: C + }), + (t.default = O); + }, + function(e, t) { + 'use strict'; + var n = (function() { + function e(e, t) { + var n = [], + i = !0, + o = !1, + r = void 0; + try { + for ( + var u, s = e[Symbol.iterator](); + !(i = (u = s.next()).done) && + (n.push(u.value), !t || n.length !== t); + i = !0 + ); + } catch (e) { + (o = !0), (r = e); + } finally { + try { + !i && s.return && s.return(); + } finally { + if (o) throw r; + } + } + return n; + } + return function(t, n) { + if (Array.isArray(t)) return t; + if (Symbol.iterator in Object(t)) return e(t, n); + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance' + ); + }; + })(); + e.exports = function(e) { + function t(e) { + for (null === e ? (e = 0) : e++; e < s.length && 0 === s[e]; ) e++; + return e === s.length ? null : e; + } + function i(e) { + for (null === e ? (e = s.length - 1) : e--; e >= 0 && 0 === s[e]; ) + e--; + return e === -1 ? null : e; + } + function o(e) { + var i = n(e, 2), + o = i[0], + r = i[1]; + return a + ? null === r || r === s[o] - 1 + ? ((o = t(o)), null === o ? [null, null] : [o, 0]) + : [o, r + 1] + : 0 === s || r === s - 1 + ? [null, null] + : null === r ? [null, 0] : [null, r + 1]; + } + function r(e) { + var t = n(e, 2), + o = t[0], + r = t[1]; + return a + ? null === r || 0 === r + ? ((o = i(o)), null === o ? [null, null] : [o, s[o] - 1]) + : [o, r - 1] + : 0 === s || 0 === r + ? [null, null] + : null === r ? [null, s - 1] : [null, r - 1]; + } + function u(e) { + return null === o(e)[1]; + } + var s = e.data, + a = e.multiSection; + return { next: o, prev: r, isLast: u }; + }; + }, + function(e, t, n) { + 'use strict'; + function i(e) { + return e && e.__esModule ? e : { default: e }; + } + function o(e) { + if (Array.isArray(e)) { + for (var t = 0, n = Array(e.length); t < e.length; t++) n[t] = e[t]; + return n; + } + return Array.from(e); + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var r = (function() { + function e(e, t) { + var n = [], + i = !0, + o = !1, + r = void 0; + try { + for ( + var u, s = e[Symbol.iterator](); + !(i = (u = s.next()).done) && + (n.push(u.value), !t || n.length !== t); + i = !0 + ); + } catch (e) { + (o = !0), (r = e); + } finally { + try { + !i && s.return && s.return(); + } finally { + if (o) throw r; + } + } + return n; + } + return function(t, n) { + if (Array.isArray(t)) return t; + if (Symbol.iterator in Object(t)) return e(t, n); + throw new TypeError( + 'Invalid attempt to destructure non-iterable instance' + ); + }; + })(), + u = n(13), + s = i(u), + a = function(e) { + return e; + }; + (t.default = function(e) { + var t = Array.isArray(e) && 2 === e.length ? e : [e, null], + n = r(t, 2), + i = n[0], + u = n[1]; + return function(e) { + for ( + var t = arguments.length, n = Array(t > 1 ? t - 1 : 0), r = 1; + r < t; + r++ + ) + n[r - 1] = arguments[r]; + var l = n + .map(function(e) { + return i[e]; + }) + .filter(a); + return 'string' == typeof l[0] || 'function' == typeof u + ? { key: e, className: u ? u.apply(void 0, o(l)) : l.join(' ') } + : { key: e, style: s.default.apply(void 0, [{}].concat(o(l))) }; + }; + }), + (e.exports = t.default); + }, + function(e, t) { + 'use strict'; + function n(e) { + if (null == e) + throw new TypeError( + 'Object.assign cannot be called with null or undefined' + ); + return Object(e); + } + function i(e) { + var t = Object.getOwnPropertyNames(e); + return ( + Object.getOwnPropertySymbols && + (t = t.concat(Object.getOwnPropertySymbols(e))), + t.filter(function(t) { + return o.call(e, t); + }) + ); + } + var o = Object.prototype.propertyIsEnumerable; + e.exports = + Object.assign || + function(e, t) { + for (var o, r, u = n(e), s = 1; s < arguments.length; s++) { + (o = arguments[s]), (r = i(Object(o))); + for (var a = 0; a < r.length; a++) u[r[a]] = o[r[a]]; + } + return u; + }; + }, + function(e, t, n) { + 'use strict'; + function i(e) { + return e && e.__esModule ? e : { default: e }; + } + function o(e, t) { + if (!(e instanceof t)) + throw new TypeError('Cannot call a class as a function'); + } + function r(e, t) { + if (!e) + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called" + ); + return !t || ('object' != typeof t && 'function' != typeof t) ? e : t; + } + function u(e, t) { + if ('function' != typeof t && null !== t) + throw new TypeError( + 'Super expression must either be null or a function, not ' + + typeof t + ); + (e.prototype = Object.create(t && t.prototype, { + constructor: { + value: e, + enumerable: !1, + writable: !0, + configurable: !0 + } + })), + t && + (Object.setPrototypeOf + ? Object.setPrototypeOf(e, t) + : (e.__proto__ = t)); + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var s = (function() { + function e(e, t) { + for (var n = 0; n < t.length; n++) { + var i = t[n]; + (i.enumerable = i.enumerable || !1), + (i.configurable = !0), + 'value' in i && (i.writable = !0), + Object.defineProperty(e, i.key, i); + } + } + return function(t, n, i) { + return n && e(t.prototype, n), i && e(t, i), t; + }; + })(), + a = n(2), + l = i(a), + c = n(3), + g = i(c), + d = n(15), + h = i(d), + f = (function(e) { + function t() { + return ( + o(this, t), + r( + this, + (t.__proto__ || Object.getPrototypeOf(t)).apply(this, arguments) + ) + ); + } + return ( + u(t, e), + s(t, [ + { + key: 'shouldComponentUpdate', + value: function(e) { + return (0, h.default)(e, this.props); + } + }, + { + key: 'render', + value: function() { + var e = this.props, + t = e.section, + n = e.renderSectionTitle, + i = e.theme, + o = e.sectionKeyPrefix, + r = n(t); + return r + ? l.default.createElement( + 'div', + i(o + 'title', 'sectionTitle'), + r + ) + : null; + } + } + ]), + t + ); + })(a.Component); + (f.propTypes = { + section: g.default.any.isRequired, + renderSectionTitle: g.default.func.isRequired, + theme: g.default.func.isRequired, + sectionKeyPrefix: g.default.string.isRequired + }), + (t.default = f); + }, + function(e, t) { + 'use strict'; + function n(e, t) { + var n = + arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : []; + if (e === t) return !1; + var o = Object.keys(e), + r = Object.keys(t); + if (o.length !== r.length) return !0; + var u = {}, + s = void 0, + a = void 0; + for (s = 0, a = n.length; s < a; s++) u[n[s]] = !0; + for (s = 0, a = o.length; s < a; s++) { + var l = o[s], + c = e[l], + g = t[l]; + if (c !== g) { + if ( + !u[l] || + null === c || + null === g || + 'object' !== ('undefined' == typeof c ? 'undefined' : i(c)) || + 'object' !== ('undefined' == typeof g ? 'undefined' : i(g)) + ) + return !0; + var d = Object.keys(c), + h = Object.keys(g); + if (d.length !== h.length) return !0; + for (var f = 0, p = d.length; f < p; f++) { + var m = d[f]; + if (c[m] !== g[m]) return !0; + } + } + } + return !1; + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var i = + 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator + ? function(e) { + return typeof e; + } + : function(e) { + return e && + 'function' == typeof Symbol && + e.constructor === Symbol && + e !== Symbol.prototype + ? 'symbol' + : typeof e; + }; + t.default = n; + }, + function(e, t, n) { + 'use strict'; + function i(e) { + return e && e.__esModule ? e : { default: e }; + } + function o(e, t) { + if (!(e instanceof t)) + throw new TypeError('Cannot call a class as a function'); + } + function r(e, t) { + if (!e) + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called" + ); + return !t || ('object' != typeof t && 'function' != typeof t) ? e : t; + } + function u(e, t) { + if ('function' != typeof t && null !== t) + throw new TypeError( + 'Super expression must either be null or a function, not ' + + typeof t + ); + (e.prototype = Object.create(t && t.prototype, { + constructor: { + value: e, + enumerable: !1, + writable: !0, + configurable: !0 + } + })), + t && + (Object.setPrototypeOf + ? Object.setPrototypeOf(e, t) + : (e.__proto__ = t)); + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var s = + Object.assign || + function(e) { + for (var t = 1; t < arguments.length; t++) { + var n = arguments[t]; + for (var i in n) + Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]); + } + return e; + }, + a = (function() { + function e(e, t) { + for (var n = 0; n < t.length; n++) { + var i = t[n]; + (i.enumerable = i.enumerable || !1), + (i.configurable = !0), + 'value' in i && (i.writable = !0), + Object.defineProperty(e, i.key, i); + } + } + return function(t, n, i) { + return n && e(t.prototype, n), i && e(t, i), t; + }; + })(), + l = n(2), + c = i(l), + g = n(3), + d = i(g), + h = n(17), + f = i(h), + p = n(15), + m = i(p), + v = (function(e) { + function t() { + var e, n, i, u; + o(this, t); + for (var s = arguments.length, a = Array(s), l = 0; l < s; l++) + a[l] = arguments[l]; + return ( + (n = i = r( + this, + (e = t.__proto__ || Object.getPrototypeOf(t)).call.apply( + e, + [this].concat(a) + ) + )), + (i.storeHighlightedItemReference = function(e) { + i.props.onHighlightedItemChange(null === e ? null : e.item); + }), + (u = n), + r(i, u) + ); + } + return ( + u(t, e), + a(t, [ + { + key: 'shouldComponentUpdate', + value: function(e) { + return (0, m.default)(e, this.props, ['itemProps']); + } + }, + { + key: 'render', + value: function() { + var e = this, + t = this.props, + n = t.items, + i = t.itemProps, + o = t.renderItem, + r = t.renderItemData, + u = t.sectionIndex, + a = t.highlightedItemIndex, + l = t.getItemId, + g = t.theme, + d = t.keyPrefix, + h = null === u ? d : d + 'section-' + u + '-', + p = 'function' == typeof i; + return c.default.createElement( + 'ul', + s({ role: 'listbox' }, g(h + 'items-list', 'itemsList')), + n.map(function(t, n) { + var d = 0 === n, + m = n === a, + v = h + 'item-' + n, + y = p ? i({ sectionIndex: u, itemIndex: n }) : i, + I = s( + { id: l(u, n) }, + g( + v, + 'item', + d && 'itemFirst', + m && 'itemHighlighted' + ), + y + ); + return ( + m && (I.ref = e.storeHighlightedItemReference), + c.default.createElement( + f.default, + s({}, I, { + sectionIndex: u, + isHighlighted: m, + itemIndex: n, + item: t, + renderItem: o, + renderItemData: r + }) + ) + ); + }) + ); + } + } + ]), + t + ); + })(l.Component); + (v.propTypes = { + items: d.default.array.isRequired, + itemProps: d.default.oneOfType([d.default.object, d.default.func]), + renderItem: d.default.func.isRequired, + renderItemData: d.default.object.isRequired, + sectionIndex: d.default.number, + highlightedItemIndex: d.default.number, + onHighlightedItemChange: d.default.func.isRequired, + getItemId: d.default.func.isRequired, + theme: d.default.func.isRequired, + keyPrefix: d.default.string.isRequired + }), + (v.defaultProps = { sectionIndex: null }), + (t.default = v); + }, + function(e, t, n) { + 'use strict'; + function i(e) { + return e && e.__esModule ? e : { default: e }; + } + function o(e, t) { + var n = {}; + for (var i in e) + t.indexOf(i) >= 0 || + (Object.prototype.hasOwnProperty.call(e, i) && (n[i] = e[i])); + return n; + } + function r(e, t) { + if (!(e instanceof t)) + throw new TypeError('Cannot call a class as a function'); + } + function u(e, t) { + if (!e) + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called" + ); + return !t || ('object' != typeof t && 'function' != typeof t) ? e : t; + } + function s(e, t) { + if ('function' != typeof t && null !== t) + throw new TypeError( + 'Super expression must either be null or a function, not ' + + typeof t + ); + (e.prototype = Object.create(t && t.prototype, { + constructor: { + value: e, + enumerable: !1, + writable: !0, + configurable: !0 + } + })), + t && + (Object.setPrototypeOf + ? Object.setPrototypeOf(e, t) + : (e.__proto__ = t)); + } + Object.defineProperty(t, '__esModule', { value: !0 }); + var a = + Object.assign || + function(e) { + for (var t = 1; t < arguments.length; t++) { + var n = arguments[t]; + for (var i in n) + Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]); + } + return e; + }, + l = (function() { + function e(e, t) { + for (var n = 0; n < t.length; n++) { + var i = t[n]; + (i.enumerable = i.enumerable || !1), + (i.configurable = !0), + 'value' in i && (i.writable = !0), + Object.defineProperty(e, i.key, i); + } + } + return function(t, n, i) { + return n && e(t.prototype, n), i && e(t, i), t; + }; + })(), + c = n(2), + g = i(c), + d = n(3), + h = i(d), + f = n(15), + p = i(f), + m = (function(e) { + function t() { + var e, n, i, o; + r(this, t); + for (var s = arguments.length, a = Array(s), l = 0; l < s; l++) + a[l] = arguments[l]; + return ( + (n = i = u( + this, + (e = t.__proto__ || Object.getPrototypeOf(t)).call.apply( + e, + [this].concat(a) + ) + )), + (i.storeItemReference = function(e) { + null !== e && (i.item = e); + }), + (i.onMouseEnter = function(e) { + var t = i.props, + n = t.sectionIndex, + o = t.itemIndex; + i.props.onMouseEnter(e, { sectionIndex: n, itemIndex: o }); + }), + (i.onMouseLeave = function(e) { + var t = i.props, + n = t.sectionIndex, + o = t.itemIndex; + i.props.onMouseLeave(e, { sectionIndex: n, itemIndex: o }); + }), + (i.onMouseDown = function(e) { + var t = i.props, + n = t.sectionIndex, + o = t.itemIndex; + i.props.onMouseDown(e, { sectionIndex: n, itemIndex: o }); + }), + (i.onClick = function(e) { + var t = i.props, + n = t.sectionIndex, + o = t.itemIndex; + i.props.onClick(e, { sectionIndex: n, itemIndex: o }); + }), + (o = n), + u(i, o) + ); + } + return ( + s(t, e), + l(t, [ + { + key: 'shouldComponentUpdate', + value: function(e) { + return (0, p.default)(e, this.props, ['renderItemData']); + } + }, + { + key: 'render', + value: function() { + var e = this.props, + t = e.isHighlighted, + n = e.item, + i = e.renderItem, + r = e.renderItemData, + u = o(e, [ + 'isHighlighted', + 'item', + 'renderItem', + 'renderItemData' + ]); + return ( + delete u.sectionIndex, + delete u.itemIndex, + 'function' == typeof u.onMouseEnter && + (u.onMouseEnter = this.onMouseEnter), + 'function' == typeof u.onMouseLeave && + (u.onMouseLeave = this.onMouseLeave), + 'function' == typeof u.onMouseDown && + (u.onMouseDown = this.onMouseDown), + 'function' == typeof u.onClick && + (u.onClick = this.onClick), + g.default.createElement( + 'li', + a({ role: 'option' }, u, { + ref: this.storeItemReference + }), + i(n, a({ isHighlighted: t }, r)) + ) + ); + } + } + ]), + t + ); + })(c.Component); + (m.propTypes = { + sectionIndex: h.default.number, + isHighlighted: h.default.bool.isRequired, + itemIndex: h.default.number.isRequired, + item: h.default.any.isRequired, + renderItem: h.default.func.isRequired, + renderItemData: h.default.object.isRequired, + onMouseEnter: h.default.func, + onMouseLeave: h.default.func, + onMouseDown: h.default.func, + onClick: h.default.func + }), + (t.default = m); + }, + function(e, t) { + 'use strict'; + Object.defineProperty(t, '__esModule', { value: !0 }); + (t.defaultTheme = { + container: 'react-autosuggest__container', + containerOpen: 'react-autosuggest__container--open', + input: 'react-autosuggest__input', + inputOpen: 'react-autosuggest__input--open', + inputFocused: 'react-autosuggest__input--focused', + suggestionsContainer: 'react-autosuggest__suggestions-container', + suggestionsContainerOpen: + 'react-autosuggest__suggestions-container--open', + suggestionsList: 'react-autosuggest__suggestions-list', + suggestion: 'react-autosuggest__suggestion', + suggestionFirst: 'react-autosuggest__suggestion--first', + suggestionHighlighted: 'react-autosuggest__suggestion--highlighted', + sectionContainer: 'react-autosuggest__section-container', + sectionContainerFirst: 'react-autosuggest__section-container--first', + sectionTitle: 'react-autosuggest__section-title' + }), + (t.mapToAutowhateverTheme = function(e) { + var t = {}; + for (var n in e) + switch (n) { + case 'suggestionsContainer': + t.itemsContainer = e[n]; + break; + case 'suggestionsContainerOpen': + t.itemsContainerOpen = e[n]; + break; + case 'suggestion': + t.item = e[n]; + break; + case 'suggestionFirst': + t.itemFirst = e[n]; + break; + case 'suggestionHighlighted': + t.itemHighlighted = e[n]; + break; + case 'suggestionsList': + t.itemsList = e[n]; + break; + default: + t[n] = e[n]; + } + return t; + }); + } + ]); +}); diff --git a/dist/theme.js b/dist/theme.js new file mode 100644 index 00000000..be346566 --- /dev/null +++ b/dist/theme.js @@ -0,0 +1,60 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); +var defaultTheme = (exports.defaultTheme = { + container: 'react-autosuggest__container', + containerOpen: 'react-autosuggest__container--open', + input: 'react-autosuggest__input', + inputOpen: 'react-autosuggest__input--open', + inputFocused: 'react-autosuggest__input--focused', + suggestionsContainer: 'react-autosuggest__suggestions-container', + suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open', + suggestionsList: 'react-autosuggest__suggestions-list', + suggestion: 'react-autosuggest__suggestion', + suggestionFirst: 'react-autosuggest__suggestion--first', + suggestionHighlighted: 'react-autosuggest__suggestion--highlighted', + sectionContainer: 'react-autosuggest__section-container', + sectionContainerFirst: 'react-autosuggest__section-container--first', + sectionTitle: 'react-autosuggest__section-title' +}); + +var mapToAutowhateverTheme = (exports.mapToAutowhateverTheme = function mapToAutowhateverTheme( + theme +) { + var result = {}; + + for (var key in theme) { + switch (key) { + case 'suggestionsContainer': + result['itemsContainer'] = theme[key]; + break; + + case 'suggestionsContainerOpen': + result['itemsContainerOpen'] = theme[key]; + break; + + case 'suggestion': + result['item'] = theme[key]; + break; + + case 'suggestionFirst': + result['itemFirst'] = theme[key]; + break; + + case 'suggestionHighlighted': + result['itemHighlighted'] = theme[key]; + break; + + case 'suggestionsList': + result['itemsList'] = theme[key]; + break; + + default: + result[key] = theme[key]; + } + } + + return result; +}); diff --git a/package.json b/package.json index 4f282b9f..c461f574 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ }, "author": "Misha Moroshko ", "scripts": { - "postinstall": "npm run dist", "start": "mkdir -p demo/dist && npm run copy-static-files && node server", "prettier": "prettier --single-quote --write \".*.js\" \"*.js\" \"demo/src/**/*.js\" \"demo/standalone/app.js\" \"src/**/*.js\" \"test/**/*.js\"", "lint": "eslint src test demo/src demo/standalone/app.js server.js webpack.*.js",