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

navbar component for rendering channels and tabs

This commit is contained in:
fredupstair 2019-10-30 01:47:52 +01:00
parent eea0c31ad9
commit c62c5e01eb
1 changed files with 10 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.tsx
View File

@ -1,13 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import styles from './ReactTeamsTabsPnpjs.module.scss'; import styles from './ReactTeamsTabsPnpjs.module.scss';
import { IReactTeamsTabsPnpjsProps } from './IReactTeamsTabsPnpjsProps'; import { IReactTeamsTabsPnpjsProps } from './IReactTeamsTabsPnpjsProps';
import { escape } from '@microsoft/sp-lodash-subset'; import { Nav } from 'office-ui-fabric-react/lib/Nav';
import { Label } from 'office-ui-fabric-react/lib/Label'; import { MessageBar } from 'office-ui-fabric-react';
import { Pivot, PivotItem, IPivotProps, PivotLinkSize, PivotLinkFormat } from 'office-ui-fabric-react/lib/Pivot';
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { List } from 'office-ui-fabric-react/lib/List';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { sp } from "@pnp/sp";
import { ReactTeamsTabsHelper } from './ReactTeamsTabsHelper'; import { ReactTeamsTabsHelper } from './ReactTeamsTabsHelper';
@ -21,8 +16,6 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
this.state = { this.state = {
pivotArray: [] pivotArray: []
}; };
this._onRenderTabItem = this._onRenderTabItem.bind(this);
} }
public render() { public render() {
@ -32,7 +25,12 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
<div className={styles.row}> <div className={styles.row}>
<div className={styles.column}> <div className={styles.column}>
<div> <div>
<Pivot linkSize={PivotLinkSize.large} >{this.state.pivotArray}</Pivot> <MessageBar>
Here you can find Channels list and Tabs from MS Teams linked to this site.
</MessageBar>
<Nav
groups={this.state.pivotArray}
/>
</div> </div>
</div> </div>
</div> </div>
@ -59,9 +57,9 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
tabs.then(itemTabs => { tabs.then(itemTabs => {
console.log("Channel" + channel.displayName + "tabs " + itemTabs.length); console.log("Channel" + channel.displayName + "tabs " + itemTabs.length);
itemTabs.forEach(tab => { itemTabs.forEach(tab => {
tmpTabs.push({ name: tab.displayName, tabURL: tab.webUrl }); tmpTabs.push({ key: tab.id, name: tab.displayName, url: tab.webUrl, target: '_blank' });
}); });
tmpChannels.push(this._renderPivotItemList(tmpTabs, channel.displayName)); tmpChannels.push({ name: channel.displayName + " (" + tmpTabs.length + ")", links: tmpTabs });
this.setState({ pivotArray: tmpChannels }); this.setState({ pivotArray: tmpChannels });
}); });
}); });
@ -71,31 +69,8 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
//TODO show generic message, because there is not a team linked to current site //TODO show generic message, because there is not a team linked to current site
} }
}); });
} }
private _renderPivotItemList(channels: any[], tabName: string) {
return (
<PivotItem headerText={`${tabName} (${channels.length})`}>
<FocusZone direction={FocusZoneDirection.vertical} >
<List items={channels} onRenderCell={this._onRenderTabItem} />
</FocusZone>
</PivotItem>
);
}
private _onRenderTabItem(item: any, index: number | undefined) {
return (
<div className={styles.itemCell} data-is-focusable={true}>
<div className={styles.itemContent}>
<div className={styles.itemName}>{item.name}</div>
<Link className={styles.tablink} href={item.tabURL} target="_blank">{item.name}</Link>
</div>
</div>
);
}
} }