@atlaskit/profilecard
Version:
A React component to display a card with user information.
42 lines • 1.67 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "trigger", "showProfilecard", "hideProfilecard", "ariaLabelledBy"];
import React, { useCallback, useMemo } from 'react';
var PopupTriggerInner = function PopupTriggerInner(_ref, ref) {
var children = _ref.children,
trigger = _ref.trigger,
showProfilecard = _ref.showProfilecard,
hideProfilecard = _ref.hideProfilecard,
ariaLabelledBy = _ref.ariaLabelledBy,
props = _objectWithoutProperties(_ref, _excluded);
var onMouseEnter = useCallback(function () {
showProfilecard();
}, [showProfilecard]);
var onKeyPress = useCallback(function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
showProfilecard();
}
}, [showProfilecard]);
var onClick = useCallback(function (event) {
// Prevent the click event from propagating to parent containers.
event.stopPropagation();
showProfilecard();
}, [showProfilecard]);
var containerListeners = useMemo(function () {
return trigger === 'hover' ? {
onMouseEnter: onMouseEnter,
onMouseLeave: hideProfilecard,
onBlur: hideProfilecard,
onKeyPress: onKeyPress
} : {
onClick: onClick,
onKeyPress: onKeyPress
};
}, [hideProfilecard, onClick, onKeyPress, onMouseEnter, trigger]);
return /*#__PURE__*/React.createElement("span", _extends({}, props, containerListeners, {
ref: ref,
"aria-labelledby": ariaLabelledBy
}), children);
};
export var PopupTrigger = /*#__PURE__*/React.forwardRef(PopupTriggerInner);