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

Merge pull request #2933 from Jwaegebaert/navigatorIssue 

`react-page-navigator` - Add theme provider and bug fixes
This commit is contained in:
Hugo Bernier 2022-08-21 16:00:20 -07:00 committed by GitHub
parent 93be642e20 3ff8984064
commit 65a34f686c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 52 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
samples/react-page-navigator/README.md
View File

@ -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
@ -52,13 +53,20 @@ react-page-navigator|[Jasey Waegebaert](https://github.com/Jwaegebaert)
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-page-navigator&template=bug-report.yml&sample=react-page-navigator&authors=@aakashbhardwaj619&title=react-page-navigator%20-%20).
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-page-navigator%22) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-page-navigator) and see what the community is saying.
If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-page-navigator&template=bug-report.yml&sample=react-page-navigator&authors=@aakashbhardwaj619&title=react-page-navigator%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-page-navigator&template=question.yml&sample=react-page-navigator&authors=@aakashbhardwaj619&title=react-page-navigator%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-page-navigator&template=question.yml&sample=react-page-navigator&authors=@aakashbhardwaj619&title=react-page-navigator%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-page-navigator&template=suggestion.yml&sample=react-page-navigator&authors=@aakashbhardwaj619&title=react-page-navigator%20-%20).
## Disclaimer

2
samples/react-page-navigator/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component."
],
"creationDateTime": "2019-09-05",
"updateDateTime": "2022-07-19",
"updateDateTime": "2022-08-17",
"products": [
"SharePoint"
],

4
samples/react-page-navigator/config/package-solution.json
View File

@ -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"
}
]
},

12
samples/react-page-navigator/src/Service/SPService.ts
View File

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

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

@ -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": { }
}]
}

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

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

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

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

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

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