@gravity-ui/uikit
Version:
Gravity UI base styling and components
118 lines (117 loc) • 7.16 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextInput = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const hooks_1 = require("../../../hooks/index.js");
const private_1 = require("../../../hooks/private/index.js");
const Icon_1 = require("../../Icon/index.js");
const legacy_1 = require("../../legacy/index.js");
const cn_1 = require("../../utils/cn.js");
const common_1 = require("../common/index.js");
const OuterAdditionalContent_1 = require("../common/OuterAdditionalContent/OuterAdditionalContent.js");
const utils_1 = require("../utils.js");
const AdditionalContent_1 = require("./AdditionalContent.js");
const TextInputControl_1 = require("./TextInputControl.js");
require("./TextInput.css");
const b = (0, cn_1.block)('text-input');
exports.TextInput = React.forwardRef(function TextInput(props, ref) {
const { view = 'normal', size = 'm', pin = 'round-round', name, value, defaultValue, label, disabled, readOnly, hasClear = false, error, errorMessage: errorMessageProp, errorPlacement: errorPlacementProp = 'outside', validationState: validationStateProp, autoComplete, id: idProp, tabIndex, style, className, qa, controlProps: controlPropsProp, startContent, endContent, note, onUpdate, onChange, } = props;
const { errorMessage, errorPlacement, validationState } = (0, utils_1.errorPropsMapper)({
error,
errorMessage: errorMessageProp,
errorPlacement: errorPlacementProp,
validationState: validationStateProp,
});
const [inputValue, setInputValue] = (0, hooks_1.useControlledState)(value, defaultValue ?? '', onUpdate);
const innerControlRef = React.useRef(null);
const fieldRef = (0, private_1.useFormResetHandler)({ initialValue: inputValue, onReset: setInputValue });
const handleRef = (0, hooks_1.useForkRef)(props.controlRef, innerControlRef, fieldRef);
const labelRef = React.useRef(null);
const startContentRef = React.useRef(null);
const state = (0, utils_1.getInputControlState)(validationState);
const isLabelVisible = Boolean(label);
const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside';
const isErrorIconVisible = validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside';
const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue);
const isStartContentVisible = Boolean(startContent);
const isEndContentVisible = Boolean(endContent);
const isAutoCompleteOff = isLabelVisible && !idProp && !name && typeof autoComplete === 'undefined';
const innerId = (0, hooks_1.useUniqId)();
const id = isLabelVisible ? idProp || innerId : idProp;
const labelSize = (0, private_1.useElementSize)(isLabelVisible ? labelRef : null, size);
const startContentSize = (0, private_1.useElementSize)(isStartContentVisible ? startContentRef : null, size);
const errorMessageId = (0, hooks_1.useUniqId)();
const noteId = (0, hooks_1.useUniqId)();
const ariaDescribedBy = [
controlPropsProp?.['aria-describedby'],
note ? noteId : undefined,
isErrorMsgVisible ? errorMessageId : undefined,
]
.filter(Boolean)
.join(' ');
const controlProps = {
...controlPropsProp,
style: {
...controlPropsProp?.style,
...(isLabelVisible && labelSize.width
? { paddingInlineStart: `${labelSize.width}px` }
: {}),
},
'aria-invalid': validationState === 'invalid' || undefined,
'aria-describedby': ariaDescribedBy || undefined,
};
const commonProps = {
id,
tabIndex,
name,
onChange(event) {
setInputValue(event.target.value);
if (onChange) {
onChange(event);
}
},
autoComplete: isAutoCompleteOff ? 'off' : (0, utils_1.prepareAutoComplete)(autoComplete),
controlProps,
};
const handleClear = (event) => {
setInputValue('');
const control = innerControlRef.current;
if (control) {
const syntheticEvent = Object.create(event);
syntheticEvent.target = control;
syntheticEvent.currentTarget = control;
control.value = '';
if (onChange) {
onChange(syntheticEvent);
}
}
};
const handleAdditionalContentClick = (event) => {
const needActivateInput = !event.currentTarget.contains(document.activeElement) &&
event.currentTarget.contains(event.target);
const hasSelection = Boolean(document.getSelection()?.toString());
if (needActivateInput && !hasSelection) {
innerControlRef.current?.focus();
}
};
return ((0, jsx_runtime_1.jsxs)("span", { ref: ref, style: style, className: b({
view,
size,
disabled,
state,
pin: view === 'clear' ? undefined : pin,
'has-clear': isClearControlVisible,
'has-start-content': isStartContentVisible,
'has-end-content': isClearControlVisible || isEndContentVisible,
}, className), "data-qa": qa, children: [(0, jsx_runtime_1.jsxs)("span", { className: b('content'), children: [isStartContentVisible && ((0, jsx_runtime_1.jsx)(AdditionalContent_1.AdditionalContent, { ref: startContentRef, placement: "start", onClick: handleAdditionalContentClick, children: startContent })), isLabelVisible && ((0, jsx_runtime_1.jsx)("label", { ref: labelRef, style: {
insetInlineStart: isStartContentVisible
? startContentSize.width
: undefined,
maxWidth: `calc(50% - ${startContentSize.width}px)`,
}, className: b('label'), title: label, htmlFor: id, children: `${label}` })), (0, jsx_runtime_1.jsx)(TextInputControl_1.TextInputControl, { ...props, ...commonProps, controlRef: handleRef }), isClearControlVisible && ((0, jsx_runtime_1.jsx)(common_1.ClearButton, { size: (0, common_1.mapTextInputSizeToButtonSize)(size), onClick: handleClear, className: b('clear', { size }) })), isErrorIconVisible && ((0, jsx_runtime_1.jsx)(legacy_1.Popover, { content: errorMessage, children: (0, jsx_runtime_1.jsx)("span", { "data-qa": utils_1.CONTROL_ERROR_ICON_QA, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: icons_1.TriangleExclamation, className: b('error-icon'), size: size === 's' ? 12 : 16 }) }) })), isEndContentVisible && ((0, jsx_runtime_1.jsx)(AdditionalContent_1.AdditionalContent, { placement: "end", onClick: handleAdditionalContentClick, children: endContent }))] }), (0, jsx_runtime_1.jsx)(OuterAdditionalContent_1.OuterAdditionalContent, { note: note, errorMessage: isErrorMsgVisible ? errorMessage : null, noteId: noteId, errorMessageId: errorMessageId })] }));
});
//# sourceMappingURL=TextInput.js.map