honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1834 from aaclage/reactondrivefinderv1

This commit is contained in:
Hugo Bernier 2021-04-29 09:59:54 -04:00 committed by GitHub
parent 67a1180e52 7571451a68
commit 6e913ebdcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 145 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 798 KiB

10
samples/react-onedrive-finder/Assets/sample.json
View File

@ -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. "
],
"created": "2021-04-16",
"modified": "2021-04-16",
"modified": "2021-04-24",
"products": [
"SharePoint",
"Office"
@ -29,12 +29,18 @@
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-onedrive-finder/Assets/OneDrivefinderSample1.PNG",
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif",
"alt": "Web Part in action"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-onedrive-finder/Assets/OneDrivefinderSample1.PNG",
"alt": "Web Part in action"
},
{
"type": "image",
"order": 102,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-onedrive-finder/Assets/OneDrivefinderSample2.PNG",
"alt": "Web Part in action"
}

5
samples/react-onedrive-finder/README.md
View File

@ -14,6 +14,10 @@ This sample access drives from OneDrive and navigate between his content using *
![Demo](./Assets/OneDrivefinderSample2.PNG)
### Navigate and filter extensions
![Demo](./Assets/OneDrivefinderSample3.gif)
## Compatibility
@ -39,6 +43,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
Version|Date|Comments
-------|----|--------
1.1|April 24, 2021|Fixes, optimization, Styling and extension filter included
1.0|April 16, 2021|Initial release
## Disclaimer

4
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
View File

@ -8,4 +8,6 @@ export interface IOneDriveFinderState {
siteID:string;
itemID:string;
siteItems: IDropdownOption[];
}
fileExtensions: string[];
customStyle: string;
}

19
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss
View File

@ -15,3 +15,22 @@
flex-basis: 100%;
flex: 1;
}
.mgtfilelist {
--file-list-background-color: #eff6fc;
--file-item-background-color--hover: #deecf9;
--file-item-background-color--active: #c7e0f4;
--file-list-border: 0px solid #white;
--file-list-box-shadow: none;
--file-list-padding: 0px;
--file-list-margin: 0;
--file-item-border-radius: 0px;
--file-item-margin: 0px 0px;
--file-item-border-bottom: 1px solid #dddddd;
--show-more-button-background-color: #fef8dd;
--show-more-button-background-color--hover: #ffe7c7;
--show-more-button-font-size: 14px;
--show-more-button-padding: 16px;
--show-more-button-border-bottom-right-radius: 12px;
--show-more-button-border-bottom-left-radius: 12px;
}

143
samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
View File

@ -31,7 +31,7 @@ const dropdownFilterStyles = {
label: {
},
root: {
paddingLeft: 90
paddingLeft: 50
}
};
@ -93,6 +93,9 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
public _siteID: string;
public _pageSize: number;
public _breadcrumbItem: IBreadcrumbItem[] = [];
public _customStyle: string;
public _fileExtensions: string[] = null;
constructor(props: IOneDriveFinderProps, state: IOneDriveFinderState) {
super(props);
@ -102,21 +105,95 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
pageSize: 50,
siteID: "",
siteItems: [],
itemID: ""
itemID: "",
fileExtensions: [],
customStyle:""
};
this.getDomainData();
}
public render(): React.ReactElement<IOneDriveFinderProps> {
const { siteID, itemID, pageSize, breadcrumbItem, siteItems, } = this.state;
const CheckDrives = (e, selectedOption) => {
if (selectedOption.data.root == undefined) {
this._siteID = selectedOption.key.toString();
this.setState({
siteID: this._siteID,
itemID: "",
breadcrumbItem: this._breadcrumbItem
});
} else {
this._siteID = "";
this.setState({
siteID: this._siteID,
itemID: "",
breadcrumbItem: this._breadcrumbItem
});
}
this.getDrives(selectedOption);
};
const CheckPageSize= (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
let fileListpageSize: number;
fileListpageSize = +selectedOption.key;
this.setState({
pageSize: fileListpageSize
});
};
const checkFileExtensions = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
let fileExtensions: string[] = [];
if (selectedOption.selected == true) {
fileExtensions.push(selectedOption.key.toString());
fileExtensions = [...fileExtensions,...this.state.fileExtensions];
} else {
fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key );
}
this.setState({
fileExtensions: [...fileExtensions]
});
};
const CheckStyles = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
if (selectedOption.key == 2) {
this.setState({
customStyle: styles.mgtfilelist
});
} else {
this.setState({
customStyle: selectedOption.text
});
}
};
const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, customStyle } = this.state;
this._itemID = itemID;
this._siteID = siteID;
this._breadcrumbItem = breadcrumbItem;
this._pageSize = pageSize;
this._customStyle = customStyle;
if(fileExtensions.length != 0)
{
this._fileExtensions = fileExtensions;
}
else{
this._fileExtensions = null;
}
return (
<div>
<div className={styles['some-page-wrapper']}>
<div className={styles.row}>
<div className={styles.column}>
<Dropdown
placeholder="default"
label="Styles"
options={[
{ key: 0, text: 'default' },
{ key: 1, text: 'mgt-dark' },
{ key: 2, text: 'Custom-mgt-file-list' },
]}
styles={{ dropdown: { width: 300 } }}
onChange={CheckStyles}
/>
<Dropdown
placeholder="Select an Site"
label="List of Drives"
@ -127,31 +204,13 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
onRenderCaretDown={onRenderCaretDown}
styles={dropdownStyles}
options={siteItems}
onChange={(e, selectedOption) => {
if (selectedOption.data.root == undefined) {
this._siteID = selectedOption.key.toString();
this.setState({
siteID: this._siteID,
breadcrumbItem: this._breadcrumbItem
});
} else {
this._siteID = "";
this.setState({
siteID: this._siteID,
itemID: "",
breadcrumbItem: this._breadcrumbItem
});
}
this.getDrives(selectedOption);
}}
onChange={CheckDrives}
/>
</div>
<div className={styles.column}>
<Dropdown
placeholder="50 Items"
label="Filter Items"
defaultValue={'50 Items'}
styles={dropdownFilterStyles}
options={[
{ key: 5, text: '5 Items' },
{ key: 10, text: '10 Items' },
@ -160,13 +219,27 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
{ key: 500, text: '500 Items' },
{ key: 1000, text: '1000 Items' },
]}
onChange={(e, selectedOption) => {
let _pageSize: number = +selectedOption.key;
this._pageSize = _pageSize;
this.setState({
pageSize: _pageSize
});
}}
onChange={CheckPageSize}
styles={dropdownFilterStyles}
/>
<Dropdown
placeholder="Select"
label="Select file extensions"
multiSelect
options={[
{ key: "", text: 'folder' },
{ key: "docx", text: 'docx' },
{ key: "xlsx", text: 'xlsx' },
{ key: "pptx", text: "pptx" },
{ key: "one", text: "one" },
{ key: "pdf", text: "pdf" },
{ key: "txt", text: "txt" },
{ key: "jpg", text: "jpg" },
{ key: "gif", text: "gif" },
{ key: "png", text: "png" },
]}
onChange={checkFileExtensions}
styles={dropdownFilterStyles}
/>
</div>
</div>
@ -178,9 +251,11 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
ariaLabel="Breadcrumb with items rendered as buttons"
overflowAriaLabel="More links"
/>
{(this.state.itemID != "" || this.state.itemID != "") &&
{(this.state.itemID != "") &&
<FileList
pageSize={pageSize}
className={this._customStyle}
fileExtensions={this._fileExtensions}
pageSize={this._pageSize}
siteId={this._siteID}
itemId={this._itemID}
itemClick={this.manageFolder}
@ -190,12 +265,14 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
</div>
);
}
/**
*
* @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,
@ -243,9 +320,9 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
private getDrives = async (selectedOption: IDropdownOption) => {
let itemID: any;
if (selectedOption.data.root != undefined) {
itemID = await this.getOneDriveRootFolderID(selectedOption.key)
itemID = await this.getOneDriveRootFolderID(selectedOption.key);
} else {
itemID = await this.getRootDriveFolderID(selectedOption.key)
itemID = await this.getRootDriveFolderID(selectedOption.key);
}
this._breadcrumbItem = [];