Add react-file-upload sample (#415)
* Adds SPFx react slide swiper sample (#412) * Add files via upload Add initial files to the repository * Add package-lock.json to react-file-upload it will fix the this error when you run Gulp serve: SPFileUpload-master/node_modules/react-dropzone-component/typescript/types"' has no default export.
This commit is contained in:
Ramin Ahmadi
Vesa Juvonen
parent
c177a89297
commit
a342425d05
|
|
@ -0,0 +1,61 @@
|
|||
# React File Upload WebPart
|
||||
|
||||
## Summary
|
||||
The file upload web part allowing users to upload multiple files to a document library or as item attachments.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
> Update accordingly as needed.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> Site Collection created under the **/sites/** Managed Path
|
||||
> Existing document library or a list
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-file-upload|Ramin Ahmadi
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|February 14, 2018|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
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
## Features
|
||||
This project contains sample client-side web parts built on the SharePoint Framework using React illustrating working with file upload web part.
|
||||
This sample illustrates the following concepts on top of the SharePoint Framework:
|
||||
- using React for building SharePoint Framework client-side web parts
|
||||
- using React components for building file upload web part
|
||||
- using [DropzoneJs](http://www.dropzonejs.com/) for uploading files
|
||||
- uploading files to a document library
|
||||
- uploading files as item attachments by getting the item ID from the query string parameter
|
||||
- uploading files using RestAPI
|
||||
- drag and drop feature for uploading files
|
||||
- ability to remove uploaded files
|
||||
- ability limit users to upload accepted file types
|
||||
- using sp-pnp-js to delete uploaded files
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 804 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"file-upload-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/fileUpload/FileUploadWebPart.js",
|
||||
"manifest": "./src/webparts/fileUpload/FileUploadWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"FileUploadWebPartStrings": "lib/webparts/fileUpload/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "dixons-carphone",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "SPFileUpload-client-side-solution",
|
||||
"id": "297016d1-8144-431f-87e5-fe5272d0a226",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/SPFileUpload.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"$schema": "https://dev.office.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,45 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
|
||||
// Display errors as warnings
|
||||
"displayAsWarning": true,
|
||||
// The TSLint task may have been configured with several custom lint rules
|
||||
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||
// project). If true, this flag will deactivate any of these rules.
|
||||
"removeExistingRules": true,
|
||||
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||
"useDefaultConfigAsBase": false,
|
||||
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||
// which are active, other than the list of rules below.
|
||||
"lintConfig": {
|
||||
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||
"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-case": true,
|
||||
"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,
|
||||
"valid-typeof": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
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.`);
|
||||
|
||||
build.initialize(gulp);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "dixons-carphone",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "~1.4.0",
|
||||
"@microsoft/sp-lodash-subset": "~1.4.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "~1.4.0",
|
||||
"@microsoft/sp-webpart-base": "~1.4.0",
|
||||
"@types/react": "15.6.6",
|
||||
"@types/react-dom": "15.5.6",
|
||||
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2",
|
||||
"react-dropzone-component": "^3.0.0",
|
||||
"sp-pnp-js": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.4.0",
|
||||
"@microsoft/sp-module-interfaces": "~1.4.0",
|
||||
"@microsoft/sp-webpart-workbench": "~1.4.0",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": ">=3.4.34 <3.6.0",
|
||||
"@types/mocha": ">=2.2.33 <2.6.0",
|
||||
"ajv": "~5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './common/propertyFieldHeader/index';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './propertyFields/listPicker/index';
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import * as React from 'react';
|
||||
|
||||
/**
|
||||
* Enum to describe possible events to show callout
|
||||
*/
|
||||
export enum CalloutTriggers {
|
||||
Click = 1,
|
||||
Hover
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface that discibes available settings of Header callout
|
||||
*/
|
||||
export interface IPropertyFieldHeaderCalloutProps {
|
||||
/**
|
||||
* Callout content - any HTML
|
||||
*/
|
||||
calloutContent?: React.ReactNode;
|
||||
/**
|
||||
* Custom width for callout including borders. If value is 0, no width is applied.
|
||||
*/
|
||||
calloutWidth?: number;
|
||||
/**
|
||||
* Event to show the callout
|
||||
*/
|
||||
calloutTrigger?: CalloutTriggers;
|
||||
/**
|
||||
* The gap between the Callout and the target
|
||||
*/
|
||||
gapSpace?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* PropertyFieldHeader component props
|
||||
*/
|
||||
export interface IPropertyFieldHeaderProps extends IPropertyFieldHeaderCalloutProps {
|
||||
/**
|
||||
* The label to be shown in the header
|
||||
*/
|
||||
label?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* PropertyFieldHeader component state
|
||||
*/
|
||||
export interface IPropertyFieldHeaderState {
|
||||
/**
|
||||
* Flag if the callout is currently visible
|
||||
*/
|
||||
isCalloutVisible?: boolean;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.headerBar {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
.header {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
top: 3px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.headerCallout {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* tslint:disable */
|
||||
require('./PropertyFieldHeader.module.css');
|
||||
const styles = {
|
||||
headerBar: 'headerBar_de667ef4',
|
||||
header: 'header_de667ef4',
|
||||
info: 'info_de667ef4',
|
||||
headerCallout: 'headerCallout_de667ef4',
|
||||
};
|
||||
|
||||
export default styles;
|
||||
/* tslint:enable */
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import * as React from 'react';
|
||||
import { IconButton, Callout, DirectionalHint } from 'office-ui-fabric-react';
|
||||
import { IPropertyFieldHeaderProps, IPropertyFieldHeaderState, CalloutTriggers } from './IPropertyFieldHeader';
|
||||
|
||||
import styles from './PropertyFieldHeader.module.scss';
|
||||
|
||||
/**
|
||||
* PropertyFieldHeader component.
|
||||
* Displays a label and a callout
|
||||
*/
|
||||
export default class PropertyFieldHeader extends React.Component<IPropertyFieldHeaderProps, IPropertyFieldHeaderState> {
|
||||
|
||||
private _infoIcon: HTMLElement;
|
||||
|
||||
public constructor(props: IPropertyFieldHeaderProps, state: IPropertyFieldHeaderState) {
|
||||
super(props, state);
|
||||
this._onCalloutDismiss = this._onCalloutDismiss.bind(this);
|
||||
this.state = {
|
||||
isCalloutVisible: false
|
||||
};
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<div className={styles.headerBar}>
|
||||
<div className={styles.header}>
|
||||
{this.props.label}
|
||||
</div>
|
||||
<div className={styles.info}>
|
||||
<i className={'ms-Icon ms-Icon--Info'} ref={(infoIcon) => { this._infoIcon = infoIcon; }}
|
||||
onMouseOver={this.props.calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOver.bind(this) : null}
|
||||
onMouseOut={this.props.calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOut.bind(this) : null}
|
||||
onClick={this.props.calloutTrigger === CalloutTriggers.Click ? this._onInfoIconClick.bind(this) : null}></i>
|
||||
</div>
|
||||
{this.state.isCalloutVisible && (
|
||||
<Callout
|
||||
className={styles.headerCallout}
|
||||
target={this._infoIcon}
|
||||
isBeakVisible={true}
|
||||
directionalHint={DirectionalHint.leftCenter}
|
||||
directionalHintForRTL={DirectionalHint.rightCenter}
|
||||
onDismiss={this._onCalloutDismiss}
|
||||
gapSpace={this.props.gapSpace !== undefined ? this.props.gapSpace : 5}
|
||||
calloutWidth={this.props.calloutWidth}>
|
||||
{this.props.calloutContent}
|
||||
</Callout>
|
||||
)
|
||||
}
|
||||
</div>);
|
||||
}
|
||||
|
||||
|
||||
private _onCalloutDismiss() {
|
||||
if (this.state.isCalloutVisible) {
|
||||
this.setState({
|
||||
isCalloutVisible: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _onInfoIconMouseOver(): void {
|
||||
if (this.props.calloutTrigger !== CalloutTriggers.Hover) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.state.isCalloutVisible) {
|
||||
this.setState({
|
||||
isCalloutVisible: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _onInfoIconMouseOut(e: MouseEvent): void {
|
||||
if (this.props.calloutTrigger !== CalloutTriggers.Hover) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.relatedTarget) {
|
||||
|
||||
let relatedTarget: HTMLElement = (e.relatedTarget as HTMLElement);
|
||||
if (relatedTarget && relatedTarget.closest('.ms-Callout-container')) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isCalloutVisible: false
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
private _onInfoIconClick(): void {
|
||||
if (this.props.calloutTrigger !== CalloutTriggers.Click) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isCalloutVisible: !this.state.isCalloutVisible
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './IPropertyFieldHeader';
|
||||
export * from './PropertyFieldHeader';
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from 'react';
|
||||
|
||||
|
||||
export interface IFieldErrorMessageProps {
|
||||
|
||||
errorMessage: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component that shows an error message when something went wront with the property control
|
||||
*/
|
||||
export default class FieldErrorMessage extends React.Component<IFieldErrorMessageProps> {
|
||||
public render(): JSX.Element {
|
||||
if (this.props.errorMessage !== 'undefined' && this.props.errorMessage !== null && this.props.errorMessage !== '') {
|
||||
return (
|
||||
<div style={{ paddingBottom: '8px' }}><div aria-live='assertive' className='ms-u-screenReaderOnly' data-automation-id='error-message'>{this.props.errorMessage}</div>
|
||||
<span>
|
||||
<p className='ms-TextField-errorMessage ms-u-slideDownIn20'>{this.props.errorMessage}</p>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
|
||||
import { IPropertyFieldListPickerPropsInternal } from './IPropertyFieldListPicker';
|
||||
|
||||
/**
|
||||
* PropertyFieldListPickerHost properties interface
|
||||
*/
|
||||
export interface IPropertyFieldListMultiPickerHostProps extends IPropertyFieldListPickerPropsInternal {
|
||||
|
||||
onChange: (targetProperty?: string, newValue?: any) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* PropertyFieldSPListMultiplePickerHost state interface
|
||||
*/
|
||||
export interface IPropertyFieldListMultiPickerHostState {
|
||||
|
||||
results: IChoiceGroupOption[];
|
||||
selectedKeys: string[];
|
||||
loaded: boolean;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
import { IWebPartContext, IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
|
||||
|
||||
/**
|
||||
* Enum for specifying how the lists should be sorted
|
||||
*/
|
||||
export enum PropertyFieldListPickerOrderBy {
|
||||
Id = 1,
|
||||
Title
|
||||
}
|
||||
|
||||
/**
|
||||
* Public properties of the PropertyFieldListPicker custom field
|
||||
*/
|
||||
export interface IPropertyFieldListPickerProps {
|
||||
|
||||
/**
|
||||
* Property field label displayed on top
|
||||
*/
|
||||
label: string;
|
||||
/**
|
||||
* Context of the current web part
|
||||
*/
|
||||
context: IWebPartContext;
|
||||
/**
|
||||
* Initial selected list set of the control
|
||||
*/
|
||||
selectedList?: string | string[];
|
||||
/**
|
||||
* BaseTemplate ID of the lists or libaries you want to return.
|
||||
*/
|
||||
baseTemplate?: number;
|
||||
/**
|
||||
* Specify if you want to include or exclude hidden lists. By default this is true.
|
||||
*/
|
||||
includeHidden?: boolean;
|
||||
/**
|
||||
* Specify the property on which you want to order the retrieve set of lists.
|
||||
*/
|
||||
orderBy?: PropertyFieldListPickerOrderBy;
|
||||
/**
|
||||
* Specify if you want to have a single or mult list selector.
|
||||
*/
|
||||
multiSelect?: boolean;
|
||||
/**
|
||||
* Defines a onPropertyChange function to raise when the selected value changed.
|
||||
* Normally this function must be always defined with the 'this.onPropertyChange'
|
||||
* method of the web part object.
|
||||
*/
|
||||
onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
|
||||
/**
|
||||
* Parent Web Part properties
|
||||
*/
|
||||
properties: any;
|
||||
/**
|
||||
* An UNIQUE key indicates the identity of this control
|
||||
*/
|
||||
key?: string;
|
||||
/**
|
||||
* Whether the property pane field is enabled or not.
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* The method is used to get the validation error message and determine whether the input value is valid or not.
|
||||
*
|
||||
* When it returns string:
|
||||
* - If valid, it returns empty string.
|
||||
* - If invalid, it returns the error message string and the text field will
|
||||
* show a red border and show an error message below the text field.
|
||||
*
|
||||
* When it returns Promise<string>:
|
||||
* - The resolved value is display as error message.
|
||||
* - The rejected, the value is thrown away.
|
||||
*
|
||||
*/
|
||||
onGetErrorMessage?: (value: string) => string | Promise<string>;
|
||||
/**
|
||||
* Custom Field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
|
||||
* Default value is 200.
|
||||
*/
|
||||
deferredValidationTime?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Private properties of the PropertyFieldListPicker custom field.
|
||||
* We separate public & private properties to include onRender & onDispose method waited
|
||||
* by the PropertyFieldCustom, witout asking to the developer to add it when he's using
|
||||
* the PropertyFieldListPicker.
|
||||
*
|
||||
*/
|
||||
export interface IPropertyFieldListPickerPropsInternal extends IPropertyFieldListPickerProps, IPropertyPaneCustomFieldProps {
|
||||
|
||||
label: string;
|
||||
targetProperty: string;
|
||||
context: IWebPartContext;
|
||||
selectedList?: string;
|
||||
selectedLists?: string[];
|
||||
baseTemplate?: number;
|
||||
orderBy?: PropertyFieldListPickerOrderBy;
|
||||
includeHidden?: boolean;
|
||||
onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
|
||||
properties: any;
|
||||
key: string;
|
||||
disabled?: boolean;
|
||||
onGetErrorMessage?: (value: string | string[]) => string | Promise<string>;
|
||||
deferredValidationTime?: number;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { IPropertyFieldListPickerPropsInternal } from './IPropertyFieldListPicker';
|
||||
import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
|
||||
|
||||
/**
|
||||
* PropertyFieldListPickerHost properties interface
|
||||
*/
|
||||
export interface IPropertyFieldListPickerHostProps extends IPropertyFieldListPickerPropsInternal {
|
||||
|
||||
onChange: (targetProperty?: string, newValue?: any) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* PropertyFieldListPickerHost state interface
|
||||
*/
|
||||
export interface IPropertyFieldListPickerHostState {
|
||||
|
||||
results: IDropdownOption[];
|
||||
selectedKey?: string;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a collection of SharePoint lists
|
||||
*/
|
||||
export interface ISPLists {
|
||||
|
||||
value: ISPList[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a SharePoint list
|
||||
*/
|
||||
export interface ISPList {
|
||||
|
||||
Title: string;
|
||||
Id: string;
|
||||
BaseTemplate: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import * as React from 'react';
|
||||
import { Label } from 'office-ui-fabric-react/lib/Label';
|
||||
import { IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
|
||||
import { Spinner, SpinnerType } from 'office-ui-fabric-react/lib/Spinner';
|
||||
import { Async } from 'office-ui-fabric-react/lib/Utilities';
|
||||
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
|
||||
import { IPropertyFieldListMultiPickerHostProps, IPropertyFieldListMultiPickerHostState } from './IPropertyFieldListMultiPickerHost';
|
||||
import { ISPLists, ISPList } from './IPropertyFieldListPickerHost';
|
||||
import SPListPickerService from '../../services/SPListPickerService';
|
||||
import FieldErrorMessage from '../errorMessage/FieldErrorMessage';
|
||||
|
||||
/**
|
||||
* Renders the controls for PropertyFieldSPListMultiplePicker component
|
||||
*/
|
||||
export default class PropertyFieldListMultiPickerHost extends React.Component<IPropertyFieldListMultiPickerHostProps, IPropertyFieldListMultiPickerHostState> {
|
||||
private options: IChoiceGroupOption[] = [];
|
||||
private loaded: boolean = false;
|
||||
private async: Async;
|
||||
private delayedValidate: (value: string[]) => void;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(props: IPropertyFieldListMultiPickerHostProps) {
|
||||
super(props);
|
||||
|
||||
this.onChanged = this.onChanged.bind(this);
|
||||
this.state = {
|
||||
results: this.options,
|
||||
selectedKeys: [],
|
||||
loaded: this.loaded,
|
||||
errorMessage: ''
|
||||
};
|
||||
|
||||
this.async = new Async(this);
|
||||
this.validate = this.validate.bind(this);
|
||||
this.notifyAfterValidate = this.notifyAfterValidate.bind(this);
|
||||
this.delayedValidate = this.async.debounce(this.validate, this.props.deferredValidationTime);
|
||||
|
||||
this.loadLists();
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the list from SharePoint current web site
|
||||
*/
|
||||
private loadLists(): void {
|
||||
// Builds the SharePoint List service
|
||||
const listService: SPListPickerService = new SPListPickerService(this.props, this.props.context);
|
||||
// Gets the libs
|
||||
listService.getLibs().then((response: ISPLists) => {
|
||||
response.value.map((list: ISPList) => {
|
||||
let isSelected: boolean = false;
|
||||
let indexInExisting: number = -1;
|
||||
// Defines if the current list must be selected by default
|
||||
if (this.props.selectedLists) {
|
||||
indexInExisting = this.props.selectedLists.indexOf(list.Id);
|
||||
}
|
||||
|
||||
if (indexInExisting > -1) {
|
||||
isSelected = true;
|
||||
this.state.selectedKeys.push(list.Id);
|
||||
}
|
||||
// Add the option to the list
|
||||
this.options.push({
|
||||
key: list.Id,
|
||||
text: list.Title,
|
||||
checked: isSelected
|
||||
});
|
||||
});
|
||||
this.loaded = true;
|
||||
this.setState({ results: this.options, selectedKeys: this.state.selectedKeys, loaded: true });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Raises when a list has been selected
|
||||
*/
|
||||
private onChanged(element: React.FormEvent<HTMLElement>, isChecked: boolean): void {
|
||||
if (element) {
|
||||
const value: string = (element.currentTarget as any).value;
|
||||
let selectedKeys = this.state.selectedKeys;
|
||||
// Check if the element is selected
|
||||
if (isChecked === false) {
|
||||
// Remove the unselected item
|
||||
selectedKeys = selectedKeys.filter(s => s !== value);
|
||||
} else {
|
||||
// Add the selected item and filter out the doubles
|
||||
selectedKeys.push(value);
|
||||
selectedKeys = selectedKeys.filter((item, pos, self) => {
|
||||
return self.indexOf(item) == pos;
|
||||
});
|
||||
}
|
||||
// Update the state and validate
|
||||
this.setState({
|
||||
selectedKeys: selectedKeys
|
||||
});
|
||||
this.delayedValidate(selectedKeys);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates the new custom field value
|
||||
*/
|
||||
private validate(value: string[]): void {
|
||||
if (this.props.onGetErrorMessage === null || typeof this.props.onGetErrorMessage === 'undefined') {
|
||||
this.notifyAfterValidate(this.props.selectedLists, value);
|
||||
return;
|
||||
}
|
||||
|
||||
const result: string | PromiseLike<string> = this.props.onGetErrorMessage(value || []);
|
||||
if (typeof result !== 'undefined') {
|
||||
if (typeof result === 'string') {
|
||||
if (result === '') {
|
||||
this.notifyAfterValidate(this.props.selectedLists, value);
|
||||
}
|
||||
this.setState({
|
||||
errorMessage: result
|
||||
});
|
||||
} else {
|
||||
result.then((errorMessage: string) => {
|
||||
if (typeof errorMessage === 'undefined' || errorMessage === '') {
|
||||
this.notifyAfterValidate(this.props.selectedLists, value);
|
||||
}
|
||||
this.setState({
|
||||
errorMessage: errorMessage
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.notifyAfterValidate(this.props.selectedLists, value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Notifies the parent Web Part of a property value change
|
||||
*/
|
||||
private notifyAfterValidate(oldValue: string[], newValue: string[]) {
|
||||
if (this.props.onPropertyChange && newValue !== null) {
|
||||
this.props.properties[this.props.targetProperty] = newValue;
|
||||
this.props.onPropertyChange(this.props.targetProperty, oldValue, newValue);
|
||||
// Trigger the apply button
|
||||
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
|
||||
this.props.onChange(this.props.targetProperty, newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the component will unmount
|
||||
*/
|
||||
public componentWillUnmount() {
|
||||
this.async.dispose();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the SPListMultiplePicker controls with Office UI Fabric
|
||||
*/
|
||||
public render(): JSX.Element {
|
||||
if (this.loaded === false) {
|
||||
return (
|
||||
<div>
|
||||
<Label>{this.props.label}</Label>
|
||||
<Spinner type={SpinnerType.normal} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const styleOfLabel: any = {
|
||||
color: this.props.disabled === true ? '#A6A6A6' : 'auto'
|
||||
};
|
||||
|
||||
// Renders content
|
||||
return (
|
||||
<div>
|
||||
<Label>{this.props.label}</Label>
|
||||
{
|
||||
this.options.map((item: IChoiceGroupOption, index: number) => {
|
||||
const uniqueKey = this.props.targetProperty + '-' + item.key;
|
||||
return (
|
||||
<div style={{ marginBottom: '5px' }} className='ms-ChoiceField' key={`${this.props.key}-multiplelistpicker-${index}`}>
|
||||
<Checkbox
|
||||
defaultChecked={item.checked}
|
||||
disabled={this.props.disabled}
|
||||
label={item.text}
|
||||
onChange={this.onChanged}
|
||||
inputProps={{ value: item.key }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
<FieldErrorMessage errorMessage={this.state.errorMessage} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
IPropertyPaneField,
|
||||
PropertyPaneFieldType,
|
||||
IWebPartContext
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import PropertyFieldListPickerHost from './PropertyFieldListPickerHost';
|
||||
import PropertyFieldListMultiPickerHost from './PropertyFieldListMultiPickerHost';
|
||||
import { IPropertyFieldListPickerHostProps } from './IPropertyFieldListPickerHost';
|
||||
import { IPropertyFieldListMultiPickerHostProps } from './IPropertyFieldListMultiPickerHost';
|
||||
import { PropertyFieldListPickerOrderBy, IPropertyFieldListPickerProps, IPropertyFieldListPickerPropsInternal } from './IPropertyFieldListPicker';
|
||||
|
||||
/**
|
||||
* Represents a PropertyFieldListPicker object
|
||||
*/
|
||||
class PropertyFieldListPickerBuilder implements IPropertyPaneField<IPropertyFieldListPickerPropsInternal> {
|
||||
|
||||
//Properties defined by IPropertyPaneField
|
||||
public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
|
||||
public targetProperty: string;
|
||||
public properties: IPropertyFieldListPickerPropsInternal;
|
||||
|
||||
//Custom properties label: string;
|
||||
private label: string;
|
||||
private context: IWebPartContext;
|
||||
private selectedList: string;
|
||||
private selectedLists: string[];
|
||||
private baseTemplate: number;
|
||||
private orderBy: PropertyFieldListPickerOrderBy;
|
||||
private multiSelect: boolean;
|
||||
private includeHidden: boolean;
|
||||
|
||||
public onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void { }
|
||||
private customProperties: any;
|
||||
private key: string;
|
||||
private disabled: boolean = false;
|
||||
private onGetErrorMessage: (value: string) => string | Promise<string>;
|
||||
private deferredValidationTime: number = 200;
|
||||
private renderWebPart: () => void;
|
||||
private disableReactivePropertyChanges: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor method
|
||||
*/
|
||||
public constructor(_targetProperty: string, _properties: IPropertyFieldListPickerPropsInternal) {
|
||||
this.render = this.render.bind(this);
|
||||
this.targetProperty = _targetProperty;
|
||||
this.properties = _properties;
|
||||
this.properties.onDispose = this.dispose;
|
||||
this.properties.onRender = this.render;
|
||||
this.label = _properties.label;
|
||||
this.context = _properties.context;
|
||||
this.selectedList = _properties.selectedList;
|
||||
this.selectedLists = _properties.selectedLists;
|
||||
this.baseTemplate = _properties.baseTemplate;
|
||||
this.orderBy = _properties.orderBy;
|
||||
this.multiSelect = _properties.multiSelect;
|
||||
this.includeHidden = _properties.includeHidden;
|
||||
this.onPropertyChange = _properties.onPropertyChange;
|
||||
this.customProperties = _properties.properties;
|
||||
this.key = _properties.key;
|
||||
this.onGetErrorMessage = _properties.onGetErrorMessage;
|
||||
|
||||
if (_properties.disabled === true) {
|
||||
this.disabled = _properties.disabled;
|
||||
}
|
||||
if (_properties.deferredValidationTime) {
|
||||
this.deferredValidationTime = _properties.deferredValidationTime;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the SPListPicker field content
|
||||
*/
|
||||
private render(elem: HTMLElement, ctx?: any, changeCallback?: (targetProperty?: string, newValue?: any) => void): void {
|
||||
const componentProps = {
|
||||
label: this.label,
|
||||
targetProperty: this.targetProperty,
|
||||
context: this.context,
|
||||
baseTemplate: this.baseTemplate,
|
||||
orderBy: this.orderBy,
|
||||
multiSelect: this.multiSelect,
|
||||
includeHidden: this.includeHidden,
|
||||
onDispose: this.dispose,
|
||||
onRender: this.render,
|
||||
onChange: changeCallback,
|
||||
onPropertyChange: this.onPropertyChange,
|
||||
properties: this.customProperties,
|
||||
key: this.key,
|
||||
disabled: this.disabled,
|
||||
onGetErrorMessage: this.onGetErrorMessage,
|
||||
deferredValidationTime: this.deferredValidationTime
|
||||
};
|
||||
|
||||
// Check if the multi or single select component has to get loaded
|
||||
if (this.multiSelect) {
|
||||
// Multi selector
|
||||
componentProps['selectedLists'] = this.selectedLists;
|
||||
const element: React.ReactElement<IPropertyFieldListMultiPickerHostProps> = React.createElement(PropertyFieldListMultiPickerHost, componentProps);
|
||||
// Calls the REACT content generator
|
||||
ReactDom.render(element, elem);
|
||||
} else {
|
||||
// Single selector
|
||||
componentProps['selectedList'] = this.selectedList;
|
||||
const element: React.ReactElement<IPropertyFieldListPickerHostProps> = React.createElement(PropertyFieldListPickerHost, componentProps);
|
||||
// Calls the REACT content generator
|
||||
ReactDom.render(element, elem);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disposes the current object
|
||||
*/
|
||||
private dispose(elem: HTMLElement): void {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper method to create a SPList Picker on the PropertyPane.
|
||||
* @param targetProperty - Target property the SharePoint list picker is associated to.
|
||||
* @param properties - Strongly typed SPList Picker properties.
|
||||
*/
|
||||
export function PropertyFieldListPicker(targetProperty: string, properties: IPropertyFieldListPickerProps): IPropertyPaneField<IPropertyFieldListPickerPropsInternal> {
|
||||
|
||||
//Create an internal properties object from the given properties
|
||||
const newProperties: IPropertyFieldListPickerPropsInternal = {
|
||||
label: properties.label,
|
||||
targetProperty: targetProperty,
|
||||
context: properties.context,
|
||||
selectedList: typeof properties.selectedList === 'string' ? properties.selectedList : null,
|
||||
selectedLists: typeof properties.selectedList !== 'string' ? properties.selectedList : null,
|
||||
baseTemplate: properties.baseTemplate,
|
||||
orderBy: properties.orderBy,
|
||||
multiSelect: properties.multiSelect || false,
|
||||
includeHidden: properties.includeHidden,
|
||||
onPropertyChange: properties.onPropertyChange,
|
||||
properties: properties.properties,
|
||||
onDispose: null,
|
||||
onRender: null,
|
||||
key: properties.key,
|
||||
disabled: properties.disabled,
|
||||
onGetErrorMessage: properties.onGetErrorMessage,
|
||||
deferredValidationTime: properties.deferredValidationTime
|
||||
};
|
||||
//Calls the PropertyFieldListPicker builder object
|
||||
//This object will simulate a PropertyFieldCustom to manage his rendering process
|
||||
return new PropertyFieldListPickerBuilder(targetProperty, newProperties);
|
||||
}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
import * as React from 'react';
|
||||
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
|
||||
import { Async } from 'office-ui-fabric-react/lib/Utilities';
|
||||
import { Label } from 'office-ui-fabric-react/lib/Label';
|
||||
import { IPropertyFieldListPickerHostProps, IPropertyFieldListPickerHostState, ISPList, ISPLists } from './IPropertyFieldListPickerHost';
|
||||
import SPListPickerService from '../../services/SPListPickerService';
|
||||
import FieldErrorMessage from '../errorMessage/FieldErrorMessage';
|
||||
|
||||
// Empty list value, to be checked for single list selection
|
||||
const EMPTY_LIST_KEY = 'NO_LIST_SELECTED';
|
||||
|
||||
/**
|
||||
* Renders the controls for PropertyFieldListPicker component
|
||||
*/
|
||||
export default class PropertyFieldListPickerHost extends React.Component<IPropertyFieldListPickerHostProps, IPropertyFieldListPickerHostState> {
|
||||
private options: IDropdownOption[] = [];
|
||||
private selectedKey: string;
|
||||
|
||||
private latestValidateValue: string;
|
||||
private async: Async;
|
||||
private delayedValidate: (value: string) => void;
|
||||
|
||||
/**
|
||||
* Constructor method
|
||||
*/
|
||||
constructor(props: IPropertyFieldListPickerHostProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
results: this.options,
|
||||
errorMessage: ''
|
||||
};
|
||||
|
||||
this.async = new Async(this);
|
||||
this.validate = this.validate.bind(this);
|
||||
this.onChanged = this.onChanged.bind(this);
|
||||
this.notifyAfterValidate = this.notifyAfterValidate.bind(this);
|
||||
this.delayedValidate = this.async.debounce(this.validate, this.props.deferredValidationTime);
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
// Start retrieving the SharePoint lists
|
||||
this.loadLists();
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the list from SharePoint current web site
|
||||
*/
|
||||
private loadLists(): void {
|
||||
const listService: SPListPickerService = new SPListPickerService(this.props, this.props.context);
|
||||
listService.getLibs().then((response: ISPLists) => {
|
||||
// Start mapping the list that are selected
|
||||
response.value.map((list: ISPList) => {
|
||||
if (this.props.selectedList === list.Id) {
|
||||
this.selectedKey = list.Id;
|
||||
}
|
||||
this.options.push({
|
||||
key: list.Id,
|
||||
text: list.Title
|
||||
});
|
||||
});
|
||||
|
||||
// Option to unselect the list
|
||||
this.options.unshift({
|
||||
key: EMPTY_LIST_KEY,
|
||||
text: ''
|
||||
});
|
||||
|
||||
// Update the current component state
|
||||
this.setState({
|
||||
results: this.options,
|
||||
selectedKey: this.selectedKey
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Raises when a list has been selected
|
||||
*/
|
||||
private onChanged(option: IDropdownOption, index?: number): void {
|
||||
const newValue: string = option.key as string;
|
||||
this.delayedValidate(newValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates the new custom field value
|
||||
*/
|
||||
private validate(value: string): void {
|
||||
if (this.props.onGetErrorMessage === null || this.props.onGetErrorMessage === undefined) {
|
||||
this.notifyAfterValidate(this.props.selectedList, value);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.latestValidateValue === value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.latestValidateValue = value;
|
||||
|
||||
const result: string | PromiseLike<string> = this.props.onGetErrorMessage(value || '');
|
||||
if (typeof result !== 'undefined') {
|
||||
if (typeof result === 'string') {
|
||||
if (result === '') {
|
||||
this.notifyAfterValidate(this.props.selectedList, value);
|
||||
}
|
||||
this.setState({
|
||||
errorMessage: result
|
||||
});
|
||||
} else {
|
||||
result.then((errorMessage: string) => {
|
||||
if (typeof errorMessage === 'undefined' || errorMessage === '') {
|
||||
this.notifyAfterValidate(this.props.selectedList, value);
|
||||
}
|
||||
this.setState({
|
||||
errorMessage: errorMessage
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.notifyAfterValidate(this.props.selectedList, value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Notifies the parent Web Part of a property value change
|
||||
*/
|
||||
private notifyAfterValidate(oldValue: string, newValue: string) {
|
||||
// Check if the user wanted to unselect the list
|
||||
const propValue = newValue === EMPTY_LIST_KEY ? '' : newValue;
|
||||
|
||||
// Deselect all options
|
||||
this.options = this.state.results.map(option => {
|
||||
if (option.selected) {
|
||||
option.selected = false;
|
||||
}
|
||||
return option;
|
||||
});
|
||||
// Set the current selected key
|
||||
this.selectedKey = newValue;
|
||||
// Update the state
|
||||
this.setState({
|
||||
selectedKey: this.selectedKey,
|
||||
results: this.options
|
||||
});
|
||||
|
||||
if (this.props.onPropertyChange && propValue !== null) {
|
||||
// Store the new property value
|
||||
this.props.properties[this.props.targetProperty] = propValue;
|
||||
// Trigger the default onPrpertyChange event
|
||||
this.props.onPropertyChange(this.props.targetProperty, oldValue, propValue);
|
||||
// Trigger the apply button
|
||||
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
|
||||
this.props.onChange(this.props.targetProperty, propValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the component will unmount
|
||||
*/
|
||||
public componentWillUnmount() {
|
||||
if (typeof this.async !== 'undefined') {
|
||||
this.async.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the SPListpicker controls with Office UI Fabric
|
||||
*/
|
||||
public render(): JSX.Element {
|
||||
// Renders content
|
||||
return (
|
||||
<div>
|
||||
<Label>{this.props.label}</Label>
|
||||
<Dropdown
|
||||
disabled={this.props.disabled}
|
||||
label=''
|
||||
onChanged={this.onChanged}
|
||||
options={this.state.results}
|
||||
selectedKey={this.state.selectedKey}
|
||||
/>
|
||||
|
||||
<FieldErrorMessage errorMessage={this.state.errorMessage} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export * from './PropertyFieldListPicker';
|
||||
export * from './IPropertyFieldListPicker';
|
||||
export * from './PropertyFieldListPickerHost';
|
||||
export * from './IPropertyFieldListPickerHost';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { ISPLists } from '../propertyFields/listPicker/IPropertyFieldListPickerHost';
|
||||
|
||||
/**
|
||||
* Defines a http client to request mock data to use the web part with the local workbench
|
||||
*/
|
||||
export default class SPListPickerMockHttpClient {
|
||||
/**
|
||||
* Mock SharePoint result sample
|
||||
*/
|
||||
private static _results: ISPLists = { value: [] };
|
||||
|
||||
/**
|
||||
* Mock search People method
|
||||
*/
|
||||
public static getLists(restUrl: string, options?: any): Promise<ISPLists> {
|
||||
return new Promise<ISPLists>((resolve) => {
|
||||
resolve(SPListPickerMockHttpClient._results);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import { SPHttpClientResponse } from '@microsoft/sp-http';
|
||||
import { SPHttpClient } from '@microsoft/sp-http';
|
||||
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import { ISPLists, IPropertyFieldListPickerHostProps } from '../propertyFields/listPicker/IPropertyFieldListPickerHost';
|
||||
import { PropertyFieldListPickerOrderBy } from '../propertyFields/listPicker/IPropertyFieldListPicker';
|
||||
import SPListPickerMockHttpClient from './SPListPickerMockService';
|
||||
|
||||
/**
|
||||
* Service implementation to get list & list items from current SharePoint site
|
||||
*/
|
||||
export default class SPListPickerService {
|
||||
|
||||
private context: IWebPartContext;
|
||||
private props: IPropertyFieldListPickerHostProps;
|
||||
|
||||
/**
|
||||
* Service constructor
|
||||
*/
|
||||
constructor(_props: IPropertyFieldListPickerHostProps, pageContext: IWebPartContext) {
|
||||
this.props = _props;
|
||||
this.context = pageContext;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the collection of libs in the current SharePoint site
|
||||
*/
|
||||
public getLibs(): Promise<ISPLists> {
|
||||
if (Environment.type === EnvironmentType.Local) {
|
||||
// If the running environment is local, load the data from the mock
|
||||
return this.getLibsFromMock();
|
||||
}
|
||||
else {
|
||||
// If the running environment is SharePoint, request the lists REST service
|
||||
let queryUrl: string = `${this.context.pageContext.web.absoluteUrl}/_api/lists?$select=Title,id,BaseTemplate`;
|
||||
// Check if the orderBy property is provided
|
||||
if (this.props.orderBy !== null) {
|
||||
queryUrl += '&$orderby=';
|
||||
switch (this.props.orderBy) {
|
||||
case PropertyFieldListPickerOrderBy.Id:
|
||||
queryUrl += 'Id';
|
||||
break;
|
||||
case PropertyFieldListPickerOrderBy.Title:
|
||||
queryUrl += 'Title';
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Check if the list have get filtered based on the list base template type
|
||||
if (this.props.baseTemplate !== null && this.props.baseTemplate) {
|
||||
queryUrl += '&$filter=BaseTemplate%20eq%20';
|
||||
queryUrl += this.props.baseTemplate;
|
||||
// Check if you also want to exclude hidden list in the list
|
||||
if (this.props.includeHidden === false) {
|
||||
queryUrl += '%20and%20Hidden%20eq%20false';
|
||||
}
|
||||
} else {
|
||||
if (this.props.includeHidden === false) {
|
||||
queryUrl += '&$filter=Hidden%20eq%20false';
|
||||
}
|
||||
}
|
||||
return this.context.spHttpClient.get(queryUrl, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
|
||||
return response.json();
|
||||
}) as Promise<ISPLists>;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns 3 fake SharePoint lists for the Mock mode
|
||||
*/
|
||||
private getLibsFromMock(): Promise<ISPLists> {
|
||||
return SPListPickerMockHttpClient.getLists(this.context.pageContext.web.absoluteUrl).then(() => {
|
||||
const listData: ISPLists = {
|
||||
value:
|
||||
[
|
||||
{ Title: 'Mock List One', Id: '6770c83b-29e8-494b-87b6-468a2066bcc6', BaseTemplate: '109' },
|
||||
{ Title: 'Mock List Two', Id: '2ece98f2-cc5e-48ff-8145-badf5009754c', BaseTemplate: '109' },
|
||||
{ Title: 'Mock List Three', Id: 'bd5dbd33-0e8d-4e12-b289-b276e5ef79c2', BaseTemplate: '109' }
|
||||
]
|
||||
};
|
||||
return listData;
|
||||
}) as Promise<ISPLists>;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "786e7cdf-d1c8-4412-8abb-1aa18ea555e0",
|
||||
"alias": "FileUploadWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198322f80",
|
||||
"group": { "default": "SuperWebParts" },
|
||||
"title": { "default": "SPFileUpload" },
|
||||
"description": { "default": "Use this webpart to upload files to a library or as list attachments" },
|
||||
"officeFabricIconFontName": "OpenFile",
|
||||
"properties": {
|
||||
"listName": "Documents",
|
||||
"fileTypes":"jpg,png,gif,avi,mp4",
|
||||
"uploadFilesTo":"DocumentLibrary"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField,
|
||||
IWebPartContext
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { IDigestCache, DigestCache } from '@microsoft/sp-http';
|
||||
import * as strings from 'FileUploadWebPartStrings';
|
||||
import FileUpload from './components/FileUpload';
|
||||
import { IFileUploadProps } from './components/IFileUploadProps';
|
||||
import * as loader from '@microsoft/sp-loader';
|
||||
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '../../PropertyFieldListPicker';
|
||||
import { PropertyPaneDropdown } from '@microsoft/sp-webpart-base/lib/propertyPane/propertyPaneFields/propertyPaneDropdown/PropertyPaneDropdown';
|
||||
export interface IFileUploadWebPartProps {
|
||||
listName:string;
|
||||
fileTypes:string;
|
||||
queryString:string;
|
||||
uploadFilesTo:string;
|
||||
}
|
||||
require("./filepicker.css");
|
||||
require("./dropzone.css");
|
||||
export default class FileUploadWebPart extends BaseClientSideWebPart<IFileUploadWebPartProps> {
|
||||
public digest:string="";
|
||||
public constructor(context:IWebPartContext){
|
||||
super();
|
||||
loader.SPComponentLoader.loadCss('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
|
||||
}
|
||||
protected onInit(): Promise<void> {
|
||||
return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
|
||||
const digestCache: IDigestCache = this.context.serviceScope.consume(DigestCache.serviceKey);
|
||||
digestCache.fetchDigest(this.context.pageContext.web.serverRelativeUrl).then((digest: string): void => {
|
||||
// use the digest here
|
||||
this.digest=digest;
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IFileUploadProps > = React.createElement(
|
||||
FileUpload,
|
||||
{
|
||||
digest:this.digest,
|
||||
context:this.context,
|
||||
listName:this.properties.listName,
|
||||
fileTypes:this.properties.fileTypes,
|
||||
queryString:this.properties.queryString,
|
||||
uploadFilesTo:this.properties.uploadFilesTo
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, 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: [
|
||||
PropertyPaneDropdown('uploadFilesTo',{
|
||||
label:'Upload files to',
|
||||
options:[{key:'DocumentLibrary',text:'Document Library'},
|
||||
{key:'List',text:'As item attachments'} ]
|
||||
}),
|
||||
PropertyFieldListPicker('listName', {
|
||||
label: 'Select a list or library',
|
||||
selectedList: this.properties.listName,
|
||||
includeHidden: false,
|
||||
//baseTemplate: 109,
|
||||
orderBy: PropertyFieldListPickerOrderBy.Title,
|
||||
// multiSelect: false,
|
||||
disabled: false,
|
||||
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
|
||||
properties: this.properties,
|
||||
context: this.context,
|
||||
onGetErrorMessage: null,
|
||||
deferredValidationTime: 0,
|
||||
key: 'listPickerFieldId'
|
||||
}),
|
||||
PropertyPaneTextField('fileTypes',{
|
||||
label:'File Types (use , as seperator)',
|
||||
}),
|
||||
PropertyPaneTextField('queryString',{
|
||||
label:'Query String parameter',
|
||||
description:'If you want to attach files to a list item you need to define the ID of the item in a query string parameter, example: ID=1'
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.fileUpload {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
background-color: $ms-color-themeDark;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
@include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/* tslint:disable */
|
||||
require('./FileUpload.module.css');
|
||||
const styles = {
|
||||
fileUpload: 'fileUpload_207465a2',
|
||||
container: 'container_207465a2',
|
||||
row: 'row_207465a2',
|
||||
column: 'column_207465a2',
|
||||
'ms-Grid': 'ms-Grid_207465a2',
|
||||
title: 'title_207465a2',
|
||||
subTitle: 'subTitle_207465a2',
|
||||
description: 'description_207465a2',
|
||||
button: 'button_207465a2',
|
||||
label: 'label_207465a2',
|
||||
};
|
||||
|
||||
export default styles;
|
||||
/* tslint:enable */
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import * as React from 'react';
|
||||
import styles from './FileUpload.module.scss';
|
||||
import { IFileUploadProps } from './IFileUploadProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import { Log,UrlQueryParameterCollection } from '@microsoft/sp-core-library';
|
||||
import DropzoneComponent from 'react-dropzone-component';
|
||||
import pnp,{Web} from 'sp-pnp-js';
|
||||
export default class FileUpload extends React.Component<IFileUploadProps, {}> {
|
||||
constructor(props: IFileUploadProps){
|
||||
super(props);
|
||||
}
|
||||
public render(): React.ReactElement<IFileUploadProps> {
|
||||
let _context = this.props.context;
|
||||
let _listName = this.props.listName;
|
||||
let _fileUploadTo=this.props.uploadFilesTo;
|
||||
let _queryStringParam = this.props.queryString;
|
||||
let queryParameters = new UrlQueryParameterCollection(window.location.href);
|
||||
let _itemId = queryParameters.getValue(_queryStringParam);
|
||||
let _parent = this;
|
||||
let componentConfig = {
|
||||
iconFiletypes: this.props.fileTypes.split(','),
|
||||
showFiletypeIcon: true,
|
||||
postUrl: _context.pageContext.web.absoluteUrl
|
||||
};
|
||||
let myDropzone;
|
||||
let eventHandlers = {
|
||||
// This one receives the dropzone object as the first parameter
|
||||
// and can be used to additional work with the dropzone.js
|
||||
// object
|
||||
init: function(dz){
|
||||
myDropzone=dz;
|
||||
},
|
||||
removedfile: function(file){
|
||||
let web:Web=new Web(_context.pageContext.web.absoluteUrl);
|
||||
if(_fileUploadTo=="DocumentLibrary"){
|
||||
web.lists.getById(_listName).rootFolder.files.getByName(file.name).delete().then(t=>{
|
||||
//add your code here if you want to do more after deleting the file
|
||||
});
|
||||
}
|
||||
else{
|
||||
web.lists.getById(_listName).items.getById(Number(_itemId)).attachmentFiles.deleteMultiple(file.name).then(t=>{
|
||||
//add your code here if you want to do more after deleting the file
|
||||
});
|
||||
}
|
||||
},
|
||||
processing: function (file, xhr) {
|
||||
|
||||
if(_fileUploadTo=="DocumentLibrary")
|
||||
myDropzone.options.url = `${_context.pageContext.web.absoluteUrl}/_api/web/Lists/getById('${_listName}')/rootfolder/files/add(overwrite=true,url='${file.name}')`;
|
||||
else
|
||||
{
|
||||
if(_itemId)
|
||||
myDropzone.options.url = `${_context.pageContext.web.absoluteUrl}/_api/web/lists/getById('${_listName}')/items(${_itemId})/AttachmentFiles/add(FileName='${file.name}')`;
|
||||
else
|
||||
alert('Item not found or query string value is null!')
|
||||
}
|
||||
},
|
||||
sending: function (file, xhr) {
|
||||
let _send = xhr.send;
|
||||
xhr.send = function () {
|
||||
_send.call(xhr, file);
|
||||
};
|
||||
},
|
||||
error:function(file,error,xhr){
|
||||
if(_fileUploadTo!="DocumentLibrary")
|
||||
alert(`File '${file.name}' is already exists, please rename your file or select another file.`);
|
||||
//if(myDropzone)
|
||||
// myDropzone.removeFile(file);
|
||||
}
|
||||
};
|
||||
var djsConfig = {
|
||||
headers: {
|
||||
"X-RequestDigest": this.props.digest
|
||||
},
|
||||
addRemoveLinks:true
|
||||
};
|
||||
return (
|
||||
<DropzoneComponent eventHandlers={eventHandlers} djsConfig={djsConfig} config={componentConfig}>
|
||||
<div className="dz-message icon ion-upload">Drop files here or click to upload.</div>
|
||||
</DropzoneComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {
|
||||
IWebPartContext
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
export interface IFileUploadProps {
|
||||
digest:string;
|
||||
context:IWebPartContext;
|
||||
listName:string;
|
||||
fileTypes:string;
|
||||
queryString:string;
|
||||
uploadFilesTo:string;
|
||||
}
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
/*
|
||||
* The MIT License
|
||||
* Copyright (c) 2012 Matias Meno <m@tias.me>
|
||||
*/
|
||||
@-webkit-keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px); }
|
||||
30%, 70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px); }
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40px);
|
||||
-moz-transform: translateY(-40px);
|
||||
-ms-transform: translateY(-40px);
|
||||
-o-transform: translateY(-40px);
|
||||
transform: translateY(-40px); } }
|
||||
@-moz-keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px); }
|
||||
30%, 70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px); }
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40px);
|
||||
-moz-transform: translateY(-40px);
|
||||
-ms-transform: translateY(-40px);
|
||||
-o-transform: translateY(-40px);
|
||||
transform: translateY(-40px); } }
|
||||
@keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px); }
|
||||
30%, 70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px); }
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40px);
|
||||
-moz-transform: translateY(-40px);
|
||||
-ms-transform: translateY(-40px);
|
||||
-o-transform: translateY(-40px);
|
||||
transform: translateY(-40px); } }
|
||||
@-webkit-keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px); }
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px); } }
|
||||
@-moz-keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px); }
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px); } }
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px);
|
||||
-moz-transform: translateY(40px);
|
||||
-ms-transform: translateY(40px);
|
||||
-o-transform: translateY(40px);
|
||||
transform: translateY(40px); }
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px); } }
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
10% {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1); }
|
||||
20% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
@-moz-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
10% {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1); }
|
||||
20% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
10% {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1); }
|
||||
20% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
.dropzone, .dropzone * {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.dropzone {
|
||||
min-height: 150px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 20px 20px; }
|
||||
.dropzone.dz-clickable {
|
||||
cursor: pointer; }
|
||||
.dropzone.dz-clickable * {
|
||||
cursor: default; }
|
||||
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
|
||||
cursor: pointer; }
|
||||
.dropzone.dz-started .dz-message {
|
||||
display: none; }
|
||||
.dropzone.dz-drag-hover {
|
||||
border-style: solid; }
|
||||
.dropzone.dz-drag-hover .dz-message {
|
||||
opacity: 0.5; }
|
||||
.dropzone .dz-message {
|
||||
text-align: center;
|
||||
margin: 2em 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.dropzone .dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 16px;
|
||||
min-height: 100px; }
|
||||
.dropzone .dz-preview:hover {
|
||||
z-index: 1000; }
|
||||
.dropzone .dz-preview:hover .dz-details {
|
||||
opacity: 1; }
|
||||
.dropzone .dz-preview.dz-file-preview .dz-image {
|
||||
border-radius: 20px;
|
||||
background: #999;
|
||||
background: linear-gradient(to bottom, #eee, #ddd); }
|
||||
.dropzone .dz-preview.dz-file-preview .dz-details {
|
||||
opacity: 1; }
|
||||
.dropzone .dz-preview.dz-image-preview {
|
||||
}
|
||||
.dropzone .dz-preview.dz-image-preview .dz-details {
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-ms-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear; }
|
||||
.dropzone .dz-preview .dz-remove {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: none; }
|
||||
.dropzone .dz-preview .dz-remove:hover {
|
||||
text-decoration: underline; }
|
||||
.dropzone .dz-preview:hover .dz-details {
|
||||
opacity: 1; }
|
||||
.dropzone .dz-preview .dz-details {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
font-size: 13px;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 2em 1em;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
line-height: 150%; }
|
||||
.dropzone .dz-preview .dz-details .dz-size {
|
||||
margin-bottom: 1em;
|
||||
font-size: 16px; }
|
||||
.dropzone .dz-preview .dz-details .dz-filename {
|
||||
white-space: nowrap; }
|
||||
.dropzone .dz-preview .dz-details .dz-filename:hover span {
|
||||
border: 1px solid rgba(200, 200, 200, 0.8);
|
||||
background-color: rgba(255, 255, 255, 0.8); }
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
|
||||
border: 1px solid transparent; }
|
||||
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
padding: 0 0.4em;
|
||||
border-radius: 3px; }
|
||||
.dropzone .dz-preview:hover .dz-image img {
|
||||
-webkit-transform: scale(1.05, 1.05);
|
||||
-moz-transform: scale(1.05, 1.05);
|
||||
-ms-transform: scale(1.05, 1.05);
|
||||
-o-transform: scale(1.05, 1.05);
|
||||
transform: scale(1.05, 1.05);
|
||||
-webkit-filter: blur(8px);
|
||||
filter: blur(8px); }
|
||||
.dropzone .dz-preview .dz-image {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10; }
|
||||
.dropzone .dz-preview .dz-image img {
|
||||
display: block; }
|
||||
.dropzone .dz-preview.dz-success .dz-success-mark {
|
||||
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
|
||||
.dropzone .dz-preview.dz-error .dz-error-mark {
|
||||
opacity: 1;
|
||||
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
|
||||
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -27px;
|
||||
margin-top: -27px; }
|
||||
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
|
||||
display: block;
|
||||
width: 54px;
|
||||
height: 54px; }
|
||||
.dropzone .dz-preview.dz-processing .dz-progress {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-ms-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear; }
|
||||
.dropzone .dz-preview.dz-complete .dz-progress {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.4s ease-in;
|
||||
-moz-transition: opacity 0.4s ease-in;
|
||||
-ms-transition: opacity 0.4s ease-in;
|
||||
-o-transition: opacity 0.4s ease-in;
|
||||
transition: opacity 0.4s ease-in; }
|
||||
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
|
||||
-webkit-animation: pulse 6s ease infinite;
|
||||
-moz-animation: pulse 6s ease infinite;
|
||||
-ms-animation: pulse 6s ease infinite;
|
||||
-o-animation: pulse 6s ease infinite;
|
||||
animation: pulse 6s ease infinite; }
|
||||
.dropzone .dz-preview .dz-progress {
|
||||
opacity: 1;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 80px;
|
||||
margin-left: -40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
-webkit-transform: scale(1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden; }
|
||||
.dropzone .dz-preview .dz-progress .dz-upload {
|
||||
background: #333;
|
||||
background: linear-gradient(to bottom, #666, #444);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
-webkit-transition: width 300ms ease-in-out;
|
||||
-moz-transition: width 300ms ease-in-out;
|
||||
-ms-transition: width 300ms ease-in-out;
|
||||
-o-transition: width 300ms ease-in-out;
|
||||
transition: width 300ms ease-in-out; }
|
||||
.dropzone .dz-preview.dz-error .dz-error-message {
|
||||
display: block; }
|
||||
.dropzone .dz-preview.dz-error:hover .dz-error-message {
|
||||
opacity: 1;
|
||||
pointer-events: auto; }
|
||||
.dropzone .dz-preview .dz-error-message {
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
display: block;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
-moz-transition: opacity 0.3s ease;
|
||||
-ms-transition: opacity 0.3s ease;
|
||||
-o-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
top: 130px;
|
||||
left: -10px;
|
||||
width: 140px;
|
||||
background: #be2626;
|
||||
background: linear-gradient(to bottom, #be2626, #a92222);
|
||||
padding: 0.5em 1.2em;
|
||||
color: white; }
|
||||
.dropzone .dz-preview .dz-error-message:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 64px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #be2626; }
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/* Filepicker CSS */
|
||||
.filepicker {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
div.filepicker {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
height: 200px;
|
||||
min-height: 60px;
|
||||
border: 2px dashed #7092BE;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.filepicker-file-icon
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
margin: 1.5em 0 2.5em 0;
|
||||
padding-left: 45px;
|
||||
|
||||
color: black;
|
||||
}
|
||||
.filepicker-file-icon::before
|
||||
{
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 0;
|
||||
|
||||
width: 29px;
|
||||
height: 34px;
|
||||
|
||||
content: '';
|
||||
|
||||
border: solid 2px #7F7F7F;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.filepicker-file-icon::after
|
||||
{
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -4px;
|
||||
|
||||
padding: 0 2px;
|
||||
|
||||
content: 'file';
|
||||
content: attr(data-filetype);
|
||||
text-align: right;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
.filepicker-file-icon .fileCorner
|
||||
{
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 22px;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-width: 11px 0 0 11px;
|
||||
border-style: solid;
|
||||
border-color: white transparent transparent #920035;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "File Uploader WebPart",
|
||||
"BasicGroupName": "Look and feel"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IFileUploadWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'FileUploadWebPartStrings' {
|
||||
const strings: IFileUploadWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue