diff --git a/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif b/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif
index 2a257b043..6141cce5b 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/README.md b/samples/react-onedrive-finder/README.md
index a1a2141ce..3d76183d2 100644
--- a/samples/react-onedrive-finder/README.md
+++ b/samples/react-onedrive-finder/README.md
@@ -14,7 +14,7 @@ This sample access drives from OneDrive and navigate between his content using *
![Demo](./Assets/OneDrivefinderSample2.PNG)
-### Navigate and filter extensions
+### Navigate, search Files and filter extensions
![Demo](./Assets/OneDrivefinderSample3.gif)
@@ -43,7 +43,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
Version|Date|Comments
-------|----|--------
-1.2|April 29, 2021|Minimal style change
+1.2|April 30, 2021|Include content Search on Drive Library and Minimal style change
1.1|April 24, 2021|Fixes, optimization, Styling and extension filter included
1.0|April 16, 2021|Initial release
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 b7cb21511..370a3fe4c 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
@@ -10,4 +10,5 @@ export interface IOneDriveFinderState {
siteItems: IDropdownOption[];
fileExtensions: string[];
customStyle: string;
+ searchDrive: string;
}
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 439297193..248ae53cd 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
@@ -8,6 +8,8 @@ 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 { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
const theme: ITheme = getTheme();
const { palette, fonts } = theme;
@@ -39,6 +41,8 @@ const onRenderCaretDown = (): JSX.Element => {
return ;
};
+const stackTokens: Partial = { childrenGap: 20 };
+
/**
*
* @param option
@@ -107,7 +111,8 @@ export default class OneDriveFinder extends React.Component, selectedOption: IDropdownOption) => {
+ const CheckPageSize = (event: React.FormEvent, selectedOption: IDropdownOption) => {
let fileListpageSize: number;
fileListpageSize = +selectedOption.key;
this.setState({
@@ -146,7 +151,7 @@ export default class OneDriveFinder extends React.Component e !== selectedOption.key );
+ fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key);
}
this.setState({
fileExtensions: [...fileExtensions]
@@ -164,8 +169,30 @@ export default class OneDriveFinder extends React.Component {
+ if (this.state.siteID != "") {
+ this.setState({
+ searchDrive: "/sites/" + this.state.siteID + "/drive/root/search(q='" + SearchQuery + "')"
+ });
+ } else {
+ this.setState({
+ searchDrive: "/me/drive/root/search(q='" + SearchQuery + "')"
+ });
+ }
+ };
+ const checkClear = (ev: any) => {
+ this.setState({
+ searchDrive: ""
+ });
+ };
+ const selectFile = (selectedFile: any) => {
+ if (selectedFile.detail.folder == undefined) {
+ window.open(selectedFile.detail.webUrl, '_blank');
+ }
+ };
+
+ const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, searchDrive, customStyle } = this.state;
this._itemID = itemID;
this._siteID = siteID;
this._breadcrumbItem = breadcrumbItem;
@@ -251,7 +278,12 @@ export default class OneDriveFinder extends React.Component
- {(this.state.itemID != "") &&
+ {(this.state.breadcrumbItem.length > 0) &&
+
+
+
+ }
+ {(this.state.itemID != "" && this.state.searchDrive == "") &&
}
+ {(this.state.searchDrive != "") &&
+
+ }
);
}
-
+
/**
*
* @param e
* Capture file or folder and manages breadcrumb
*/
private manageFolder = (e: any) => {
-
if (e.detail.folder != undefined) {
this._breadcrumbItem.push({
text: e.detail.name,