@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
290 lines (287 loc) • 12.3 kB
JavaScript
/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v2.0.0 */
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./ProfileCardComponent.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useEffect, useMemo, useState } from 'react';
import { bind } from 'bind-event-listener';
import Loadable from 'react-loadable';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { ProfileCardLazy } from '@atlaskit/profilecard/user';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
import { Popup } from './PopperWrapper';
// eslint-disable-next-line require-unicode-regexp
var LEADING_AT_SIGN_RE = /^@/;
var AgentProfileCardResourcedLazy = Loadable({
loader: function loader() {
return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
'@atlaskit/profilecard/agent-profile-card-resourced').then(function (_ref) {
var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
return AgentProfileCardResourced;
});
},
loading: function loading() {
return null;
}
});
var styles = {
loadingStyles: "_2rko12b0 _16qs130s"
};
var LoadingWrapper = function LoadingWrapper(_ref2) {
var children = _ref2.children,
isLoading = _ref2.isLoading;
return isLoading ? /*#__PURE__*/React.createElement("div", {
className: ax([styles.loadingStyles])
}, children) : children;
};
export var isAgentMentionType = function isAgentMentionType(userType) {
return userType === 'APP' || userType === 'AGENT';
};
export var useProfileCardState = function useProfileCardState(_ref3) {
var id = _ref3.id,
provider = _ref3.provider;
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
data = _useState2[0],
setData = _useState2[1];
var _useState3 = useState(undefined),
_useState4 = _slicedToArray(_useState3, 2),
reportingLinesData = _useState4[0],
setReportingLinesData = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
shouldShowGiveKudos = _useState6[0],
setShouldShowGiveKudos = _useState6[1];
var _useState7 = useState(undefined),
_useState8 = _slicedToArray(_useState7, 2),
teamCentralBaseUrl = _useState8[0],
setTeamCentralBaseUrl = _useState8[1];
var _useState9 = useState(false),
_useState0 = _slicedToArray(_useState9, 2),
isLoading = _useState0[0],
setIsLoading = _useState0[1];
var _useState1 = useState(false),
_useState10 = _slicedToArray(_useState1, 2),
hasError = _useState10[0],
setHasError = _useState10[1];
// From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
useEffect(function () {
var fetchData = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(!id || !provider)) {
_context.next = 1;
break;
}
return _context.abrupt("return");
case 1:
setIsLoading(true);
_context.prev = 2;
_context.next = 3;
return Promise.all([provider === null || provider === void 0 ? void 0 : provider.resourceClient.getProfile((provider === null || provider === void 0 ? void 0 : provider.cloudId) || '', id, function () {}), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getReportingLines(id), provider === null || provider === void 0 ? void 0 : provider.resourceClient.shouldShowGiveKudos(), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getTeamCentralBaseUrl({
withOrgContext: true,
withSiteContext: true
})]);
case 3:
_yield$Promise$all = _context.sent;
_yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 4);
_data = _yield$Promise$all2[0];
reportingLines = _yield$Promise$all2[1];
shouldGiveKudos = _yield$Promise$all2[2];
_teamCentralBaseUrl = _yield$Promise$all2[3];
setData(_data);
setReportingLinesData(reportingLines);
setShouldShowGiveKudos(shouldGiveKudos !== null && shouldGiveKudos !== void 0 ? shouldGiveKudos : false);
setTeamCentralBaseUrl(_teamCentralBaseUrl);
setHasError(false);
_context.next = 5;
break;
case 4:
_context.prev = 4;
_t = _context["catch"](2);
setHasError(true);
case 5:
_context.prev = 5;
setIsLoading(false);
return _context.finish(5);
case 6:
case "end":
return _context.stop();
}
}, _callee, null, [[2, 4, 5, 6]]);
}));
return function fetchData() {
return _ref4.apply(this, arguments);
};
}();
fetchData();
}, [id, provider]);
return {
data: data,
reportingLinesData: reportingLinesData,
shouldShowGiveKudos: shouldShowGiveKudos,
teamCentralBaseUrl: teamCentralBaseUrl,
isLoading: isLoading,
hasError: hasError
};
};
/**
* Renders the profile card popup for an editor mention node.
*/
export function ProfileCardComponent(_ref5) {
var _ref7;
var profilecardProvider = _ref5.profilecardProvider,
activeMention = _ref5.activeMention,
dom = _ref5.dom,
closeComponent = _ref5.closeComponent,
onAgentMentionChatClick = _ref5.onAgentMentionChatClick,
placement = _ref5.placement,
offset = _ref5.offset,
disableFocusTrap = _ref5.disableFocusTrap,
hideActions = _ref5.hideActions;
var _useState11 = useState(undefined),
_useState12 = _slicedToArray(_useState11, 2),
provider = _useState12[0],
setProvider = _useState12[1];
useEffect(function () {
profilecardProvider === null || profilecardProvider === void 0 || profilecardProvider.then(function (p) {
setProvider(p);
});
}, [profilecardProvider]);
var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
id = _ref6.id,
text = _ref6.text,
accessLevel = _ref6.accessLevel,
userType = _ref6.userType;
useEffect(function () {
return bind(window, {
type: 'keydown',
listener: function listener(e) {
if (e.key === 'Escape') {
closeComponent();
}
}
});
});
if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
return /*#__PURE__*/React.createElement(Popup, {
referenceElement: dom,
placement: placement,
offset: offset,
disableFocusTrap: disableFocusTrap
}, /*#__PURE__*/React.createElement(UserProfileCardContent, {
accessLevel: accessLevel,
id: id,
provider: provider,
text: text,
hideActions: hideActions
}));
}
var isAgentMention = isAgentMentionType(userType);
return /*#__PURE__*/React.createElement(Popup, {
referenceElement: dom,
placement: placement,
offset: offset,
disableFocusTrap: disableFocusTrap
}, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
accountId: id,
provider: provider,
hideActions: hideActions,
text: expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? text : undefined,
onChatClick: onAgentMentionChatClick && fg('platform_editor_agent_mentions_drop_one_fixes') ? function (event, agentStudioId) {
return (
// agentMentionContext is already captured in the onAgentMentionChatClick
// closure built by profileCardRenderer at chip-click time via doc.descendants()
onAgentMentionChatClick(agentStudioId !== null && agentStudioId !== void 0 ? agentStudioId : id)
);
} : undefined
}) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
accessLevel: accessLevel,
id: id,
provider: provider,
text: text,
hideActions: hideActions
}));
}
var UserProfileCardContent = function UserProfileCardContent(_ref8) {
var accessLevel = _ref8.accessLevel,
id = _ref8.id,
provider = _ref8.provider,
text = _ref8.text,
hideActions = _ref8.hideActions;
var actions = useMemo(function () {
return hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
}, [hideActions, accessLevel, id, provider, text]);
var _useProfileCardState = useProfileCardState({
id: id,
provider: provider
}),
data = _useProfileCardState.data,
reportingLinesData = _useProfileCardState.reportingLinesData,
shouldShowGiveKudos = _useProfileCardState.shouldShowGiveKudos,
teamCentralBaseUrl = _useProfileCardState.teamCentralBaseUrl,
isLoading = _useProfileCardState.isLoading,
hasError = _useProfileCardState.hasError;
return /*#__PURE__*/React.createElement(LoadingWrapper, {
isLoading: isLoading
}, /*#__PURE__*/React.createElement(ProfileCardLazy, {
avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
accountType: data === null || data === void 0 ? void 0 : data.accountType,
status: data === null || data === void 0 ? void 0 : data.status,
statusModifiedDate: data === null || data === void 0 ? void 0 : data.statusModifiedDate,
timestring: data === null || data === void 0 ? void 0 : data.timestring,
isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
isBot: data === null || data === void 0 ? void 0 : data.isBot,
fullName: data === null || data === void 0 ? void 0 : data.fullName,
userId: id,
cloudId: provider === null || provider === void 0 ? void 0 : provider.cloudId,
actions: actions,
isLoading: isLoading,
location: data === null || data === void 0 ? void 0 : data.location,
companyName: data === null || data === void 0 ? void 0 : data.companyName,
customLozenges: data === null || data === void 0 ? void 0 : data.customLozenges,
nickname: data === null || data === void 0 ? void 0 : data.nickname,
email: data === null || data === void 0 ? void 0 : data.email,
hasError: hasError,
reportingLines: reportingLinesData,
isKudosEnabled: shouldShowGiveKudos,
teamCentralBaseUrl: teamCentralBaseUrl,
isRenderedInPortal: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
}));
};
var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
var accountId = _ref9.accountId,
provider = _ref9.provider,
text = _ref9.text,
onChatClick = _ref9.onChatClick,
hideActions = _ref9.hideActions;
var agentName = (text !== null && text !== void 0 ? text : '').replace(LEADING_AT_SIGN_RE, '');
return expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
accountId: accountId,
cloudId: provider.cloudId,
resourceClient: provider.resourceClient,
agentName: agentName,
onChatClick: onChatClick,
hideAgentActions: hideActions,
hideConversationStarters: hideActions,
hideStarButton: hideActions,
hideAiDisclaimer: hideActions,
showCreatorNameWithoutLink: hideActions
}) : /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
accountId: accountId,
cloudId: provider.cloudId,
resourceClient: provider.resourceClient,
onChatClick: onChatClick,
hideAgentActions: hideActions,
hideConversationStarters: hideActions,
hideStarButton: hideActions,
hideAiDisclaimer: hideActions,
showCreatorNameWithoutLink: hideActions
});
};