@atlaskit/profilecard
Version:
A React component to display a card with user information.
412 lines (411 loc) • 16.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { Suspense } from 'react';
import { FormattedMessage, injectIntl } from 'react-intl-next';
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
import { fg } from '@atlaskit/platform-feature-flags';
import Popup from '@atlaskit/popup';
import { Box } from '@atlaskit/primitives';
import { layers } from '@atlaskit/theme/constants';
import _filterActions from '../../internal/filterActions';
import messages from '../../messages';
import { cardTriggered, fireEvent, profileCardRendered } from '../../util/analytics';
import { isBasicClick } from '../../util/click';
import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
import { getPageTime } from '../../util/performance';
import { ErrorBoundary } from '../Error';
import { TeamProfileCardLazy } from './lazyTeamProfileCard';
import TeamLoadingState from './TeamLoadingState';
export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureComponent) {
function TeamProfileCardTriggerInternal() {
var _this;
_classCallCheck(this, TeamProfileCardTriggerInternal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, TeamProfileCardTriggerInternal, [].concat(args));
_defineProperty(_this, "_isMounted", false);
_defineProperty(_this, "showTimer", 0);
_defineProperty(_this, "hideTimer", 0);
_defineProperty(_this, "openedByHover", false);
_defineProperty(_this, "openTime", 0);
_defineProperty(_this, "fireAnalytics", function (payload) {
// Don't fire any analytics if the component is unmounted
if (!_this._isMounted) {
return;
}
if (_this.props.createAnalyticsEvent) {
fireEvent(_this.props.createAnalyticsEvent, payload);
}
});
_defineProperty(_this, "fireAnalyticsWithDuration", function (generator) {
var event = generator(getPageTime() - _this.openTime);
_this.fireAnalytics(event);
});
_defineProperty(_this, "hideProfilecard", function () {
var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
clearTimeout(_this.showTimer);
clearTimeout(_this.hideTimer);
_this.hideTimer = window.setTimeout(function () {
_this.setState({
visible: false
});
}, delay);
});
_defineProperty(_this, "showProfilecard", function () {
var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
clearTimeout(_this.hideTimer);
clearTimeout(_this.showTimer);
_this.showTimer = window.setTimeout(function () {
if (!_this.state.visible) {
_this.clientFetchProfile();
_this.openTime = getPageTime();
_this.setState({
visible: true
});
}
}, delay);
});
_defineProperty(_this, "onClick", function (event) {
if (_this.props.triggerLinkType === 'link') {
// We want to prevent navigation occurring on basic click, but it's important that
// cmd+click, ctrl+click, etc. still work as expected.
if (isBasicClick(event)) {
event.preventDefault();
}
}
if (_this.props.triggerLinkType === 'clickable-link') {
if (_this.props.viewProfileOnClick) {
_this.props.viewProfileOnClick(event);
}
}
if (_this.props.trigger !== 'hover') {
_this.openedByHover = false;
_this.showProfilecard(0);
if (!_this.state.visible) {
_this.fireAnalytics(cardTriggered('team', 'click', _this.props.teamId));
}
}
});
_defineProperty(_this, "onMouseEnter", function () {
if (_this.props.trigger === 'click') {
return;
}
if (!_this.state.visible) {
_this.openedByHover = true;
_this.fireAnalytics(cardTriggered('team', 'hover', _this.props.teamId));
}
_this.showProfilecard(DELAY_MS_SHOW);
});
_defineProperty(_this, "onMouseLeave", function () {
if (_this.props.trigger === 'click') {
return;
}
if (_this.openedByHover) {
_this.hideProfilecard(DELAY_MS_HIDE);
}
});
_defineProperty(_this, "onKeyPress", function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
_this.setState({
isTriggeredByKeyboard: true
});
_this.showProfilecard(0);
if (!_this.state.visible) {
_this.fireAnalytics(cardTriggered('team', 'click', _this.props.teamId));
}
}
});
_defineProperty(_this, "onClose", function () {
_this.hideProfilecard();
_this.setState({
isTriggeredByKeyboard: false
});
});
_defineProperty(_this, "openKudosDrawer", function () {
_this.hideProfilecard(DELAY_MS_HIDE);
_this.setState({
kudosDrawerOpen: true
});
});
_defineProperty(_this, "closeKudosDrawer", function () {
_this.setState({
kudosDrawerOpen: false
});
});
_defineProperty(_this, "kudosUrl", function () {
var recipientId = _this.props.teamId && "&recipientId=".concat(_this.props.teamId) || '';
var cloudId = _this.props.cloudId && "&cloudId=".concat(_this.props.cloudId) || '';
return "".concat(_this.state.teamCentralBaseUrl, "/kudos/give?type=team").concat(recipientId).concat(cloudId);
});
_defineProperty(_this, "stopPropagation", function (event) {
// We need to stop propagation when users click on the card, so that it
// doesn't trigger any special effects that occur when clicking the trigger.
event.stopPropagation();
});
_defineProperty(_this, "triggerListeners", {
onClick: _this.onClick,
onMouseEnter: _this.onMouseEnter,
onMouseLeave: _this.onMouseLeave
});
_defineProperty(_this, "cardListeners", {
onClick: _this.stopPropagation,
onMouseEnter: _this.onMouseEnter,
onMouseLeave: _this.onMouseLeave
});
_defineProperty(_this, "state", {
visible: false,
isLoading: undefined,
hasError: false,
error: null,
data: null,
shouldShowGiveKudos: false,
teamCentralBaseUrl: undefined,
kudosDrawerOpen: false,
isTriggeredByKeyboard: false
});
_defineProperty(_this, "clientFetchProfile", function () {
var _this$props = _this.props,
orgId = _this$props.orgId,
teamId = _this$props.teamId;
var isLoading = _this.state.isLoading;
if (isLoading === true) {
// don't fetch data when fetching is in process
return;
}
_this.setState({
isLoading: true,
data: null
}, function () {
var fireEvent = function fireEvent(event) {
_this.fireAnalytics(event);
};
var requests = Promise.all([_this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
withOrgContext: true,
withSiteContext: true
})]);
requests.then(function (res) {
var _this2;
return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
}, function (err) {
return _this.handleClientError(err);
}).catch(function (err) {
return _this.handleClientError(err);
});
});
});
_defineProperty(_this, "onErrorBoundary", function () {
_this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
duration: 0
}));
_this.setState({
renderError: true
});
});
_defineProperty(_this, "renderProfileCard", function () {
var _this$props2 = _this.props,
generateUserLink = _this$props2.generateUserLink,
onUserClick = _this$props2.onUserClick,
viewingUserId = _this$props2.viewingUserId,
viewProfileLink = _this$props2.viewProfileLink,
viewProfileOnClick = _this$props2.viewProfileOnClick;
var _this$state = _this.state,
data = _this$state.data,
error = _this$state.error,
hasError = _this$state.hasError,
isLoading = _this$state.isLoading;
var newProps = {
clientFetchProfile: _this.clientFetchProfile,
actions: _this.filterActions(),
analytics: _this.fireAnalyticsWithDuration,
team: data || undefined,
generateUserLink: generateUserLink,
onUserClick: onUserClick,
viewingUserId: viewingUserId,
viewProfileLink: viewProfileLink,
viewProfileOnClick: viewProfileOnClick
};
return /*#__PURE__*/React.createElement("div", _this.cardListeners, _this.state.visible && /*#__PURE__*/React.createElement(Suspense, {
fallback: /*#__PURE__*/React.createElement(TeamLoadingState, {
analytics: _this.fireAnalyticsWithDuration
})
}, /*#__PURE__*/React.createElement(TeamProfileCardLazy, _extends({}, newProps, {
isLoading: isLoading,
hasError: hasError,
errorType: error,
isTriggeredByKeyboard: _this.state.isTriggeredByKeyboard
}))));
});
_defineProperty(_this, "renderKudosLauncher", function () {
return _this.state.shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
fallback: null
}, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
isOpen: _this.state.kudosDrawerOpen,
recipient: {
type: KudosType.TEAM,
recipientId: _this.props.teamId
},
analyticsSource: "team-profile-card",
teamCentralBaseUrl: _this.state.teamCentralBaseUrl,
cloudId: _this.props.cloudId || '',
addFlag: _this.props.addFlag,
onClose: _this.closeKudosDrawer
}));
});
_defineProperty(_this, "renderTrigger", function (triggerProps) {
var _this$props3 = _this.props,
children = _this$props3.children,
intl = _this$props3.intl,
triggerLinkType = _this$props3.triggerLinkType,
viewProfileLink = _this$props3.viewProfileLink;
if (triggerLinkType === 'none') {
return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), fg('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/React.createElement(Box, _extends({
as: "span",
role: "button",
testId: "team-profilecard-trigger-wrapper",
tabIndex: 0,
"aria-label": intl.formatMessage(messages.teamProfileCardAriaLabel),
onKeyUp: _this.onKeyPress
}, triggerProps, _this.triggerListeners), children) : /*#__PURE__*/React.createElement("span", _extends({
"data-testid": "team-profilecard-trigger-wrapper"
}, triggerProps, _this.triggerListeners), children));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/React.createElement("a", _extends({
"data-testid": "team-profilecard-trigger-wrapper"
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: {
color: 'initial',
textDecoration: 'none'
},
href: viewProfileLink
}, triggerProps, {
ref: triggerProps.ref
}, _this.triggerListeners), children));
});
return _this;
}
_inherits(TeamProfileCardTriggerInternal, _React$PureComponent);
return _createClass(TeamProfileCardTriggerInternal, [{
key: "componentDidMount",
value: function componentDidMount() {
this._isMounted = true;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props4 = this.props,
orgId = _this$props4.orgId,
teamId = _this$props4.teamId,
resourceClient = _this$props4.resourceClient;
var visible = this.state.visible;
// just re-fetching data when the card opens
if (visible && (teamId !== prevProps.teamId || orgId !== prevProps.orgId || resourceClient !== prevProps.resourceClient)) {
this.setState({
isLoading: undefined
}, this.clientFetchProfile);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
clearTimeout(this.showTimer);
clearTimeout(this.hideTimer);
}
}, {
key: "handleClientSuccess",
value: function handleClientSuccess(team, shouldShowGiveKudos, teamCentralBaseUrl) {
if (!this._isMounted) {
return;
}
this.setState({
isLoading: false,
hasError: false,
data: team,
shouldShowGiveKudos: shouldShowGiveKudos,
teamCentralBaseUrl: teamCentralBaseUrl
});
}
}, {
key: "handleClientError",
value: function handleClientError(err) {
if (!this._isMounted) {
return;
}
this.setState({
isLoading: false,
hasError: true,
error: err
});
}
}, {
key: "filterActions",
value: function filterActions() {
var _this3 = this;
var actions = _filterActions(this.props.actions, this.state.data);
if (this.state.shouldShowGiveKudos) {
var kudosAction = {
label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
id: 'give-kudos',
callback: function callback() {
_this3.openKudosDrawer();
},
link: this.kudosUrl()
};
return actions.concat([kudosAction]);
}
return actions;
}
}, {
key: "renderPopup",
value: function renderPopup() {
var _this4 = this;
if (this.state.renderError) {
return this.props.children;
}
return /*#__PURE__*/React.createElement(ErrorBoundary, {
onError: this.onErrorBoundary
}, /*#__PURE__*/React.createElement(Popup, {
isOpen: !!this.state.visible,
onClose: this.onClose,
placement: this.props.position,
content: this.renderProfileCard,
trigger: function trigger(triggerProps) {
return _this4.renderTrigger(triggerProps);
},
zIndex: layers.modal(),
shouldFlip: true,
autoFocus: this.props.trigger !== 'hover' && !this.openedByHover,
shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card') && this.props.shouldRenderToParent
}));
}
}, {
key: "render",
value: function render() {
if (this.props.children) {
return this.renderPopup();
} else {
throw new Error('Component "TeamProfileCardTrigger" must have "children" property');
}
}
}]);
}(React.PureComponent);
_defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
actions: [],
trigger: 'hover',
position: 'bottom-start',
triggerLinkType: 'link',
shouldRenderToParent: true
});
export default withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal));