added my one drive webpart
This commit is contained in:
Siddharth Vaghasia
parent
822c62ec30
commit
dae966b91a
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
# react-myonedrive
|
||||
|
||||
## Summary
|
||||
|
||||
This is a sample web part that displays currently logged in user's one drive's file,
|
||||
This web part can be useful on the Intranet home page which can be added as My One Drive files for quick reference of user's one drive files.
|
||||
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* Show Current logged in user's One Drive Files
|
||||
* Browseable folder and files
|
||||
* Support to display icons for most known file types.
|
||||
* Breadcrum as in One Drive 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 Webpart title link clickalbe to send to One Drive URL
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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(@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)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-myonedrive" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -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 -->"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.1.1.schema.json",
|
||||
"cli": {
|
||||
"isLibraryComponent": false
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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'));
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -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"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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?'
|
||||
}),
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
</>)
|
||||
}
|
||||
}
|
||||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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: "
|
||||
}
|
||||
});
|
||||
|
|
@ -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 |
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue