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

Update OneDrive Finder to MGT 2.2.0

This commit is contained in:
aaclage 2021-05-21 00:20:02 +02:00
parent a40043f473
commit ffef72533d
7 changed files with 80 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react-onedrive-finder/Assets/sample.json
View File

@ -10,7 +10,7 @@
"This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file. "
],
"creationDateTime": "2021-04-16",
"updateDateTime": "2021-04-29",
"updateDateTime": "2021-05-20",
"products": [
"SharePoint",
"Office"

14
samples/react-onedrive-finder/README.md
View File

@ -2,11 +2,11 @@
## Summary
This sample access drives from OneDrive and navigate between his content using **Graph OneDrive and Site API and [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) react controls "@microsoft/mgt-react**" with the addition of new controls **Mgt-File-List [FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/stories/components/fileList.stories.js)** and **Mgt-File [File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/stories/components/file.stories.js) "Beta version"** . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.
This sample access drives from OneDrive and navigate between his content using **Graph OneDrive and Site API and [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) react controls "@microsoft/mgt-react**" with the addition of new controls **Mgt-File-List [FileList](https://docs.microsoft.com/en-us/graph/toolkit/components/file-list)** and **Mgt-File [File](https://docs.microsoft.com/en-us/graph/toolkit/components/file)** . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.
**[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** control allow to load files base on graph querys or parameters ids.
**[FileList](https://docs.microsoft.com/en-us/graph/toolkit/components/file-list)** control allow to load files base on graph querys or parameters ids.
**[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** control allow to File component is used to represent an individual file/folder from OneDrive or SharePoint base on graph querys or parameters ids.
**[File](https://docs.microsoft.com/en-us/graph/toolkit/components/file)** control allow to File component is used to represent an individual file/folder from OneDrive or SharePoint base on graph querys or parameters ids.
Below a draw resuming the custom query's made and what control uses to retrieve associated folders and files from different locations.
![Demo](./Assets/OneDrivefinderSample4.PNG)
@ -48,6 +48,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
Version|Date|Comments
-------|----|--------
2.0|May 20, 2021|Update MGT to version 2.2.0, include new Features (Localization, cache refresh).
1.2|April 30, 2021|Include content Search on Drive Library, file details and Minimal style change.
1.1|April 24, 2021|Fixes, optimization, Styling and extension filter included
1.0|April 16, 2021|Initial release
@ -90,9 +91,10 @@ This extension illustrates the following concepts:
- Easy to navigate between shared Drives using **Graph API and Breadcrumb**
- Search in OneDrive Library
- Filter by File Extension
- Change theme of control
- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** New mgt-file-list control.
- **[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** New mgt-file control.
- Change theme of control and Localization
- Caching refresh
- **[FileList](https://docs.microsoft.com/en-us/graph/toolkit/components/file-list)** New mgt-file-list control.
- **[File](https://docs.microsoft.com/en-us/graph/toolkit/components/file)** New mgt-file control.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-onedrive-finder" />

4
samples/react-onedrive-finder/package.json
View File

@ -12,8 +12,8 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/mgt": "^2.2.0-next.file.0e80deb",
"@microsoft/mgt-react": "^2.2.0-next.file.0e80deb",
"@microsoft/mgt": "^2.2.0",
"@microsoft/mgt-react": "^2.2.0",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0",

28
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx
View File

@ -1,13 +1,13 @@
import * as React from 'react';
import {IDialogFileProps } from './IDialogFileProps';
import { IDialogFileProps } from './IDialogFileProps';
import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { File,ViewType } from '@microsoft/mgt-react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { File, ViewType, Person, PersonViewType } from '@microsoft/mgt-react';
export function DialogFile(props: IDialogFileProps) {
let _queryString= "";
const { open, fileItem, onClose } = props;
let _queryString = "";
const { className, open, fileItem, onClose } = props;
const dialogStyles = { main: { maxWidth: 800 } };
@ -25,16 +25,15 @@ export function DialogFile(props: IDialogFileProps) {
};
const checkLink = () => {
if(fileItem != null)
{
if (fileItem != null) {
window.open(fileItem.webUrl, '_blank');
}
};
if(fileItem != null)
{
_queryString = "/drives/"+fileItem.parentReference.driveId +"/items/"+ fileItem.id;
if (fileItem != null) {
_queryString = "/drives/" + fileItem.parentReference.driveId + "/items/" + fileItem.id;
}
return (
<Dialog
hidden={!open}
@ -42,11 +41,12 @@ export function DialogFile(props: IDialogFileProps) {
dialogContentProps={dialogContentProps}
styles={dialogStyles}
modalProps={modalProps}>
<File
<File
view={ViewType.threelines}
fileQuery={_queryString}
></File>
<Link onClick={checkLink} >File link</Link>
className={className}
></File>
<Link onClick={checkLink} >File link</Link>
<DialogFooter>
<DefaultButton onClick={handleClose()} text="Close" />
</DialogFooter>

3
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts
View File

@ -1,5 +1,6 @@
export interface IDialogFileProps {
className: string;
open: boolean;
fileItem:any;
onClose: () => void;
}
}

6
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss
View File

@ -24,9 +24,13 @@
--file-list-box-shadow: none;
--file-list-padding: 0px;
--file-list-margin: 0;
--file-item-border-radius: 0px;
--file-item-border-radius: 12px;
--file-item-margin: 0px 0px;
--file-item-border-top: 1px solid #dddddd;
--file-item-border-left: 1px solid #dddddd;
--file-item-border-right: 1px solid #dddddd;
--file-item-border-bottom: 1px solid #dddddd;
--file-item-border-focused: 1px dashed red;
--show-more-button-background-color: #fef8dd;
--show-more-button-background-color--hover: #ffe7c7;
--show-more-button-font-size: 14px;

57
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
View File

@ -9,8 +9,10 @@ import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-reac
import { AadHttpClient } from "@microsoft/sp-http";
import { ITheme, mergeStyleSets, getTheme } from 'office-ui-fabric-react/lib/Styling';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
import { MgtFileList, LocalizationHelper } from '@microsoft/mgt';
const theme: ITheme = getTheme();
const { palette, fonts } = theme;
@ -99,12 +101,13 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
public _pageSize: number;
public _breadcrumbItem: IBreadcrumbItem[] = [];
public _customStyle: string;
public _fileExtensions: string[] = null;
public flref = React.createRef<MgtFileList>();
constructor(props: IOneDriveFinderProps, state: IOneDriveFinderState) {
super(props);
// Initialize the state of the component
this.state = {
breadcrumbItem: [],
pageSize: 50,
@ -115,7 +118,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
customStyle: "",
searchDrive: "",
dialogFileStatus: false,
dialogFile: null
dialogFile: null,
};
this.getDomainData();
}
@ -167,10 +170,30 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
this.setState({
customStyle: styles.mgtfilelist
});
LocalizationHelper.strings = {
_components: {
'file-list': {
showMoreSubtitle: 'Take a pause ☕ and show more'
},
'file': {
modifiedSubtitle: 'Once upon a time in this day ',
}
}
};
} else {
this.setState({
customStyle: selectedOption.text
});
LocalizationHelper.strings = {
_components: {
'file-list': {
showMoreSubtitle: 'Show more items'
},
'file': {
modifiedSubtitle: 'Modified ',
}
}
};
}
};
@ -210,6 +233,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
else {
this._fileExtensions = null;
}
return (
<div>
<div className={styles.pageWrapper}>
@ -273,10 +297,15 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
onChange={checkFileExtensions}
styles={dropdownFilterStyles}
/>
</div>
</div>
</div>
<div>
<IconButton iconProps={{ iconName: 'Refresh' }} text="Refresh cache" onClick={this.refreshMGTControl} allowDisabledFocus disabled={false} checked={false} ></IconButton>
</div>
<div>
<Breadcrumb
items={this._breadcrumbItem}
maxDisplayedItems={10}
@ -285,29 +314,35 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
/>
{(this.state.breadcrumbItem.length > 0) &&
<Stack tokens={stackTokens}>
<SearchBox placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} />
<SearchBox style={{ width: "90%" }} placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} />
</Stack>
}
{(this.state.itemID != "" && this.state.searchDrive == "") &&
<FileList
ref={this.flref}
className={this._customStyle}
fileExtensions={this._fileExtensions}
pageSize={this._pageSize}
siteId={this._siteID}
itemId={this._itemID}
itemClick={this.manageFolder}
></FileList>
>
</FileList>
}
{(this.state.searchDrive != "") &&
<FileList
className={this._customStyle}
fileExtensions={this._fileExtensions}
pageSize={this._pageSize}
fileListQuery={searchDrive}
itemClick={selectFile}
></FileList>
>
</FileList>
}
<DialogFile
className={this._customStyle}
open={this.state.dialogFileStatus}
fileItem={this.state.dialogFile}
onClose={() => {
@ -321,12 +356,17 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
);
}
private refreshMGTControl = (): void => {
this.flref.current.reload(true);
}
/**
*
* @param e
* Capture file or folder and manages breadcrumb
*/
private manageFolder = (e: any) => {
console.log(e.detail);
if (e.detail.folder != undefined) {
this._breadcrumbItem.push({
text: e.detail.name,
@ -355,7 +395,6 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
breadcrumbItem: this._breadcrumbItem
});
} else {
console.log(e.detail);
this.setState({
dialogFileStatus: true,
dialogFile: e.detail,
@ -367,8 +406,8 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
return graphData.id;
}
private getOneDriveRootFolderID = async (key) => {
let graphData: any = await this.getGraphContent("https://graph.microsoft.com/v1.0/me/drive/items/" + key + "?$select=id");
private getOneDriveRootFolderID = async (ItemId) => {
let graphData: any = await this.getGraphContent("https://graph.microsoft.com/v1.0/me/drive/items/" + ItemId + "?$select=id");
return graphData.id;
}