@ozen-ui/kit
Version:
React component library
96 lines (95 loc) • 4.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutocompleteBase = void 0;
var tslib_1 = require("tslib");
require("./modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.css");
require("./modules/AutocompleteBaseInput/AutocompleteBaseInput.css");
require("./modules/AutocompleteBaseInputTag/AutocompleteBaseInputTag.css");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var AutocompleteBaseContext_1 = require("./AutocompleteBaseContext");
var constants_1 = require("./constants");
var hooks_1 = require("./hooks");
var utils_1 = require("./utils");
var AutocompleteBase = function (inProps) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'AutocompleteBase',
});
var dropdown = props.dropdown, input = props.input, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? utils_1.autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange;
var anchorRef = (0, react_1.useRef)(null);
var inputRef = (0, react_1.useRef)(null);
var dropdownControl = (0, hooks_1.useAutocompleteBaseDropdown)({
open: openProp,
defaultOpen: defaultOpen,
onOpen: onOpen,
onClose: onClose,
});
var searchControl = (0, hooks_1.useAutocompleteBaseSearch)(searchFunctionProp);
var prepareOption = function (option) { return (tslib_1.__assign(tslib_1.__assign({}, prepareOptionProp(option)), { raw: option })); };
var options = optionsProp.map(prepareOption);
var filteredOptions = searchControl.isActive
? searchControl.search(options)
: options;
var inputControl = (0, hooks_1.useAutocompleteBaseInput)({
inputValue: inputValueProp,
onChange: function (event, value) {
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, value);
},
});
var valueControl = (0, hooks_1.useAutocompleteBaseValue)({
value: valueProp,
options: options,
defaultValue: defaultValue,
onChange: function (event, value, params) {
onChange === null || onChange === void 0 ? void 0 : onChange(event, value, params);
if (params.source === 'select' && closeOnSelect) {
dropdownControl.close();
}
},
prepareOption: prepareOption,
inProps: inProps,
inputControl: inputControl,
searchControl: searchControl,
multiple: multiple,
});
var optionsControl = (0, hooks_1.useAutocompleteBaseOptions)({
options: options,
filteredOptions: filteredOptions,
valueControl: valueControl,
multiple: multiple,
});
var inputEventsControl = (0, hooks_1.useAutocompleteBaseInputEvents)({
multiple: multiple,
inputControl: inputControl,
valueControl: valueControl,
dropdownControl: dropdownControl,
allowCustomValue: allowCustomValue,
searchControl: searchControl,
});
var clear = function (event) {
valueControl.setValue(event, null, {
source: 'unknown',
});
};
var contextValue = {
anchorRef: anchorRef,
inputRef: inputRef,
dropdownControl: dropdownControl,
searchControl: searchControl,
optionsControl: optionsControl,
inputControl: inputControl,
inputEventsControl: inputEventsControl,
valueControl: valueControl,
clear: clear,
size: size,
disabled: disabled,
multiple: multiple,
loading: loading,
error: error,
};
return (react_1.default.createElement(AutocompleteBaseContext_1.AutocompleteBaseContext.Provider, { value: contextValue },
input,
dropdown));
};
exports.AutocompleteBase = AutocompleteBase;