222 lines
7.7 KiB
JavaScript
222 lines
7.7 KiB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import '@babel/runtime/helpers/slicedToArray';
|
|
import '@babel/runtime/helpers/toConsumableArray';
|
|
import '@babel/runtime/helpers/defineProperty';
|
|
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
|
|
import _createClass from '@babel/runtime/helpers/esm/createClass';
|
|
import '@babel/runtime/helpers/assertThisInitialized';
|
|
import _inherits from '@babel/runtime/helpers/esm/inherits';
|
|
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
|
|
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
|
|
import React, { Component } from 'react';
|
|
import 'memoize-one';
|
|
import '@emotion/core';
|
|
import 'react-dom';
|
|
import '@babel/runtime/helpers/typeof';
|
|
import { G as handleInputChange } from '../../dist/index-75b02bac.browser.esm.js';
|
|
import { S as Select } from '../../dist/Select-e1cf49ae.browser.esm.js';
|
|
import '@emotion/css';
|
|
import '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
import 'react-input-autosize';
|
|
import { m as manageState } from '../../dist/stateManager-2f2b6f5b.browser.esm.js';
|
|
|
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
|
var defaultProps = {
|
|
cacheOptions: false,
|
|
defaultOptions: false,
|
|
filterOption: null,
|
|
isLoading: false
|
|
};
|
|
var makeAsyncSelect = function makeAsyncSelect(SelectComponent) {
|
|
var _class, _temp;
|
|
|
|
return _temp = _class = /*#__PURE__*/function (_Component) {
|
|
_inherits(Async, _Component);
|
|
|
|
var _super = _createSuper(Async);
|
|
|
|
function Async(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Async);
|
|
|
|
_this = _super.call(this);
|
|
_this.select = void 0;
|
|
_this.lastRequest = void 0;
|
|
_this.mounted = false;
|
|
_this.optionsCache = {};
|
|
|
|
_this.handleInputChange = function (newValue, actionMeta) {
|
|
var _this$props = _this.props,
|
|
cacheOptions = _this$props.cacheOptions,
|
|
onInputChange = _this$props.onInputChange; // TODO
|
|
|
|
var inputValue = handleInputChange(newValue, actionMeta, onInputChange);
|
|
|
|
if (!inputValue) {
|
|
delete _this.lastRequest;
|
|
|
|
_this.setState({
|
|
inputValue: '',
|
|
loadedInputValue: '',
|
|
loadedOptions: [],
|
|
isLoading: false,
|
|
passEmptyOptions: false
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
if (cacheOptions && _this.optionsCache[inputValue]) {
|
|
_this.setState({
|
|
inputValue: inputValue,
|
|
loadedInputValue: inputValue,
|
|
loadedOptions: _this.optionsCache[inputValue],
|
|
isLoading: false,
|
|
passEmptyOptions: false
|
|
});
|
|
} else {
|
|
var request = _this.lastRequest = {};
|
|
|
|
_this.setState({
|
|
inputValue: inputValue,
|
|
isLoading: true,
|
|
passEmptyOptions: !_this.state.loadedInputValue
|
|
}, function () {
|
|
_this.loadOptions(inputValue, function (options) {
|
|
if (!_this.mounted) return;
|
|
|
|
if (options) {
|
|
_this.optionsCache[inputValue] = options;
|
|
}
|
|
|
|
if (request !== _this.lastRequest) return;
|
|
delete _this.lastRequest;
|
|
|
|
_this.setState({
|
|
isLoading: false,
|
|
loadedInputValue: inputValue,
|
|
loadedOptions: options || [],
|
|
passEmptyOptions: false
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
return inputValue;
|
|
};
|
|
|
|
_this.state = {
|
|
defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined,
|
|
inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '',
|
|
isLoading: props.defaultOptions === true,
|
|
loadedOptions: [],
|
|
passEmptyOptions: false
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Async, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
this.mounted = true;
|
|
var defaultOptions = this.props.defaultOptions;
|
|
var inputValue = this.state.inputValue;
|
|
|
|
if (defaultOptions === true) {
|
|
this.loadOptions(inputValue, function (options) {
|
|
if (!_this2.mounted) return;
|
|
var isLoading = !!_this2.lastRequest;
|
|
|
|
_this2.setState({
|
|
defaultOptions: options || [],
|
|
isLoading: isLoading
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "UNSAFE_componentWillReceiveProps",
|
|
value: function UNSAFE_componentWillReceiveProps(nextProps) {
|
|
// if the cacheOptions prop changes, clear the cache
|
|
if (nextProps.cacheOptions !== this.props.cacheOptions) {
|
|
this.optionsCache = {};
|
|
}
|
|
|
|
if (nextProps.defaultOptions !== this.props.defaultOptions) {
|
|
this.setState({
|
|
defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.mounted = false;
|
|
}
|
|
}, {
|
|
key: "focus",
|
|
value: function focus() {
|
|
this.select.focus();
|
|
}
|
|
}, {
|
|
key: "blur",
|
|
value: function blur() {
|
|
this.select.blur();
|
|
}
|
|
}, {
|
|
key: "loadOptions",
|
|
value: function loadOptions(inputValue, callback) {
|
|
var loadOptions = this.props.loadOptions;
|
|
if (!loadOptions) return callback();
|
|
var loader = loadOptions(inputValue, callback);
|
|
|
|
if (loader && typeof loader.then === 'function') {
|
|
loader.then(callback, function () {
|
|
return callback();
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var _this$props2 = this.props,
|
|
loadOptions = _this$props2.loadOptions,
|
|
isLoadingProp = _this$props2.isLoading,
|
|
props = _objectWithoutProperties(_this$props2, ["loadOptions", "isLoading"]);
|
|
|
|
var _this$state = this.state,
|
|
defaultOptions = _this$state.defaultOptions,
|
|
inputValue = _this$state.inputValue,
|
|
isLoading = _this$state.isLoading,
|
|
loadedInputValue = _this$state.loadedInputValue,
|
|
loadedOptions = _this$state.loadedOptions,
|
|
passEmptyOptions = _this$state.passEmptyOptions;
|
|
var options = passEmptyOptions ? [] : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
|
|
return /*#__PURE__*/React.createElement(SelectComponent, _extends({}, props, {
|
|
ref: function ref(_ref) {
|
|
_this3.select = _ref;
|
|
},
|
|
options: options,
|
|
isLoading: isLoading || isLoadingProp,
|
|
onInputChange: this.handleInputChange
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return Async;
|
|
}(Component), _class.defaultProps = defaultProps, _temp;
|
|
};
|
|
var SelectState = manageState(Select);
|
|
var Async = makeAsyncSelect(SelectState);
|
|
|
|
export default Async;
|
|
export { defaultProps, makeAsyncSelect };
|