@bigfishtv/cockpit
Version:
309 lines (253 loc) • 10.6 kB
JavaScript
;
exports.__esModule = true;
exports.default = undefined;
var _class, _temp;
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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _deepEqual = require('deep-equal');
var _deepEqual2 = _interopRequireDefault(_deepEqual);
var _keycode = require('keycode');
var _keycode2 = _interopRequireDefault(_keycode);
var _debounce2 = require('lodash/debounce');
var _debounce3 = _interopRequireDefault(_debounce2);
var _reactAutosuggest = require('react-autosuggest');
var _reactAutosuggest2 = _interopRequireDefault(_reactAutosuggest);
var _xhrUtils = require('../../api/xhrUtils');
var _Button = require('../button/Button');
var _Button2 = _interopRequireDefault(_Button);
var _autosuggestTheme = require('../../config/autosuggestTheme');
var _autosuggestTheme2 = _interopRequireDefault(_autosuggestTheme);
var _Icon = require('../Icon');
var _Icon2 = _interopRequireDefault(_Icon);
var _Spinner = require('../Spinner');
var _Spinner2 = _interopRequireDefault(_Spinner);
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; }
// we define this because react-docgen fails when defaultProp directly references an imported component
var autosuggestThemeDefault = _extends({}, _autosuggestTheme2.default);
var AutosuggestInput = (_temp = _class = function (_Component) {
_inherits(AutosuggestInput, _Component);
function AutosuggestInput(props) {
_classCallCheck(this, AutosuggestInput);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.handleSuggestion = function (event, _ref) {
var suggestion = _ref.suggestion,
suggestionValue = _ref.suggestionValue,
method = _ref.method;
event.preventDefault();
if (_this.props.beforeSelection(suggestion, suggestionValue, method)) {
_this.props.onChange(suggestion);
_this.setState({ inputValue: '' });
}
};
_this.getSuggestions = function (_ref2) {
var value = _ref2.value,
reason = _ref2.reason;
if (reason == 'type') {
if (_this.props.autoCache && value in _this.cache) {
_this.applySuggestions(_this.cache[value]);
} else {
var _extends2;
_this.setState({ loading: true });
(0, _xhrUtils.get)({
url: _this.props.queryUrl,
params: _extends({}, _this.props.params, (_extends2 = {}, _extends2[_this.props.queryParam] = value, _extends2)),
callback: function callback(data) {
_this.setState({ loading: false });
setTimeout(function () {
return _this.applySuggestions(data);
}, 10);
}
});
}
}
};
_this.cache = {};
_this.focused = props.autoFocus || false;
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
_this.getSuggestions = (0, _debounce3.default)(_this.getSuggestions, props.debounceTime);
_this.state = {
loading: false,
inputValue: '',
suggestions: props.suggestions || []
};
return _this;
}
AutosuggestInput.prototype.componentDidMount = function componentDidMount() {
document.addEventListener('keydown', this.handleKeyDown);
};
AutosuggestInput.prototype.componentWillUnmount = function componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyDown);
};
AutosuggestInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (!(0, _deepEqual2.default)(this.props.suggestions, nextProps.suggestions)) {
this.setState({ suggestions: nextProps.suggestions });
}
};
AutosuggestInput.prototype.handleKeyDown = function handleKeyDown(event) {
if ((0, _keycode2.default)(event) == 'enter' && this.focused && !this.state.suggestions.length) {
event.preventDefault();
this.props.onCreate(this.state.inputValue);
this.setState({ inputValue: '' });
}
};
// When suggestion is selected either via click/tap or enter key
// Called upon 'onSuggestionsUpdateRequested'
// Called once suggestions are fetched, either from cache or via xhr
AutosuggestInput.prototype.applySuggestions = function applySuggestions(preFilteredSuggestions) {
var suggestions = this.props.filterSuggestions(preFilteredSuggestions);
this.setState({ suggestions: suggestions });
this.props.onSuggestionsChange(suggestions);
};
AutosuggestInput.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
autoFocus = _props.autoFocus,
autoCache = _props.autoCache,
multiSection = _props.multiSection,
getSuggestions = _props.getSuggestions,
getSectionSuggestions = _props.getSectionSuggestions,
renderSuggestion = _props.renderSuggestion,
renderSectionTitle = _props.renderSectionTitle,
readOnly = _props.readOnly,
placeholder = _props.placeholder,
theme = _props.theme,
onInputChange = _props.onInputChange,
onInputFocus = _props.onInputFocus,
onInputBlur = _props.onInputBlur,
Cell = _props.Cell,
rest = _objectWithoutProperties(_props, ['autoFocus', 'autoCache', 'multiSection', 'getSuggestions', 'getSectionSuggestions', 'renderSuggestion', 'renderSectionTitle', 'readOnly', 'placeholder', 'theme', 'onInputChange', 'onInputFocus', 'onInputBlur', 'Cell']);
var _state = this.state,
suggestions = _state.suggestions,
inputValue = _state.inputValue,
loading = _state.loading;
var inputProps = {
value: inputValue,
placeholder: placeholder,
readOnly: readOnly,
autoFocus: autoFocus,
onChange: function onChange(event, _ref3) {
var newValue = _ref3.newValue,
method = _ref3.method;
if (method == 'type') {
_this2.setState({ inputValue: newValue });
onInputChange(newValue);
}
},
onBlur: function onBlur(event) {
_this2.focused = false;
onInputBlur(event);
},
onFocus: function onFocus(event) {
_this2.focused = true;
onInputFocus(event);
}
};
if (!this.props.value) {
return _react2.default.createElement(
'div',
{ className: 'autosuggest-container' },
_react2.default.createElement(_reactAutosuggest2.default, {
ref: 'autosuggest',
theme: theme,
multiSection: multiSection,
suggestions: suggestions,
onSuggestionsUpdateRequested: getSuggestions || this.getSuggestions,
getSuggestionValue: function getSuggestionValue() {
return '';
},
getSectionSuggestions: getSectionSuggestions,
shouldRenderSuggestions: function shouldRenderSuggestions(value) {
return typeof value == 'undefined' || !!value;
},
renderSuggestion: renderSuggestion,
renderSectionTitle: renderSectionTitle,
onSuggestionSelected: this.handleSuggestion,
inputProps: inputProps
}),
loading && _react2.default.createElement(_Spinner2.default, { size: 16 })
);
} else {
if (Cell) {
return _react2.default.createElement(Cell, _extends({}, rest, { value: this.props.value, onRemove: function onRemove() {
return _this2.props.onChange(null);
} }));
} else {
return _react2.default.createElement(
'div',
{ className: 'cell' },
_react2.default.createElement(
'div',
{ className: 'cell-content' },
this.props.renderSuggestion(this.props.value)
),
_react2.default.createElement(
'div',
{ className: 'cell-control' },
_react2.default.createElement(
_Button2.default,
{ size: 'icon', onClick: function onClick() {
return _this2.props.onChange(null);
} },
_react2.default.createElement(_Icon2.default, { name: 'close', size: '18' })
)
)
);
}
}
};
return AutosuggestInput;
}(_react.Component), _class.propTypes = {
placeholder: _propTypes2.default.string,
renderSuggestion: _propTypes2.default.func,
queryUrl: _propTypes2.default.string,
onChange: _propTypes2.default.func,
getSuggestions: _propTypes2.default.func,
readOnly: _propTypes2.default.bool,
queryParam: _propTypes2.default.string
}, _class.defaultProps = {
placeholder: 'Search...',
theme: autosuggestThemeDefault,
renderSuggestion: function renderSuggestion(suggestion, _ref4) {
var value = _ref4.value,
valueBeforeUpDown = _ref4.valueBeforeUpDown;
return _react2.default.createElement(
'div',
null,
suggestion.name || suggestion.title || suggestion.toString()
);
},
queryParam: 'q',
params: {},
autoCache: true,
autoFocus: false,
multiSection: false,
debounceTime: 100,
suggestions: [],
onInputFocus: function onInputFocus() {},
onInputBlur: function onInputBlur() {},
onInputChange: function onInputChange() {},
onSuggestionsChange: function onSuggestionsChange() {},
filterSuggestions: function filterSuggestions(suggestions) {
return suggestions;
},
onChange: function onChange() {},
onCreate: function onCreate() {},
beforeSelection: function beforeSelection() {
return true;
},
getSectionSuggestions: function getSectionSuggestions(section) {
return section.suggestions;
},
renderSectionTitle: function renderSectionTitle(section) {
return section.sectionName;
},
Cell: null
}, _temp);
exports.default = AutosuggestInput;