@ozen-ui/kit
Version:
React component library
45 lines (44 loc) • 4.72 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { forwardRef } from 'react';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { Input } from '../../../Input';
import { useAutocompleteBaseContext } from '../../AutocompleteBaseContext';
import { cnAutocompleteBaseInput } from './classNames';
import { AutocompleteBaseRenderRight, AutocompleteBaseInputMultiple, } from './components';
import { AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON, AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON, AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION, } from './constants';
var AutocompleteBaseInputRender = function (inProps, ref) {
var _a;
var props = useThemeProps({
props: inProps,
name: 'AutocompleteBaseInput',
});
var label = props.label, openText = props.openText, clearText = props.clearText, closeText = props.closeText, className = props.className, bodyProps = props.bodyProps, inputProps = props.inputProps, suffix = props.suffix, _b = props.suffixPosition, suffixPosition = _b === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION : _b, before = props.before, placeholder = props.placeholder, limitTags = props.limitTags, _c = props.showClearButton, showClearButton = _c === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON : _c, _d = props.showChevron, showChevron = _d === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON : _d, renderTag = props.renderTag, renderMoreTag = props.renderMoreTag, labelProps = props.labelProps, other = __rest(props, ["label", "openText", "clearText", "closeText", "className", "bodyProps", "inputProps", "suffix", "suffixPosition", "before", "placeholder", "limitTags", "showClearButton", "showChevron", "renderTag", "renderMoreTag", "labelProps"]);
var _e = useAutocompleteBaseContext(), valueControl = _e.valueControl, inputControl = _e.inputControl, inputEventsControl = _e.inputEventsControl, inputRef = _e.inputRef, anchorRef = _e.anchorRef, size = _e.size, multiple = _e.multiple, disabled = _e.disabled, dropdownControl = _e.dropdownControl, error = _e.error;
var open = dropdownControl.isOpen;
var inputMultiRef = useMultiRef([inputRef, ref]);
var renderComponent = function (_a, ref) {
var className = _a.className, other = __rest(_a, ["className"]);
if (multiple) {
return (React.createElement(AutocompleteBaseInputMultiple, __assign({ label: label, renderTag: renderTag, limitTags: limitTags, renderMoreTag: renderMoreTag }, other, { ref: ref })));
}
return (React.createElement("input", __assign({}, other, { ref: ref, className: cnAutocompleteBaseInput('Input', [className]) })));
};
return (React.createElement(Input, __assign({}, other, { size: size, disabled: disabled, label: label, value: (_a = inputControl.value) !== null && _a !== void 0 ? _a : '', onChange: inputEventsControl.onChange, placeholder: placeholder, renderLeft: before, renderRight: React.createElement(AutocompleteBaseRenderRight, { openText: openText, clearText: clearText, closeText: closeText, suffix: suffix, suffixPosition: suffixPosition, showChevron: showChevron, showClearButton: showClearButton }), labelProps: __assign({ shrink: !!valueControl.selectedOptionsLength }, labelProps), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: useMultiRef([
anchorRef,
bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref,
]) }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onClick: function (event) {
var _a;
inputEventsControl.onClick(event);
(_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
}, onBlur: function (event) {
var _a;
inputEventsControl.onBlur(event);
(_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
}, onKeyDown: function (event) {
var _a;
inputEventsControl.onKeyDown(event);
(_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
}, renderComponent: renderComponent }), className: cnAutocompleteBaseInput({ size: size, multiple: multiple, hasChevron: showChevron }, [className]), error: error, ref: inputMultiRef })));
};
export var AutocompleteBaseInput = forwardRef(AutocompleteBaseInputRender);