@atlaskit/inline-edit/dist/es2019/internal/read-view.js

An inline edit displays a custom input component that switches between reading and editing on the same page.

/* read-view.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./read-view.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useRef } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Pressable } from '@atlaskit/primitives/compiled';
const readViewContainerStyles = null;
const editButtonStyles = {
  root: "_12ji1r31 _1qu2glyw _12y3idpf _189eidpf _1dqoglyw _1h6d1j28 _1e0c1ule _1pfhze3t _12l2ze3t _6rthze3t _ahbqze3t _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _r06hglyw _bfhk1j28 _vwz4kb7n _1xp41v1w _14lydkaa _1j8znqa1 _mizu1r31 _ra3xglyw _128midpf"
};
const readViewWrapperStyles = null;
const readViewWrapperMotionStyles = null;
const readViewFitContainerWidthStyles = null;
const DRAG_THRESHOLD = 5;
const ReadView = ({
  editButtonLabel,
  onEditRequested,
  postReadViewClick,
  editButtonRef,
  readViewFitContainerWidth,
  readView,
  testId
}) => {
  const startX = useRef(0);
  const startY = useRef(0);
  const mouseHasMovedAfterMouseDown = event => Math.abs(startX.current - event.clientX) >= DRAG_THRESHOLD || Math.abs(startY.current - event.clientY) >= DRAG_THRESHOLD;
  const onReadViewClick = event => {
    const element = event.target;
    /**
     * If a link is clicked in the read view, default action should be taken
     */
    if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
      event.preventDefault();
      onEditRequested();
      postReadViewClick();
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_vwz4kb7n"])
  }, /*#__PURE__*/React.createElement(Pressable, {
    xcss: editButtonStyles.root,
    onClick: onEditRequested,
    ref: editButtonRef,
    testId: testId && `${testId}--edit-button`,
    "aria-label": editButtonLabel
  }), /*#__PURE__*/React.createElement("div", {
    /**
     * It is not normally acceptable to add click handlers to non-interactive elements
     * as this is an accessibility anti-pattern. However, because this instance is
     * account for clicking on links that may be embedded within inline-edit and not
     * creating an inaccessible custom element, we can add role="presentation" so that
     * there is no negative impacts to assistive technologies.
     * (Why links are embeeded in inline-edit is for another day...)
     */
    role: "presentation",
    onClick: onReadViewClick,
    onMouseDown: e => {
      startX.current = e.clientX;
      startY.current = e.clientY;
    },
    "data-read-view-fit-container-width": readViewFitContainerWidth,
    className: ax(["_2rko1qi0 _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _irr31dpa", readViewFitContainerWidth && "_1bsb1osq", fg('platform-dst-motion-uplift-button') && "_v564k6bl"])
  }, readView()));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default ReadView;