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

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import styled, { css } from "styled-components";
import { EditableContent } from "../EditableContent/EditableContent";
import { StyledDiv, StyledSpan } from "../EditableContent/Styles";
import { Typography } from "../Typography/Typography";
const StyledTextareaSpan = styled(Typography).withConfig({
  displayName: "EditableText__StyledTextareaSpan",
  componentId: "sc-j2ewzm-0"
})(["", " background-color:var(--input-background-color,#ffffff);padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-variant-numeric:tabular-nums;outline-width:0px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:break-word;height:calc(1.5em * 3 + 2px);min-height:calc(1.5em * 3 + 2px);opacity:0;&:focus{opacity:1;background-color:var(--input-background-color,#f8f9fa);}&:disabled{opacity:0;}", ""], {
  "position": "absolute",
  "inset": "0px",
  "boxSizing": "border-box",
  "width": "100%",
  "borderRadius": "0.375rem",
  "borderWidth": "1px",
  "borderStyle": "solid",
  "borderColor": "transparent",
  ":focus-within": {
    "borderColor": "var(--color-theme-700)"
  },
  ":hover": {
    "borderColor": "var(--color-theme-700)"
  }
}, _ref => {
  let {
    invalid
  } = _ref;
  return invalid && css(["border-color:var(--red-alert) !important;"]);
});
export const EditableText = /*#__PURE__*/forwardRef((_ref2, ref) => {
  let {
    onSave,
    onCancel,
    value,
    inputProps,
    allowEmptyString,
    multiline = false,
    variant = "Body 2",
    weight,
    disabled = false,
    invalid,
    wrapRef,
    children,
    ...props
  } = _ref2;
  const [currentValue, setCurrentValue] = useState(value);
  const [prevValue, setPrevValue] = useState(value);
  const escapeRef = useRef(false);
  const intTextareaRef = useRef(null);
  const [isTextareaFocused, setIsTextareaFocused] = useState(false);
  useEffect(() => {
    if (currentValue !== value) {
      setCurrentValue(value);
      setPrevValue(value);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);
  const handleBlur = useCallback(e => {
    setIsTextareaFocused(false);
    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(() => {
    setIsTextareaFocused(true);
  }, []);
  const handleKeyDown = useCallback(e => {
    if (e.key === "Enter" && !multiline) {
      e.target.blur();
    }
    if (e.key === "Escape") {
      escapeRef.current = true;
      e.target.blur();
      typeof onCancel === "function" && onCancel();
    }
  }, [onCancel, multiline]);
  const handleChange = useCallback(e => {
    setCurrentValue(e.target.value);
  }, []);
  if (multiline) {
    return /*#__PURE__*/React.createElement(StyledDiv, _extends({
      ref: wrapRef
    }, props), /*#__PURE__*/React.createElement(StyledSpan, {
      variant: variant,
      forwardedAs: "span",
      weight: weight,
      $disabled: !isTextareaFocused,
      className: "presentation"
    }, 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: {
      ...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