Merge pull request #2013 from siddharth-vaghasia/react-mydrive

added my one drive webpart
This commit is contained in:
Hugo Bernier 2021-08-26 00:57:13 -04:00 committed by GitHub
commit 2ec9e7d133
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 25825 additions and 0 deletions

View File

@ -0,0 +1,104 @@
{
"bundles": {
"fluent-ui-theme-variant-web-part": {
"dependencies": [
{
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"componentName": "@microsoft/sp-property-pane",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
"componentName": "@microsoft/sp-loader",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
"componentName": "@ms/sp-telemetry",
"componentVersion": "0.19.2",
"isDirectDependency": false
},
{
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
"componentName": "@microsoft/sp-dynamic-data",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"componentName": "@microsoft/sp-lodash-subset",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"componentName": "@microsoft/sp-core-library",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
"componentName": "tslib",
"componentVersion": "1.10.0",
"isDirectDependency": false
},
{
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
"componentName": "@ms/odsp-core-bundle",
"componentVersion": "1.1.13",
"isDirectDependency": false
},
{
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
"componentName": "@microsoft/sp-diagnostics",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
"componentName": "@microsoft/sp-page-context",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
"componentName": "@microsoft/load-themed-styles",
"componentVersion": "0.1.2",
"isDirectDependency": false
},
{
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
"componentName": "@microsoft/sp-http",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"componentName": "react",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"componentName": "react-dom",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"componentName": "@microsoft/sp-component-base",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
"componentName": "@microsoft/sp-webpart-base",
"componentVersion": "1.12.1",
"isDirectDependency": true
}
]
}
}
}

View File

@ -0,0 +1,113 @@
{
"id": "91003ade-424e-44d5-8c1e-af1273519a18",
"alias": "FluentUiThemeVariantWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"supportsThemeVariants": true,
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Other"
},
"title": {
"default": "Fluent UI Theme Variant"
},
"description": {
"default": "Example on how to apply Fluent UI theme variant not only at Section level but at Web Part level"
},
"officeFabricIconFontName": "BackgroundColor",
"properties": {}
}
],
"loaderConfig": {
"internalModuleBaseUrls": [
"<!-- PATH TO CDN -->"
],
"entryModuleId": "fluent-ui-theme-variant-web-part",
"scriptResources": {
"fluent-ui-theme-variant-web-part": {
"type": "path",
"path": "fluent-ui-theme-variant-web-part.js"
},
"FluentUiThemeVariantWebPartStrings": {
"type": "path",
"path": "FluentUiThemeVariantWebPartStrings_en-us.js"
},
"@microsoft/sp-property-pane": {
"type": "component",
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"version": "1.12.1"
},
"@microsoft/sp-component-base": {
"type": "component",
"id": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"version": "1.12.1"
},
"@microsoft/sp-lodash-subset": {
"type": "component",
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"version": "1.12.1"
},
"@microsoft/sp-core-library": {
"type": "component",
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"version": "1.12.1"
},
"@microsoft/sp-webpart-base": {
"type": "component",
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
"version": "1.12.1"
},
"react": {
"type": "component",
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"version": "16.9.0"
},
"react-dom": {
"type": "component",
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"version": "16.9.0"
},
"PropertyControlStrings": {
"type": "localizedPath",
"paths": {
"bg-BG": "PropertyControlStrings_bg-bg.js",
"ca-ES": "PropertyControlStrings_ca-es.js",
"da-DK": "PropertyControlStrings_da-dk.js",
"de-DE": "PropertyControlStrings_de-de.js",
"el-GR": "PropertyControlStrings_el-gr.js",
"en-US": "PropertyControlStrings_en-us.js",
"es-ES": "PropertyControlStrings_es-es.js",
"et-EE": "PropertyControlStrings_et-ee.js",
"fi-FI": "PropertyControlStrings_fi-fi.js",
"fr-FR": "PropertyControlStrings_fr-fr.js",
"it-IT": "PropertyControlStrings_it-it.js",
"ja-JP": "PropertyControlStrings_ja-jp.js",
"lt-LT": "PropertyControlStrings_lt-lt.js",
"lv-LV": "PropertyControlStrings_lv-lv.js",
"nb-NO": "PropertyControlStrings_nb-no.js",
"nl-NL": "PropertyControlStrings_nl-nl.js",
"no": "PropertyControlStrings_no.js",
"pl-PL": "PropertyControlStrings_pl-pl.js",
"pt-PT": "PropertyControlStrings_pt-pt.js",
"ro-RO": "PropertyControlStrings_ro-ro.js",
"ru-RU": "PropertyControlStrings_ru-ru.js",
"sk-SK": "PropertyControlStrings_sk-sk.js",
"sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js",
"sv-SE": "PropertyControlStrings_sv-se.js",
"tr-TR": "PropertyControlStrings_tr-tr.js",
"vi-VN": "PropertyControlStrings_vi-vn.js",
"zh-CN": "PropertyControlStrings_zh-cn.js",
"zh-TW": "PropertyControlStrings_zh-tw.js"
},
"defaultPath": "PropertyControlStrings_en-us.js"
}
}
}
}

View File

@ -0,0 +1,25 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

34
samples/react-myonedrive/.gitignore vendored Normal file
View File

@ -0,0 +1,34 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
release
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts
*.scss.d.ts

View File

@ -0,0 +1,12 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.11.0",
"libraryName": "react-myonedrive",
"libraryId": "d09a20ba-afd6-4f37-ba4f-f07fa9cf3ed2",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}

View File

@ -0,0 +1,106 @@
# My OneDrive
## Summary
This is a sample web part that displays currently logged in user's OneDrive's file,
This web part can be useful on the Intranet home page which can be added as My OneDrive files for quick reference of user's OneDrive files.
![WebPart in Action](./assets/MyOneDriveInAction.gif)
## Features
* Show current user's OneDrive Files
* Browseable folder and files
* Support to display icons for most known file types.
* Breadcrum as in OneDrive App to quickly navigate
* Sorting based on Name and Modified Date column
* Options to choose fields to be displayed from Name, Modified, Modified By, File Size,Sharing
* Option to make web part title link clickalbe to send to OneDrive URL
## Compatibility
![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
![Node.js LTS v14 | LTS v12 | LTS v10](https://img.shields.io/badge/Node.js-LTS%20v14%20%7C%20LTS%20v12%20%7C%20LTS%20v10-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
- [SharePoint Framework](https://aka.ms/spfx)
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
## Prerequisites
* SharePoint Online tenant
* You have provided permission in SharePoint admin for accessing Graph API on behalf of your solution. We can do it before deployment as proactive steps, or after deployment. You can refer to [steps about how to do this post-deployment](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial#deploy-the-solution-and-grant-permissions). Basically you have to use API Access Page of SharePoint admin and add below permission for our use case.
```
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Files.Read"
},
{
"resource": "Microsoft Graph",
"scope": "Files.Read.All"
}
]
```
## Solution
Solution|Author(s)
--------|---------
react-myonedrive | [Siddharth Vaghasia](https://github.com/siddharth-vaghasia) ([@siddh_me](https://twitter.com/siddh_me))
## Version history
Version|Date|Comments
-------|----|--------
1.0|Aug 12, 2021|Initial release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
- Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
- **npm install**
- **gulp serve**
## References
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
- [Drive Graph END Point](https://docs.microsoft.com/en-us/graph/api/resources/driveitem?view=graph-rest-1.0)
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-myonedrive&authors=@YOURGITHUBUSERNAME&title=react-myonedrive%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-myonedrive&authors=@YOURGITHUBUSERNAME&title=react-myonedrive%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-myonedrive&authors=@YOURGITHUBUSERNAME&title=react-myonedrive%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-myonedrive" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

View File

@ -0,0 +1,52 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-myonedrive",
"source": "pnp",
"title": "My OneDrive",
"shortDescription": "Displays currently logged in user's OneDrive's file",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-myonedrive",
"longDescription": [
"This is a sample web part that displays currently logged in user's OneDrive's file",
"This web part can be useful on the Intranet home page which can be added as My OneDrive files for quick reference of user's OneDrive files."
],
"creationDateTime": "2021-08-12",
"updateDateTime": "2021-08-12",
"products": [
"SharePoint",
"Office"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.12.1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-myonedrive/assets/MyOneDriveInAction.gif",
"alt": "react-myonedrive"
}
],
"authors": [
{
"gitHubAccount": "siddharth-vaghasia",
"company": "",
"pictureUrl": "https://github.com/siddharth-vaghasia.png",
"name": "Siddharth Vaghasia"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

View File

@ -0,0 +1,20 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"myonedrivefiles-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/myonedrivefiles/MyonedrivefilesWebPart.js",
"manifest": "./src/webparts/myonedrivefiles/MyonedrivefilesWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"MyonedrivefilesWebPartStrings": "lib/webparts/myonedrivefiles/loc/{locale}.js",
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

View File

@ -0,0 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-myonedrive",
"accessKey": "<!-- ACCESS KEY -->"
}

View File

@ -0,0 +1,30 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-myonedrive-client-side-solution",
"id": "d09a20ba-afd6-4f37-ba4f-f07fa9cf3ed2",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Files.Read"
},
{
"resource": "Microsoft Graph",
"scope": "Files.Read.All"
}
],
"developer": {
"name": "Siddharth Vaghasia",
"websiteUrl": "https://www.siddharthvaghasia.com",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": ""
}
},
"paths": {
"zippedPackage": "solution/react-myonedrive.sppkg"
}
}

View File

@ -0,0 +1,10 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

View File

@ -0,0 +1,6 @@
{
"$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.1.1.schema.json",
"cli": {
"isLibraryComponent": false
}
}

View File

@ -0,0 +1,24 @@
/*
* User webpack settings file. You can add your own settings here.
* Changes from this file will be merged into the base webpack configuration file.
* This file will not be overwritten by the subsequent spfx-fast-serve calls.
*/
// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const webpackConfig = {
}
// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
// transform the initial webpack config here, i.e.
// initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
return initialWebpackConfig;
}
module.exports = {
webpackConfig,
transformConfig
}

22
samples/react-myonedrive/gulpfile.js vendored Normal file
View File

@ -0,0 +1,22 @@
'use strict';
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */
build.initialize(require('gulp'));

24421
samples/react-myonedrive/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,52 @@
{
"name": "react-myonedrive",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test",
"serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
},
"dependencies": {
"@fluentui/react": "^8.22.2",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@microsoft/sp-core-library": "1.12.1",
"@microsoft/sp-lodash-subset": "1.12.1",
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
"@microsoft/sp-property-pane": "1.12.1",
"@microsoft/sp-webpart-base": "1.12.1",
"@pnp/common": "^2.0.7",
"@pnp/graph": "^2.0.7",
"@pnp/logging": "^2.0.7",
"@pnp/odata": "^2.0.7",
"@pnp/spfx-controls-react": "^3.2.1",
"@pnp/spfx-property-controls": "^3.2.0",
"material-table": "^1.69.0",
"moment": "^2.29.0",
"office-ui-fabric-react": "6.214.0",
"react": "16.8.5",
"react-dom": "16.8.5"
},
"devDependencies": {
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@microsoft/sp-build-web": "1.12.1",
"@microsoft/sp-tslint-rules": "1.12.1",
"@microsoft/sp-module-interfaces": "1.12.1",
"@microsoft/sp-webpart-workbench": "1.12.1",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"gulp": "~4.0.2",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33",
"spfx-fast-serve-helpers": "~1.12.0"
}
}

View File

@ -0,0 +1,229 @@
import * as React from "react";
import { makeStyles, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from "@material-ui/core";
import * as moment from 'moment';
import { ChevronRight, ChevronRightOutlined, FileCopy } from "@material-ui/icons";
import styles from './Onedrivetable.module.scss';
import Link from '@material-ui/core/Link';
import * as strings from 'MyonedrivefilesWebPartStrings';
type OneDriveTableColumn = {
key: string,
label: any,
isSortable?: boolean,
valueFn?: (row: any, onClick?: () => void) => any,
};
const columns: OneDriveTableColumn[] = [
{
key: 'icon',
label: (<FileCopy color="disabled" />),
valueFn: (row) => getIcon(row.name)
},
{
key: 'name',
label: 'Name',
valueFn: (row, onClick) => (
<Link href={row.file && row.webUrl}
target="_blank"
className={styles.item}
onClick={() => row.folder && onClick()}>{row.name}
</Link>),
isSortable: true
},
{
key: 'lastModifiedDateTime',
label: 'Modified',
isSortable: true,
valueFn: (row) => moment(row.lastModifiedDateTime).fromNow()
},
{
key: 'lastModifiedBy',
label: 'Modified By',
valueFn: (row) => row.lastModifiedBy && row.lastModifiedBy.user && row.lastModifiedBy.user.displayName
},
{
key: 'folder',
label: 'File Size',
valueFn: (row) => row.folder ? formatFolderItems(row.folder.childCount) : formatBytes(row.size)
},
{
key: 'shared',
label: 'Sharing',
valueFn: (row) => row.shared ? "Shared" : "Private"
},
];
function getIcon(fileName) {
var extension = fileName.substring(fileName.lastIndexOf('.'));
if (!extension.includes('.'))
return <div className={styles.folderIcon}></div>;
if (extension == ".docx")
return <div className={styles.docIcon}></div>;
else if (extension == ".xlsx")
return <div className={styles.xlsxIcon}></div>;
else if (extension == ".url")
return <div className={styles.linkIcon}></div>;
else if (extension == ".pptx")
return <div className={styles.pptxIcon}></div>;
else if (extension == ".pdf")
return <div className={styles.pdfIcon}></div>;
else if (extension == ".zip")
return <div className={styles.zipIcon}></div>;
else if (extension == ".png" || extension == ".gif" || extension == ".jpeg" || extension == ".jpg" || extension == ".bmp" || extension == ".tif" || extension == ".tiff")
return <div className={styles.imgIcon}></div>;
else if (extension == ".mp3" || extension == "wav" || extension == "wma" || extension == ".aac" || extension == ".flac")
return <div className={styles.audioIcon}></div>;
else if (extension == ".mp4" || extension == ".mov" || extension == ".wmv" || extension == ".avi" || extension == ".webm")
return <div className={styles.videoIcon}></div>;
else
return <div className={styles.fileIcon}></div>;
}
function formatFolderItems(count: number) {
let countItems = '';
if (count == 1) {
countItems = count + " " + "Item";
}
else {
countItems = count + " " + "Items";
}
return countItems;
}
function formatBytes(a, b = 2) {
if (0 === a) return "0 Bytes";
const c = 0 > b ? 0 : b,
d = Math.floor(Math.log(a) / Math.log(1024));
return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + " " + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d];
}
export function OneDriveTableHead(props: { order?: 'asc' | 'desc', orderBy?: string, onRequestSort?: Function, selectedFields: any[] }) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
let selectedFields = props.selectedFields.length ? ['icon', ...props.selectedFields.map(p => p.key)] : [];
let filteredByKey: any = columns.filter(f => selectedFields.some(item => item === f.key));
return (
<TableHead >
<TableRow>
{
filteredByKey.map(c => (
<TableCell
className={styles.tblRoot}
key={c.key}
sortDirection={orderBy === c.key ? order : false}
>
{c.isSortable ? (<TableSortLabel
active={orderBy === c.key}
direction={orderBy === c.key ? order : 'asc'}
onClick={createSortHandler(c.key)}
>
{c.label}
</TableSortLabel>) : c.label}
</TableCell>
))
}
</TableRow>
</TableHead>
);
}
export function OneDriveTableBody(props: { rows: any[], selectedFields: any[], onClick: (column: OneDriveTableColumn, row: any) => void }) {
let { rows, onClick } = props;
let selectedFields = props.selectedFields.length ? ['icon', ...props.selectedFields.map(p => p.key)] : [];
let filteredByKey1: any[] = columns.filter(f => selectedFields.some(item => item === f.key));
return (
<TableBody>
{rows.map(row => (
<TableRow>
{
filteredByKey1.map(c => (
<TableCell>
{c.valueFn(row, () => onClick(c, row))}
</TableCell>
))
}
</TableRow>
)
)}
</TableBody>
);
}
function sortData(data: any[], orderBy: string, order: 'asc' | 'desc') {
const orderMultiplier = order === 'asc' ? 1 : -1;
return data.sort((v1, v2) => ((v1[orderBy] > v2[orderBy]) ? 1 : -1) * orderMultiplier);
}
export default function OneDriveTable(props: { data: any[], defaultSortKey?: string, selectedFields?: string[], activeFolder: string, getMyDriveFiles: (folderPath?: string) => void }) {
const { data, defaultSortKey, selectedFields, activeFolder, getMyDriveFiles } = props;
const [order, setOrder] = React.useState<'asc' | 'desc'>('asc');
const [orderBy, setOrderBy] = React.useState(defaultSortKey || '');
const activeFolderHierarchy = activeFolder.split('/').slice(1);
let rows = sortData(data, orderBy, order);
let folders = [], files = [];
rows.forEach(r => {
r.folder ? folders.push(r) : files.push(r);
});
rows = [...folders, ...files];
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const tableCellClickHandler = (column: OneDriveTableColumn, row: any) => {
if (column.key === 'name' && row.folder) {
getMyDriveFiles(activeFolder + "/" + row.name);
}
};
const breadcrumbClick = (index: number) => {
let folderPath = '/' + activeFolderHierarchy.slice(0, index + 1).join('/');
getMyDriveFiles(folderPath);
};
return (
<React.Fragment>
{selectedFields.length &&
<React.Fragment>
<div className={styles.breadcrumb}>
<Link className={styles.breadcrumbLink}
onClick={() => getMyDriveFiles('')}>{strings.RootFiles}</Link>
{
activeFolderHierarchy.map((folder, index) => {
return <><ChevronRight color="disabled" />
<Link className={styles.breadcrumbLink}
onClick={() => breadcrumbClick(index)}>{folder}</Link>
</>;
})
}
</div>
<TableContainer>
<Table>
<OneDriveTableHead
order={order}
orderBy={orderBy}
selectedFields={columns.filter(c => selectedFields.length && selectedFields.includes(c.key))}
onRequestSort={handleRequestSort}></OneDriveTableHead>
<OneDriveTableBody
onClick={tableCellClickHandler}
selectedFields={columns.filter(c => selectedFields.length && selectedFields.includes(c.key))}
rows={rows}></OneDriveTableBody>
</Table>
</TableContainer>
</React.Fragment>
}
</React.Fragment>
);
}

View File

@ -0,0 +1,115 @@
@import "~office-ui-fabric-react/dist/sass/References.scss";
.tblRoot {
font-weight: bold;
}
.item {
cursor: pointer;
}
.breadcrumbLinkRoot {
pointer-events: none;
font-size: 18px;
color: grey !important;
cursor: pointer;
}
.breadcrumbLink {
font-size: 18px;
color: grey !important;
cursor: pointer;
}
.breadcrumb {
display: flex;
align-items: center;
}
.folderIcon {
background: url("../../webparts/myonedrivefiles/components/icons/folder.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.fileIcon {
background: url("../../webparts/myonedrivefiles/components/icons/file.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.pdfIcon {
background: url("../../webparts/myonedrivefiles/components/icons/pdf.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.imgIcon {
background: url("../../webparts/myonedrivefiles/components/icons/photo.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.audioIcon {
background: url("../../webparts/myonedrivefiles/components/icons/audio.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.videoIcon {
background: url("../../webparts/myonedrivefiles/components/icons/video.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.zipIcon {
background: url("../../webparts/myonedrivefiles/components/icons/zip.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.docIcon {
background: url("../../webparts/myonedrivefiles/components/icons/docx.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.linkIcon {
background: url("../../webparts/myonedrivefiles/components/icons/link.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.pptxIcon {
background: url("../../webparts/myonedrivefiles/components/icons/pptx.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}
.xlsxIcon {
background: url("../../webparts/myonedrivefiles/components/icons/xlsx.svg");
height: 25px;
width: 25px;
background-size: contain;
display: block;
}

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -0,0 +1,31 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "ab23f6f4-bd91-4932-a53e-d850042ae10c",
"alias": "MyonedrivefilesWebPart",
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Other"
},
"title": {
"default": "myonedrivefiles"
},
"description": {
"default": "myonedrivefiles description"
},
"officeFabricIconFontName": "OneDriveFolder16",
"properties": {
"title": "My OneDrive Files",
"fields": ["name", "lastModifiedDateTime", "lastModifiedBy", "folder" ,"shared"]
}
}
]
}

View File

@ -0,0 +1,120 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneToggle
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'MyonedrivefilesWebPartStrings';
import Myonedrivefiles from './components/Myonedrivefiles';
import { IMyonedrivefilesProps } from './components/IMyonedrivefilesProps';
import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect';
import { MSGraphClient } from '@microsoft/sp-http';
import { sp } from "@pnp/sp";
export interface IMyonedrivefilesWebPartProps {
title: string;
fields: string[];
titleLink: boolean;
}
export default class MyonedrivefilesWebPart extends BaseClientSideWebPart<IMyonedrivefilesWebPartProps> {
private graphClient: MSGraphClient;
public onInit(): Promise<void> {
sp.setup({
spfxContext: this.context
});
return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
this.graphClient = client;
resolve();
}, err => reject(err));
});
}
public render(): void {
const element: React.ReactElement<IMyonedrivefilesProps> = React.createElement(
Myonedrivefiles,
{
context: this.context,
graphClient: this.graphClient,
title: this.properties.title,
displayMode: this.displayMode,
fields: this.properties.fields,
titleLink: this.properties.titleLink,
updateProperty: (value: string): void => {
this.properties.title = value;
}
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('title', {
label: strings.DescriptionFieldLabel
}),
PropertyFieldMultiSelect('fields', {
key: 'fields',
label: "Select fields",
options: [
{
key: 'name',
text: 'Name',
},
{
key: "lastModifiedDateTime",
text: "Modified"
},
{
key: "lastModifiedBy",
text: "Modified By"
},
{
key: 'folder',
text: 'File Size',
},
{
key: "shared",
text: "Sharing"
},
],
selectedKeys: this.properties.fields
}),
PropertyPaneToggle('titleLink', {
label: 'Show hyperlink on webpart title?'
}),
]
}
]
}
]
};
}
}

View File

@ -0,0 +1,13 @@
import { DisplayMode } from "@microsoft/sp-core-library";
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { MSGraphClient } from '@microsoft/sp-http';
export interface IMyonedrivefilesProps {
context: WebPartContext;
graphClient: MSGraphClient;
title: string;
displayMode: DisplayMode;
fields: string[];
titleLink: boolean;
updateProperty: (value: string) => void;
}

View File

@ -0,0 +1,11 @@
import { IDrive } from '@pnp/graph/onedrive';
export interface IMyonedrivefilesState {
drives: any[];
list: any[];
root: IDrive;
onedriveRootUrl: string;
onedriveFiles: any[];
errorMessage: string;
loading: boolean;
activeFolder: string;
}

View File

@ -0,0 +1,15 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.myonedrivefiles {
.noMessages {
@include ms-font-m;
}
.error {
@include ms-font-m;
color: $ms-color-alert;
}
.titleArea{
cursor: pointer;
}
}

View File

@ -0,0 +1,136 @@
import * as React from 'react';
import { IMyonedrivefilesProps } from './IMyonedrivefilesProps';
import { IMyonedrivefilesState } from './IMyonedrivefilesState';
import OneDriveTable from '../../../common/onedrivetable/OneDriveTable';
import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/components/Spinner';
import { MessageBar, MessageBarType, } from '@fluentui/react';
import * as strings from 'MyonedrivefilesWebPartStrings';
import Link from '@material-ui/core/Link';
import styles from './MyOnedrivefiles.module.scss';
export default class Myonedrivefiles extends React.Component<IMyonedrivefilesProps, IMyonedrivefilesState> {
public constructor(props: IMyonedrivefilesProps, state: IMyonedrivefilesState) {
super(props);
this.state = {
drives: [],
root: undefined,
list: [],
onedriveFiles: [],
onedriveRootUrl: '',
errorMessage: undefined,
loading: false,
activeFolder: ''
};
this.getDriveRootUrl = this.getDriveRootUrl.bind(this);
this.getmyDriveFiles = this.getmyDriveFiles.bind(this);
}
public async componentDidMount() {
this.getDriveRootUrl();
this.getmyDriveFiles();
}
public getDriveRootUrl() {
let apiUrl = `/me/drive/`;
this.props.graphClient
.api(apiUrl)
.version("v1.0")
.get((err: any, res: any): void => {
if (err) {
this.setState({
errorMessage: strings.ErrorMessage + err.message,
});
}
if (res) {
this.setState({
onedriveRootUrl: res.webUrl,
});
}
});
}
public getmyDriveFiles(folderPath = '') {
this.setState({
errorMessage: null,
loading: true,
});
let apiUrl = `/me/drive/root${folderPath ? `:/${folderPath}:` : ''}/children`;
this.props.graphClient
.api(apiUrl)
.version("v1.0")
.get((err: any, res: any): void => {
if (err) {
this.setState({
errorMessage: strings.ErrorMessage + err.message,
loading: false
});
}
if (res && res.value && res.value.length) {
this.setState({
onedriveFiles: res.value,
activeFolder: folderPath,
loading: false
});
}
else {
this.setState({
loading: false
});
}
});
}
public render(): React.ReactElement<IMyonedrivefilesProps> {
console.log("Parent Render =>", this.props);
let { loading, errorMessage, onedriveFiles, activeFolder, onedriveRootUrl } = this.state;
let { title, fields, displayMode, titleLink } = this.props;
return (
<>
{titleLink ?
<Link className={styles.titleArea} href={onedriveRootUrl}
target="_blank">
<WebPartTitle
displayMode={displayMode}
title={title}
updateProperty={() => { }} /></Link>
: <WebPartTitle
displayMode={displayMode}
title={title}
updateProperty={() => { }} />
}
{
this.state.loading &&
<Spinner label={strings.LoadingMessage} size={SpinnerSize.large} />
}
{
fields && fields.length ?
(onedriveFiles.length > 0) ?
(<OneDriveTable
data={onedriveFiles}
selectedFields={this.props.fields}
activeFolder={activeFolder}
getMyDriveFiles={this.getmyDriveFiles}
defaultSortKey={'name'}></OneDriveTable>)
: (
!loading && (
errorMessage ?
<MessageBar messageBarType={MessageBarType.error}>{errorMessage}</MessageBar> :
<MessageBar messageBarType={MessageBarType.warning}>{strings.NoFilesLabel}</MessageBar>
)
)
:
<MessageBar
messageBarType={MessageBarType.warning}>
{strings.NoFieldsLabel}</MessageBar>
}
</>);
}
}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M3.5 17h13c.275 0 .5-.225.5-.5v-13c0-.275-.225-.5-.5-.5h-13c-.275 0-.5.225-.5.5v13c0 .275.225.5.5.5z"/><path opacity=".64" fill="#605E5C" d="M16.5 18h-13c-.827 0-1.5-.673-1.5-1.5v-13C2 2.673 2.673 2 3.5 2h13c.827 0 1.5.673 1.5 1.5v13c0 .827-.673 1.5-1.5 1.5zM3.5 3a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-13a.5.5 0 00-.5-.5h-13z"/><circle fill="none" stroke="#69AFE5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="7.5" cy="12.5" r="1"/><circle fill="none" stroke="#69AFE5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="12.5" cy="11.5" r="1"/><path fill="none" stroke="#69AFE5" stroke-linejoin="round" stroke-miterlimit="10" d="M13.5 11.5v-5l-5 1v5M13.5 8l-5 1"/></svg>

After

Width:  |  Height:  |  Size: 816 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M18 7h-2.5c-.827 0-1.5-.673-1.5-1.5V2H6v16h12V7z"/><path fill="#FFF" d="M18 6v-.293l-3-3V5.5c0 .275.225.5.5.5H18z"/><path opacity=".64" fill="#605E5C" d="M18.707 5L15 1.293A1 1 0 0014.293 1H6a1 1 0 00-1 1v16a1 1 0 001 1h12a1 1 0 001-1V5.707A1 1 0 0018.707 5zM18 5.707V6h-2.5a.501.501 0 01-.5-.5V2.707l3 3zM6 17.8V2.2c0-.11.09-.2.2-.2H14v3.5A1.5 1.5 0 0015.5 7H18v10.8a.2.2 0 01-.2.2H6.2a.2.2 0 01-.2-.2z"/><path fill="#185ABD" d="M16.5 12H12v1h4.5a.5.5 0 000-1z"/><path fill="#2B7CD3" d="M16.5 10H12v1h4.5a.5.5 0 000-1z"/><path fill="#41A5EE" d="M16.5 8H12v1h4.5a.5.5 0 000-1z"/><path fill="#185ABD" d="M2 16h8a1 1 0 001-1V7a1 1 0 00-1-1H2a1 1 0 00-1 1v8a1 1 0 001 1z"/><path fill="#FFF" d="M7.21 13.936L6 9.496l-1.206 4.44h-.876L2.755 8.094h.886l.808 3.826 1.074-3.826h.866l1.153 3.916.802-3.916h.885l-1.144 5.842z"/></svg>

After

Width:  |  Height:  |  Size: 905 B

View File

@ -0,0 +1 @@
<svg fill="#4a90e2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100px" height="100px"><path d="M 30.398438 2 L 7 2 L 7 48 L 43 48 L 43 14.601563 Z M 30 15 L 30 4.398438 L 40.601563 15 Z"/></svg>

After

Width:  |  Height:  |  Size: 213 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFB900" d="M10 5L8.586 3.586A2 2 0 007.172 3H2a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1h-8z"/><path fill="#FFD75E" d="M10 5L8.586 6.414A2 2 0 017.172 7H1v9a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1h-8z"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="10" y1="5" x2="10" y2="17"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".999" stop-color="#ffd75e" stop-opacity=".3"/></linearGradient><path fill="url(#a)" d="M10 5L8.586 6.414A2 2 0 017.172 7H1v9a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1h-8z"/><path fill="#E67628" d="M2 16.5c-.373 0-.71-.142-.973-.367A.988.988 0 002 17h16c.505 0 .905-.38.973-.867-.262.226-.6.367-.973.367H2z"/><path opacity=".4" fill="#FFF" d="M8.836 6.914L10.75 5H10L8.586 6.414A2 2 0 017.172 7H1v.5h6.422a2 2 0 001.414-.586z"/></svg>

After

Width:  |  Height:  |  Size: 879 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M2 6h16V4.5c0-.275-.225-.5-.5-.5h-15c-.275 0-.5.225-.5.5V6zm.5 10h15c.275 0 .5-.225.5-.5V7H2v8.5c0 .275.225.5.5.5z"/><path opacity=".64" fill="#605E5C" d="M17.5 3h-15C1.673 3 1 3.673 1 4.5v11c0 .827.673 1.5 1.5 1.5h15c.827 0 1.5-.673 1.5-1.5v-11c0-.827-.673-1.5-1.5-1.5zm.5 12.5c0 .275-.225.5-.5.5h-15a.501.501 0 01-.5-.5V7h16v8.5zM18 6H2V4.5c0-.275.225-.5.5-.5h15c.275 0 .5.225.5.5V6z"/><ellipse fill="none" stroke="#69AFE5" stroke-miterlimit="10" cx="10" cy="11.521" rx="3.431" ry="3.021"/><ellipse fill="none" stroke="#69AFE5" stroke-miterlimit="10" cx="10" cy="11.521" rx="1.47" ry="3.021"/><path fill="none" stroke="#69AFE5" stroke-miterlimit="10" d="M7.059 10.226h5.882m-5.882 2.59h5.882"/></svg>

After

Width:  |  Height:  |  Size: 783 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M16 7h-2.5c-.827 0-1.5-.673-1.5-1.5V2H4v16h12V7z"/><path fill="#FFF" d="M16 6v-.293l-3-3V5.5c0 .275.225.5.5.5H16z"/><path opacity=".64" fill="#605E5C" d="M16.707 5L13 1.293A1 1 0 0012.293 1H4a1 1 0 00-1 1v16a1 1 0 001 1h12a1 1 0 001-1V5.707A1 1 0 0016.707 5zM16 5.707V6h-2.5a.501.501 0 01-.5-.5V2.707l3 3zM4 17.8V2.2c0-.11.09-.2.2-.2H12v3.5A1.5 1.5 0 0013.5 7H16v10.8a.2.2 0 01-.2.2H4.2a.2.2 0 01-.2-.2z"/><path fill="#C8C6C4" d="M14.5 10h-9a.5.5 0 010-1h9a.5.5 0 010 1z"/><path fill="#D65532" d="M12.795 16H7.2a.2.2 0 01-.2-.2v-3.6c0-.11.09-.2.2-.2h5.6c.11 0 .2.084.2.194-.004.678-.012 2.932-.006 3.61a.194.194 0 01-.2.196zM6 12v4a1 1 0 001 1h6a1 1 0 001-1v-4a1 1 0 00-1-1H7a1 1 0 00-1 1zm-1.25 4H3a1 1 0 01-1-1v-2a1 1 0 011-1h1.75a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25zM17 16h-1.75a.25.25 0 01-.25-.25v-3.5a.25.25 0 01.25-.25H17a1 1 0 011 1v2a1 1 0 01-1 1z"/></svg>

After

Width:  |  Height:  |  Size: 951 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M3.5 17h13c.275 0 .5-.225.5-.5v-13c0-.275-.225-.5-.5-.5h-13c-.275 0-.5.225-.5.5v13c0 .275.225.5.5.5z"/><path fill="none" stroke="#A6CCC3" stroke-miterlimit="10" d="M11.691 10.657l-.878 1.286-1.687-2.326a1 1 0 00-1.619 0l-2.39 3.296a1 1 0 00.81 1.587h8.146a1 1 0 00.826-1.564l-1.556-2.28a1 1 0 00-1.652 0z"/><circle fill="none" stroke="#FF9810" stroke-miterlimit="10" cx="13.5" cy="6.5" r="1"/><path opacity=".64" fill="#605E5C" d="M16.5 18h-13c-.827 0-1.5-.673-1.5-1.5v-13C2 2.673 2.673 2 3.5 2h13c.827 0 1.5.673 1.5 1.5v13c0 .827-.673 1.5-1.5 1.5zM3.5 3a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-13a.5.5 0 00-.5-.5h-13z"/></svg>

After

Width:  |  Height:  |  Size: 719 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M18 7h-2.5c-.827 0-1.5-.673-1.5-1.5V2H6v16h12V7z"/><path fill="#FFF" d="M18 6v-.293l-3-3V5.5c0 .275.225.5.5.5H18z"/><path opacity=".64" fill="#605E5C" d="M18.707 5L15 1.293A1 1 0 0014.293 1H6a1 1 0 00-1 1v16a1 1 0 001 1h12a1 1 0 001-1V5.707A1 1 0 0018.707 5zM18 5.707V6h-2.5a.501.501 0 01-.5-.5V2.707l3 3zM6 17.8V2.2c0-.11.09-.2.2-.2H14v3.5A1.5 1.5 0 0015.5 7H18v10.8a.2.2 0 01-.2.2H6.2a.2.2 0 01-.2-.2z"/><path fill="#ED6C47" d="M15.95 11H14l-1-1-1 1v2.489c.419.316.935.511 1.5.511a2.5 2.5 0 002.45-3z"/><path fill="#FF8F6B" d="M13.5 9a2.48 2.48 0 00-1.5.509V11h2V9.05a2.51 2.51 0 00-.5-.05z"/><path fill="#FFC7B5" d="M15 10h2a2.567 2.567 0 00-2-2v2z"/><path fill="#C43E1C" d="M2 16h8a1 1 0 001-1V7a1 1 0 00-1-1H2a1 1 0 00-1 1v8a1 1 0 001 1z"/><path fill="#F9F7F7" d="M6.08 8c.62 0 1.096.16 1.425.481.33.321.495.786.495 1.393 0 .39-.081.738-.245 1.042a1.743 1.743 0 01-.696.71 2.1 2.1 0 01-1.044.253H5V14h-.988V8H6.08zM5 11h.899C6.406 11 7 10.898 7 10c0-1.008-.641-1.012-1.069-1.012H5V11z"/></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M3.5 17h13c.275 0 .5-.225.5-.5v-13c0-.275-.225-.5-.5-.5h-13c-.275 0-.5.225-.5.5v13c0 .275.225.5.5.5z"/><path opacity=".64" fill="#605E5C" d="M16.5 18h-13c-.827 0-1.5-.673-1.5-1.5v-13C2 2.673 2.673 2 3.5 2h13c.827 0 1.5.673 1.5 1.5v13c0 .827-.673 1.5-1.5 1.5zM3.5 3a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-13a.5.5 0 00-.5-.5h-13z"/><path fill="none" stroke="#69AFE5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M12.5 10l-4-2.5v5z"/></svg>

After

Width:  |  Height:  |  Size: 558 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFF" d="M18 7h-2.5c-.827 0-1.5-.673-1.5-1.5V2H6v16h12V7z"/><path fill="#FFF" d="M18 6v-.293l-3-3V5.5c0 .275.225.5.5.5H18z"/><path opacity=".64" fill="#605E5C" d="M18.707 5L15 1.293A1 1 0 0014.293 1H6a1 1 0 00-1 1v16a1 1 0 001 1h12a1 1 0 001-1V5.707A1 1 0 0018.707 5zM18 5.707V6h-2.5a.501.501 0 01-.5-.5V2.707l3 3zM6 17.8V2.2c0-.11.09-.2.2-.2H14v3.5A1.5 1.5 0 0015.5 7H18v10.8a.2.2 0 01-.2.2H6.2a.2.2 0 01-.2-.2z"/><path fill="#134A2C" d="M16.5 12h-1c-.275 0-.5.225-.5.5s.225.5.5.5h1c.275 0 .5-.225.5-.5s-.225-.5-.5-.5zm-3 0h-1c-.275 0-.5.225-.5.5s.225.5.5.5h1c.275 0 .5-.225.5-.5s-.225-.5-.5-.5z"/><path fill="#21A366" d="M16.5 10h-1c-.275 0-.5.225-.5.5s.225.5.5.5h1c.275 0 .5-.225.5-.5s-.225-.5-.5-.5zm-3 0h-1c-.275 0-.5.225-.5.5s.225.5.5.5h1c.275 0 .5-.225.5-.5s-.225-.5-.5-.5z"/><path fill="#33C481" d="M16.5 8h-1c-.275 0-.5.225-.5.5s.225.5.5.5h1c.275 0 .5-.225.5-.5s-.225-.5-.5-.5z"/><path fill="#21A366" d="M13.5 8h-1c-.275 0-.5.225-.5.5s.225.5.5.5h1c.275 0 .5-.225.5-.5s-.225-.5-.5-.5z"/><path fill="#107C41" d="M2 16h8a1 1 0 001-1V7a1 1 0 00-1-1H2a1 1 0 00-1 1v8a1 1 0 001 1z"/><path fill="#FFF" d="M4.606 14l3.707-6H7.15l-3.755 6z"/><path fill="#FFF" d="M7.373 14L3.667 8h1.162l3.754 6z"/></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFB900" d="M10 5L8.586 3.586A2 2 0 007.172 3H2a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1h-8z"/><path fill="#FFD75E" d="M10 5L8.586 6.414A2 2 0 017.172 7H1v9a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1h-8z"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="10" y1="5" x2="10" y2="17"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".999" stop-color="#ffd75e" stop-opacity=".3"/></linearGradient><path fill="url(#a)" d="M10 5L8.586 6.414A2 2 0 017.172 7H1v9a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1h-8z"/><path fill="#E67628" d="M2 16.5c-.373 0-.71-.142-.973-.367A.988.988 0 002 17h16c.505 0 .905-.38.973-.867-.262.226-.6.367-.973.367H2z"/><path opacity=".4" fill="#FFF" d="M8.836 6.914L10.75 5H10L8.586 6.414A2 2 0 017.172 7H1v.5h6.422a2 2 0 001.414-.586z"/><path fill="#E67628" d="M2 16.5c-.373 0-.71-.142-.973-.367A.988.988 0 002 17h16c.505 0 .905-.38.973-.867-.262.226-.6.367-.973.367H2z"/><path fill="#BF5712" d="M8.75 10h-6.5a.25.25 0 00-.25.25V11h1v2H2v.75c0 .138.112.25.25.25h6.5a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25zM8 13H6v-2h2v2zm2.75 0h-.5a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25zm2 0h-.5a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25zm2 0h-.5a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25zm2 0h-.5a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25zm2 0h-.5a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25zm-17 0H1v-2h.75a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25z"/></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,12 @@
define([], function () {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "WebPart Title",
"NoFilesLabel": "No files were found",
"NoFieldsLabel" : "Please select fields",
"RootFiles" : "My files",
"LoadingMessage": "Getting files",
"ErrorMessage": "Getting error while retrieving onedrive files: "
}
});

View File

@ -0,0 +1,15 @@
declare interface IMyonedrivefilesWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
NoFilesLabel : string;
NoFieldsLabel : string;
ErrorMessage: string;
RootFiles: string;
LoadingMessage: string;
}
declare module 'MyonedrivefilesWebPartStrings' {
const strings: IMyonedrivefilesWebPartStrings;
export = strings;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 B

View File

@ -0,0 +1,40 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection",
"ES2018"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",
"lib"
]
}

View File

@ -0,0 +1,30 @@
{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}