@atlaskit/profilecard 26.2.4 → 26.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js +1 -1
- package/dist/cjs/client/getTeamFromAGG.js +1 -1
- package/dist/cjs/components/Team/TeamProfileCardTrigger.js +10 -446
- package/dist/cjs/util/analytics.js +2 -2
- package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js +1 -1
- package/dist/es2019/client/getTeamFromAGG.js +1 -1
- package/dist/es2019/components/Team/TeamProfileCardTrigger.js +8 -403
- package/dist/es2019/util/analytics.js +2 -2
- package/dist/esm/client/getOrgIdForCloudIdFromAGG.js +1 -1
- package/dist/esm/client/getTeamFromAGG.js +1 -1
- package/dist/esm/components/Team/TeamProfileCardTrigger.js +9 -442
- package/dist/esm/util/analytics.js +2 -2
- package/dist/types/components/Team/TeamProfileCardTrigger.d.ts +7 -61
- package/dist/types/types.d.ts +0 -76
- package/docs/2-team-profilecard.tsx +28 -53
- package/package.json +2 -4
|
@@ -1,446 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
|
-
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
12
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
13
|
-
import React, { Suspense } from 'react';
|
|
14
|
-
import { FormattedMessage, injectIntl } from 'react-intl';
|
|
15
|
-
import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
|
-
import Popup from '@atlaskit/popup';
|
|
18
|
-
import { Box } from '@atlaskit/primitives/compiled';
|
|
19
|
-
import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
|
|
20
|
-
import { layers } from '@atlaskit/theme/constants';
|
|
21
|
-
import _filterActions from '../../internal/filterActions';
|
|
22
|
-
import messages from '../../messages';
|
|
23
|
-
import { PACKAGE_META_DATA } from '../../util/analytics';
|
|
24
|
-
import { isBasicClick } from '../../util/click';
|
|
25
|
-
import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
|
|
26
|
-
import { getPageTime } from '../../util/performance';
|
|
27
|
-
import { ErrorBoundary } from '../Error';
|
|
28
|
-
import { TeamProfileCardLazy } from './lazyTeamProfileCard';
|
|
29
|
-
import TeamLoadingState from './TeamLoadingState';
|
|
30
|
-
export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
31
|
-
function TeamProfileCardTriggerInternal() {
|
|
32
|
-
var _this;
|
|
33
|
-
_classCallCheck(this, TeamProfileCardTriggerInternal);
|
|
34
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
35
|
-
args[_key] = arguments[_key];
|
|
36
|
-
}
|
|
37
|
-
_this = _callSuper(this, TeamProfileCardTriggerInternal, [].concat(args));
|
|
38
|
-
_defineProperty(_this, "_isMounted", false);
|
|
39
|
-
_defineProperty(_this, "showTimer", 0);
|
|
40
|
-
_defineProperty(_this, "hideTimer", 0);
|
|
41
|
-
_defineProperty(_this, "openedByHover", false);
|
|
42
|
-
_defineProperty(_this, "openTime", 0);
|
|
43
|
-
_defineProperty(_this, "fireAnalytics", function (eventKey) {
|
|
44
|
-
// Don't fire any analytics if the component is unmounted
|
|
45
|
-
if (!_this._isMounted) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
if (_this.props.fireEvent) {
|
|
49
|
-
var _this$props;
|
|
50
|
-
for (var _len2 = arguments.length, attributes = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
51
|
-
attributes[_key2 - 1] = arguments[_key2];
|
|
52
|
-
}
|
|
53
|
-
(_this$props = _this.props).fireEvent.apply(_this$props, [eventKey].concat(attributes));
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
_defineProperty(_this, "fireAnalyticsWithDuration", function (eventKey, generator) {
|
|
57
|
-
var duration = getPageTime() - _this.openTime;
|
|
58
|
-
var attributes = generator(duration);
|
|
59
|
-
_this.fireAnalytics(eventKey, attributes);
|
|
60
|
-
});
|
|
61
|
-
_defineProperty(_this, "hideProfilecard", function () {
|
|
62
|
-
var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
63
|
-
clearTimeout(_this.showTimer);
|
|
64
|
-
clearTimeout(_this.hideTimer);
|
|
65
|
-
_this.hideTimer = window.setTimeout(function () {
|
|
66
|
-
_this.setState({
|
|
67
|
-
visible: false
|
|
68
|
-
});
|
|
69
|
-
}, delay);
|
|
70
|
-
});
|
|
71
|
-
_defineProperty(_this, "showProfilecard", function () {
|
|
72
|
-
var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
73
|
-
clearTimeout(_this.hideTimer);
|
|
74
|
-
clearTimeout(_this.showTimer);
|
|
75
|
-
_this.showTimer = window.setTimeout(function () {
|
|
76
|
-
if (!_this.state.visible) {
|
|
77
|
-
_this.clientFetchProfile();
|
|
78
|
-
_this.openTime = getPageTime();
|
|
79
|
-
_this.setState({
|
|
80
|
-
visible: true
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
}, delay);
|
|
84
|
-
});
|
|
85
|
-
_defineProperty(_this, "onClick", function (event) {
|
|
86
|
-
if (_this.props.triggerLinkType === 'link') {
|
|
87
|
-
// We want to prevent navigation occurring on basic click, but it's important that
|
|
88
|
-
// cmd+click, ctrl+click, etc. still work as expected.
|
|
89
|
-
if (isBasicClick(event)) {
|
|
90
|
-
event.preventDefault();
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
if (_this.props.triggerLinkType === 'clickable-link') {
|
|
94
|
-
if (_this.props.viewProfileOnClick) {
|
|
95
|
-
_this.props.viewProfileOnClick(event);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
if (_this.props.trigger !== 'hover') {
|
|
99
|
-
_this.openedByHover = false;
|
|
100
|
-
_this.showProfilecard(0);
|
|
101
|
-
if (!_this.state.visible) {
|
|
102
|
-
_this.fireAnalytics('ui.teamProfileCard.triggered', _objectSpread(_objectSpread({
|
|
103
|
-
method: 'click'
|
|
104
|
-
}, PACKAGE_META_DATA), {}, {
|
|
105
|
-
firedAt: Math.round(getPageTime()),
|
|
106
|
-
teamId: _this.props.teamId
|
|
107
|
-
}));
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
_defineProperty(_this, "onMouseEnter", function () {
|
|
112
|
-
if (_this.props.trigger === 'click') {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
if (!_this.state.visible) {
|
|
116
|
-
_this.openedByHover = true;
|
|
117
|
-
_this.fireAnalytics('ui.teamProfileCard.triggered', _objectSpread(_objectSpread({
|
|
118
|
-
method: 'hover'
|
|
119
|
-
}, PACKAGE_META_DATA), {}, {
|
|
120
|
-
firedAt: Math.round(getPageTime()),
|
|
121
|
-
teamId: _this.props.teamId
|
|
122
|
-
}));
|
|
123
|
-
}
|
|
124
|
-
_this.showProfilecard(DELAY_MS_SHOW);
|
|
125
|
-
});
|
|
126
|
-
_defineProperty(_this, "onMouseLeave", function () {
|
|
127
|
-
if (_this.props.trigger === 'click') {
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
if (_this.openedByHover) {
|
|
131
|
-
_this.hideProfilecard(DELAY_MS_HIDE);
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
_defineProperty(_this, "onKeyPress", function (event) {
|
|
135
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
136
|
-
event.preventDefault();
|
|
137
|
-
_this.setState({
|
|
138
|
-
isTriggeredByKeyboard: true
|
|
139
|
-
});
|
|
140
|
-
_this.showProfilecard(0);
|
|
141
|
-
if (!_this.state.visible) {
|
|
142
|
-
_this.fireAnalytics('ui.teamProfileCard.triggered', _objectSpread({
|
|
143
|
-
method: 'click',
|
|
144
|
-
firedAt: Math.round(getPageTime()),
|
|
145
|
-
teamId: _this.props.teamId
|
|
146
|
-
}, PACKAGE_META_DATA));
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
_defineProperty(_this, "onClose", function () {
|
|
151
|
-
_this.hideProfilecard();
|
|
152
|
-
_this.setState({
|
|
153
|
-
isTriggeredByKeyboard: false
|
|
154
|
-
});
|
|
155
|
-
});
|
|
156
|
-
_defineProperty(_this, "openKudosDrawer", function () {
|
|
157
|
-
_this.hideProfilecard(DELAY_MS_HIDE);
|
|
158
|
-
_this.setState({
|
|
159
|
-
kudosDrawerOpen: true
|
|
160
|
-
});
|
|
161
|
-
});
|
|
162
|
-
_defineProperty(_this, "closeKudosDrawer", function () {
|
|
163
|
-
_this.setState({
|
|
164
|
-
kudosDrawerOpen: false
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
_defineProperty(_this, "kudosUrl", function () {
|
|
168
|
-
var recipientId = _this.props.teamId && "&recipientId=".concat(_this.props.teamId) || '';
|
|
169
|
-
var cloudId = _this.props.cloudId && "&cloudId=".concat(_this.props.cloudId) || '';
|
|
170
|
-
return "".concat(_this.state.teamCentralBaseUrl, "/kudos/give?type=team").concat(recipientId).concat(cloudId);
|
|
171
|
-
});
|
|
172
|
-
_defineProperty(_this, "stopPropagation", function (event) {
|
|
173
|
-
// We need to stop propagation when users click on the card, so that it
|
|
174
|
-
// doesn't trigger any special effects that occur when clicking the trigger.
|
|
175
|
-
event.stopPropagation();
|
|
176
|
-
});
|
|
177
|
-
_defineProperty(_this, "triggerListeners", {
|
|
178
|
-
onClick: _this.onClick,
|
|
179
|
-
onMouseEnter: _this.onMouseEnter,
|
|
180
|
-
onMouseLeave: _this.onMouseLeave
|
|
181
|
-
});
|
|
182
|
-
_defineProperty(_this, "cardListeners", {
|
|
183
|
-
onClick: _this.stopPropagation,
|
|
184
|
-
onMouseEnter: _this.onMouseEnter,
|
|
185
|
-
onMouseLeave: _this.onMouseLeave
|
|
186
|
-
});
|
|
187
|
-
_defineProperty(_this, "state", {
|
|
188
|
-
visible: false,
|
|
189
|
-
isLoading: undefined,
|
|
190
|
-
hasError: false,
|
|
191
|
-
error: null,
|
|
192
|
-
data: null,
|
|
193
|
-
shouldShowGiveKudos: false,
|
|
194
|
-
teamCentralBaseUrl: undefined,
|
|
195
|
-
kudosDrawerOpen: false,
|
|
196
|
-
isTriggeredByKeyboard: false
|
|
197
|
-
});
|
|
198
|
-
_defineProperty(_this, "clientFetchProfile", function () {
|
|
199
|
-
var _this$props2 = _this.props,
|
|
200
|
-
orgId = _this$props2.orgId,
|
|
201
|
-
teamId = _this$props2.teamId;
|
|
202
|
-
var isLoading = _this.state.isLoading;
|
|
203
|
-
if (isLoading === true) {
|
|
204
|
-
// don't fetch data when fetching is in process
|
|
205
|
-
return;
|
|
206
|
-
}
|
|
207
|
-
_this.setState({
|
|
208
|
-
isLoading: true,
|
|
209
|
-
data: null
|
|
210
|
-
}, function () {
|
|
211
|
-
var requests = Promise.all([_this.props.resourceClient.getTeamProfile(teamId, orgId, _this.fireAnalytics), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
|
|
212
|
-
withOrgContext: true,
|
|
213
|
-
withSiteContext: true
|
|
214
|
-
})]);
|
|
215
|
-
requests.then(function (res) {
|
|
216
|
-
var _this2;
|
|
217
|
-
return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
|
|
218
|
-
}, function (err) {
|
|
219
|
-
return _this.handleClientError(err);
|
|
220
|
-
}).catch(function (err) {
|
|
221
|
-
return _this.handleClientError(err);
|
|
222
|
-
});
|
|
223
|
-
});
|
|
224
|
-
});
|
|
225
|
-
_defineProperty(_this, "onErrorBoundary", function () {
|
|
226
|
-
_this.fireAnalytics('ui.teamProfileCard.rendered.errorBoundary', _objectSpread(_objectSpread({}, PACKAGE_META_DATA), {}, {
|
|
227
|
-
firedAt: Math.round(getPageTime()),
|
|
228
|
-
duration: 0
|
|
229
|
-
}));
|
|
230
|
-
_this.setState({
|
|
231
|
-
renderError: true
|
|
232
|
-
});
|
|
233
|
-
});
|
|
234
|
-
_defineProperty(_this, "renderProfileCard", function () {
|
|
235
|
-
var _this$props3 = _this.props,
|
|
236
|
-
generateUserLink = _this$props3.generateUserLink,
|
|
237
|
-
onUserClick = _this$props3.onUserClick,
|
|
238
|
-
viewingUserId = _this$props3.viewingUserId,
|
|
239
|
-
viewProfileLink = _this$props3.viewProfileLink,
|
|
240
|
-
viewProfileOnClick = _this$props3.viewProfileOnClick;
|
|
241
|
-
var _this$state = _this.state,
|
|
242
|
-
data = _this$state.data,
|
|
243
|
-
error = _this$state.error,
|
|
244
|
-
hasError = _this$state.hasError,
|
|
245
|
-
isLoading = _this$state.isLoading;
|
|
246
|
-
var newProps = {
|
|
247
|
-
clientFetchProfile: _this.clientFetchProfile,
|
|
248
|
-
actions: _this.filterActions(),
|
|
249
|
-
analytics: _this.fireAnalyticsWithDuration,
|
|
250
|
-
team: data || undefined,
|
|
251
|
-
generateUserLink: generateUserLink,
|
|
252
|
-
onUserClick: onUserClick,
|
|
253
|
-
viewingUserId: viewingUserId,
|
|
254
|
-
viewProfileLink: viewProfileLink,
|
|
255
|
-
viewProfileOnClick: viewProfileOnClick
|
|
256
|
-
};
|
|
257
|
-
return /*#__PURE__*/React.createElement("div", _this.cardListeners, _this.state.visible && /*#__PURE__*/React.createElement(Suspense, {
|
|
258
|
-
fallback: /*#__PURE__*/React.createElement(TeamLoadingState, {
|
|
259
|
-
analytics: _this.fireAnalyticsWithDuration
|
|
260
|
-
})
|
|
261
|
-
}, /*#__PURE__*/React.createElement(TeamProfileCardLazy, _extends({}, newProps, {
|
|
262
|
-
isLoading: isLoading,
|
|
263
|
-
hasError: hasError,
|
|
264
|
-
errorType: error,
|
|
265
|
-
isTriggeredByKeyboard: _this.state.isTriggeredByKeyboard
|
|
266
|
-
}))));
|
|
267
|
-
});
|
|
268
|
-
_defineProperty(_this, "renderKudosLauncher", function () {
|
|
269
|
-
return _this.state.shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
|
|
270
|
-
fallback: null
|
|
271
|
-
}, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
|
|
272
|
-
isOpen: _this.state.kudosDrawerOpen,
|
|
273
|
-
recipient: {
|
|
274
|
-
type: KudosType.TEAM,
|
|
275
|
-
recipientId: _this.props.teamId
|
|
276
|
-
},
|
|
277
|
-
analyticsSource: "team-profile-card",
|
|
278
|
-
teamCentralBaseUrl: _this.state.teamCentralBaseUrl,
|
|
279
|
-
cloudId: _this.props.cloudId || '',
|
|
280
|
-
addFlag: _this.props.addFlag,
|
|
281
|
-
onClose: _this.closeKudosDrawer
|
|
282
|
-
}));
|
|
283
|
-
});
|
|
284
|
-
_defineProperty(_this, "renderTrigger", function (triggerProps) {
|
|
285
|
-
var _this$props4 = _this.props,
|
|
286
|
-
children = _this$props4.children,
|
|
287
|
-
intl = _this$props4.intl,
|
|
288
|
-
triggerLinkType = _this$props4.triggerLinkType,
|
|
289
|
-
viewProfileLink = _this$props4.viewProfileLink;
|
|
290
|
-
if (triggerLinkType === 'none') {
|
|
291
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/React.createElement(Box, _extends({
|
|
292
|
-
as: "span",
|
|
293
|
-
role: "button",
|
|
294
|
-
testId: "team-profilecard-trigger-wrapper",
|
|
295
|
-
tabIndex: 0,
|
|
296
|
-
"aria-label": intl.formatMessage(messages.teamProfileCardAriaLabel),
|
|
297
|
-
onKeyUp: _this.onKeyPress
|
|
298
|
-
}, triggerProps, _this.triggerListeners), children));
|
|
299
|
-
}
|
|
300
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/React.createElement("a", _extends({
|
|
301
|
-
"data-testid": "team-profilecard-trigger-wrapper"
|
|
302
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
303
|
-
,
|
|
304
|
-
style: {
|
|
305
|
-
color: 'initial',
|
|
306
|
-
textDecoration: 'none'
|
|
307
|
-
},
|
|
308
|
-
href: viewProfileLink
|
|
309
|
-
}, triggerProps, {
|
|
310
|
-
ref: triggerProps.ref
|
|
311
|
-
}, _this.triggerListeners), children));
|
|
312
|
-
});
|
|
313
|
-
return _this;
|
|
314
|
-
}
|
|
315
|
-
_inherits(TeamProfileCardTriggerInternal, _React$PureComponent);
|
|
316
|
-
return _createClass(TeamProfileCardTriggerInternal, [{
|
|
317
|
-
key: "componentDidMount",
|
|
318
|
-
value: function componentDidMount() {
|
|
319
|
-
this._isMounted = true;
|
|
320
|
-
}
|
|
321
|
-
}, {
|
|
322
|
-
key: "componentDidUpdate",
|
|
323
|
-
value: function componentDidUpdate(prevProps) {
|
|
324
|
-
var _this$props5 = this.props,
|
|
325
|
-
orgId = _this$props5.orgId,
|
|
326
|
-
teamId = _this$props5.teamId,
|
|
327
|
-
resourceClient = _this$props5.resourceClient;
|
|
328
|
-
var visible = this.state.visible;
|
|
329
|
-
|
|
330
|
-
// just re-fetching data when the card opens
|
|
331
|
-
if (visible && (teamId !== prevProps.teamId || orgId !== prevProps.orgId || resourceClient !== prevProps.resourceClient)) {
|
|
332
|
-
this.setState({
|
|
333
|
-
isLoading: undefined
|
|
334
|
-
}, this.clientFetchProfile);
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
}, {
|
|
338
|
-
key: "componentWillUnmount",
|
|
339
|
-
value: function componentWillUnmount() {
|
|
340
|
-
this._isMounted = false;
|
|
341
|
-
clearTimeout(this.showTimer);
|
|
342
|
-
clearTimeout(this.hideTimer);
|
|
343
|
-
}
|
|
344
|
-
}, {
|
|
345
|
-
key: "handleClientSuccess",
|
|
346
|
-
value: function handleClientSuccess(team, shouldShowGiveKudos, teamCentralBaseUrl) {
|
|
347
|
-
if (!this._isMounted) {
|
|
348
|
-
return;
|
|
349
|
-
}
|
|
350
|
-
this.setState({
|
|
351
|
-
isLoading: false,
|
|
352
|
-
hasError: false,
|
|
353
|
-
data: team,
|
|
354
|
-
shouldShowGiveKudos: shouldShowGiveKudos,
|
|
355
|
-
teamCentralBaseUrl: teamCentralBaseUrl
|
|
356
|
-
});
|
|
357
|
-
}
|
|
358
|
-
}, {
|
|
359
|
-
key: "handleClientError",
|
|
360
|
-
value: function handleClientError(err) {
|
|
361
|
-
if (!this._isMounted) {
|
|
362
|
-
return;
|
|
363
|
-
}
|
|
364
|
-
this.setState({
|
|
365
|
-
isLoading: false,
|
|
366
|
-
hasError: true,
|
|
367
|
-
error: err
|
|
368
|
-
});
|
|
369
|
-
}
|
|
370
|
-
}, {
|
|
371
|
-
key: "filterActions",
|
|
372
|
-
value: function filterActions() {
|
|
373
|
-
var _this3 = this;
|
|
374
|
-
var actions = _filterActions(this.props.actions, this.state.data);
|
|
375
|
-
if (this.state.shouldShowGiveKudos) {
|
|
376
|
-
var kudosAction = {
|
|
377
|
-
label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
|
|
378
|
-
id: 'give-kudos',
|
|
379
|
-
callback: function callback() {
|
|
380
|
-
_this3.openKudosDrawer();
|
|
381
|
-
},
|
|
382
|
-
link: this.kudosUrl()
|
|
383
|
-
};
|
|
384
|
-
return actions.concat([kudosAction]);
|
|
385
|
-
}
|
|
386
|
-
return actions;
|
|
387
|
-
}
|
|
388
|
-
}, {
|
|
389
|
-
key: "renderPopup",
|
|
390
|
-
value: function renderPopup() {
|
|
391
|
-
var _this4 = this;
|
|
392
|
-
if (this.state.renderError) {
|
|
393
|
-
return this.props.children;
|
|
394
|
-
}
|
|
395
|
-
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
396
|
-
onError: this.onErrorBoundary
|
|
397
|
-
}, /*#__PURE__*/React.createElement(Popup, {
|
|
398
|
-
isOpen: !!this.state.visible,
|
|
399
|
-
onClose: this.onClose,
|
|
400
|
-
placement: this.props.position,
|
|
401
|
-
content: this.renderProfileCard,
|
|
402
|
-
trigger: function trigger(triggerProps) {
|
|
403
|
-
return _this4.renderTrigger(triggerProps);
|
|
404
|
-
},
|
|
405
|
-
zIndex: layers.modal(),
|
|
406
|
-
shouldFlip: true,
|
|
407
|
-
autoFocus: this.props.trigger !== 'hover' && !this.openedByHover,
|
|
408
|
-
shouldRenderToParent: this.props.shouldRenderToParent
|
|
409
|
-
}));
|
|
410
|
-
}
|
|
411
|
-
}, {
|
|
412
|
-
key: "render",
|
|
413
|
-
value: function render() {
|
|
414
|
-
if (this.props.children) {
|
|
415
|
-
return this.renderPopup();
|
|
416
|
-
} else {
|
|
417
|
-
throw new Error('Component "TeamProfileCardTrigger" must have "children" property');
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
}]);
|
|
421
|
-
}(React.PureComponent);
|
|
422
|
-
_defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
|
|
423
|
-
actions: [],
|
|
424
|
-
trigger: 'hover',
|
|
425
|
-
position: 'bottom-start',
|
|
426
|
-
triggerLinkType: 'link',
|
|
427
|
-
shouldRenderToParent: true
|
|
428
|
-
});
|
|
429
|
-
var TeamProfileCardTrigger = function TeamProfileCardTrigger(props) {
|
|
430
|
-
var _useAnalyticsEvents = useAnalyticsEvents(),
|
|
431
|
-
fireEvent = _useAnalyticsEvents.fireEvent;
|
|
432
|
-
if (fg('people-teams-deprecate-profilecard-teams')) {
|
|
433
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
|
|
434
|
-
}
|
|
435
|
-
return /*#__PURE__*/React.createElement(TeamProfileCardTriggerInternal, _extends({}, props, {
|
|
436
|
-
fireEvent: fireEvent
|
|
437
|
-
}));
|
|
438
|
-
};
|
|
1
|
+
import React from 'react';
|
|
439
2
|
|
|
440
3
|
/**
|
|
4
|
+
* @private
|
|
441
5
|
* @deprecated This component is deprecated and provides no functionality.
|
|
442
|
-
* It
|
|
443
|
-
*
|
|
6
|
+
* It simply renders its children without any profile card behavior.
|
|
7
|
+
* Use `@atlassian/team-profilecard` instead for team profile card functionality.
|
|
444
8
|
*/
|
|
445
|
-
var
|
|
446
|
-
|
|
9
|
+
var TeamProfileCardTrigger = function TeamProfileCardTrigger(_ref) {
|
|
10
|
+
var children = _ref.children;
|
|
11
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
12
|
+
};
|
|
13
|
+
export default TeamProfileCardTrigger;
|
|
@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
5
5
|
import { getPageTime } from './performance';
|
|
6
6
|
export var PACKAGE_META_DATA = {
|
|
7
7
|
packageName: (_process$env$_PACKAGE = "@atlaskit/profilecard") !== null && _process$env$_PACKAGE !== void 0 ? _process$env$_PACKAGE : '',
|
|
8
|
-
packageVersion: (_process$env$_PACKAGE2 = "26.2.
|
|
8
|
+
packageVersion: (_process$env$_PACKAGE2 = "26.2.4") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
|
|
9
9
|
};
|
|
10
10
|
var TEAM_SUBJECT = 'teamProfileCard';
|
|
11
11
|
var USER_SUBJECT = 'profilecard';
|
|
@@ -24,7 +24,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
|
|
|
24
24
|
actionSubjectId: actionSubjectId,
|
|
25
25
|
attributes: _objectSpread(_objectSpread({
|
|
26
26
|
packageName: "@atlaskit/profilecard",
|
|
27
|
-
packageVersion: "26.2.
|
|
27
|
+
packageVersion: "26.2.4"
|
|
28
28
|
}, attributes), {}, {
|
|
29
29
|
firedAt: Math.round(getPageTime())
|
|
30
30
|
})
|
|
@@ -1,65 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type WithIntlProps, type WrappedComponentProps } from 'react-intl';
|
|
3
|
-
import { type TriggerProps } from '@atlaskit/popup/types';
|
|
4
|
-
import { type AnalyticsEventAttributes, type FireEventType } from '@atlaskit/teams-app-internal-analytics';
|
|
5
|
-
import type { AnalyticsProps, ProfileCardAction, Team, TeamProfileCardTriggerProps, TeamProfileCardTriggerState } from '../../types';
|
|
6
|
-
export declare class TeamProfileCardTriggerInternal extends React.PureComponent<TeamProfileCardTriggerProps & AnalyticsProps & WrappedComponentProps, TeamProfileCardTriggerState> {
|
|
7
|
-
static defaultProps: {
|
|
8
|
-
actions: never[];
|
|
9
|
-
trigger: 'hover';
|
|
10
|
-
position: 'bottom-start';
|
|
11
|
-
triggerLinkType: 'link';
|
|
12
|
-
shouldRenderToParent: boolean;
|
|
13
|
-
};
|
|
14
|
-
_isMounted: boolean;
|
|
15
|
-
showTimer: number;
|
|
16
|
-
hideTimer: number;
|
|
17
|
-
openedByHover: boolean;
|
|
18
|
-
openTime: number;
|
|
19
|
-
fireAnalytics: FireEventType;
|
|
20
|
-
fireAnalyticsWithDuration: <K extends keyof AnalyticsEventAttributes>(eventKey: K, generator: (duration: number) => AnalyticsEventAttributes[K]) => void;
|
|
21
|
-
hideProfilecard: (delay?: number) => void;
|
|
22
|
-
showProfilecard: (delay?: number) => void;
|
|
23
|
-
onClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
24
|
-
onMouseEnter: () => void;
|
|
25
|
-
onMouseLeave: () => void;
|
|
26
|
-
onKeyPress: (event: React.KeyboardEvent) => void;
|
|
27
|
-
onClose: () => void;
|
|
28
|
-
openKudosDrawer: () => void;
|
|
29
|
-
closeKudosDrawer: () => void;
|
|
30
|
-
kudosUrl: () => string;
|
|
31
|
-
stopPropagation: (event: React.MouseEvent<HTMLElement>) => void;
|
|
32
|
-
triggerListeners: {
|
|
33
|
-
onClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
34
|
-
onMouseEnter: () => void;
|
|
35
|
-
onMouseLeave: () => void;
|
|
36
|
-
};
|
|
37
|
-
cardListeners: {
|
|
38
|
-
onClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
39
|
-
onMouseEnter: () => void;
|
|
40
|
-
onMouseLeave: () => void;
|
|
41
|
-
};
|
|
42
|
-
state: TeamProfileCardTriggerState;
|
|
43
|
-
componentDidMount(): void;
|
|
44
|
-
componentDidUpdate(prevProps: TeamProfileCardTriggerProps): void;
|
|
45
|
-
componentWillUnmount(): void;
|
|
46
|
-
clientFetchProfile: () => void;
|
|
47
|
-
onErrorBoundary: () => void;
|
|
48
|
-
handleClientSuccess(team: Team, shouldShowGiveKudos: boolean, teamCentralBaseUrl: string | undefined): void;
|
|
49
|
-
handleClientError(err: any): void;
|
|
50
|
-
filterActions(): ProfileCardAction[];
|
|
51
|
-
renderProfileCard: () => React.JSX.Element;
|
|
52
|
-
renderKudosLauncher: () => false | React.JSX.Element | undefined;
|
|
53
|
-
renderTrigger: (triggerProps: TriggerProps) => React.JSX.Element;
|
|
54
|
-
renderPopup(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
55
|
-
render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
56
|
-
}
|
|
57
2
|
/**
|
|
3
|
+
* @private
|
|
58
4
|
* @deprecated This component is deprecated and provides no functionality.
|
|
59
|
-
* It
|
|
60
|
-
*
|
|
5
|
+
* It simply renders its children without any profile card behavior.
|
|
6
|
+
* Use `@atlassian/team-profilecard` instead for team profile card functionality.
|
|
61
7
|
*/
|
|
62
|
-
declare const
|
|
63
|
-
|
|
64
|
-
};
|
|
65
|
-
export default
|
|
8
|
+
declare const TeamProfileCardTrigger: ({ children, }: {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
}) => React.JSX.Element;
|
|
11
|
+
export default TeamProfileCardTrigger;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -283,82 +283,6 @@ export interface TeamProfilecardCoreProps {
|
|
|
283
283
|
*/
|
|
284
284
|
viewProfileOnClick?: (event?: React.MouseEvent<Element>) => void;
|
|
285
285
|
}
|
|
286
|
-
export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
|
|
287
|
-
/** The id of the team. */
|
|
288
|
-
teamId: string;
|
|
289
|
-
/**
|
|
290
|
-
Optional orgId. The id of the organization that the team belongs to.
|
|
291
|
-
Not in use.
|
|
292
|
-
*/
|
|
293
|
-
orgId?: string;
|
|
294
|
-
/** An instance of ProfileClient. */
|
|
295
|
-
resourceClient: ProfileClient;
|
|
296
|
-
/**
|
|
297
|
-
The position relative to the trigger that the card should be displayed in.
|
|
298
|
-
*/
|
|
299
|
-
position?: ProfilecardTriggerPosition;
|
|
300
|
-
/**
|
|
301
|
-
The interaction method used to trigger the team profile card to appear.
|
|
302
|
-
|
|
303
|
-
- Click is generally recommended, but your needs may vary.
|
|
304
|
-
|
|
305
|
-
- Hover works for mouse users, but does not support those who use a
|
|
306
|
-
keyboard or screen reader, avoid using this if it's possible or makes
|
|
307
|
-
sense.
|
|
308
|
-
|
|
309
|
-
- Hover-click is usable for scenarios like inline-edits, where mouse users
|
|
310
|
-
cannot click on the trigger without causing side effects, but keyboard
|
|
311
|
-
users are still able to navigate into and trigger the profile card.
|
|
312
|
-
|
|
313
|
-
Look at the "Team Profilecard Trigger" or "Trigger Link Types" examples to
|
|
314
|
-
see how they behave, or ask in #help-people-and-teams-xpc on Slack for our
|
|
315
|
-
recommendations.
|
|
316
|
-
*/
|
|
317
|
-
trigger?: 'hover' | 'click' | 'hover-click';
|
|
318
|
-
/**
|
|
319
|
-
We generally prefer to wrap the trigger in a link to the team profile
|
|
320
|
-
page. This prop determines how that link behaves.
|
|
321
|
-
|
|
322
|
-
- Link is generally the recommended prop (especially in combination with
|
|
323
|
-
click or hover-click for the trigger prop above). It wraps the trigger in
|
|
324
|
-
an anchor tag with the team profile link (that users can interact with
|
|
325
|
-
via middle-click, etc.), but left clicking on the link is suppressed.
|
|
326
|
-
|
|
327
|
-
- None does not wrap the trigger in a link at all. This makes it difficult
|
|
328
|
-
for keyboard or screen reader users to know how to trigger the profile
|
|
329
|
-
card. Generally avoid this.
|
|
330
|
-
|
|
331
|
-
- Clickable-link wraps the trigger in a link with no special behaviour.
|
|
332
|
-
This is suitable for places where you want the trigger to serve primarily
|
|
333
|
-
as a link, and optionally allow hovering to preview the team first.
|
|
334
|
-
|
|
335
|
-
Look at the example on "Trigger Link Types" for more in-depth analysis, or
|
|
336
|
-
ask in #help-people-and-teams-xpc on Slack for our recommendations.
|
|
337
|
-
|
|
338
|
-
@deprecated
|
|
339
|
-
Consumers should always pass it as "none" from now on.
|
|
340
|
-
Consumers should be responsible to implement wrapper of our profilecard trigger, for example a link
|
|
341
|
-
We are keeping the original comments longer for existing exps
|
|
342
|
-
*/
|
|
343
|
-
triggerLinkType?: 'none' | 'link' | 'clickable-link';
|
|
344
|
-
/**
|
|
345
|
-
This is the component that will cause a team profile card to appear when
|
|
346
|
-
interacted with according to the method specified by the trigger prop.
|
|
347
|
-
*/
|
|
348
|
-
children?: React.ReactNode;
|
|
349
|
-
/**
|
|
350
|
-
* Used by the card to show Flags.
|
|
351
|
-
*/
|
|
352
|
-
addFlag?: (flag: any) => void;
|
|
353
|
-
/**
|
|
354
|
-
* Mandatory cloudId. Used to fetch team.
|
|
355
|
-
*/
|
|
356
|
-
cloudId?: string;
|
|
357
|
-
/**
|
|
358
|
-
* Whether the popup should have the parent as its root.
|
|
359
|
-
*/
|
|
360
|
-
shouldRenderToParent?: boolean;
|
|
361
|
-
}
|
|
362
286
|
export interface AgentActionsType {
|
|
363
287
|
onChatClick?: (event: React.MouseEvent) => void;
|
|
364
288
|
onConversationStartersClick?: (starter: ConversationStarter) => void;
|