@atlaskit/profilecard 19.16.3 → 19.17.1
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 +16 -0
- package/afm-post-office/tsconfig.json +78 -0
- package/dist/cjs/client/getTeamFromAGG.js +1 -1
- package/dist/cjs/components/Icon/IconLabel.js +7 -6
- package/dist/cjs/components/Team/TeamProfileCard.js +5 -3
- package/dist/cjs/components/User/OverflowProfileCardButtons.js +4 -2
- package/dist/cjs/components/User/ProfileCardTrigger.js +319 -308
- package/dist/cjs/util/analytics.js +1 -1
- package/dist/es2019/client/getTeamFromAGG.js +1 -1
- package/dist/es2019/components/Icon/IconLabel.js +6 -5
- package/dist/es2019/components/Team/TeamProfileCard.js +4 -2
- package/dist/es2019/components/User/OverflowProfileCardButtons.js +3 -1
- package/dist/es2019/components/User/ProfileCardTrigger.js +267 -276
- package/dist/es2019/util/analytics.js +1 -1
- package/dist/esm/client/getTeamFromAGG.js +1 -1
- package/dist/esm/components/Icon/IconLabel.js +6 -5
- package/dist/esm/components/Team/TeamProfileCard.js +4 -2
- package/dist/esm/components/User/OverflowProfileCardButtons.js +3 -1
- package/dist/esm/components/User/ProfileCardTrigger.js +320 -309
- package/dist/esm/util/analytics.js +1 -1
- package/dist/types/components/User/ProfileCardTrigger.d.ts +1 -1
- package/dist/types-ts4.5/components/User/ProfileCardTrigger.d.ts +1 -1
- package/package.json +7 -10
- package/dist/cjs/components/User/ProfileCardTriggerNext.js +0 -362
- package/dist/es2019/components/User/ProfileCardTriggerNext.js +0 -289
- package/dist/esm/components/User/ProfileCardTriggerNext.js +0 -352
- package/dist/types/components/User/ProfileCardTriggerNext.d.ts +0 -3
- package/dist/types-ts4.5/components/User/ProfileCardTriggerNext.d.ts +0 -3
|
@@ -1,289 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { useIntl } from 'react-intl-next';
|
|
4
|
-
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
5
|
-
import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
-
import Popup from '@atlaskit/popup';
|
|
8
|
-
import { layers } from '@atlaskit/theme/constants';
|
|
9
|
-
import filterActionsInner from '../../internal/filterActions';
|
|
10
|
-
import getLabelMessage from '../../internal/getLabelMessage';
|
|
11
|
-
import { CardWrapper } from '../../styled/Card';
|
|
12
|
-
import { cardTriggered, fireEvent } from '../../util/analytics';
|
|
13
|
-
import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
|
|
14
|
-
import { ProfileCardLazy } from './lazyProfileCard';
|
|
15
|
-
import UserLoadingState from './UserLoadingState';
|
|
16
|
-
export default function ProfilecardTriggerNext({
|
|
17
|
-
autoFocus,
|
|
18
|
-
trigger = 'hover',
|
|
19
|
-
userId,
|
|
20
|
-
cloudId,
|
|
21
|
-
resourceClient,
|
|
22
|
-
actions = [],
|
|
23
|
-
position = 'bottom-start',
|
|
24
|
-
children,
|
|
25
|
-
testId,
|
|
26
|
-
addFlag,
|
|
27
|
-
onReportingLinesClick,
|
|
28
|
-
ariaLabel,
|
|
29
|
-
ariaLabelledBy,
|
|
30
|
-
prepopulatedData,
|
|
31
|
-
disabledAriaAttributes,
|
|
32
|
-
onVisibilityChange,
|
|
33
|
-
offset
|
|
34
|
-
}) {
|
|
35
|
-
const {
|
|
36
|
-
createAnalyticsEvent
|
|
37
|
-
} = useAnalyticsEvents();
|
|
38
|
-
const {
|
|
39
|
-
formatMessage
|
|
40
|
-
} = useIntl();
|
|
41
|
-
const [isMounted, setIsMounted] = useState(false);
|
|
42
|
-
const showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
|
|
43
|
-
const hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
|
|
44
|
-
const showTimer = useRef(0);
|
|
45
|
-
const hideTimer = useRef(0);
|
|
46
|
-
const [visible, setVisible] = useState(false);
|
|
47
|
-
const [isLoading, setIsLoading] = useState(undefined);
|
|
48
|
-
const [hasError, setHasError] = useState(false);
|
|
49
|
-
const [error, setError] = useState(null);
|
|
50
|
-
const [data, setData] = useState(null);
|
|
51
|
-
const [reportingLinesData, setReportingLinesData] = useState(undefined);
|
|
52
|
-
const [shouldShowGiveKudos, setShouldShowGiveKudos] = useState(false);
|
|
53
|
-
const [teamCentralBaseUrl, setTeamCentralBaseUrl] = useState(undefined);
|
|
54
|
-
const [kudosDrawerOpen, setKudosDrawerOpen] = useState(false);
|
|
55
|
-
const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
|
|
56
|
-
const triggerRef = useRef(null);
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
setIsMounted(true);
|
|
59
|
-
return () => {
|
|
60
|
-
setIsMounted(false);
|
|
61
|
-
clearTimeout(showTimer.current);
|
|
62
|
-
clearTimeout(hideTimer.current);
|
|
63
|
-
};
|
|
64
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
-
}, []);
|
|
66
|
-
useEffect(() => {
|
|
67
|
-
// Reset state when the userId changes
|
|
68
|
-
setIsLoading(undefined);
|
|
69
|
-
setHasError(false);
|
|
70
|
-
setError(null);
|
|
71
|
-
setData(null);
|
|
72
|
-
setReportingLinesData(undefined);
|
|
73
|
-
setShouldShowGiveKudos(false);
|
|
74
|
-
setTeamCentralBaseUrl(undefined);
|
|
75
|
-
}, [userId]);
|
|
76
|
-
const fireAnalytics = useCallback(payload => {
|
|
77
|
-
// Don't fire any analytics if the component is unmounted
|
|
78
|
-
if (!isMounted) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
fireEvent(createAnalyticsEvent, payload);
|
|
82
|
-
}, [createAnalyticsEvent, isMounted]);
|
|
83
|
-
const hideProfilecard = useCallback(() => {
|
|
84
|
-
clearTimeout(showTimer.current);
|
|
85
|
-
clearTimeout(hideTimer.current);
|
|
86
|
-
if (!isTriggeredUsingKeyboard) {
|
|
87
|
-
hideTimer.current = window.setTimeout(() => {
|
|
88
|
-
setVisible(false);
|
|
89
|
-
onVisibilityChange && onVisibilityChange(false);
|
|
90
|
-
}, hideDelay);
|
|
91
|
-
}
|
|
92
|
-
}, [hideDelay, isTriggeredUsingKeyboard, onVisibilityChange]);
|
|
93
|
-
const handleKeyboardClose = useCallback(event => {
|
|
94
|
-
if (event.key && event.key !== 'Escape') {
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
if (triggerRef.current) {
|
|
98
|
-
triggerRef.current.focus();
|
|
99
|
-
}
|
|
100
|
-
setTriggeredUsingKeyboard(false);
|
|
101
|
-
setVisible(false);
|
|
102
|
-
onVisibilityChange && onVisibilityChange(false);
|
|
103
|
-
}, [setTriggeredUsingKeyboard, setVisible, onVisibilityChange]);
|
|
104
|
-
const handleClientSuccess = useCallback((profileData, reportingLinesData, shouldShowGiveKudos) => {
|
|
105
|
-
if (!isMounted) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
setIsLoading(false);
|
|
109
|
-
setHasError(false);
|
|
110
|
-
setData(profileData);
|
|
111
|
-
setReportingLinesData(reportingLinesData);
|
|
112
|
-
setShouldShowGiveKudos(shouldShowGiveKudos);
|
|
113
|
-
}, [isMounted, setHasError, setIsLoading, setData, setReportingLinesData, setShouldShowGiveKudos]);
|
|
114
|
-
const handleClientError = useCallback(err => {
|
|
115
|
-
if (!isMounted) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
setIsLoading(false);
|
|
119
|
-
setHasError(true);
|
|
120
|
-
setError(err);
|
|
121
|
-
}, [isMounted, setHasError, setIsLoading, setError]);
|
|
122
|
-
const clientFetchProfile = useCallback(async () => {
|
|
123
|
-
if (isLoading === true) {
|
|
124
|
-
// don't fetch data when fetching is in process
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
setTeamCentralBaseUrl(resourceClient.getTeamCentralBaseUrl());
|
|
128
|
-
setIsLoading(true);
|
|
129
|
-
setHasError(false);
|
|
130
|
-
setError(null);
|
|
131
|
-
setData(null);
|
|
132
|
-
try {
|
|
133
|
-
const requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos()]);
|
|
134
|
-
const responses = await requests;
|
|
135
|
-
handleClientSuccess(...responses);
|
|
136
|
-
} catch (err) {
|
|
137
|
-
handleClientError(err);
|
|
138
|
-
}
|
|
139
|
-
}, [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
|
|
140
|
-
const showProfilecard = useCallback(() => {
|
|
141
|
-
clearTimeout(hideTimer.current);
|
|
142
|
-
clearTimeout(showTimer.current);
|
|
143
|
-
showTimer.current = window.setTimeout(() => {
|
|
144
|
-
if (!visible) {
|
|
145
|
-
void clientFetchProfile();
|
|
146
|
-
setVisible(true);
|
|
147
|
-
onVisibilityChange && onVisibilityChange(true);
|
|
148
|
-
}
|
|
149
|
-
}, showDelay);
|
|
150
|
-
}, [showDelay, visible, clientFetchProfile, onVisibilityChange]);
|
|
151
|
-
const onClick = useCallback(event => {
|
|
152
|
-
// If the user clicks on the trigger then we don't want that click event to
|
|
153
|
-
// propagate out to parent containers. For example when clicking a mention
|
|
154
|
-
// lozenge in an inline-edit.
|
|
155
|
-
event.stopPropagation();
|
|
156
|
-
showProfilecard();
|
|
157
|
-
if (!visible) {
|
|
158
|
-
fireAnalytics(cardTriggered('user', 'click'));
|
|
159
|
-
}
|
|
160
|
-
}, [fireAnalytics, showProfilecard, visible]);
|
|
161
|
-
const onMouseEnter = useCallback(() => {
|
|
162
|
-
showProfilecard();
|
|
163
|
-
if (!visible) {
|
|
164
|
-
fireAnalytics(cardTriggered('user', 'hover'));
|
|
165
|
-
}
|
|
166
|
-
}, [fireAnalytics, showProfilecard, visible]);
|
|
167
|
-
const onKeyPress = useCallback(event => {
|
|
168
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
169
|
-
event.preventDefault();
|
|
170
|
-
setTriggeredUsingKeyboard(true);
|
|
171
|
-
showProfilecard();
|
|
172
|
-
if (!visible) {
|
|
173
|
-
fireAnalytics(cardTriggered('user', 'click'));
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}, [fireAnalytics, showProfilecard, visible]);
|
|
177
|
-
const onFocus = useCallback(() => {
|
|
178
|
-
showProfilecard();
|
|
179
|
-
}, [showProfilecard]);
|
|
180
|
-
const containerListeners = useMemo(() => trigger === 'hover' ? {
|
|
181
|
-
onMouseEnter: onMouseEnter,
|
|
182
|
-
onMouseLeave: hideProfilecard,
|
|
183
|
-
onBlur: hideProfilecard,
|
|
184
|
-
onKeyPress: onKeyPress
|
|
185
|
-
} : {
|
|
186
|
-
onClick: onClick,
|
|
187
|
-
onKeyPress: onKeyPress
|
|
188
|
-
}, [hideProfilecard, onClick, onKeyPress, onMouseEnter, trigger]);
|
|
189
|
-
const filterActions = useCallback(() => {
|
|
190
|
-
return filterActionsInner(actions, data);
|
|
191
|
-
}, [actions, data]);
|
|
192
|
-
const openKudosDrawer = () => {
|
|
193
|
-
hideProfilecard();
|
|
194
|
-
setKudosDrawerOpen(true);
|
|
195
|
-
};
|
|
196
|
-
const closeKudosDrawer = () => {
|
|
197
|
-
setKudosDrawerOpen(false);
|
|
198
|
-
};
|
|
199
|
-
const showLoading = isLoading === true || isLoading === undefined;
|
|
200
|
-
const wrapperProps = useMemo(() => trigger === 'hover' ? {
|
|
201
|
-
onMouseEnter: onMouseEnter,
|
|
202
|
-
onMouseLeave: hideProfilecard,
|
|
203
|
-
onFocus: onFocus
|
|
204
|
-
} : {}, [hideProfilecard, onFocus, onMouseEnter, trigger]);
|
|
205
|
-
const profilecardProps = {
|
|
206
|
-
userId: userId,
|
|
207
|
-
fullName: prepopulatedData === null || prepopulatedData === void 0 ? void 0 : prepopulatedData.fullName,
|
|
208
|
-
isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
|
|
209
|
-
clientFetchProfile: clientFetchProfile,
|
|
210
|
-
...data,
|
|
211
|
-
reportingLines: reportingLinesData,
|
|
212
|
-
onReportingLinesClick: onReportingLinesClick,
|
|
213
|
-
isKudosEnabled: shouldShowGiveKudos,
|
|
214
|
-
teamCentralBaseUrl: teamCentralBaseUrl,
|
|
215
|
-
cloudId: cloudId,
|
|
216
|
-
openKudosDrawer: openKudosDrawer,
|
|
217
|
-
isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
|
|
218
|
-
disabledAriaAttributes: disabledAriaAttributes
|
|
219
|
-
};
|
|
220
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
|
|
221
|
-
isOpen: !!visible,
|
|
222
|
-
onClose: event => {
|
|
223
|
-
hideProfilecard();
|
|
224
|
-
handleKeyboardClose(event);
|
|
225
|
-
},
|
|
226
|
-
placement: position,
|
|
227
|
-
content: () => /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
|
|
228
|
-
fireAnalytics: fireAnalytics
|
|
229
|
-
}) : visible && /*#__PURE__*/React.createElement(Suspense, {
|
|
230
|
-
fallback: null
|
|
231
|
-
}, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
|
|
232
|
-
actions: filterActions(),
|
|
233
|
-
hasError: hasError,
|
|
234
|
-
errorType: error,
|
|
235
|
-
withoutElevation: true
|
|
236
|
-
})))),
|
|
237
|
-
trigger: triggerProps => {
|
|
238
|
-
const {
|
|
239
|
-
ref: callbackRef,
|
|
240
|
-
...innerProps
|
|
241
|
-
} = triggerProps;
|
|
242
|
-
const ref = element => {
|
|
243
|
-
triggerRef.current = element;
|
|
244
|
-
if (typeof callbackRef === 'function') {
|
|
245
|
-
callbackRef(element);
|
|
246
|
-
}
|
|
247
|
-
};
|
|
248
|
-
const {
|
|
249
|
-
'aria-expanded': _,
|
|
250
|
-
'aria-haspopup': __,
|
|
251
|
-
...restInnerProps
|
|
252
|
-
} = innerProps;
|
|
253
|
-
return /*#__PURE__*/React.createElement("span", _extends({}, disabledAriaAttributes ? restInnerProps : triggerProps, containerListeners, {
|
|
254
|
-
ref: ref,
|
|
255
|
-
"data-testid": testId,
|
|
256
|
-
"aria-labelledby": ariaLabelledBy
|
|
257
|
-
}, disabledAriaAttributes ? {} : {
|
|
258
|
-
role: 'button',
|
|
259
|
-
tabIndex: 0,
|
|
260
|
-
'aria-label': getLabelMessage(ariaLabel, profilecardProps.fullName, formatMessage)
|
|
261
|
-
}), children);
|
|
262
|
-
},
|
|
263
|
-
zIndex: layers.modal(),
|
|
264
|
-
shouldUseCaptureOnOutsideClick: true,
|
|
265
|
-
autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click',
|
|
266
|
-
offset: offset !== null && offset !== void 0 ? offset : [0, 8],
|
|
267
|
-
shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card')
|
|
268
|
-
}), shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
|
|
269
|
-
fallback: null
|
|
270
|
-
}, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
|
|
271
|
-
isOpen: kudosDrawerOpen,
|
|
272
|
-
recipient: {
|
|
273
|
-
type: KudosType.INDIVIDUAL,
|
|
274
|
-
recipientId: userId
|
|
275
|
-
},
|
|
276
|
-
analyticsSource: "profile-card",
|
|
277
|
-
teamCentralBaseUrl: teamCentralBaseUrl,
|
|
278
|
-
cloudId: cloudId,
|
|
279
|
-
addFlag: addFlag,
|
|
280
|
-
onClose: closeKudosDrawer
|
|
281
|
-
})));
|
|
282
|
-
}
|
|
283
|
-
const LoadingView = ({
|
|
284
|
-
fireAnalytics
|
|
285
|
-
}) => /*#__PURE__*/React.createElement(CardWrapper, {
|
|
286
|
-
"data-testId": "profilecard.profilecardtrigger.loading"
|
|
287
|
-
}, /*#__PURE__*/React.createElement(UserLoadingState, {
|
|
288
|
-
fireAnalytics: fireAnalytics
|
|
289
|
-
}));
|
|
@@ -1,352 +0,0 @@
|
|
|
1
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
5
|
-
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
6
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
7
|
-
var _excluded = ["ref"],
|
|
8
|
-
_excluded2 = ["aria-expanded", "aria-haspopup"];
|
|
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
|
-
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
12
|
-
import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
13
|
-
import { useIntl } from 'react-intl-next';
|
|
14
|
-
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
15
|
-
import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
|
-
import Popup from '@atlaskit/popup';
|
|
18
|
-
import { layers } from '@atlaskit/theme/constants';
|
|
19
|
-
import filterActionsInner from '../../internal/filterActions';
|
|
20
|
-
import getLabelMessage from '../../internal/getLabelMessage';
|
|
21
|
-
import { CardWrapper } from '../../styled/Card';
|
|
22
|
-
import { cardTriggered, fireEvent } from '../../util/analytics';
|
|
23
|
-
import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
|
|
24
|
-
import { ProfileCardLazy } from './lazyProfileCard';
|
|
25
|
-
import UserLoadingState from './UserLoadingState';
|
|
26
|
-
export default function ProfilecardTriggerNext(_ref) {
|
|
27
|
-
var autoFocus = _ref.autoFocus,
|
|
28
|
-
_ref$trigger = _ref.trigger,
|
|
29
|
-
trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
|
|
30
|
-
userId = _ref.userId,
|
|
31
|
-
cloudId = _ref.cloudId,
|
|
32
|
-
resourceClient = _ref.resourceClient,
|
|
33
|
-
_ref$actions = _ref.actions,
|
|
34
|
-
actions = _ref$actions === void 0 ? [] : _ref$actions,
|
|
35
|
-
_ref$position = _ref.position,
|
|
36
|
-
position = _ref$position === void 0 ? 'bottom-start' : _ref$position,
|
|
37
|
-
children = _ref.children,
|
|
38
|
-
testId = _ref.testId,
|
|
39
|
-
addFlag = _ref.addFlag,
|
|
40
|
-
onReportingLinesClick = _ref.onReportingLinesClick,
|
|
41
|
-
ariaLabel = _ref.ariaLabel,
|
|
42
|
-
ariaLabelledBy = _ref.ariaLabelledBy,
|
|
43
|
-
prepopulatedData = _ref.prepopulatedData,
|
|
44
|
-
disabledAriaAttributes = _ref.disabledAriaAttributes,
|
|
45
|
-
onVisibilityChange = _ref.onVisibilityChange,
|
|
46
|
-
offset = _ref.offset;
|
|
47
|
-
var _useAnalyticsEvents = useAnalyticsEvents(),
|
|
48
|
-
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
|
|
49
|
-
var _useIntl = useIntl(),
|
|
50
|
-
formatMessage = _useIntl.formatMessage;
|
|
51
|
-
var _useState = useState(false),
|
|
52
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
53
|
-
isMounted = _useState2[0],
|
|
54
|
-
setIsMounted = _useState2[1];
|
|
55
|
-
var showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
|
|
56
|
-
var hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
|
|
57
|
-
var showTimer = useRef(0);
|
|
58
|
-
var hideTimer = useRef(0);
|
|
59
|
-
var _useState3 = useState(false),
|
|
60
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
61
|
-
visible = _useState4[0],
|
|
62
|
-
setVisible = _useState4[1];
|
|
63
|
-
var _useState5 = useState(undefined),
|
|
64
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
-
isLoading = _useState6[0],
|
|
66
|
-
setIsLoading = _useState6[1];
|
|
67
|
-
var _useState7 = useState(false),
|
|
68
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
69
|
-
hasError = _useState8[0],
|
|
70
|
-
setHasError = _useState8[1];
|
|
71
|
-
var _useState9 = useState(null),
|
|
72
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
73
|
-
error = _useState10[0],
|
|
74
|
-
setError = _useState10[1];
|
|
75
|
-
var _useState11 = useState(null),
|
|
76
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
77
|
-
data = _useState12[0],
|
|
78
|
-
setData = _useState12[1];
|
|
79
|
-
var _useState13 = useState(undefined),
|
|
80
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
81
|
-
reportingLinesData = _useState14[0],
|
|
82
|
-
setReportingLinesData = _useState14[1];
|
|
83
|
-
var _useState15 = useState(false),
|
|
84
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
85
|
-
shouldShowGiveKudos = _useState16[0],
|
|
86
|
-
setShouldShowGiveKudos = _useState16[1];
|
|
87
|
-
var _useState17 = useState(undefined),
|
|
88
|
-
_useState18 = _slicedToArray(_useState17, 2),
|
|
89
|
-
teamCentralBaseUrl = _useState18[0],
|
|
90
|
-
setTeamCentralBaseUrl = _useState18[1];
|
|
91
|
-
var _useState19 = useState(false),
|
|
92
|
-
_useState20 = _slicedToArray(_useState19, 2),
|
|
93
|
-
kudosDrawerOpen = _useState20[0],
|
|
94
|
-
setKudosDrawerOpen = _useState20[1];
|
|
95
|
-
var _useState21 = useState(false),
|
|
96
|
-
_useState22 = _slicedToArray(_useState21, 2),
|
|
97
|
-
isTriggeredUsingKeyboard = _useState22[0],
|
|
98
|
-
setTriggeredUsingKeyboard = _useState22[1];
|
|
99
|
-
var triggerRef = useRef(null);
|
|
100
|
-
useEffect(function () {
|
|
101
|
-
setIsMounted(true);
|
|
102
|
-
return function () {
|
|
103
|
-
setIsMounted(false);
|
|
104
|
-
clearTimeout(showTimer.current);
|
|
105
|
-
clearTimeout(hideTimer.current);
|
|
106
|
-
};
|
|
107
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
108
|
-
}, []);
|
|
109
|
-
useEffect(function () {
|
|
110
|
-
// Reset state when the userId changes
|
|
111
|
-
setIsLoading(undefined);
|
|
112
|
-
setHasError(false);
|
|
113
|
-
setError(null);
|
|
114
|
-
setData(null);
|
|
115
|
-
setReportingLinesData(undefined);
|
|
116
|
-
setShouldShowGiveKudos(false);
|
|
117
|
-
setTeamCentralBaseUrl(undefined);
|
|
118
|
-
}, [userId]);
|
|
119
|
-
var fireAnalytics = useCallback(function (payload) {
|
|
120
|
-
// Don't fire any analytics if the component is unmounted
|
|
121
|
-
if (!isMounted) {
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
fireEvent(createAnalyticsEvent, payload);
|
|
125
|
-
}, [createAnalyticsEvent, isMounted]);
|
|
126
|
-
var hideProfilecard = useCallback(function () {
|
|
127
|
-
clearTimeout(showTimer.current);
|
|
128
|
-
clearTimeout(hideTimer.current);
|
|
129
|
-
if (!isTriggeredUsingKeyboard) {
|
|
130
|
-
hideTimer.current = window.setTimeout(function () {
|
|
131
|
-
setVisible(false);
|
|
132
|
-
onVisibilityChange && onVisibilityChange(false);
|
|
133
|
-
}, hideDelay);
|
|
134
|
-
}
|
|
135
|
-
}, [hideDelay, isTriggeredUsingKeyboard, onVisibilityChange]);
|
|
136
|
-
var handleKeyboardClose = useCallback(function (event) {
|
|
137
|
-
if (event.key && event.key !== 'Escape') {
|
|
138
|
-
return;
|
|
139
|
-
}
|
|
140
|
-
if (triggerRef.current) {
|
|
141
|
-
triggerRef.current.focus();
|
|
142
|
-
}
|
|
143
|
-
setTriggeredUsingKeyboard(false);
|
|
144
|
-
setVisible(false);
|
|
145
|
-
onVisibilityChange && onVisibilityChange(false);
|
|
146
|
-
}, [setTriggeredUsingKeyboard, setVisible, onVisibilityChange]);
|
|
147
|
-
var handleClientSuccess = useCallback(function (profileData, reportingLinesData, shouldShowGiveKudos) {
|
|
148
|
-
if (!isMounted) {
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
setIsLoading(false);
|
|
152
|
-
setHasError(false);
|
|
153
|
-
setData(profileData);
|
|
154
|
-
setReportingLinesData(reportingLinesData);
|
|
155
|
-
setShouldShowGiveKudos(shouldShowGiveKudos);
|
|
156
|
-
}, [isMounted, setHasError, setIsLoading, setData, setReportingLinesData, setShouldShowGiveKudos]);
|
|
157
|
-
var handleClientError = useCallback(function (err) {
|
|
158
|
-
if (!isMounted) {
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
setIsLoading(false);
|
|
162
|
-
setHasError(true);
|
|
163
|
-
setError(err);
|
|
164
|
-
}, [isMounted, setHasError, setIsLoading, setError]);
|
|
165
|
-
var clientFetchProfile = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
166
|
-
var requests, responses;
|
|
167
|
-
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
168
|
-
while (1) switch (_context.prev = _context.next) {
|
|
169
|
-
case 0:
|
|
170
|
-
if (!(isLoading === true)) {
|
|
171
|
-
_context.next = 2;
|
|
172
|
-
break;
|
|
173
|
-
}
|
|
174
|
-
return _context.abrupt("return");
|
|
175
|
-
case 2:
|
|
176
|
-
setTeamCentralBaseUrl(resourceClient.getTeamCentralBaseUrl());
|
|
177
|
-
setIsLoading(true);
|
|
178
|
-
setHasError(false);
|
|
179
|
-
setError(null);
|
|
180
|
-
setData(null);
|
|
181
|
-
_context.prev = 7;
|
|
182
|
-
requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos()]);
|
|
183
|
-
_context.next = 11;
|
|
184
|
-
return requests;
|
|
185
|
-
case 11:
|
|
186
|
-
responses = _context.sent;
|
|
187
|
-
handleClientSuccess.apply(void 0, _toConsumableArray(responses));
|
|
188
|
-
_context.next = 18;
|
|
189
|
-
break;
|
|
190
|
-
case 15:
|
|
191
|
-
_context.prev = 15;
|
|
192
|
-
_context.t0 = _context["catch"](7);
|
|
193
|
-
handleClientError(_context.t0);
|
|
194
|
-
case 18:
|
|
195
|
-
case "end":
|
|
196
|
-
return _context.stop();
|
|
197
|
-
}
|
|
198
|
-
}, _callee, null, [[7, 15]]);
|
|
199
|
-
})), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
|
|
200
|
-
var showProfilecard = useCallback(function () {
|
|
201
|
-
clearTimeout(hideTimer.current);
|
|
202
|
-
clearTimeout(showTimer.current);
|
|
203
|
-
showTimer.current = window.setTimeout(function () {
|
|
204
|
-
if (!visible) {
|
|
205
|
-
void clientFetchProfile();
|
|
206
|
-
setVisible(true);
|
|
207
|
-
onVisibilityChange && onVisibilityChange(true);
|
|
208
|
-
}
|
|
209
|
-
}, showDelay);
|
|
210
|
-
}, [showDelay, visible, clientFetchProfile, onVisibilityChange]);
|
|
211
|
-
var onClick = useCallback(function (event) {
|
|
212
|
-
// If the user clicks on the trigger then we don't want that click event to
|
|
213
|
-
// propagate out to parent containers. For example when clicking a mention
|
|
214
|
-
// lozenge in an inline-edit.
|
|
215
|
-
event.stopPropagation();
|
|
216
|
-
showProfilecard();
|
|
217
|
-
if (!visible) {
|
|
218
|
-
fireAnalytics(cardTriggered('user', 'click'));
|
|
219
|
-
}
|
|
220
|
-
}, [fireAnalytics, showProfilecard, visible]);
|
|
221
|
-
var onMouseEnter = useCallback(function () {
|
|
222
|
-
showProfilecard();
|
|
223
|
-
if (!visible) {
|
|
224
|
-
fireAnalytics(cardTriggered('user', 'hover'));
|
|
225
|
-
}
|
|
226
|
-
}, [fireAnalytics, showProfilecard, visible]);
|
|
227
|
-
var onKeyPress = useCallback(function (event) {
|
|
228
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
229
|
-
event.preventDefault();
|
|
230
|
-
setTriggeredUsingKeyboard(true);
|
|
231
|
-
showProfilecard();
|
|
232
|
-
if (!visible) {
|
|
233
|
-
fireAnalytics(cardTriggered('user', 'click'));
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
}, [fireAnalytics, showProfilecard, visible]);
|
|
237
|
-
var onFocus = useCallback(function () {
|
|
238
|
-
showProfilecard();
|
|
239
|
-
}, [showProfilecard]);
|
|
240
|
-
var containerListeners = useMemo(function () {
|
|
241
|
-
return trigger === 'hover' ? {
|
|
242
|
-
onMouseEnter: onMouseEnter,
|
|
243
|
-
onMouseLeave: hideProfilecard,
|
|
244
|
-
onBlur: hideProfilecard,
|
|
245
|
-
onKeyPress: onKeyPress
|
|
246
|
-
} : {
|
|
247
|
-
onClick: onClick,
|
|
248
|
-
onKeyPress: onKeyPress
|
|
249
|
-
};
|
|
250
|
-
}, [hideProfilecard, onClick, onKeyPress, onMouseEnter, trigger]);
|
|
251
|
-
var filterActions = useCallback(function () {
|
|
252
|
-
return filterActionsInner(actions, data);
|
|
253
|
-
}, [actions, data]);
|
|
254
|
-
var openKudosDrawer = function openKudosDrawer() {
|
|
255
|
-
hideProfilecard();
|
|
256
|
-
setKudosDrawerOpen(true);
|
|
257
|
-
};
|
|
258
|
-
var closeKudosDrawer = function closeKudosDrawer() {
|
|
259
|
-
setKudosDrawerOpen(false);
|
|
260
|
-
};
|
|
261
|
-
var showLoading = isLoading === true || isLoading === undefined;
|
|
262
|
-
var wrapperProps = useMemo(function () {
|
|
263
|
-
return trigger === 'hover' ? {
|
|
264
|
-
onMouseEnter: onMouseEnter,
|
|
265
|
-
onMouseLeave: hideProfilecard,
|
|
266
|
-
onFocus: onFocus
|
|
267
|
-
} : {};
|
|
268
|
-
}, [hideProfilecard, onFocus, onMouseEnter, trigger]);
|
|
269
|
-
var profilecardProps = _objectSpread(_objectSpread({
|
|
270
|
-
userId: userId,
|
|
271
|
-
fullName: prepopulatedData === null || prepopulatedData === void 0 ? void 0 : prepopulatedData.fullName,
|
|
272
|
-
isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
|
|
273
|
-
clientFetchProfile: clientFetchProfile
|
|
274
|
-
}, data), {}, {
|
|
275
|
-
reportingLines: reportingLinesData,
|
|
276
|
-
onReportingLinesClick: onReportingLinesClick,
|
|
277
|
-
isKudosEnabled: shouldShowGiveKudos,
|
|
278
|
-
teamCentralBaseUrl: teamCentralBaseUrl,
|
|
279
|
-
cloudId: cloudId,
|
|
280
|
-
openKudosDrawer: openKudosDrawer,
|
|
281
|
-
isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
|
|
282
|
-
disabledAriaAttributes: disabledAriaAttributes
|
|
283
|
-
});
|
|
284
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
|
|
285
|
-
isOpen: !!visible,
|
|
286
|
-
onClose: function onClose(event) {
|
|
287
|
-
hideProfilecard();
|
|
288
|
-
handleKeyboardClose(event);
|
|
289
|
-
},
|
|
290
|
-
placement: position,
|
|
291
|
-
content: function content() {
|
|
292
|
-
return /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
|
|
293
|
-
fireAnalytics: fireAnalytics
|
|
294
|
-
}) : visible && /*#__PURE__*/React.createElement(Suspense, {
|
|
295
|
-
fallback: null
|
|
296
|
-
}, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
|
|
297
|
-
actions: filterActions(),
|
|
298
|
-
hasError: hasError,
|
|
299
|
-
errorType: error,
|
|
300
|
-
withoutElevation: true
|
|
301
|
-
}))));
|
|
302
|
-
},
|
|
303
|
-
trigger: function trigger(triggerProps) {
|
|
304
|
-
var callbackRef = triggerProps.ref,
|
|
305
|
-
innerProps = _objectWithoutProperties(triggerProps, _excluded);
|
|
306
|
-
var ref = function ref(element) {
|
|
307
|
-
triggerRef.current = element;
|
|
308
|
-
if (typeof callbackRef === 'function') {
|
|
309
|
-
callbackRef(element);
|
|
310
|
-
}
|
|
311
|
-
};
|
|
312
|
-
var _ = innerProps['aria-expanded'],
|
|
313
|
-
__ = innerProps['aria-haspopup'],
|
|
314
|
-
restInnerProps = _objectWithoutProperties(innerProps, _excluded2);
|
|
315
|
-
return /*#__PURE__*/React.createElement("span", _extends({}, disabledAriaAttributes ? restInnerProps : triggerProps, containerListeners, {
|
|
316
|
-
ref: ref,
|
|
317
|
-
"data-testid": testId,
|
|
318
|
-
"aria-labelledby": ariaLabelledBy
|
|
319
|
-
}, disabledAriaAttributes ? {} : {
|
|
320
|
-
role: 'button',
|
|
321
|
-
tabIndex: 0,
|
|
322
|
-
'aria-label': getLabelMessage(ariaLabel, profilecardProps.fullName, formatMessage)
|
|
323
|
-
}), children);
|
|
324
|
-
},
|
|
325
|
-
zIndex: layers.modal(),
|
|
326
|
-
shouldUseCaptureOnOutsideClick: true,
|
|
327
|
-
autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click',
|
|
328
|
-
offset: offset !== null && offset !== void 0 ? offset : [0, 8],
|
|
329
|
-
shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card')
|
|
330
|
-
}), shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
|
|
331
|
-
fallback: null
|
|
332
|
-
}, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
|
|
333
|
-
isOpen: kudosDrawerOpen,
|
|
334
|
-
recipient: {
|
|
335
|
-
type: KudosType.INDIVIDUAL,
|
|
336
|
-
recipientId: userId
|
|
337
|
-
},
|
|
338
|
-
analyticsSource: "profile-card",
|
|
339
|
-
teamCentralBaseUrl: teamCentralBaseUrl,
|
|
340
|
-
cloudId: cloudId,
|
|
341
|
-
addFlag: addFlag,
|
|
342
|
-
onClose: closeKudosDrawer
|
|
343
|
-
})));
|
|
344
|
-
}
|
|
345
|
-
var LoadingView = function LoadingView(_ref3) {
|
|
346
|
-
var fireAnalytics = _ref3.fireAnalytics;
|
|
347
|
-
return /*#__PURE__*/React.createElement(CardWrapper, {
|
|
348
|
-
"data-testId": "profilecard.profilecardtrigger.loading"
|
|
349
|
-
}, /*#__PURE__*/React.createElement(UserLoadingState, {
|
|
350
|
-
fireAnalytics: fireAnalytics
|
|
351
|
-
}));
|
|
352
|
-
};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { type ProfileCardTriggerProps } from '../../types';
|
|
3
|
-
export default function ProfilecardTriggerNext({ autoFocus, trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, offset, }: ProfileCardTriggerProps): JSX.Element;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { type ProfileCardTriggerProps } from '../../types';
|
|
3
|
-
export default function ProfilecardTriggerNext({ autoFocus, trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, offset, }: ProfileCardTriggerProps): JSX.Element;
|