@activecollab/components/dist/esm/components/EditableContent/EditableContent.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children", "invalid", "onMouseLeave"];
import React, { forwardRef, useCallback, useRef, useState } from "react";
import { StyledDiv, StyledInput, StyledSpan } from "./Styles";
import { useForkRef } from "../../utils";
export const EditableContent = /*#__PURE__*/forwardRef((_ref, ref) => {
  let className = _ref.className,
    _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,
    inputProps = _ref.inputProps,
    wrapRef = _ref.wrapRef,
    children = _ref.children,
    invalid = _ref.invalid,
    onMouseLeave = _ref.onMouseLeave,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  const intInputRef = useRef(null);
  const handleRef = useForkRef(ref, intInputRef);
  const _useState = useState(false),
    suppressHover = _useState[0],
    setSuppressHover = _useState[1];
  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]);
  const handleKeyDown = useCallback(evt => {
    if (evt.key === "Enter" || evt.key === "Escape") {
      setSuppressHover(true);
    }
    typeof (inputProps == null ? void 0 : inputProps.onKeyDown) === "function" && inputProps.onKeyDown(evt);
  }, [inputProps]);
  const handleFocus = useCallback(evt => {
    setSuppressHover(false);
    typeof (inputProps == null ? void 0 : inputProps.onFocus) === "function" && inputProps.onFocus(evt);
  }, [inputProps]);
  const handleMouseLeave = useCallback(evt => {
    setSuppressHover(false);
    typeof onMouseLeave === "function" && onMouseLeave(evt);
  }, [onMouseLeave]);
  return /*#__PURE__*/React.createElement(StyledDiv, _extends({
    className: className,
    ref: wrapRef
  }, props, {
    onMouseLeave: handleMouseLeave
  }), /*#__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,
    onKeyDown: handleKeyDown,
    onFocus: handleFocus,
    disabled: disabled,
    "data-form-type": "other",
    "data-hover-suppressed": suppressHover ? "" : undefined,
    invalid: invalid
  })));
});
EditableContent.displayName = "EditableContent";
//# sourceMappingURL=EditableContent.js.map