export function renderOrgHierarchy()

in src/contactCard/OrgDetails.tsx [7:35]


export function renderOrgHierarchy(profile: IPersonaProfile, allManagers: IPersonaProfile[] | undefined, directs: IPersonaProfile[] | undefined, onPersonaClick: (profile: IPersonaProfile) => void): React.ReactNode {
    return allManagers ?
        (
            <>
                <Label className="org-hierarchy-title">Organization</Label>
                <ul className={css("org-hierarchy", AnimationClassNames.slideLeftIn400)}>
                    {renderAllManagers(allManagers, onPersonaClick)}
                    <li className="person-current">
                        <Persona
                            id={profile.id}
                            displayName={profile.displayName}
                            showMode={PersonaShowMode.NameTitleDepartment}
                            size={PersonaSize.size48}
                        />
                    </li>
                    {renderDirects(directs, onPersonaClick)}
                </ul>
            </>
        ) :
        (
            <ul className={css("org-hierarchy", AnimationClassNames.slideLeftIn400)}>
                <li className="person"><Shimmer shimmerElements={[{ type: ShimmerElementType.circle, height: 48 }, { type: ShimmerElementType.gap, width: 12 }, { type: ShimmerElementType.line }]} width={"80%"} /></li>
                <div className="hierarchy-splitter" />
                <li className="person"><Shimmer shimmerElements={[{ type: ShimmerElementType.circle, height: 48 }, { type: ShimmerElementType.gap, width: 12 }, { type: ShimmerElementType.line }]} width={"80%"} /></li>
                <div className="hierarchy-splitter" />
                <li className="person"><Shimmer shimmerElements={[{ type: ShimmerElementType.circle, height: 48 }, { type: ShimmerElementType.gap, width: 12 }, { type: ShimmerElementType.line }]} width={"80%"} /></li>
            </ul>
        );
}