Add theme provider and bug fixes

samples/react-page-navigator/README.md

@@ -29,6 +29,7 @@ Version|Date|Comments
 1.3|June 9, 2022|Updated React package from `^16.14.0` to `16.13.1`
 1.4|June 29, 2022|Adds the capability to find collapsible section headers and insert them into the navigation
 1.5|July 19, 2022|Bug fixes
+1.6|August 8, 2022|Add theme provider and bug fixes
 
 ## Minimal Path to Awesome
 

samples/react-page-navigator/config/package-solution.json

@@ -10,7 +10,7 @@
     },
     "name": "react-page-navigator",
     "id": "065ee566-e00d-4058-bbfd-356c8d9a8005",
-    "version": "1.2.0.0",
+    "version": "1.6.0.0",
     "includeClientSideAssets": true,
     "isDomainIsolated": false,
     "metadata": {
@@ -29,7 +29,7 @@
         "title": "navigator Feature",
         "description": "The feature that activates elements of the navigator solution.",
         "id": "021884c2-d7b3-4937-9d58-5ae47e1adfb7",
-        "version": "1.1.0.0"
+        "version": "1.6.0.0"
       }
     ]
   },

samples/react-page-navigator/src/Service/SPService.ts

@@ -45,14 +45,16 @@ export class SPService {
    * @param depth sequence depth
    * @returns navLinks
    */
-  public static navLinkBuilder(currentLinks: INavLink[], newLink: INavLink, order: number, depth: number = 0): INavLink[] {
+  public static navLinkBuilder(currentLinks: INavLink[], newLink: INavLink, order: number, depth: number): INavLink[] {
     const lastIndex = currentLinks.length - 1;
 
-    if (currentLinks[lastIndex].links.length === 0 || order === depth) {
-      if (depth === 0) {
-        currentLinks.push(newLink);
-      } else {
+    if (lastIndex === -1) {
+      currentLinks.push(newLink);
+    } else if (currentLinks[lastIndex].links.length === 0 || order === depth) {
+      if (order !== depth || depth !== 0) {
         currentLinks[lastIndex].links.push(newLink);
+      } else {
+        currentLinks.push(newLink);
       }
     } else {
       depth++;

samples/react-page-navigator/src/webparts/pageNavigator/PageNavigatorWebPart.manifest.json

@@ -13,15 +13,14 @@
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
   "supportedHosts": ["SharePointWebPart"],
+  "supportsThemeVariants": true,
 
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
     "group": { "default": "Other" },
     "title": { "default": "PageNavigator" },
     "description": { "default": "PageNavigator description" },
-    "officeFabricIconFontName": "Page",
-    "properties": {
-      "description": "PageNavigator"
-    }
+    "officeFabricIconFontName": "BulletedTreeList",
+    "properties": { }
   }]
 }

samples/react-page-navigator/src/webparts/pageNavigator/PageNavigatorWebPart.ts

@@ -1,39 +1,45 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
-import { Version } from '@microsoft/sp-core-library';
+import { ServiceKey, Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
-import * as strings from 'PageNavigatorWebPartStrings';
 import PageNavigator from './components/PageNavigator';
 import { IPageNavigatorProps } from './components/IPageNavigatorProps';
 import { INavLink } from 'office-ui-fabric-react/lib/Nav';
 import { SPService } from '../../Service/SPService';
+import { IReadonlyTheme, ThemeChangedEventArgs, ThemeProvider } from '@microsoft/sp-component-base';
 
-export interface IPageNavigatorWebPartProps {
-  description: string;
-}
-
-export default class PageNavigatorWebPart extends BaseClientSideWebPart<IPageNavigatorWebPartProps> {
+export default class PageNavigatorWebPart extends BaseClientSideWebPart<{}> {
   private anchorLinks: INavLink[] = [];
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+
+  public async onInit(): Promise<void> {
+    await super.onInit();
+
+    this.anchorLinks = await SPService.GetAnchorLinks(this.context);
+
+    // Consume the new ThemeProvider service
+    this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey as ServiceKey<ThemeProvider>);
+
+    // If it exists, get the theme variant
+    this._themeVariant = this._themeProvider.tryGetTheme();
+
+    // Register a handler to be notified if the theme variant changes
+    this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);    
+  }
 
   public render(): void {
     const element: React.ReactElement<IPageNavigatorProps > = React.createElement(
       PageNavigator,
       {
-        description: this.properties.description,
-        anchorLinks: this.anchorLinks
+        anchorLinks: this.anchorLinks,
+        themeVariant: this._themeVariant
       }
     );
 
     ReactDom.render(element, this.domElement);
   }
 
-  protected onInit(): Promise<void> {
-    return super.onInit().then(async _ => {
-      this.anchorLinks = await SPService.GetAnchorLinks(this.context);
-    });
-  }
-
   protected onDispose(): void {
     ReactDom.unmountComponentAtNode(this.domElement);
   }
@@ -42,25 +48,7 @@ export default class PageNavigatorWebPart extends BaseClientSideWebPart<IPageNav
     return Version.parse('1.0');
   }
 
-  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
-    return {
-      pages: [
-        {
-          header: {
-            description: strings.PropertyPaneDescription
-          },
-          groups: [
-            {
-              groupName: strings.BasicGroupName,
-              groupFields: [
-                PropertyPaneTextField('description', {
-                  label: strings.DescriptionFieldLabel
-                })
-              ]
-            }
-          ]
-        }
-      ]
-    };
+  private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
+    this._themeVariant = args.theme;
   }
 }

samples/react-page-navigator/src/webparts/pageNavigator/components/IPageNavigatorProps.ts

@@ -1,6 +1,7 @@
 import { INavLink } from 'office-ui-fabric-react/lib/Nav';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 export interface IPageNavigatorProps {
-  description: string;
   anchorLinks: INavLink[];
+  themeVariant: IReadonlyTheme;
 }

samples/react-page-navigator/src/webparts/pageNavigator/components/PageNavigator.tsx

@@ -3,6 +3,7 @@ import styles from './PageNavigator.module.scss';
 import { IPageNavigatorProps } from './IPageNavigatorProps';
 import { IPageNavigatorState } from './IPageNavigatorState';
 import { Nav, INavLink } from 'office-ui-fabric-react/lib/Nav';
+import { ITheme } from 'office-ui-fabric-react';
 
 export default class PageNavigator extends React.Component<IPageNavigatorProps, IPageNavigatorState> {
   constructor(props: IPageNavigatorProps) {
@@ -43,6 +44,7 @@ export default class PageNavigator extends React.Component<IPageNavigatorProps,
                     links: this.state.anchorLinks
                   }
                 ]}
+                theme={this.props.themeVariant as ITheme}
               />
             </div>
           </div>