Add shimmer

This commit is contained in:
AriGunawan 2022-10-16 10:00:29 +10:00
parent 0c8a0b13b6
commit a852bdb8dc
2 changed files with 91 additions and 54 deletions

View File

@ -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));

View File

@ -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} />
)}
</>
); );
}; };