@activecollab/components
Version:
ActiveCollab Components
133 lines • 5.01 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString", "multiline", "variant", "weight", "disabled", "invalid", "wrapRef", "children"];
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { EditableContent } from "../EditableContent/EditableContent";
import { StyledDiv, StyledMultilineSpan, StyledTextareaSpan } from "../EditableContent/Styles";
export const EditableText = /*#__PURE__*/forwardRef((_ref, ref) => {
let onSave = _ref.onSave,
onCancel = _ref.onCancel,
value = _ref.value,
inputProps = _ref.inputProps,
allowEmptyString = _ref.allowEmptyString,
_ref$multiline = _ref.multiline,
multiline = _ref$multiline === void 0 ? false : _ref$multiline,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
weight = _ref.weight,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
invalid = _ref.invalid,
wrapRef = _ref.wrapRef,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const _useState = useState(value),
currentValue = _useState[0],
setCurrentValue = _useState[1];
const _useState2 = useState(value),
prevValue = _useState2[0],
setPrevValue = _useState2[1];
const escapeRef = useRef(false);
const intTextareaRef = useRef(null);
useEffect(() => {
if (currentValue !== value) {
setCurrentValue(value);
setPrevValue(value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
const handleBlur = useCallback(e => {
if (escapeRef.current) {
setCurrentValue(prevValue);
escapeRef.current = false;
} else {
if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
setPrevValue(e.target.value);
setCurrentValue(e.target.value);
typeof onSave === "function" && onSave(e);
} else {
!allowEmptyString ? setCurrentValue(prevValue) : typeof onSave === "function" && prevValue !== e.target.value && onSave(e);
}
}
// Reset scroll position for textarea
if (multiline && intTextareaRef != null && intTextareaRef.current) {
intTextareaRef.current.scrollLeft = 0;
}
}, [allowEmptyString, onSave, prevValue, multiline]);
const handleFocus = useCallback(e => {
if (multiline) {
const textarea = e.target;
const length = textarea.value.length;
textarea.setSelectionRange(length, length);
}
}, [multiline]);
const handleKeyDown = useCallback(e => {
if (e.key === "Enter" && !multiline) {
e.target.blur();
}
if (e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
escapeRef.current = true;
e.target.blur();
typeof onCancel === "function" && onCancel(e);
}
}, [onCancel, multiline]);
const handleChange = useCallback(e => {
setCurrentValue(e.target.value);
}, []);
if (multiline) {
return /*#__PURE__*/React.createElement(StyledDiv, _extends({
ref: ref || wrapRef
}, props, {
$multiline: multiline
}), /*#__PURE__*/React.createElement(StyledMultilineSpan, {
variant: variant,
forwardedAs: "span",
weight: weight,
$disabled: disabled,
invalid: invalid,
className: "presentation",
onClick: () => {
if (!disabled && intTextareaRef.current) {
intTextareaRef.current.focus();
}
}
}, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/React.createElement(StyledTextareaSpan, _extends({
ref: intTextareaRef,
forwardedAs: "textarea",
variant: variant,
weight: weight,
value: currentValue != null ? currentValue : "",
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
disabled: disabled,
invalid: invalid,
"data-form-type": "other",
placeholder: inputProps == null ? void 0 : inputProps.placeholder,
className: classNames("c-textarea", inputProps == null ? void 0 : inputProps.className),
rows: 3
}, inputProps)));
}
return /*#__PURE__*/React.createElement(EditableContent, _extends({}, props, {
variant: variant,
weight: weight,
disabled: disabled,
invalid: invalid,
wrapRef: wrapRef,
ref: ref,
inputProps: _extends({}, inputProps, {
value: currentValue != null ? currentValue : "",
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
type: "text",
className: classNames("c-input", inputProps == null ? void 0 : inputProps.className)
})
}), children);
});
EditableText.displayName = "EditableText";
//# sourceMappingURL=EditableText.js.map