diff --git a/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif b/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif
index 6141cce5b..693dc88c8 100644
Binary files a/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif and b/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif differ
diff --git a/samples/react-onedrive-finder/Assets/OneDrivefinderSample4.PNG b/samples/react-onedrive-finder/Assets/OneDrivefinderSample4.PNG
new file mode 100644
index 000000000..b81fcef1c
Binary files /dev/null and b/samples/react-onedrive-finder/Assets/OneDrivefinderSample4.PNG differ
diff --git a/samples/react-onedrive-finder/README.md b/samples/react-onedrive-finder/README.md
index 3d76183d2..eef43680d 100644
--- a/samples/react-onedrive-finder/README.md
+++ b/samples/react-onedrive-finder/README.md
@@ -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.
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx
new file mode 100644
index 000000000..3882a1788
--- /dev/null
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx
@@ -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 (
+
+ );
+}
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts
new file mode 100644
index 000000000..477871e1e
--- /dev/null
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts
@@ -0,0 +1,5 @@
+export interface IDialogFileProps {
+ open: boolean;
+ fileItem:any;
+ onClose: () => void;
+}
\ No newline at end of file
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
index 370a3fe4c..3d43c0ba2 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
@@ -11,4 +11,6 @@ export interface IOneDriveFinderState {
fileExtensions: string[];
customStyle: string;
searchDrive: string;
+ dialogFileStatus: boolean;
+ dialogFile: any;
}
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
index 248ae53cd..7a059054a 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
@@ -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 {
- const CheckDrives = (e, selectedOption) => {
+ const CheckDrives = (event: React.FormEvent, 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 e !== selectedOption.key);
}
@@ -187,9 +191,11 @@ export default class OneDriveFinder extends React.Component {
- 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
}
+ {
+ this.setState({
+ dialogFileStatus: false
+ });
+ }}
+ >
);
@@ -341,7 +355,11 @@ export default class OneDriveFinder extends React.Component {