@gravity-ui/uikit
Version:
Gravity UI base styling and components
94 lines (93 loc) • 4.71 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextArea = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../../hooks/index.js");
const private_1 = require("../../../hooks/private/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 TextAreaControl_1 = require("./TextAreaControl.js");
require("./TextArea.css");
const b = (0, cn_1.block)('text-area');
exports.TextArea = React.forwardRef(function TextArea(props, ref) {
const { view = 'normal', size = 'm', pin = 'round-round', name, value, defaultValue, disabled, readOnly, hasClear = false, error, errorMessage: errorMessageProp, validationState: validationStateProp, autoComplete, id: idProp, tabIndex, style, className, qa, controlProps, note, onUpdate, onChange, } = props;
const { errorMessage, validationState } = (0, utils_1.errorPropsMapper)({
error,
errorMessage: errorMessageProp,
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 [hasVerticalScrollbar, setHasVerticalScrollbar] = React.useState(false);
const state = (0, utils_1.getInputControlState)(validationState);
const innerId = (0, hooks_1.useUniqId)();
const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage);
const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue);
const id = idProp || innerId;
const errorMessageId = (0, hooks_1.useUniqId)();
const noteId = (0, hooks_1.useUniqId)();
const ariaDescribedBy = [
controlProps?.['aria-describedby'],
note ? noteId : undefined,
isErrorMsgVisible ? errorMessageId : undefined,
]
.filter(Boolean)
.join(' ');
const commonProps = {
id,
tabIndex,
name,
onChange(event) {
setInputValue(event.target.value);
if (onChange) {
onChange(event);
}
},
autoComplete: (0, utils_1.prepareAutoComplete)(autoComplete),
controlProps: {
...controlProps,
'aria-describedby': ariaDescribedBy || undefined,
'aria-invalid': validationState === 'invalid' || undefined,
},
};
const handleClear = (event) => {
const control = innerControlRef.current;
if (control) {
control.focus();
const syntheticEvent = Object.create(event);
syntheticEvent.target = control;
syntheticEvent.currentTarget = control;
control.value = '';
if (onChange) {
onChange(syntheticEvent);
}
}
setInputValue('');
};
React.useEffect(() => {
const control = innerControlRef.current;
if (control) {
const currHasVerticalScrollbar = control.scrollHeight > control.clientHeight;
if (hasVerticalScrollbar !== currHasVerticalScrollbar) {
setHasVerticalScrollbar(currHasVerticalScrollbar);
}
}
}, [inputValue, hasVerticalScrollbar]);
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-scrollbar': hasVerticalScrollbar,
}, className), "data-qa": qa, children: [(0, jsx_runtime_1.jsxs)("span", { className: b('content'), children: [(0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, { ...props, ...commonProps, controlRef: handleRef }), isClearControlVisible && ((0, jsx_runtime_1.jsx)(common_1.ClearButton, { className: b('clear', { size }), size: (0, common_1.mapTextInputSizeToButtonSize)(size), onClick: handleClear }))] }), (0, jsx_runtime_1.jsx)(OuterAdditionalContent_1.OuterAdditionalContent, { errorMessage: isErrorMsgVisible ? errorMessage : null, errorMessageId: errorMessageId, note: note, noteId: noteId })] }));
});
//# sourceMappingURL=TextArea.js.map