Update OneDrive Finder to MGT 2.2.0
This commit is contained in:
aaclage
parent
a40043f473
commit
ffef72533d
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
@ -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" />
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 { 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,14 +25,13 @@ 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 (
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export interface IDialogFileProps {
|
||||
className: string;
|
||||
open: boolean;
|
||||
fileItem:any;
|
||||
onClose: () => void;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue