honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added a Tree View to react-page-hierarchy

This commit is contained in:
Nick Brown 2022-03-31 15:33:25 +01:00
parent 91f3d72725
commit 678536abba
14 changed files with 105 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/react-pages-hierarchy/README.md
View File

@ -20,7 +20,7 @@ extensions:
This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation. It will ask you to create a page parent property on first use which is then used by the web part to either show a breadcrumb of the current pages ancestors or buttons for the pages children.
![Page Navigator](./assets/PagesHierarchy.gif)
![Tree View](./assets/treeview.png)
## Compatibility
@ -48,6 +48,7 @@ This web part allows users to create a faux page hierarchy in their pages librar
Solution|Author(s)
--------|---------
react-pages-hierarchy|[Bo George](https://github.com/bogeorge) ([@bo_george](https://twitter.com/bo_george))
react-pages-hierarchy|[Nick Brown](https://github.com/techienickb) ([@techienickb](https://twitter.com/techienickb))
## Version history
@ -55,6 +56,7 @@ Version|Date|Comments
-------|----|--------
1.0|April 30, 2020|Initial release
1.2|March 24, 2022|Updated to SPFX v1.14 and PnP packages to v3
1.3|March 31, 2322|Added a Tree View
## Minimal Path to Awesome

BIN
samples/react-pages-hierarchy/assets/treeview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

8
samples/react-pages-hierarchy/config/package-solution.json
View File

@ -4,7 +4,7 @@
"name": "react-pages-hierarchy",
"id": "89758fb6-85e2-4e2b-ac88-4f4e7e5f60cb",
"title": "Pages Hierarchy",
"version": "1.0.2.0",
"version": "1.0.3.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"developer": {
@ -39,6 +39,12 @@
"description": "Displays a list of child pages",
"id": "ce42762f-a823-4f12-80b2-b708cdebfaa5",
"version": "1.0.2.0"
},
{
"title": "Tree",
"description": "Displays a list of pages in a tree",
"id": "ce42762f-a823-4f12-80b2-b708cdebfaa6",
"version": "1.0.3.0"
}
]
},

25
samples/react-pages-hierarchy/src/apiHooks/usePageApi.ts
View File

@ -5,6 +5,7 @@ import { Action } from "./action";
import { GetRequest } from './getRequest';
import { IPage } from '@src/models/IPage';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { INavLink } from 'office-ui-fabric-react';
// state that we track
interface PagesState {
@ -12,6 +13,7 @@ interface PagesState {
userCanManagePages: boolean;
ancestorPages: IPage[];
childrenPages: IPage[];
tree: INavLink | null;
getRequest: GetRequest;
}
@ -27,7 +29,8 @@ interface PageApi {
interface PageTreePayloadAction extends Action {
payload: {
childgrenPages: IPage[],
ancestorPages: IPage[]
ancestorPages: IPage[],
tree: INavLink
};
}
interface ParentPageColumnExistAction extends Action {
@ -56,6 +59,7 @@ function pagesReducer(state: PagesState, action: Action): PagesState {
...state,
childrenPages: arrayAction.payload.childgrenPages,
ancestorPages: arrayAction.payload.ancestorPages,
tree: arrayAction.payload.tree,
getRequest: { isLoading: false, hasError: false, errorMessage: "" }
};
case ActionTypes.GET_PAGES_ERRORED:
@ -84,13 +88,14 @@ function pagesReducer(state: PagesState, action: Action): PagesState {
}
}
export function usePageApi(currentPageId: number, pageEditFinished: boolean, context: WebPartContext): PageApi {
export function usePageApi(currentPageId: number, pageEditFinished: boolean, context: WebPartContext, treeTop: number, treeExpandTo: number): PageApi {
const [pagesState, pagesDispatch] = useReducer(pagesReducer, {
parentPageColumnExists: true,
userCanManagePages: false,
ancestorPages: [] = [],
childrenPages: [] = [],
getRequest: { isLoading: false, hasError: false, errorMessage: "" },
tree: null
});
const sp = spfi().using(SPFx(context));
@ -143,11 +148,12 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean, con
const ancestorPages: IPage[] = buildPageAncestors(pages, currentPageId).reverse();
const childrenPages: IPage[] = buildPageChildren(pages, currentPageId);
const treeLink: INavLink = buildHierarchy(pages);
// dispatch the GET_ALL action
pagesDispatch({
type: ActionTypes.GET_PAGES,
payload: { childgrenPages: childrenPages, ancestorPages: ancestorPages },
payload: { childgrenPages: childrenPages, ancestorPages: ancestorPages, tree: treeLink },
} as PageTreePayloadAction);
}
@ -247,6 +253,18 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean, con
return childPages;
}
function buildHierarchy(allPages: IPage[]): INavLink {
function recurse(id: number, l: number): INavLink {
var item: IPage = allPages.filter(i => i.id === id)[0];
var links: INavLink[] = [];
links = links.concat(allPages.filter(i => i.parentPageId === id).map(it => recurse(it.id, (l+1))));
return { name: item.title, url: item.url, key: item.id.toString(), links: links, isExpanded: treeExpandTo >= l };
}
return recurse(treeTop, 1);
}
const addParentPageField = () => {
addParentPageFieldToSitePages();
};
@ -262,6 +280,7 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean, con
hasError: pagesState.getRequest.hasError,
errorMessage: pagesState.getRequest.errorMessage
},
tree: pagesState.tree
},
addParentPageField
};

3
samples/react-pages-hierarchy/src/utilities/Enums.ts
View File

@ -1,7 +1,8 @@
export enum PagesToDisplay {
None = 'none',
Ancestors = 'ancestors',
Children = 'children'
Children = 'children',
Tree = 'tree'
}
export enum RenderDirection {

2
samples/react-pages-hierarchy/src/webparts/pagehierarchy/IPageHierarchyWebPartProps.ts
View File

@ -4,4 +4,6 @@ export default interface IPageHierarchyWebPartProps {
title: string;
debugPageId?: number;
pagesToDisplay: PagesToDisplay;
treeFrom: number;
treeExpandTo: number
}

4
samples/react-pages-hierarchy/src/webparts/pagehierarchy/PageHierarchyWebPart.manifest.json
View File

@ -24,7 +24,9 @@
},
"officeFabricIconFontName": "CompassNW",
"properties": {
"pagesToDisplay": "none"
"pagesToDisplay": "none",
"treeFrom": 1,
"treeExpandTo": 10
}
}
]

26
samples/react-pages-hierarchy/src/webparts/pagehierarchy/PageHierarchyWebPart.ts
View File

@ -54,7 +54,9 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
updateTitle: (t) => { this.properties.title = t; this.render(); },
onConfigure: () => { this.onConfigure(); },
pageEditFinished: this.pageEditFinished,
context: this.context
context: this.context,
treeFrom: this.properties.treeFrom,
treeExpandTo: this.properties.treeExpandTo
}
);
ReactDom.render(element, this.domElement, () => {
@ -146,8 +148,30 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
text: strings.PropertyPane_PagesToDisplay_OptionText_Children,
checked: this.properties.pagesToDisplay === PagesToDisplay.Children,
iconProps: { officeFabricIconFontName: 'DistributeDown' }
},
{
key: PagesToDisplay.Tree,
text: strings.PropertyPane_PagesToDisplay_OptionText_Tree,
checked: this.properties.pagesToDisplay === PagesToDisplay.Tree,
iconProps: { officeFabricIconFontName: 'ViewListTree' }
}
]
}),
this.properties.pagesToDisplay === PagesToDisplay.Tree && PropertyFieldNumber('treeFrom', {
key: 'treeFrom',
value: this.properties.treeFrom,
label: strings.PropertyPane_Label_TreeFrom,
description: strings.PropertyPane_Description_TreeFrom,
minValue: 1,
disabled: false
}),
this.properties.pagesToDisplay === PagesToDisplay.Tree && PropertyFieldNumber('treeExpandTo', {
key: 'treeExpandTo',
value: this.properties.treeExpandTo,
label: strings.PropertyPane_Label_TreeExpandTo,
description: strings.PropertyPane_Description_TreeExpandTo,
minValue: 1,
disabled: false
})
]
});

7
samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/Container.tsx
View File

@ -7,10 +7,10 @@ import { IContainerProps } from './IContainerProps';
import { PagesToDisplay } from '@src/utilities';
import { usePageApi } from '@src/apiHooks/usePageApi';
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { TreeLayout } from '../Layouts/TreeLayout';
export const Container: React.FunctionComponent<IContainerProps> = props => {
const pagesApi = usePageApi(props.currentPageId, props.pageEditFinished, props.context);
const pagesApi = usePageApi(props.currentPageId, props.pageEditFinished, props.context, props.treeFrom, props.treeExpandTo);
let controlToRender = undefined;
switch (props.pagesToDisplay) {
case PagesToDisplay.Ancestors:
@ -19,6 +19,9 @@ export const Container: React.FunctionComponent<IContainerProps> = props => {
case PagesToDisplay.Children:
controlToRender = <ListLayout domElement={props.domElement} pages={pagesApi.state.childrenPages} themeVariant={props.themeVariant} />;
break;
case PagesToDisplay.Tree:
controlToRender = <TreeLayout domElement={props.domElement} pages={pagesApi.state.childrenPages} themeVariant={props.themeVariant} nav={pagesApi.state.tree} pageId={props.currentPageId} />
break;
default:
controlToRender = <div>
<Placeholder

3
samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/IContainerProps.ts
View File

@ -6,6 +6,8 @@ import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IContainerProps {
currentPageId: number;
pagesToDisplay: PagesToDisplay;
treeFrom: number;
treeExpandTo: number;
themeVariant: IReadonlyTheme;
context: WebPartContext;
domElement: HTMLElement;
@ -15,6 +17,5 @@ export interface IContainerProps {
displayMode: DisplayMode;
updateTitle: (value: string) => void;
onConfigure: () => void;
pageEditFinished: boolean;
}

3
samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Layouts/ILayoutProps.ts
View File

@ -1,8 +1,11 @@
import { IReadonlyTheme } from '@microsoft/sp-component-base';
import { IPage } from '@src/models/IPage';
import { INavLink } from 'office-ui-fabric-react';
export interface ILayoutProps {
domElement: HTMLElement;
pages: IPage[];
nav?: INavLink;
pageId?: number;
themeVariant: IReadonlyTheme;
}

18
samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Layouts/TreeLayout.tsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from 'react';
import styles from './Layouts.module.scss';
import { ILayoutProps } from './ILayoutProps';
import * as strings from 'PageHierarchyWebPartStrings';
import { Nav } from 'office-ui-fabric-react';
export const TreeLayout: React.FunctionComponent<ILayoutProps> = props => {
return(
<div className={styles.layouts}>
{props.nav ? (
<ul className={styles.listLayout}>
{<Nav groups={[{ links: [props.nav]}]} selectedKey={(props.pageId ?? '1').toString()} />}
</ul>
) : (
<span>{strings.Message_NoChildrenFound}</span>
)}
</div>);
};

8
samples/react-pages-hierarchy/src/webparts/pagehierarchy/loc/en-us.js vendored
View File

@ -5,6 +5,7 @@ define([], function() {
"Configuration_Placeholder_ButtonLabel": "Configure",
"Message_NoAncestorsFound": "No ancestors found for page. Update the parent page property to select a parent",
"Message_NoChildrenFound": "No children found for page. Update the parent page property for other pages to set this as their parent.",
"Message_NoTreeFound": "No tree found for page. Update the tree settings to ensure tree is rendered.",
"ParentPageMissing_Placeholder_IconText": "Parent Page Property is missing",
"ParentPageMissing_Placeholder_Description": "Click button to add Parent Page Property to Site Pages",
"ParentPageMissing_Placeholder_Description_NoPermissions": "You don't have permissions to add the property. Have a Site Owner edit this web part to enable the Parent Page Property.",
@ -15,9 +16,14 @@ define([], function() {
"PropertyPane_Label_PagesToDisplay": "Choose pages to show based on their relationships to this page",
"PropertyPane_PagesToDisplay_OptionText_Ancestors": "Ancestor Pages",
"PropertyPane_PagesToDisplay_OptionText_Children": "Children Pages",
"PropertyPane_PagesToDisplay_OptionText_Tree": "Tree Hierarchy",
"PropertyPane_Label_TreeFrom": "Page Id for the Top Level of the Tree",
"PropertyPane_GroupName_Debug": "Debug",
"PropertyPane_Label_DebugPageId": "Debug Page Id",
"PropertyPane_Label_VersionInfo": "Version: ",
"PropertyPane_Description_DebugPageId": "Provide a valid page list item id to see how the web part would render for it"
"PropertyPane_Description_DebugPageId": "Provide a valid page list item id to see how the web part would render for it",
"PropertyPane_Description_TreeFrom": "Please provide the page id for the root of the tree to render",
"PropertyPane_Label_TreeExpandTo": "Default Expand the Tree To Level",
"PropertyPane_Description_TreeExpandTo": "By default expand the tree to this level"
}
});

6
samples/react-pages-hierarchy/src/webparts/pagehierarchy/loc/mystrings.d.ts vendored
View File

@ -4,6 +4,7 @@ declare interface IPageHierarchyWebPartStrings {
Configuration_Placeholder_ButtonLabel: string;
Message_NoAncestorsFound: string;
Message_NoChildrenFound: string;
Message_NoTreeFound: string;
ParentPageMissing_Placeholder_IconText: string;
ParentPageMissing_Placeholder_Description: string;
ParentPageMissing_Placeholder_Description_NoPermissions: string;
@ -14,10 +15,15 @@ declare interface IPageHierarchyWebPartStrings {
PropertyPane_Label_PagesToDisplay: string;
PropertyPane_PagesToDisplay_OptionText_Ancestors: string;
PropertyPane_PagesToDisplay_OptionText_Children: string;
PropertyPane_PagesToDisplay_OptionText_Tree: string;
PropertyPane_GroupName_Debug: string;
PropertyPane_Label_DebugPageId: string;
PropertyPane_Label_VersionInfo: string;
PropertyPane_Description_DebugPageId: string;
PropertyPane_Label_TreeFrom: string;
PropertyPane_Description_TreeFrom: string;
PropertyPane_Label_TreeExpandTo: string;
PropertyPane_Description_TreeExpandTo: string;
}
declare module 'PageHierarchyWebPartStrings' {