@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
44 lines (43 loc) • 2.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Textarea = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./Textarea.css");
const Textarea = ({ label, helperText, error = false, showCharacterCount = false, autoResize = false, disabled, readOnly, className = '', id, value, defaultValue, maxLength, onChange, rows = 4, ...rest }) => {
const isControlled = value !== undefined;
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || '');
const textareaRef = (0, react_1.useRef)(null);
const currentValue = isControlled ? value : internalValue;
const characterCount = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) || 0;
const handleChange = (e) => {
if (!isControlled) {
setInternalValue(e.target.value);
}
onChange === null || onChange === void 0 ? void 0 : onChange(e);
// Auto-resize
if (autoResize && textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
};
// Initial auto-resize
(0, react_1.useEffect)(() => {
if (autoResize && textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
}, [autoResize, currentValue]);
const rootClassName = [
'ds-textarea',
error && 'ds-textarea--error',
disabled && 'ds-textarea--disabled',
readOnly && 'ds-textarea--readonly',
autoResize && 'ds-textarea--auto-resize',
className,
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClassName, children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "ds-textarea__label", children: label })), (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, id: id, className: "ds-textarea__input", disabled: disabled, readOnly: readOnly, value: value, defaultValue: defaultValue, maxLength: maxLength, onChange: handleChange, rows: rows, ...rest }), (helperText || showCharacterCount) && ((0, jsx_runtime_1.jsxs)("div", { className: "ds-textarea__helper-container", children: [helperText && ((0, jsx_runtime_1.jsx)("span", { className: "ds-textarea__helper-text", children: helperText })), showCharacterCount && maxLength && ((0, jsx_runtime_1.jsxs)("span", { className: "ds-textarea__character-count", children: [characterCount, "/", maxLength] }))] }))] }));
};
exports.Textarea = Textarea;