@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
86 lines (84 loc) • 3.89 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Popup = Popup;
exports.RepositionOnUpdate = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _popper = require("@atlaskit/popper");
var _portal = _interopRequireDefault(require("@atlaskit/portal"));
var _constants = require("@atlaskit/theme/constants");
var _useFocusTrap = require("./useFocusTrap");
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); }
// From `packages/design-system/popup/src/reposition-on-update.tsx`
var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
var children = _ref.children,
update = _ref.update;
// Ref used here to skip update on first render (when refs haven't been set)
var isFirstRenderRef = (0, _react.useRef)(true);
(0, _react.useEffect)(function () {
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
*/
function Popup(_ref2) {
var referenceElement = _ref2.referenceElement,
children = _ref2.children;
var _React$useState = _react.default.useState(null),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
targetRef = _React$useState2[0],
setPopupRef = _React$useState2[1];
(0, _useFocusTrap.useFocusTrap)({
targetRef: targetRef
});
return /*#__PURE__*/_react.default.createElement(_react.Suspense, null, /*#__PURE__*/_react.default.createElement(_portal.default, {
zIndex: _constants.layers.modal()
}, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
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"
}, function (_ref3) {
var _ref4 = _ref3.ref,
style = _ref3.style,
update = _ref3.update;
return /*#__PURE__*/_react.default.createElement("div", {
ref: function ref(node) {
if (node) {
if (typeof _ref4 === 'function') {
_ref4(node);
} else {
_ref4.current = node;
}
setPopupRef(node);
}
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
,
style: style
}, /*#__PURE__*/_react.default.createElement(RepositionOnUpdate, {
update: update
}, children));
})));
}