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 the code to use WebPartTitle control

This commit is contained in:
Arun Kumar Perumal 2022-04-11 13:11:37 +05:30
parent 2c2b1e9aef
commit 4c0b8bd94d
7 changed files with 2932 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3390
samples/react-accordion-with-richtext/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
samples/react-accordion-with-richtext/package.json
View File

@ -17,8 +17,8 @@
"@microsoft/sp-webpart-base": "1.13.0", "@microsoft/sp-webpart-base": "1.13.0",
"@microsoft/sp-lodash-subset": "1.13.0", "@microsoft/sp-lodash-subset": "1.13.0",
"@microsoft/sp-office-ui-fabric-core": "1.13.0", "@microsoft/sp-office-ui-fabric-core": "1.13.0",
"@pnp/spfx-controls-react": "1.14.0", "@pnp/spfx-controls-react": "^3.5.0",
"@pnp/spfx-property-controls": "^1.13.1", "@pnp/spfx-property-controls": "^3.3.0",
"@tinymce/tinymce-react": "^2.2.5" "@tinymce/tinymce-react": "^2.2.5"
}, },
"devDependencies": { "devDependencies": {

13
samples/react-accordion-with-richtext/src/webparts/tabAccordion/TabAccordionWebPart.ts
View File

@ -77,7 +77,10 @@ export default class TabAccordionWebPart extends BaseClientSideWebPart<ITabAccor
tabs: this.properties.tabs, tabs: this.properties.tabs,
displayMode: this.displayMode, displayMode: this.displayMode,
guid: this.guid, guid: this.guid,
title:this.properties.title title:this.properties.title,
fUpdateProperty: (value: string) => {
this.properties.title = value;
},
} }
); );
const elementAccordion: React.ReactElement<ICAccordionProps > = React.createElement( const elementAccordion: React.ReactElement<ICAccordionProps > = React.createElement(
@ -87,7 +90,10 @@ export default class TabAccordionWebPart extends BaseClientSideWebPart<ITabAccor
displayMode: this.displayMode, displayMode: this.displayMode,
guid: this.guid, guid: this.guid,
title: this.properties.title, title: this.properties.title,
accordion:this.properties.accordion accordion:this.properties.accordion,
fUpdateProperty: (value: string) => {
this.properties.title = value;
},
} }
); );
if(this.isMobile) if(this.isMobile)
@ -142,9 +148,6 @@ export default class TabAccordionWebPart extends BaseClientSideWebPart<ITabAccor
{ {
groupName: strings.BasicGroupName, groupName: strings.BasicGroupName,
groupFields: [ groupFields: [
PropertyPaneTextField('title', {
label: strings.TitleFieldLabel
}),
PropertyPaneDropdown('type', { PropertyPaneDropdown('type', {
label: strings.Type, label: strings.Type,
disabled: false, disabled: false,

15
samples/react-accordion-with-richtext/src/webparts/tabAccordion/components/CAccordion.tsx
View File

@ -6,6 +6,7 @@ import styles from './CAccordion.module.scss';
import { ICAccordionProps } from './ICAccordionProps'; import { ICAccordionProps } from './ICAccordionProps';
import { DisplayMode, Version } from '@microsoft/sp-core-library'; import { DisplayMode, Version } from '@microsoft/sp-core-library';
import { Editor } from '@tinymce/tinymce-react'; import { Editor } from '@tinymce/tinymce-react';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { import {
Accordion, Accordion,
@ -27,9 +28,10 @@ export default class CAccordion extends React.Component<ICAccordionProps, {}> {
return ( return (
<div> <div>
<div className={styles.webpartheader}> <div className={styles.webpartheader}>
<div className={styles.webparttitle}> <WebPartTitle displayMode={this.props.displayMode}
<span role="heading" aria-level={2}>{this.props.title}</span> title={this.props.title}
</div> updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div> </div>
<Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}> <Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}>
{ {
@ -82,9 +84,10 @@ export default class CAccordion extends React.Component<ICAccordionProps, {}> {
return ( return (
<div> <div>
<div className={styles.webpartheader}> <div className={styles.webpartheader}>
<div className={styles.webparttitle}> <WebPartTitle displayMode={this.props.displayMode}
<span role="heading" aria-level={2}>{this.props.title}</span> title={this.props.title}
</div> updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div> </div>
<Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}> <Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}>
{ {

17
samples/react-accordion-with-richtext/src/webparts/tabAccordion/components/CTab.tsx
View File

@ -3,9 +3,8 @@
import * as React from 'react'; import * as React from 'react';
import styles from './CTab.module.scss'; import styles from './CTab.module.scss';
import { ICTabProps } from './ICTabProps'; import { ICTabProps } from './ICTabProps';
import { SPComponentLoader } from '@microsoft/sp-loader';
import { escape } from '@microsoft/sp-lodash-subset';
import { DisplayMode, Version } from '@microsoft/sp-core-library'; import { DisplayMode, Version } from '@microsoft/sp-core-library';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Editor } from '@tinymce/tinymce-react'; import { Editor } from '@tinymce/tinymce-react';
import { import {
Pivot, Pivot,
@ -40,9 +39,10 @@ export default class CTab extends React.Component<ICTabProps, {}> {
return ( return (
<div> <div>
<div className={styles.webpartheader}> <div className={styles.webpartheader}>
<div className={styles.webparttitle}> <WebPartTitle displayMode={this.props.displayMode}
<span role="heading" aria-level={2}>{this.props.title}</span> title={this.props.title}
</div> updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div> </div>
<Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"}> <Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"}>
<div className={styles.tablinks} tabIndex={0}> <div className={styles.tablinks} tabIndex={0}>
@ -103,9 +103,10 @@ export default class CTab extends React.Component<ICTabProps, {}> {
return ( return (
<div> <div>
<div className={styles.webpartheader}> <div className={styles.webpartheader}>
<div className={styles.webparttitle}> <WebPartTitle displayMode={this.props.displayMode}
<span role="heading" aria-level={2}>{this.props.title}</span> title={this.props.title}
</div> updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div> </div>
<Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"} > <Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"} >
<div className={styles.tablinks} > <div className={styles.tablinks} >

3
samples/react-accordion-with-richtext/src/webparts/tabAccordion/components/ICAccordionProps.ts
View File

@ -5,5 +5,6 @@ export interface ICAccordionProps {
displayMode: DisplayMode; displayMode: DisplayMode;
guid: string; guid: string;
title: string; title: string;
accordion:boolean; accordion:boolean;
fUpdateProperty: (value: string) => void;
} }

1
samples/react-accordion-with-richtext/src/webparts/tabAccordion/components/ICTabProps.ts
View File

@ -5,4 +5,5 @@ export interface ICTabProps {
displayMode: DisplayMode; displayMode: DisplayMode;
guid: string; guid: string;
title:string; title:string;
fUpdateProperty: (value: string) => void;
} }