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,