@activecollab/components
Version:
ActiveCollab Components
47 lines • 1.64 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useCallback, useRef } from "react";
import { StyledDiv, StyledInput, StyledSpan } from "./Styles";
import { useForkRef } from "../../utils";
export const EditableContent = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
className,
variant = "Body 2",
weight,
disabled = false,
inputProps,
wrapRef,
children,
invalid,
...props
} = _ref;
const intInputRef = useRef(null);
const handleRef = useForkRef(ref, intInputRef);
const handleBlur = useCallback(evt => {
if (intInputRef != null && intInputRef.current) {
intInputRef.current.scrollLeft = 0;
}
typeof (inputProps == null ? void 0 : inputProps.onBlur) === "function" && (inputProps == null ? void 0 : inputProps.onBlur(evt));
}, [inputProps]);
return /*#__PURE__*/React.createElement(StyledDiv, _extends({
className: className,
ref: wrapRef
}, props), /*#__PURE__*/React.createElement(StyledSpan, {
variant: variant,
forwardedAs: "span",
weight: weight,
$disabled: disabled,
className: "presentation"
}, children ? children : inputProps == null ? void 0 : inputProps.value), /*#__PURE__*/React.createElement(StyledInput, _extends({}, inputProps, {
ref: handleRef,
forwardedAs: "input",
variant: variant,
weight: weight,
value: inputProps == null ? void 0 : inputProps.value,
onBlur: handleBlur,
disabled: disabled,
"data-form-type": "other",
invalid: invalid
})));
});
EditableContent.displayName = "EditableContent";
//# sourceMappingURL=EditableContent.js.map