@ozen-ui/kit
Version:
React component library
43 lines (42 loc) • 2.51 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { useStoredValue } from '../../hooks/useStoredValue';
import { useThemeProps } from '../../hooks/useThemeProps';
import { extractElementsFromChildren } from '../../utils/react';
import { AutocompleteBase } from '../AutocompleteBase';
import { AUTOCOMPLETE_LIST_CARD_DEFAULT_MULTIPLE } from './constants';
import { AutocompleteListCardChildrenContext } from './context';
import { useAutocompleteListCardValue } from './hooks';
import { AutocompleteListCardDropdown, AutocompleteListCardInput, } from './modules';
import { isAutocompleteListCardItem, toAutocompleteListCardValue, } from './utils';
var AutocompleteListCardRender = function (inProps) {
var props = useThemeProps({
props: inProps,
name: 'AutocompleteListCard',
});
var children = props.children, onChange = props.onChange, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_LIST_CARD_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValueProp = props.defaultValue, other = __rest(props, ["children", "onChange", "multiple", "value", "defaultValue"]);
var options = useStoredValue([]);
var optionById = useStoredValue({});
options.current = [];
optionById.current = {};
extractElementsFromChildren(children, isAutocompleteListCardItem, function (element) {
var _a;
var props = element.props;
var option = {
label: props.label,
disabled: (_a = props.disabled) !== null && _a !== void 0 ? _a : false,
id: props.listId,
};
options.current.push(option);
optionById.current[option.id] = option;
});
var value = useAutocompleteListCardValue(valueProp, optionById);
var defaultValue = useAutocompleteListCardValue(defaultValueProp, optionById);
return (React.createElement(AutocompleteListCardChildrenContext.Provider, { value: {
children: children,
} },
React.createElement(AutocompleteBase, __assign({ input: React.createElement(AutocompleteListCardInput, null), dropdown: React.createElement(AutocompleteListCardDropdown, null) }, other, { options: options.current, onChange: function (event, value, params) {
onChange === null || onChange === void 0 ? void 0 : onChange(event, toAutocompleteListCardValue(value), params);
}, value: value, defaultValue: defaultValue, multiple: multiple }))));
};
export var AutocompleteListCard = AutocompleteListCardRender;