phx-react
Version:
PHX REACT
49 lines • 3.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTextarea = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const types_1 = require("../types");
const PHXTextarea = ({ className, error, errorMessage, helpText, label, register, suffix, disabled, ...rest }) => {
const dynamicPaddingRight = suffix ? `${suffix.length * 0.4 + 1}rem` : '0.75rem';
const textareaRef = (0, react_1.useRef)(null);
const [extraRight, setExtraRight] = (0, react_1.useState)(0);
(0, react_1.useEffect)(() => {
const checkScroll = () => {
const el = textareaRef.current;
if (el) {
const hasScroll = el.scrollHeight > el.clientHeight;
const scrollbarWidth = el.offsetWidth - el.clientWidth - 8;
setExtraRight(hasScroll ? scrollbarWidth : 0);
}
};
checkScroll();
window.addEventListener('resize', checkScroll);
return () => window.removeEventListener('resize', checkScroll);
}, [rest.value, suffix]);
const { ref: registerRef } = register || {};
return (react_1.default.createElement("div", { className: className },
label && react_1.default.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
react_1.default.createElement("div", { className: 'relative' },
react_1.default.createElement("textarea", { ...register, ...rest, ref: (e) => {
if (registerRef)
registerRef(e);
textareaRef.current = e;
}, className: (0, types_1.classNames)('shadow-sm block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', 'resize-none', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'bg-gray-50' : '', !suffix && 'pr-3'), disabled: disabled, style: {
...rest.style,
...(suffix && {
paddingRight: dynamicPaddingRight,
paddingBottom: `${Math.max(((suffix === null || suffix === void 0 ? void 0 : suffix.length) || 0) * 0.3 + 1.5, 2.5)}rem`,
}),
} }),
suffix && (react_1.default.createElement("div", { className: (0, types_1.classNames)('pointer-events-none absolute bottom-2 select-none whitespace-nowrap text-xs text-gray-500'), style: {
right: `calc(0.75rem + ${extraRight}px)`,
} }, suffix))),
helpText ? react_1.default.createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null,
error && errorMessage ? (react_1.default.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
react_1.default.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
react_1.default.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
react_1.default.createElement("p", { className: 'text-xs text-red-800' }, errorMessage))) : null));
};
exports.PHXTextarea = PHXTextarea;
//# sourceMappingURL=Textarea.js.map