UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

195 lines (181 loc) 6.97 kB
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js'); var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js'); // src/components/TextArea/TextArea.tsx var _react = require('react'); var _WarningCircle = require('@phosphor-icons/react/dist/csr/WarningCircle'); var _jsxruntime = require('react/jsx-runtime'); var SIZE_CLASSES = { small: { textarea: "h-24 text-sm", // 96px height, 14px font textSize: "sm" }, medium: { textarea: "h-24 text-base", // 96px height, 16px font textSize: "md" }, large: { textarea: "h-24 text-lg", // 96px height, 18px font textSize: "lg" }, extraLarge: { textarea: "h-24 text-xl", // 96px height, 20px font textSize: "xl" } }; var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200"; var STATE_CLASSES = { default: { base: "border-border-300 bg-background text-text-600", hover: "hover:border-border-400", focus: "focus:border-border-500" }, hovered: { base: "border-border-400 bg-background text-text-600", hover: "", focus: "focus:border-border-500" }, focused: { base: "border-2 border-primary-950 bg-background text-text-900", hover: "", focus: "" }, invalid: { base: "border-2 border-red-700 bg-white text-gray-800", hover: "hover:border-red-700", focus: "focus:border-red-700" }, disabled: { base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40", hover: "", focus: "" } }; var TextArea = _react.forwardRef.call(void 0, ({ label, size = "medium", state = "default", errorMessage, helperMessage, className = "", labelClassName = "", disabled, id, onChange, placeholder, required, showCharacterCount = false, maxLength, value, autoResize = false, minHeight = 96, ...props }, ref) => { const generatedId = _react.useId.call(void 0, ); const inputId = _nullishCoalesce(id, () => ( `textarea-${generatedId}`)); const internalRef = _react.useRef.call(void 0, null); _react.useImperativeHandle.call(void 0, ref, () => internalRef.current); const [isFocused, setIsFocused] = _react.useState.call(void 0, false); const currentLength = typeof value === "string" ? value.length : 0; const isNearLimit = maxLength && currentLength >= maxLength * 0.8; _react.useEffect.call(void 0, () => { if (autoResize && internalRef.current) { const textarea = internalRef.current; textarea.style.height = "auto"; textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight)}px`; } }, [autoResize, minHeight, value]); const handleChange = (event) => { _optionalChain([onChange, 'optionalCall', _ => _(event)]); }; const handleFocus = (event) => { setIsFocused(true); _optionalChain([props, 'access', _2 => _2.onFocus, 'optionalCall', _3 => _3(event)]); }; const handleBlur = (event) => { setIsFocused(false); _optionalChain([props, 'access', _4 => _4.onBlur, 'optionalCall', _5 => _5(event)]); }; let currentState = disabled ? "disabled" : state; if (isFocused && currentState !== "invalid" && currentState !== "disabled") { currentState = "focused"; } const sizeClasses = SIZE_CLASSES[size]; const stateClasses = STATE_CLASSES[currentState]; const heightClasses = autoResize ? "h-auto overflow-hidden" : sizeClasses.textarea; const fontSizeClass = _nullishCoalesce(sizeClasses.textarea.split(" ").find((c) => c.startsWith("text-")), () => ( "text-base")); const textareaClasses = _chunkTN3AYOMVjs.cn.call(void 0, BASE_TEXTAREA_CLASSES, autoResize ? fontSizeClass : sizeClasses.textarea, heightClasses, stateClasses.base, stateClasses.hover, stateClasses.focus, className ); return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex flex-col`, children: [ label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkANT66KVKjs.Text_default, { as: "label", htmlFor: inputId, size: sizeClasses.textSize, weight: "medium", color: "text-text-950", className: _chunkTN3AYOMVjs.cn.call(void 0, "mb-1.5", labelClassName), children: [ label, " ", required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-indicator-error", children: "*" }) ] } ), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "textarea", { ref: internalRef, id: inputId, disabled, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, className: textareaClasses, placeholder, required, maxLength, value, ...props } ), errorMessage && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WarningCircle.WarningCircleIcon, { size: 16 }), " ", errorMessage ] }), !errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", weight: "normal", className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`, children: [ currentLength, "/", maxLength, " caracteres" ] } ), !errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage }) ] }); } ); TextArea.displayName = "TextArea"; var TextArea_default = TextArea; exports.TextArea_default = TextArea_default; //# sourceMappingURL=chunk-SZD7L65Q.js.map