@atlaskit/onboarding

Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
79 lines (77 loc) • 3.36 kB
JavaScript
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _target = require("../styled/target");
var _useElementObserver = require("../utils/use-element-observer");
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 computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
function cloneAndOverrideStyles(node) {
  var shouldCloneChildren = true;
  var clonedNode = node.cloneNode(shouldCloneChildren);
  var computedStyles = getComputedStyle(node);
  computedStyleAttributesToClone.forEach(function (attribute) {
    clonedNode.style[attribute] = computedStyles[attribute];
  });
  clonedNode.style.margin = '0';
  clonedNode.style.position = 'static';
  // The target may have other transforms applied. Avoid unintended side effects
  // by zeroing out "translate" rather than applying a value of "none".
  clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
  return clonedNode;
}

/**
 * __Clone__
 *
 * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
 * a pulsing animation.
 *
 * @internal
 */
var Clone = function Clone(props) {
  var pulse = props.pulse,
    style = props.style,
    shouldWatch = props.shouldWatch,
    target = props.target,
    targetBgColor = props.targetBgColor,
    targetOnClick = props.targetOnClick,
    targetNode = props.targetNode,
    targetRadius = props.targetRadius,
    testId = props.testId;
  var contentVersion = (0, _useElementObserver.useElementObserver)(targetNode, {
    disableWatch: !shouldWatch
  });
  var contentHTML = (0, _react.useMemo)(function () {
    return cloneAndOverrideStyles(targetNode).outerHTML;
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to update when the content changes
  [contentVersion, targetNode]);
  return /*#__PURE__*/_react.default.createElement(_target.TargetInner, {
    "data-testid": testId,
    pulse: pulse,
    bgColor: targetBgColor,
    radius: targetRadius,
    style: style
  }, /*#__PURE__*/_react.default.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: contentHTML
    }
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: {
      height: '100%',
      pointerEvents: 'none'
    }
  }), /*#__PURE__*/_react.default.createElement(_target.TargetOverlay, {
    onClick: targetOnClick ? function (event) {
      return targetOnClick({
        event: event,
        target: target
      });
    } : undefined
  }));
};
var _default = exports.default = Clone;