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

Updated webpart to spfx 1.11 and added font-size option in the property pane

This commit is contained in:
zachroberts8668 2020-09-24 11:41:15 -04:00
parent 25c46e7c8e
commit 98d34de60f
10 changed files with 1486 additions and 1296 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",

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

@ -5,7 +5,14 @@
"id": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
"version": "1.0.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

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

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

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

@ -4,7 +4,8 @@ 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';
@ -18,8 +19,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 +78,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 +126,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;
}
}

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

@ -9,17 +9,17 @@ 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>
: <div className={ styles.title } style={custStyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
}
</div>
);

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

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