@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
38 lines (37 loc) • 2.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextField = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./TextField.css");
const Icon_1 = require("../Icon");
const TextField = ({ label, helperText, leadingIcon, trailingContent, error = false, showCharacterCount = false, disabled, readOnly, className = '', id, value, defaultValue, maxLength, onChange, type = 'text', ...rest }) => {
const isControlled = value !== undefined;
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || '');
const inputRef = (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);
};
const rootClassName = [
'ds-text-field',
error && 'ds-text-field--error',
disabled && 'ds-text-field--disabled',
readOnly && 'ds-text-field--readonly',
className,
]
.filter(Boolean)
.join(' ');
const containerClassName = [
'ds-text-field__input-container',
trailingContent && 'ds-text-field__input-container--with-trailing',
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClassName, children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "ds-text-field__label", children: label })), (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, children: [leadingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "ds-text-field__icon ds-text-field__icon--leading", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: 24 }) })), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: id, type: type, className: "ds-text-field__input", disabled: disabled, readOnly: readOnly, value: value, defaultValue: defaultValue, maxLength: maxLength, onChange: handleChange, ...rest }), trailingContent && ((0, jsx_runtime_1.jsx)("span", { className: "ds-text-field__trailing", children: trailingContent }))] }), (helperText || showCharacterCount) && ((0, jsx_runtime_1.jsxs)("div", { className: "ds-text-field__helper-container", children: [helperText && ((0, jsx_runtime_1.jsx)("span", { className: "ds-text-field__helper-text", children: helperText })), showCharacterCount && maxLength && ((0, jsx_runtime_1.jsxs)("span", { className: "ds-text-field__character-count", children: [characterCount, "/", maxLength] }))] }))] }));
};
exports.TextField = TextField;