@ozen-ui/kit
Version:
React component library
92 lines (91 loc) • 4.79 kB
JavaScript
import { __assign } from "tslib";
import './modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.css';
import './modules/AutocompleteBaseInput/AutocompleteBaseInput.css';
import './modules/AutocompleteBaseInputTag/AutocompleteBaseInputTag.css';
import React, { useRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { AutocompleteBaseContext } from './AutocompleteBaseContext';
import { AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT, AUTOCOMPLETE_BASE_DEFAULT_DISABLED, AUTOCOMPLETE_BASE_DEFAULT_ERROR, AUTOCOMPLETE_BASE_DEFAULT_LOADING, AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE, AUTOCOMPLETE_BASE_DEFAULT_SIZE, } from './constants';
import { useAutocompleteBaseDropdown, useAutocompleteBaseSearch, useAutocompleteBaseInput, useAutocompleteBaseInputEvents, useAutocompleteBaseOptions, useAutocompleteBaseValue, } from './hooks';
import { autocompleteBaseDefaultPrepareOption } from './utils';
export var AutocompleteBase = function (inProps) {
var props = useThemeProps({
props: inProps,
name: 'AutocompleteBase',
});
var dropdown = props.dropdown, input = props.input, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange;
var anchorRef = useRef(null);
var inputRef = useRef(null);
var dropdownControl = useAutocompleteBaseDropdown({
open: openProp,
defaultOpen: defaultOpen,
onOpen: onOpen,
onClose: onClose,
});
var searchControl = useAutocompleteBaseSearch(searchFunctionProp);
var prepareOption = function (option) { return (__assign(__assign({}, prepareOptionProp(option)), { raw: option })); };
var options = optionsProp.map(prepareOption);
var filteredOptions = searchControl.isActive
? searchControl.search(options)
: options;
var inputControl = useAutocompleteBaseInput({
inputValue: inputValueProp,
onChange: function (event, value) {
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, value);
},
});
var valueControl = 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 = useAutocompleteBaseOptions({
options: options,
filteredOptions: filteredOptions,
valueControl: valueControl,
multiple: multiple,
});
var inputEventsControl = 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.createElement(AutocompleteBaseContext.Provider, { value: contextValue },
input,
dropdown));
};