@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
73 lines (71 loc) • 3.3 kB
JavaScript
import { getDevice } from 'chayns-api';
import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { AreaContext } from '../area-provider/AreaContextProvider';
import { StyledInputRightElement } from '../input/Input.styles';
import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
isDisabled,
isInvalid,
placeholder,
value,
onChange,
onFocus,
onKeyDown,
rightElement,
onBlur,
maxHeight = '120px',
minHeight = '41px'
} = _ref;
const [isOverflowing, setIsOverflowing] = useState(false);
const areaProvider = useContext(AreaContext);
const textareaRef = useRef(null);
const {
browser
} = getDevice();
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
const adjustTextareaHeight = 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]);
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.
*/
useEffect(() => {
if (typeof value === 'string' && value.length > -1) {
adjustTextareaHeight();
}
}, [adjustTextareaHeight, value]);
return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, {
$isDisabled: isDisabled
}, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
$isInvalid: isInvalid,
$shouldChangeColor: shouldChangeColor
}, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
$browser: 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.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
$isInvalid: isInvalid
}, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
});
TextArea.displayName = 'TextArea';
export default TextArea;
//# sourceMappingURL=TextArea.js.map