/
LivePersona.tsx
45 lines (40 loc) · 1.44 KB
/
LivePersona.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import * as React from "react";
import { createElement, useEffect, useRef } from "react";
import { useState } from "react";
import { Log } from "@microsoft/sp-core-library";
import { SPComponentLoader } from "@microsoft/sp-loader";
import { ILivePersonatProps} from '.';
const LIVE_PERSONA_COMPONENT_ID: string = "914330ee-2df2-4f6e-a858-30c23a812408";
export const LivePersona: React.FunctionComponent<ILivePersonatProps> = (
props: React.PropsWithChildren<ILivePersonatProps>
) => {
const [isComponentLoaded, setIsComponentLoaded] = useState<boolean>(false);
const sharedLibrary = useRef<any>();
const { upn, template, disableHover, serviceScope } = props;
useEffect(() => {
(async () => {
if (!isComponentLoaded) {
try {
sharedLibrary.current = await SPComponentLoader.loadComponentById(LIVE_PERSONA_COMPONENT_ID);
setIsComponentLoaded(true);
} catch (error) {
Log.error(`[LivePersona]`, error, serviceScope );
}
}
})();
}, []);
let renderPersona: JSX.Element = null;
if (isComponentLoaded) {
renderPersona = createElement(sharedLibrary.current.LivePersonaCard, {
className: 'livePersonaCard',
clientScenario: 'livePersonaCard',
disableHover: disableHover,
hostAppPersonaInfo: {
PersonaType: 'User'
},
upn: upn,
serviceScope: serviceScope,
}, createElement("div",{},template));
}
return renderPersona;
};