@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
182 lines (180 loc) • 6.82 kB
JavaScript
/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v0.39.1 */
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 { 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';
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
}) {
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
}, /*#__PURE__*/React.createElement(UserProfileCardContent, {
accessLevel: accessLevel,
id: id,
provider: provider,
text: text
}));
}
const isAgentMention = isAgentMentionType(userType);
return /*#__PURE__*/React.createElement(Popup, {
referenceElement: dom
}, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
accountId: id,
provider: provider
}) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
accessLevel: accessLevel,
id: id,
provider: provider,
text: text
}));
}
const AgentProfileCardContent = ({
accountId,
provider
}) => /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
accountId: accountId,
cloudId: provider.cloudId,
resourceClient: provider.resourceClient
});
const UserProfileCardContent = ({
accessLevel,
id,
provider,
text
}) => {
const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [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)
}));
};