@ozen-ui/kit
Version:
React component library
45 lines (44 loc) • 2.61 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useEffect } from 'react';
import { useCreateResizeObserver } from '../../../../hooks/useCreateResizeObserver';
import { useStoredValue } from '../../../../hooks/useStoredValue';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
import { DataListCard } from '../../../DataListCard';
import { AUTOCOMPLETE_LIST_CARD_DEFAULT_DROPDOWN_TAG } from '../../constants';
import { useAutocompleteListCardContext } from '../../context';
import { toAutocompleteListCardValue } from '../../utils';
import { useAutocompleteListCardDropdownChildren } from './hooks';
export var AutocompleteListCardDropdown = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'AutocompleteListCardDropdown',
});
var _a = props.as, as = _a === void 0 ? AUTOCOMPLETE_LIST_CARD_DEFAULT_DROPDOWN_TAG : _a, onClose = props.onClose, other = __rest(props, ["as", "onClose"]);
var _b = useAutocompleteListCardContext(), inputRef = _b.inputRef, size = _b.size, dropdownControl = _b.dropdownControl, multiple = _b.multiple, valueControl = _b.valueControl, disabled = _b.disabled;
var children = useAutocompleteListCardDropdownChildren();
var updateStored = useStoredValue(null);
var resizeObserver = useCreateResizeObserver(function () {
var _a;
(_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
});
useEffect(function () {
var input = inputRef.current;
if (input) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
}
}, [inputRef]);
return (React.createElement(DataListCard, __assign({}, other, { ref: ref, as: as, anchorRef: inputRef, size: size, open: dropdownControl.isOpen, onClose: function () {
onClose === null || onClose === void 0 ? void 0 : onClose();
dropdownControl.close();
}, setUpdate: function (update) {
var _a;
updateStored.current = update;
(_a = other.setUpdate) === null || _a === void 0 ? void 0 : _a.call(other, update);
}, onChange: function (event, _, changedOption) {
if (disabled) {
return;
}
valueControl.setValue(event, changedOption, { source: 'select' });
}, multiple: multiple, value: toAutocompleteListCardValue(valueControl.value) }), children));
});