@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
73 lines (72 loc) • 2.34 kB
JavaScript
import React, { useRef, useEffect, Suspense } from 'react';
import { Popper as ReactPopper } from '@atlaskit/popper';
import Portal from '@atlaskit/portal';
import { layers } from '@atlaskit/theme/constants';
import { useFocusTrap } from './useFocusTrap';
// From `packages/design-system/popup/src/reposition-on-update.tsx`
export const RepositionOnUpdate = ({
children,
update
}) => {
// Ref used here to skip update on first render (when refs haven't been set)
const isFirstRenderRef = useRef(true);
useEffect(() => {
if (isFirstRenderRef.current) {
isFirstRenderRef.current = false;
return;
}
// callback function from popper that repositions pop-up on content Update
update();
}, [update, children]);
return children;
};
/**
* A popup wrapper to match the behaviour of `@atlaskit/popup`
*
* Why not `@atlaskit/popup` directly? It requires a trigger element.
* We can use this when we have a direct reference to the element
* and it is more convenient to work directly with the lower level API.
*
* @param referenceElement HTMLElement - Replacement reference element to position popper relative to.
* @param children React.ReactNode - Returns the element to be positioned.
* @returns React popper component
*/
export function Popup({
referenceElement,
children
}) {
const [targetRef, setPopupRef] = React.useState(null);
useFocusTrap({
targetRef: targetRef
});
return /*#__PURE__*/React.createElement(Suspense, null, /*#__PURE__*/React.createElement(Portal, {
zIndex: layers.modal()
}, /*#__PURE__*/React.createElement(ReactPopper, {
referenceElement: referenceElement
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [0, 8],
placement: "bottom-end",
strategy: "fixed"
}, ({
ref,
style,
update
}) => /*#__PURE__*/React.createElement("div", {
ref: node => {
if (node) {
if (typeof ref === 'function') {
ref(node);
} else {
ref.current = node;
}
setPopupRef(node);
}
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
,
style: style
}, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
update: update
}, children)))));
}