Add shimmer
This commit is contained in:
parent
0c8a0b13b6
commit
a852bdb8dc
|
@ -1,21 +1,20 @@
|
||||||
import '../../../assets/dist/tailwind.css';
|
import "../../../assets/dist/tailwind.css";
|
||||||
import '@pnp/sp/search';
|
import "@pnp/sp/search";
|
||||||
import '@pnp/sp/webs';
|
import "@pnp/sp/webs";
|
||||||
import '@pnp/sp/sites';
|
import "@pnp/sp/sites";
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import * as ReactDom from 'react-dom';
|
import * as ReactDom from "react-dom";
|
||||||
|
|
||||||
import { Version } from '@microsoft/sp-core-library';
|
import { Version } from "@microsoft/sp-core-library";
|
||||||
import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
|
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
|
||||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||||
import { SPFI, spfi, SPFx } from '@pnp/sp';
|
import { SPFI, spfi, SPFx } from "@pnp/sp";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
IReactAssociatedHubLinksProps, ReactAssociatedHubLinks
|
IReactAssociatedHubLinksProps,
|
||||||
} from './components/ReactAssociatedHubLinks';
|
ReactAssociatedHubLinks,
|
||||||
import { ILink } from './utils/ILink';
|
} from "./components/ReactAssociatedHubLinks";
|
||||||
import { SearchResults } from '@pnp/sp/search';
|
|
||||||
|
|
||||||
export interface IReactAssociatedHubLinksWebPartProps {
|
export interface IReactAssociatedHubLinksWebPartProps {
|
||||||
description: string;
|
description: string;
|
||||||
|
@ -25,29 +24,14 @@ export default class ReactAssociatedHubLinksWebPart extends BaseClientSideWebPar
|
||||||
private _sp: SPFI;
|
private _sp: SPFI;
|
||||||
|
|
||||||
public async render(): Promise<void> {
|
public async render(): Promise<void> {
|
||||||
const links = await this.getAssociatedSitesLinks();
|
|
||||||
const element: React.ReactElement<IReactAssociatedHubLinksProps> =
|
const element: React.ReactElement<IReactAssociatedHubLinksProps> =
|
||||||
React.createElement(ReactAssociatedHubLinks, {
|
React.createElement(ReactAssociatedHubLinks, {
|
||||||
links,
|
sp: this._sp,
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDom.render(element, this.domElement);
|
ReactDom.render(element, this.domElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected async getAssociatedSitesLinks() {
|
|
||||||
const site = await this._sp.site();
|
|
||||||
const searchResults: SearchResults = await this._sp.search(
|
|
||||||
`DepartmentId=${site.Id} contentclass:sts_site -SiteId:${site.Id}`
|
|
||||||
);
|
|
||||||
const associatedSitesLinks: ILink[] =
|
|
||||||
searchResults.PrimarySearchResults.map((result) => ({
|
|
||||||
title: result.Title,
|
|
||||||
url: result.Path,
|
|
||||||
logoUrl: result.SiteLogo
|
|
||||||
} as ILink));
|
|
||||||
return associatedSitesLinks;
|
|
||||||
}
|
|
||||||
|
|
||||||
protected async onInit(): Promise<void> {
|
protected async onInit(): Promise<void> {
|
||||||
await super.onInit();
|
await super.onInit();
|
||||||
this._sp = spfi().using(SPFx(this.context));
|
this._sp = spfi().using(SPFx(this.context));
|
||||||
|
|
|
@ -1,21 +1,70 @@
|
||||||
import { Icon } from 'office-ui-fabric-react';
|
import { SPFI } from "@pnp/sp";
|
||||||
import * as React from 'react';
|
import { SearchResults } from "@pnp/sp/search";
|
||||||
|
import {
|
||||||
|
Icon,
|
||||||
|
Shimmer,
|
||||||
|
ShimmerElementType,
|
||||||
|
} from "office-ui-fabric-react";
|
||||||
|
import * as React from "react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
import { ILink } from '../utils/ILink';
|
import { ILink } from "../utils/ILink";
|
||||||
|
|
||||||
interface IReactAssociatedHubLinksProps {
|
interface IReactAssociatedHubLinksProps {
|
||||||
links: ILink[];
|
sp: SPFI;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ReactAssociatedHubLinks = (props: IReactAssociatedHubLinksProps): JSX.Element => {
|
const ReactAssociatedHubLinks = (
|
||||||
|
props: IReactAssociatedHubLinksProps
|
||||||
|
): JSX.Element => {
|
||||||
|
const shimmerElements = [
|
||||||
|
{ type: ShimmerElementType.line, width: 255.67, height: 66 },
|
||||||
|
{ type: ShimmerElementType.gap, width: 12 },
|
||||||
|
{ type: ShimmerElementType.line, width: 255.67, height: 66 },
|
||||||
|
{ type: ShimmerElementType.gap, width: 12 },
|
||||||
|
{ type: ShimmerElementType.line, width: 255.67, height: 66 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const [isDataLeaded, setIsDataLoded] = useState(false);
|
||||||
|
const [links, setLinks] = useState<ILink[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getAssociatedSitesLinks()
|
||||||
|
.then((result) => {
|
||||||
|
setLinks(result);
|
||||||
|
setIsDataLoded(true);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
alert("Failed on getting associated sites links.");
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function getAssociatedSitesLinks(): Promise<ILink[]> {
|
||||||
|
const site = await props.sp.site();
|
||||||
|
const searchResults: SearchResults = await props.sp.search(
|
||||||
|
`DepartmentId=${site.Id} contentclass:sts_site -SiteId:${site.Id}`
|
||||||
|
);
|
||||||
|
return searchResults.PrimarySearchResults.map(
|
||||||
|
(result): ILink => ({
|
||||||
|
title: result.Title,
|
||||||
|
url: result.Path,
|
||||||
|
logoUrl: result.SiteLogo,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
{isDataLeaded ? (
|
||||||
<section className={`tw-flex tw-gap-3 tw-flex-wrap`}>
|
<section className={`tw-flex tw-gap-3 tw-flex-wrap`}>
|
||||||
{props.links.map((link) => (
|
{links.map((link) => (
|
||||||
<a
|
<a
|
||||||
key={link.url}
|
key={link.url}
|
||||||
className={`
|
className={`
|
||||||
tw-border tw-border-solid tw-border-[#dddddd] tw-text-lg tw-p-3 tw-no-underline
|
tw-border tw-border-solid tw-border-[#dddddd] tw-text-lg tw-p-3 tw-no-underline
|
||||||
tw-flex tw-gap-4 tw-items-center tw-basis-[27%] hover:tw-bg-gray-100 tw-text-inherit
|
tw-flex tw-gap-4 tw-items-center tw-basis-[32%] hover:tw-bg-gray-100 tw-text-inherit
|
||||||
|
tw-h-[66px] tw-box-border
|
||||||
`}
|
`}
|
||||||
href={link.url}
|
href={link.url}
|
||||||
>
|
>
|
||||||
|
@ -28,6 +77,10 @@ const ReactAssociatedHubLinks = (props: IReactAssociatedHubLinksProps): JSX.Elem
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
</section>
|
</section>
|
||||||
|
) : (
|
||||||
|
<Shimmer shimmerElements={shimmerElements} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue