Updated Readme and include dialog Mgt-File control

This commit is contained in:
aaclage 2021-05-01 11:58:44 +02:00
parent f48c174ad3
commit 6a2e5f481f
7 changed files with 102 additions and 14 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 840 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

View File

@ -2,9 +2,14 @@
## 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 control **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136) "still preview 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://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.
**[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136)** control allow to load files base on graph querys or parameters ids.
**[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.
**[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.
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)
### Retrieve Sites with drives associate
@ -43,7 +48,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
Version|Date|Comments
-------|----|--------
1.2|April 30, 2021|Include content Search on Drive Library and Minimal style change
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
@ -83,8 +88,11 @@ Description of the extension that expands upon high-level summary above.
This extension illustrates the following concepts:
- Easy to navigate between shared Drives using **Graph API and Breadcrumb**
- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136)** control allow to load documents base on graph querys or parameters ids.
- 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.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-onedrive-finder" />

View File

@ -0,0 +1,55 @@
import * as React from 'react';
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';
export function DialogFile(props: IDialogFileProps) {
let _queryString= "";
const { open, fileItem, onClose } = props;
const dialogStyles = { main: { maxWidth: 800 } };
const dialogContentProps = {
type: DialogType.normal,
title: 'File Details',
};
const handleClose = () => () => {
onClose();
};
const modalProps = {
isBlocking: true,
};
const checkLink = () => {
if(fileItem != null)
{
window.open(fileItem.webUrl, '_blank');
}
};
if(fileItem != null)
{
_queryString = "/drives/"+fileItem.parentReference.driveId +"/items/"+ fileItem.id;
}
return (
<Dialog
hidden={!open}
onDismiss={handleClose()}
dialogContentProps={dialogContentProps}
styles={dialogStyles}
modalProps={modalProps}>
<File
view={ViewType.threelines}
fileQuery={_queryString}
></File>
<Link onClick={checkLink} >File link</Link>
<DialogFooter>
<DefaultButton onClick={handleClose()} text="Close" />
</DialogFooter>
</Dialog>
);
}

View File

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

View File

@ -11,4 +11,6 @@ export interface IOneDriveFinderState {
fileExtensions: string[];
customStyle: string;
searchDrive: string;
dialogFileStatus: boolean;
dialogFile: any;
}

View File

@ -3,6 +3,7 @@ import styles from './OneDriveFinder.module.scss';
import { IOneDriveFinderProps } from './IOneDriveFinderProps';
import { IOneDriveFinderState } from './IOneDriveFinderState';
import { FileList } from '@microsoft/mgt-react';
import { DialogFile } from './Dialog/DialogFile';
import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
import { AadHttpClient } from "@microsoft/sp-http";
@ -113,12 +114,15 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
fileExtensions: [],
customStyle: "",
searchDrive: "",
dialogFileStatus: false,
dialogFile: null
};
this.getDomainData();
}
public render(): React.ReactElement<IOneDriveFinderProps> {
const CheckDrives = (e, selectedOption) => {
const CheckDrives = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
if (selectedOption.data.root == undefined) {
this._siteID = selectedOption.key.toString();
this.setState({
@ -149,7 +153,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
let fileExtensions: string[] = [];
if (selectedOption.selected == true) {
fileExtensions.push(selectedOption.key.toString());
fileExtensions = [...fileExtensions,...this.state.fileExtensions];
fileExtensions = [...fileExtensions, ...this.state.fileExtensions];
} else {
fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key);
}
@ -187,9 +191,11 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
});
};
const selectFile = (selectedFile: any) => {
if (selectedFile.detail.folder == undefined) {
window.open(selectedFile.detail.webUrl, '_blank');
}
console.log(selectedFile.detail);
this.setState({
dialogFileStatus: true,
dialogFile: selectedFile.detail,
});
};
const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, searchDrive, customStyle } = this.state;
@ -198,11 +204,10 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
this._breadcrumbItem = breadcrumbItem;
this._pageSize = pageSize;
this._customStyle = customStyle;
if(fileExtensions.length != 0)
{
if (fileExtensions.length != 0) {
this._fileExtensions = fileExtensions;
}
else{
else {
this._fileExtensions = null;
}
return (
@ -302,6 +307,15 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
itemClick={selectFile}
></FileList>
}
<DialogFile
open={this.state.dialogFileStatus}
fileItem={this.state.dialogFile}
onClose={() => {
this.setState({
dialogFileStatus: false
});
}}
></DialogFile>
</div>
</div>
);
@ -341,7 +355,11 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
breadcrumbItem: this._breadcrumbItem
});
} else {
window.open(e.detail.webUrl, '_blank');
console.log(e.detail);
this.setState({
dialogFileStatus: true,
dialogFile: e.detail,
});
}
}
private getRootDriveFolderID = async (siteID) => {