@atlaskit/inline-edit/dist/cjs/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 */
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./read-view.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _compiled = require("@atlaskit/primitives/compiled");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var readViewContainerStyles = null;
var 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"
};
var readViewWrapperStyles = null;
var readViewWrapperMotionStyles = null;
var readViewFitContainerWidthStyles = null;
var DRAG_THRESHOLD = 5;
var ReadView = function ReadView(_ref) {
  var editButtonLabel = _ref.editButtonLabel,
    onEditRequested = _ref.onEditRequested,
    postReadViewClick = _ref.postReadViewClick,
    editButtonRef = _ref.editButtonRef,
    readViewFitContainerWidth = _ref.readViewFitContainerWidth,
    readView = _ref.readView,
    testId = _ref.testId;
  var startX = (0, _react.useRef)(0);
  var startY = (0, _react.useRef)(0);
  var mouseHasMovedAfterMouseDown = function mouseHasMovedAfterMouseDown(event) {
    return Math.abs(startX.current - event.clientX) >= DRAG_THRESHOLD || Math.abs(startY.current - event.clientY) >= DRAG_THRESHOLD;
  };
  var onReadViewClick = function onReadViewClick(event) {
    var 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.default.createElement("div", {
    className: (0, _runtime.ax)(["_vwz4kb7n"])
  }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
    xcss: editButtonStyles.root,
    onClick: onEditRequested,
    ref: editButtonRef,
    testId: testId && "".concat(testId, "--edit-button"),
    "aria-label": editButtonLabel
  }), /*#__PURE__*/_react.default.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: function onMouseDown(e) {
      startX.current = e.clientX;
      startY.current = e.clientY;
    },
    "data-read-view-fit-container-width": readViewFitContainerWidth,
    className: (0, _runtime.ax)(["_2rko1qi0 _v564thzt _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchhusvi _1bsb1wug _p12f1osq _irr31dpa", readViewFitContainerWidth && "_1bsb1osq", (0, _fg.fg)('platform-dst-motion-uplift-button') && "_v564k6bl"])
  }, readView()));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = ReadView;