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-lodash-subset": "1.13.0",
"@microsoft/sp-office-ui-fabric-core": "1.13.0",
"@pnp/spfx-controls-react": "1.14.0",
"@pnp/spfx-property-controls": "^1.13.1",
"@pnp/spfx-controls-react": "^3.5.0",
"@pnp/spfx-property-controls": "^3.3.0",
"@tinymce/tinymce-react": "^2.2.5"
},
"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,
displayMode: this.displayMode,
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(
@ -87,7 +90,10 @@ export default class TabAccordionWebPart extends BaseClientSideWebPart<ITabAccor
displayMode: this.displayMode,
guid: this.guid,
title: this.properties.title,
accordion:this.properties.accordion
accordion:this.properties.accordion,
fUpdateProperty: (value: string) => {
this.properties.title = value;
},
}
);
if(this.isMobile)
@ -142,9 +148,6 @@ export default class TabAccordionWebPart extends BaseClientSideWebPart<ITabAccor
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('title', {
label: strings.TitleFieldLabel
}),
PropertyPaneDropdown('type', {
label: strings.Type,
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 { DisplayMode, Version } from '@microsoft/sp-core-library';
import { Editor } from '@tinymce/tinymce-react';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import {
Accordion,
@ -27,9 +28,10 @@ export default class CAccordion extends React.Component<ICAccordionProps, {}> {
return (
<div>
<div className={styles.webpartheader}>
<div className={styles.webparttitle}>
<span role="heading" aria-level={2}>{this.props.title}</span>
</div>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div>
<Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}>
{
@ -82,9 +84,10 @@ export default class CAccordion extends React.Component<ICAccordionProps, {}> {
return (
<div>
<div className={styles.webpartheader}>
<div className={styles.webparttitle}>
<span role="heading" aria-level={2}>{this.props.title}</span>
</div>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div>
<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 styles from './CTab.module.scss';
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 { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Editor } from '@tinymce/tinymce-react';
import {
Pivot,
@ -40,9 +39,10 @@ export default class CTab extends React.Component<ICTabProps, {}> {
return (
<div>
<div className={styles.webpartheader}>
<div className={styles.webparttitle}>
<span role="heading" aria-level={2}>{this.props.title}</span>
</div>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div>
<Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"}>
<div className={styles.tablinks} tabIndex={0}>
@ -103,9 +103,10 @@ export default class CTab extends React.Component<ICTabProps, {}> {
return (
<div>
<div className={styles.webpartheader}>
<div className={styles.webparttitle}>
<span role="heading" aria-level={2}>{this.props.title}</span>
</div>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.fUpdateProperty}
className={styles.webparttitle} />
</div>
<Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"} >
<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;
guid: 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;
guid: string;
title:string;
fUpdateProperty: (value: string) => void;
}