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 #1514 from zachroberts8668/react-personal-greeting

This commit is contained in:
Hugo Bernier 2020-10-18 17:01:34 -04:00 committed by GitHub
parent 8d039e70df 04087e0d43
commit 371d96d5cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1499 additions and 1311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react-personal-greeting/.yo-rc.json
View File

@ -16,7 +16,7 @@
"environment": "spo",
"framework": "react",
"isCreatingSolution": true,
"version": "1.10.0",
"version": "1.11.0",
"libraryName": "react-personal-greeting",
"libraryId": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
"packageManager": "npm",

13
samples/react-personal-greeting/README.md
View File

@ -8,7 +8,7 @@ The web part pulls in the current user's name and displays it on the page. The g
## Used SharePoint Framework Version
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
## Applies to
@ -30,6 +30,7 @@ react-personal-greeting|Zach Roberts - [SPODev](https://spodev.com)
Version|Date|Comments
-------|----|--------
1.1|September 24, 2020| Updated SPFX version and added font-size
1.0|April 14, 2020|Initial release
## Disclaimer
@ -46,8 +47,8 @@ Version|Date|Comments
* `gulp build`
* `gulp bundle --ship`
* `gulp package-solution --ship`
* add the webpart to your tenant app store
* add the app to a SharePoint site and then add the webpart to the page
* add the web part to your tenant app store
* add the app to a SharePoint site and then add the web part to the page
## Features
@ -55,8 +56,8 @@ Version|Date|Comments
This Web Part illustrates the following concepts on top of the SharePoint Framework:
* Using the SPFx context to gather the current user's display name.
* Adjusting the styles of the component in the webpart using the props adjusted through the property pane.
* PnP SPFx Placeholder - This component allows you to have a placeholder visble under certain conditions if your web parts requires some setup.
* PnP SPFx Color Picker - This component adds an awesome color picker to the property pane, great for adjusting colors in your webpart.
* Adjusting the styles of the component in the web part using the props adjusted through the property pane.
* PnP SPFx Placeholder - This component allows you to have a placeholder visible under certain conditions if your web parts requires some setup.
* PnP SPFx Color Picker - This component adds an awesome color picker to the property pane, great for adjusting colors in your web part.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-greeting" />

BIN
samples/react-personal-greeting/assets/react-personal-greeting.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

11
samples/react-personal-greeting/config/package-solution.json
View File

@ -3,9 +3,16 @@
"solution": {
"name": "react-personal-greeting-client-side-solution",
"id": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
"version": "1.0.0.0",
"version": "1.1.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false
"isDomainIsolated": false,
"developer": {
"name": "",
"mpnId": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": ""
}
},
"paths": {
"zippedPackage": "solution/react-personal-greeting.sppkg"

2674
samples/react-personal-greeting/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
samples/react-personal-greeting/package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-personal-greeting",
"version": "0.0.1",
"version": "1.1.0",
"private": true,
"main": "lib/index.js",
"engines": {
@ -14,19 +14,15 @@
"postversion": "gulp dist"
},
"dependencies": {
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@pnp/pnpjs": "^2.0.3",
"@pnp/spfx-controls-react": "1.17.0",
"@pnp/spfx-property-controls": "1.17.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "6.189.2",
"office-ui-fabric-react": "6.214.0",
"react": "16.8.5",
"react-dom": "16.8.5"
},
@ -36,10 +32,10 @@
"devDependencies": {
"@microsoft/microsoft-graph-types": "^1.12.0",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-module-interfaces": "1.10.0",
"@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.10.0",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",

2
samples/react-personal-greeting/src/webparts/personalGreeting/PersonalGreetingWebPart.manifest.json
View File

@ -19,7 +19,7 @@
"group": { "default": "Other" },
"title": { "default": "Personal Greeting" },
"description": { "default": "Personal Greeting description" },
"officeFabricIconFontName": "Page",
"officeFabricIconFontName": "TextDocumentShared",
"properties": {
"description": "Personal Greeting"
}

60
samples/react-personal-greeting/src/webparts/personalGreeting/PersonalGreetingWebPart.ts
View File

@ -4,11 +4,11 @@ import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown
PropertyPaneDropdown,
IPropertyPaneDropdownOption
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
import * as strings from 'PersonalGreetingWebPartStrings';
import PersonalGreeting from './components/PersonalGreeting';
import { IPersonalGreetingProps } from './components/IPersonalGreetingProps';
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
@ -18,8 +18,56 @@ export interface IPersonalGreetingWebPartProps {
context: WebPartContext;
position: string;
textColor: string;
fontSize: number;
}
const fontSizeOptions: IPropertyPaneDropdownOption[] = [
{
key: 12,
text: '12'
},
{
key: 14,
text: '16'
},
{
key: 18,
text: '18'
},
{
key: 20,
text: '20'
},
{
key: 24,
text: '24'
},
{
key: 28,
text: '28'
},
{
key: 32,
text: '32'
},
{
key: 36,
text: '36'
},
{
key: 42,
text: '42'
},
{
key: 46,
text: '46'
},
{
key: 68,
text: '68'
},
];
export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPersonalGreetingWebPartProps> {
public render(): void {
@ -29,7 +77,8 @@ export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPer
greetingText: this.properties.greetingText,
context: this.context,
position: this.properties.position,
textColor: this.properties.textColor
textColor: this.properties.textColor,
fontSize: this.properties.fontSize
}
);
@ -76,6 +125,11 @@ export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPer
}
]
}),
PropertyPaneDropdown('fontSize', {
label: 'Font Size',
options: fontSizeOptions,
selectedKey: 20
}),
PropertyFieldColorPicker('textColor', {
label: 'Text Color',
properties: this.properties,

1
samples/react-personal-greeting/src/webparts/personalGreeting/components/IPersonalGreetingProps.ts
View File

@ -6,4 +6,5 @@ export interface IPersonalGreetingProps {
context: WebPartContext;
position: string;
textColor: string;
fontSize: number;
}

1
samples/react-personal-greeting/src/webparts/personalGreeting/components/PersonalGreeting.module.scss
View File

@ -7,7 +7,6 @@
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.title {
font-size: x-large;
font-weight: 375;
}
}

15
samples/react-personal-greeting/src/webparts/personalGreeting/components/PersonalGreeting.tsx
View File

@ -1,25 +1,22 @@
import * as React from 'react';
import styles from './PersonalGreeting.module.scss';
import { IPersonalGreetingProps } from './IPersonalGreetingProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
export default class PersonalGreeting extends React.Component<IPersonalGreetingProps, {}> {
public render(): React.ReactElement<IPersonalGreetingProps> {
const custstyles = {
const custStyles = {
'text-align': this.props.position,
'color': this.props.textColor
'color': this.props.textColor,
'fontSize': this.props.fontSize
} as React.CSSProperties;
return (
<div className={ styles.personalGreeting }>
{this.props.greetingText == null ?
<Placeholder iconName='Edit' iconText='Configure the web part' description='Please configure the web part' buttonLabel='Configure' onConfigure={this._onConfigure} />
: <div className={ styles.title } style={custstyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
// : <h2>{this.props.greetingText} {this.props.context.pageContext.user.displayName} </h2>
{this.props.greetingText == null ?
<Placeholder iconName='Edit' iconText='Configure the web part' description='Please configure the web part' buttonLabel='Configure' onConfigure={this._onConfigure} />
: <div className={ styles.title } style={custStyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
}
</div>
);

5
samples/react-personal-greeting/tsconfig.json
View File

@ -30,10 +30,11 @@
"esModuleInterop": true
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",
"lib"
]
}
}