@atlaskit/onboarding
Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
47 lines • 1.96 kB
JavaScript
/* node-resolver-spotlight-target.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./node-resolver-spotlight-target.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useRef } from 'react';
import NodeResolver from 'react-node-resolver';
const spanStyles = null;
/**
* A wrapper component that conditionally applies a NodeResolver to its children.
*
* Note: NodeResolver should not be used in React 18 concurrent mode. This component
* is intended to be removed once the feature flag is removed.
* @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
* @param {ReactElement} props.children - The child elements to be wrapped.
* @param {string} props.name - The name to reference from Spotlight.
* @param {ReactElement} props.getTargetRef - Setting up Target Node in Spotlight Manager.
* @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
*/
const NodeResolverSpotlightTarget = ({
hasNodeResolver,
children,
getTargetRef,
name
}) => {
const divRef = useRef(null);
useEffect(() => {
const targetRef = getTargetRef(name);
if (!hasNodeResolver) {
var _divRef$current;
targetRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
}
return () => {
!hasNodeResolver && targetRef(undefined);
};
}, [hasNodeResolver, name, getTargetRef]);
if (hasNodeResolver) {
return /*#__PURE__*/React.createElement(NodeResolver, {
innerRef: getTargetRef(name)
}, children);
}
return /*#__PURE__*/React.createElement("span", {
ref: divRef,
className: ax(["_1e0c1bgi"])
}, children);
};
NodeResolverSpotlightTarget.displayName = 'NodeResolverSpotlightTarget';
export default NodeResolverSpotlightTarget;