Merge pull request #3 from SlowRobot/react-pages-hierarchy

Updated Features for Pages Hierarchy Tree View
This commit is contained in:
SlowRobot 2022-07-29 10:24:45 +10:00 committed by GitHub
commit 0619273cbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 24 deletions

View File

@ -49,6 +49,7 @@ 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))
react-pages-hierarchy|[SlowRobot](https://github.com/SlowRobot)
## Version history
@ -57,6 +58,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, 2022|Added a Tree View
1.4|July 29, 2022|Updated Tree View Functionality
## Minimal path to awesome

View File

@ -51,4 +51,4 @@
"paths": {
"zippedPackage": "solution/react-pages-hierarchy.sppkg"
}
}
}

View File

@ -3882,6 +3882,16 @@
"msal": "1.4.13",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "~1.10.0"
},
"dependencies": {
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
}
}
}
},
"@microsoft/sp-listview-extensibility": {
@ -18736,14 +18746,6 @@
"tslib": "^1.9.3"
}
},
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
}
},
"multicast-dns": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",

View File

@ -148,7 +148,7 @@ 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);
const treeLink: INavLink = buildHierarchy(pages, currentPageId);
// dispatch the GET_ALL action
pagesDispatch({
@ -253,16 +253,19 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean, con
return childPages;
}
function buildHierarchy(allPages: IPage[]): INavLink {
function recurse(id: number, l: number): INavLink {
function buildHierarchy(allPages: IPage[], pageId: number): INavLink {
function recurse(id: number, l: number, ancestorPages: IPage[]): 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 };
links = links.concat(allPages.filter(i => i.parentPageId === id).map(it => recurse(it.id, l ? l + 1 : l, ancestorPages)));
return { name: item.title, url: item.url, key: item.id.toString(), links: links, isExpanded: treeExpandTo ? (treeExpandTo >= l) : (ancestorPages.find(f => f.id === id) ? true : false) };
}
return recurse(treeTop, 1);
const ancestorPages: IPage[] = buildPageAncestors(allPages, pageId).reverse();
return recurse(treeTop ? treeTop : ancestorPages[0].id, treeExpandTo ? 1 : treeExpandTo, ancestorPages);
}
const addParentPageField = () => {

View File

@ -79,10 +79,10 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
Really only used for workbench mode when we cannot get a page id for the current page.
We'll allow user to test with a property and also using mock data allow them to navigate when on local host with a querystring
*/
private getDebugPageId() : number {
private getDebugPageId(): number {
let queryParms = new UrlQueryParameterCollection(window.location.href);
let debugPageId = this.properties.debugPageId;
if(queryParms.getValue(Parameters.DEBUGPAGEID)) { debugPageId = Number(queryParms.getValue(Parameters.DEBUGPAGEID)); }
if (queryParms.getValue(Parameters.DEBUGPAGEID)) { debugPageId = Number(queryParms.getValue(Parameters.DEBUGPAGEID)); }
return debugPageId;
}
@ -162,7 +162,7 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
value: this.properties.treeFrom,
label: strings.PropertyPane_Label_TreeFrom,
description: strings.PropertyPane_Description_TreeFrom,
minValue: 1,
minValue: 0,
disabled: false
}),
this.properties.pagesToDisplay === PagesToDisplay.Tree && PropertyFieldNumber('treeExpandTo', {
@ -170,7 +170,7 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
value: this.properties.treeExpandTo,
label: strings.PropertyPane_Label_TreeExpandTo,
description: strings.PropertyPane_Description_TreeExpandTo,
minValue: 1,
minValue: 0,
disabled: false
})
]

View File

@ -1,4 +1,4 @@
define([], function() {
define([], function () {
return {
"Configuration_Placeholder_IconText": "Configure Page Hierarchy Web Part",
"Configuration_Placeholder_Description": "Please configure the web part.",
@ -22,8 +22,8 @@ define([], function() {
"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_TreeFrom": "Please provide the page id for the root of the tree to render",
"PropertyPane_Description_TreeFrom": "Please provide the page id for the root of the tree to render. Entering zero will start the tree at the current pages highest ancestor",
"PropertyPane_Label_TreeExpandTo": "Default Expand the Tree To Level",
"PropertyPane_Description_TreeExpandTo": "By default expand the tree to this level"
"PropertyPane_Description_TreeExpandTo": "By default expand the tree to this level. Entering zero will inclusively expand the tree along the ancestor path of the current page"
}
});