@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
229 lines (226 loc) • 8.75 kB
JavaScript
/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v2.0.0 */
import "./ProfileCardComponent.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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
const LEADING_AT_SIGN_RE = /^@/;
const AgentProfileCardResourcedLazy = Loadable({
loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
'@atlaskit/profilecard/agent-profile-card-resourced').then(({
AgentProfileCardResourced
}) => AgentProfileCardResourced),
loading: () => null
});
const styles = {
loadingStyles: "_2rko12b0 _16qs130s"
};
const LoadingWrapper = ({
children,
isLoading
}) => isLoading ? /*#__PURE__*/React.createElement("div", {
className: ax([styles.loadingStyles])
}, children) : children;
export const isAgentMentionType = userType => userType === 'APP' || userType === 'AGENT';
export const useProfileCardState = ({
id,
provider
}) => {
const [data, setData] = useState();
const [reportingLinesData, setReportingLinesData] = useState(undefined);
const [shouldShowGiveKudos, setShouldShowGiveKudos] = useState(false);
const [teamCentralBaseUrl, setTeamCentralBaseUrl] = useState(undefined);
const [isLoading, setIsLoading] = useState(false);
const [hasError, setHasError] = useState(false);
// From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
useEffect(() => {
const fetchData = async () => {
if (!id || !provider) {
return;
}
setIsLoading(true);
try {
const [data, reportingLines, shouldGiveKudos, teamCentralBaseUrl] = await Promise.all([provider === null || provider === void 0 ? void 0 : provider.resourceClient.getProfile((provider === null || provider === void 0 ? void 0 : provider.cloudId) || '', id, () => {}), 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
})]);
setData(data);
setReportingLinesData(reportingLines);
setShouldShowGiveKudos(shouldGiveKudos !== null && shouldGiveKudos !== void 0 ? shouldGiveKudos : false);
setTeamCentralBaseUrl(teamCentralBaseUrl);
setHasError(false);
} catch {
setHasError(true);
} finally {
setIsLoading(false);
}
};
fetchData();
}, [id, provider]);
return {
data,
reportingLinesData,
shouldShowGiveKudos,
teamCentralBaseUrl,
isLoading,
hasError
};
};
/**
* Renders the profile card popup for an editor mention node.
*/
export function ProfileCardComponent({
profilecardProvider,
activeMention,
dom,
closeComponent,
onAgentMentionChatClick,
placement,
offset,
disableFocusTrap,
hideActions
}) {
var _ref;
const [provider, setProvider] = useState(undefined);
useEffect(() => {
profilecardProvider === null || profilecardProvider === void 0 ? void 0 : profilecardProvider.then(p => {
setProvider(p);
});
}, [profilecardProvider]);
const {
id,
text,
accessLevel,
userType
} = (_ref = activeMention.attrs) !== null && _ref !== void 0 ? _ref : {};
useEffect(() => {
return bind(window, {
type: 'keydown',
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
}));
}
const 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') ? (event, agentStudioId) =>
// 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
}));
}
const UserProfileCardContent = ({
accessLevel,
id,
provider,
text,
hideActions
}) => {
const actions = useMemo(() => hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [hideActions, accessLevel, id, provider, text]);
const {
data,
reportingLinesData,
shouldShowGiveKudos,
teamCentralBaseUrl,
isLoading,
hasError
} = useProfileCardState({
id,
provider
});
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)
}));
};
const AgentProfileCardContent = ({
accountId,
provider,
text,
onChatClick,
hideActions
}) => {
const 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
});
};