react-select-module
Version:
A Select control built with and for ReactJS
229 lines (196 loc) • 8.28 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
require('@babel/runtime/helpers/slicedToArray');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/defineProperty');
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
require('@babel/runtime/helpers/assertThisInitialized');
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var React = require('react');
var React__default = _interopDefault(React);
require('memoize-one');
require('@emotion/core');
require('react-dom');
require('@babel/runtime/helpers/typeof');
var index$1 = require('../../dist/index-18ec33c5.cjs.dev.js');
var reactSelect = require('../../dist/Select-dbe2d3a8.cjs.dev.js');
require('@babel/runtime/helpers/taggedTemplateLiteral');
require('react-input-autosize');
var stateManager = require('../../dist/stateManager-71df4ad8.cjs.dev.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 = index$1.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__default.createElement(SelectComponent, _extends({}, props, {
ref: function ref(_ref) {
_this3.select = _ref;
},
options: options,
isLoading: isLoading || isLoadingProp,
onInputChange: this.handleInputChange
}));
}
}]);
return Async;
}(React.Component), _class.defaultProps = defaultProps, _temp;
};
var SelectState = stateManager.manageState(reactSelect.Select);
var Async = makeAsyncSelect(SelectState);
exports.default = Async;
exports.defaultProps = defaultProps;
exports.makeAsyncSelect = makeAsyncSelect;