@ozen-ui/kit
Version:
React component library
48 lines (47 loc) • 4.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutocompleteBaseInput = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var Input_1 = require("../../../Input");
var AutocompleteBaseContext_1 = require("../../AutocompleteBaseContext");
var classNames_1 = require("./classNames");
var components_1 = require("./components");
var constants_1 = require("./constants");
var AutocompleteBaseInputRender = function (inProps, ref) {
var _a;
var props = (0, useThemeProps_1.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 ? constants_1.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION : _b, before = props.before, placeholder = props.placeholder, limitTags = props.limitTags, _c = props.showClearButton, showClearButton = _c === void 0 ? constants_1.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON : _c, _d = props.showChevron, showChevron = _d === void 0 ? constants_1.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON : _d, renderTag = props.renderTag, renderMoreTag = props.renderMoreTag, labelProps = props.labelProps, other = tslib_1.__rest(props, ["label", "openText", "clearText", "closeText", "className", "bodyProps", "inputProps", "suffix", "suffixPosition", "before", "placeholder", "limitTags", "showClearButton", "showChevron", "renderTag", "renderMoreTag", "labelProps"]);
var _e = (0, AutocompleteBaseContext_1.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 = (0, useMultiRef_1.useMultiRef)([inputRef, ref]);
var renderComponent = function (_a, ref) {
var className = _a.className, other = tslib_1.__rest(_a, ["className"]);
if (multiple) {
return (react_1.default.createElement(components_1.AutocompleteBaseInputMultiple, tslib_1.__assign({ label: label, renderTag: renderTag, limitTags: limitTags, renderMoreTag: renderMoreTag }, other, { ref: ref })));
}
return (react_1.default.createElement("input", tslib_1.__assign({}, other, { ref: ref, className: (0, classNames_1.cnAutocompleteBaseInput)('Input', [className]) })));
};
return (react_1.default.createElement(Input_1.Input, tslib_1.__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_1.default.createElement(components_1.AutocompleteBaseRenderRight, { openText: openText, clearText: clearText, closeText: closeText, suffix: suffix, suffixPosition: suffixPosition, showChevron: showChevron, showClearButton: showClearButton }), labelProps: tslib_1.__assign({ shrink: !!valueControl.selectedOptionsLength }, labelProps), bodyProps: tslib_1.__assign(tslib_1.__assign({ 'aria-expanded': open }, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([
anchorRef,
bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref,
]) }), inputProps: tslib_1.__assign(tslib_1.__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: (0, classNames_1.cnAutocompleteBaseInput)({ size: size, multiple: multiple, hasChevron: showChevron }, [className]), error: error, ref: inputMultiRef })));
};
exports.AutocompleteBaseInput = (0, react_1.forwardRef)(AutocompleteBaseInputRender);