@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
80 lines (77 loc) • 4.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _chaynsApi = require("chayns-api");
var _react = _interopRequireWildcard(require("react"));
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
var _Input = require("../input/Input.styles");
var _TextArea = require("./TextArea.styles");
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)(({
isDisabled,
isInvalid,
placeholder,
value,
onChange,
onFocus,
onKeyDown,
rightElement,
onBlur,
maxHeight = '120px',
minHeight = '41px'
}, ref) => {
var _rightElement$props;
const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
const textareaRef = (0, _react.useRef)(null);
const {
browser
} = (0, _chaynsApi.getDevice)();
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
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 = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
const adjustTextareaHeight = (0, _react.useCallback)(() => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
}
}, [maxHeight]);
(0, _react.useImperativeHandle)(ref, () => textareaRef.current);
/**
* This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
* To maintain the functionality while clearing the input, the length need to be greater than -1.
*/
(0, _react.useEffect)(() => {
if (typeof value === 'string' && value.length > -1) {
adjustTextareaHeight();
}
}, [adjustTextareaHeight, value]);
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
$isDisabled: isDisabled
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
$isInvalid: isInvalid,
$shouldChangeColor: shouldChangeColor
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
disabled: isDisabled,
$isInvalid: isInvalid,
ref: textareaRef,
value: value,
onBlur: onBlur,
onChange: onChange,
onFocus: onFocus,
onKeyDown: onKeyDown,
$maxHeight: maxHeight,
$minHeight: minHeight,
$isOverflowing: isOverflowing,
rows: 1
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
$isInvalid: isInvalid
}, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
});
TextArea.displayName = 'TextArea';
var _default = exports.default = TextArea;
//# sourceMappingURL=TextArea.js.map