@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
171 lines (169 loc) • 7.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactCompilerRuntime = require("react-compiler-runtime");
var _react = _interopRequireWildcard(require("react"));
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
var _Input = require("../input/Input.styles");
var _TextArea = require("./TextArea.styles");
var _resize = require("../../hooks/resize");
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
"use memo";
var _rightElement$props;
const $ = (0, _reactCompilerRuntime.c)(29);
const {
isDisabled,
isInvalid,
placeholder,
value,
onChange,
onFocus,
onKeyDown,
rightElement,
onBlur,
maxHeight: t1,
minHeight: t2,
colors,
shouldEnableKeyboardHighlighting
} = t0;
const maxHeight = t1 === undefined ? "120px" : t1;
const minHeight = t2 === undefined ? "41px" : t2;
const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
const textareaRef = (0, _react.useRef)(null);
(0, _resize.useCursorRepaint)(textareaRef);
const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
let t3;
if ($[0] !== maxHeight) {
t3 = () => {
if (textareaRef.current) {
textareaRef.current.style.height = "auto";
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
}
};
$[0] = maxHeight;
$[1] = t3;
} else {
t3 = $[1];
}
const adjustTextareaHeight = t3;
let t4;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t4 = () => textareaRef.current;
$[2] = t4;
} else {
t4 = $[2];
}
(0, _react.useImperativeHandle)(ref, t4);
let t5;
let t6;
if ($[3] !== adjustTextareaHeight || $[4] !== value) {
t5 = () => {
if (typeof value === "string" && value.length > -1) {
adjustTextareaHeight();
}
};
t6 = [adjustTextareaHeight, value];
$[3] = adjustTextareaHeight;
$[4] = value;
$[5] = t5;
$[6] = t6;
} else {
t5 = $[5];
t6 = $[6];
}
(0, _react.useEffect)(t5, t6);
const hasValue = value !== undefined && value.length > 0;
let t7;
if ($[7] !== hasValue) {
t7 = hasValue ? {
bottom: "2px",
right: "2px"
} : {
top: "12px",
left: "10px"
};
$[7] = hasValue;
$[8] = t7;
} else {
t7 = $[8];
}
const labelPosition = t7;
let t8;
if ($[9] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== shouldShowKeyboardHighlighting || $[27] !== value) {
colors === null || colors === void 0 || colors.backgroundColor;
colors === null || colors === void 0 || colors.borderColor;
t8 = (() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
$isDisabled: isDisabled
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
$isInvalid: isInvalid,
$shouldChangeColor: shouldChangeColor,
$backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundColor,
$borderColor: colors === null || colors === void 0 ? void 0 : colors.borderColor,
"data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
className: "chayns-scrollbar",
disabled: isDisabled,
$isInvalid: isInvalid,
ref: textareaRef,
value: value,
onBlur: onBlur,
onChange: onChange,
onFocus: onFocus,
onKeyDown: onKeyDown,
$maxHeight: maxHeight,
$minHeight: minHeight,
$isOverflowing: isOverflowing,
rows: 1
}), /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, {
animate: {
fontSize: hasValue ? "9px" : undefined
},
initial: false,
style: labelPosition,
transition: {
type: "tween",
duration: 0.1
}
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
$isInvalid: isInvalid
}, placeholder))), rightElement && shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
$isInline: true
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledRightElementWrapper, null, rightElement))), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
$isInline: true
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledRightElementWrapper, null, rightElement))))();
$[9] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
$[10] = colors === null || colors === void 0 ? void 0 : colors.borderColor;
$[11] = hasValue;
$[12] = isDisabled;
$[13] = isInvalid;
$[14] = isOverflowing;
$[15] = labelPosition;
$[16] = maxHeight;
$[17] = minHeight;
$[18] = onBlur;
$[19] = onChange;
$[20] = onFocus;
$[21] = onKeyDown;
$[22] = placeholder;
$[23] = rightElement;
$[24] = shouldChangeColor;
$[25] = shouldShowBorder;
$[26] = shouldShowKeyboardHighlighting;
$[27] = value;
$[28] = t8;
} else {
t8 = $[28];
}
return t8;
});
TextArea.displayName = 'TextArea';
var _default = exports.default = TextArea;
//# sourceMappingURL=TextArea.js.map