@activecollab/components
Version:
ActiveCollab Components
80 lines • 3.28 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value", "mode"];
import React, { useState, useCallback, forwardRef, useRef, useEffect } from "react";
import classnames from "classnames";
import { StyledAutoResizeTextarea } from "./Styles";
import useForkRef from "../../utils/useForkRef";
export const AutoResizeTextarea = /*#__PURE__*/forwardRef((_ref, ref) => {
let _ref$minRows = _ref.minRows,
minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
_ref$maxRows = _ref.maxRows,
maxRows = _ref$maxRows === void 0 ? 6 : _ref$maxRows,
_ref$lineHeight = _ref.lineHeight,
lineHeight = _ref$lineHeight === void 0 ? 18 : _ref$lineHeight,
onChange = _ref.onChange,
className = _ref.className,
_ref$preventNewRowOnE = _ref.preventNewRowOnEnter,
preventNewRowOnEnter = _ref$preventNewRowOnE === void 0 ? false : _ref$preventNewRowOnE,
_ref$cursorAtTextEnd = _ref.cursorAtTextEnd,
cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
onKeyDown = _ref.onKeyDown,
value = _ref.value,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const innerRef = useRef(null);
const _useState = useState(minRows),
rows = _useState[0],
setRows = _useState[1];
const handleRef = useForkRef(ref, innerRef);
const calcRows = useCallback(elem => {
if (elem) {
const previousRows = elem.rows || minRows;
elem.rows = minRows;
const currentRows = Math.floor(elem.scrollHeight / lineHeight);
if (currentRows === previousRows) {
elem.rows = currentRows;
}
if (currentRows >= maxRows) {
elem.rows = maxRows;
elem.scrollTop = elem.scrollHeight;
}
setRows(currentRows < maxRows ? currentRows : maxRows);
}
}, [lineHeight, maxRows, minRows]);
useEffect(() => {
calcRows(innerRef.current);
}, [value, calcRows]);
const handleOnChange = useCallback(e => {
calcRows(e.target);
typeof onChange === "function" && onChange(e);
}, [onChange, calcRows]);
const handleFocus = useCallback(e => {
if (cursorAtTextEnd) {
e.target.setSelectionRange(e.target.value.length, e.target.value.length);
}
}, [cursorAtTextEnd]);
const handleTextAreaKeyDown = useCallback(e => {
if (preventNewRowOnEnter && e.key === "Enter") {
e.preventDefault();
}
typeof onKeyDown === "function" && onKeyDown(e);
}, [preventNewRowOnEnter, onKeyDown]);
return /*#__PURE__*/React.createElement(StyledAutoResizeTextarea, _extends({}, rest, {
value: value,
ref: handleRef,
onChange: handleOnChange,
onKeyDown: handleTextAreaKeyDown,
onFocus: handleFocus,
rows: rows,
mode: mode,
className: classnames("c-autoresizetextarea", className),
style: {
minHeight: lineHeight + "px",
lineHeight: lineHeight + "px"
}
}));
});
AutoResizeTextarea.displayName = "AutoResizeTextarea";
//# sourceMappingURL=AutoResizeTextarea.js.map