(callback: (a: A) => any, a: A): void;
32 | function unstable_batchedUpdates(callback: () => any): void;
33 |
34 | function unstable_renderSubtreeIntoContainer(
35 | parentComponent: Component,
36 | nextElement: DOMElement,
37 | container: Element,
38 | callback?: (element: Element) => any): Element;
39 | function unstable_renderSubtreeIntoContainer(
40 | parentComponent: Component,
41 | nextElement: ClassicElement,
42 | container: Element,
43 | callback?: (component: ClassicComponent) => any): ClassicComponent;
44 | function unstable_renderSubtreeIntoContainer(
45 | parentComponent: Component,
46 | nextElement: ReactElement,
47 | container: Element,
48 | callback?: (component: Component) => any): Component;
49 | }
50 |
51 | namespace __DOMServer {
52 | function renderToString(element: ReactElement): string;
53 | function renderToStaticMarkup(element: ReactElement): string;
54 | var version: string;
55 | }
56 | }
57 |
58 | declare module "react-dom" {
59 | import DOM = __React.__DOM;
60 | export = DOM;
61 | }
62 |
63 | declare module "react-dom/server" {
64 | import DOMServer = __React.__DOMServer;
65 | export = DOMServer;
66 | }
67 |
--------------------------------------------------------------------------------
/typings/whatwg-fetch/whatwg-fetch.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for fetch API
2 | // Project: https://github.com/github/fetch
3 | // Definitions by: Ryan Graham
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | ///
7 |
8 | declare class Request extends Body {
9 | constructor(input: string|Request, init?:RequestInit);
10 | method: string;
11 | url: string;
12 | headers: Headers;
13 | context: string|RequestContext;
14 | referrer: string;
15 | mode: string|RequestMode;
16 | credentials: string|RequestCredentials;
17 | cache: string|RequestCache;
18 | }
19 |
20 | interface RequestInit {
21 | method?: string;
22 | headers?: HeaderInit|{ [index: string]: string };
23 | body?: BodyInit;
24 | mode?: string|RequestMode;
25 | credentials?: string|RequestCredentials;
26 | cache?: string|RequestCache;
27 | }
28 |
29 | declare enum RequestContext {
30 | "audio", "beacon", "cspreport", "download", "embed", "eventsource", "favicon", "fetch",
31 | "font", "form", "frame", "hyperlink", "iframe", "image", "imageset", "import",
32 | "internal", "location", "manifest", "object", "ping", "plugin", "prefetch", "script",
33 | "serviceworker", "sharedworker", "subresource", "style", "track", "video", "worker",
34 | "xmlhttprequest", "xslt"
35 | }
36 | declare enum RequestMode { "same-origin", "no-cors", "cors" }
37 | declare enum RequestCredentials { "omit", "same-origin", "include" }
38 | declare enum RequestCache { "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached" }
39 |
40 | declare class Headers {
41 | append(name: string, value: string): void;
42 | delete(name: string):void;
43 | get(name: string): string;
44 | getAll(name: string): Array;
45 | has(name: string): boolean;
46 | set(name: string, value: string): void;
47 | }
48 |
49 | declare class Body {
50 | bodyUsed: boolean;
51 | arrayBuffer(): Promise;
52 | blob(): Promise;
53 | formData(): Promise;
54 | json(): Promise;
55 | json(): Promise;
56 | text(): Promise;
57 | }
58 | declare class Response extends Body {
59 | constructor(body?: BodyInit, init?: ResponseInit);
60 | error(): Response;
61 | redirect(url: string, status: number): Response;
62 | type: string|ResponseType;
63 | url: string;
64 | status: number;
65 | ok: boolean;
66 | statusText: string;
67 | headers: Headers;
68 | clone(): Response;
69 | }
70 |
71 | declare enum ResponseType { "basic", "cors", "default", "error", "opaque" }
72 |
73 | interface ResponseInit {
74 | status: number;
75 | statusText?: string;
76 | headers?: HeaderInit;
77 | }
78 |
79 | declare type HeaderInit = Headers|Array;
80 | declare type BodyInit = Blob|FormData|string;
81 | declare type RequestInfo = Request|string;
82 |
83 | interface Window {
84 | fetch(url: string|Request, init?: RequestInit): Promise;
85 | }
86 |
87 | declare var fetch: typeof window.fetch;
88 |
--------------------------------------------------------------------------------
/typings/es6-promise/es6-promise.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for es6-promise
2 | // Project: https://github.com/jakearchibald/ES6-Promise
3 | // Definitions by: François de Campredon , vvakame
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | interface Thenable {
7 | then(onFulfilled?: (value: R) => U | Thenable, onRejected?: (error: any) => U | Thenable): Thenable;
8 | then(onFulfilled?: (value: R) => U | Thenable, onRejected?: (error: any) => void): Thenable;
9 | catch(onRejected?: (error: any) => U | Thenable): Thenable;
10 | }
11 |
12 | declare class Promise implements Thenable {
13 | /**
14 | * If you call resolve in the body of the callback passed to the constructor,
15 | * your promise is fulfilled with result object passed to resolve.
16 | * If you call reject your promise is rejected with the object passed to reject.
17 | * For consistency and debugging (eg stack traces), obj should be an instanceof Error.
18 | * Any errors thrown in the constructor callback will be implicitly passed to reject().
19 | */
20 | constructor(callback: (resolve : (value?: R | Thenable) => void, reject: (error?: any) => void) => void);
21 |
22 | /**
23 | * onFulfilled is called when/if "promise" resolves. onRejected is called when/if "promise" rejects.
24 | * Both are optional, if either/both are omitted the next onFulfilled/onRejected in the chain is called.
25 | * Both callbacks have a single parameter , the fulfillment value or rejection reason.
26 | * "then" returns a new promise equivalent to the value you return from onFulfilled/onRejected after being passed through Promise.resolve.
27 | * If an error is thrown in the callback, the returned promise rejects with that error.
28 | *
29 | * @param onFulfilled called when/if "promise" resolves
30 | * @param onRejected called when/if "promise" rejects
31 | */
32 | then(onFulfilled?: (value: R) => U | Thenable, onRejected?: (error: any) => U | Thenable): Promise;
33 | then(onFulfilled?: (value: R) => U | Thenable, onRejected?: (error: any) => void): Promise;
34 |
35 | /**
36 | * Sugar for promise.then(undefined, onRejected)
37 | *
38 | * @param onRejected called when/if "promise" rejects
39 | */
40 | catch(onRejected?: (error: any) => U | Thenable): Promise;
41 | }
42 |
43 | declare module Promise {
44 | /**
45 | * Make a new promise from the thenable.
46 | * A thenable is promise-like in as far as it has a "then" method.
47 | */
48 | function resolve(value?: R | Thenable): Promise;
49 |
50 | /**
51 | * Make a promise that rejects to obj. For consistency and debugging (eg stack traces), obj should be an instanceof Error
52 | */
53 | function reject(error: any): Promise;
54 |
55 | /**
56 | * Make a promise that fulfills when every item in the array fulfills, and rejects if (and when) any item rejects.
57 | * the array passed to all can be a mixture of promise-like objects and other objects.
58 | * The fulfillment value is an array (in order) of fulfillment values. The rejection value is the first rejection value.
59 | */
60 | function all(promises: (R | Thenable)[]): Promise;
61 |
62 | /**
63 | * Make a Promise that fulfills when any item fulfills, and rejects if any item rejects.
64 | */
65 | function race(promises: (R | Thenable)[]): Promise;
66 | }
67 |
68 | declare module 'es6-promise' {
69 | var foo: typeof Promise; // Temp variable to reference Promise in local context
70 | module rsvp {
71 | export var Promise: typeof foo;
72 | }
73 | export = rsvp;
74 | }
75 |
--------------------------------------------------------------------------------
/typings/es6-collections/es6-collections.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for es6-collections v0.5.1
2 | // Project: https://github.com/WebReflection/es6-collections/
3 | // Definitions by: Ron Buckton
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | /* *****************************************************************************
7 | Copyright (c) Microsoft Corporation. All rights reserved.
8 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use
9 | this file except in compliance with the License. You may obtain a copy of the
10 | License at http://www.apache.org/licenses/LICENSE-2.0
11 |
12 | THIS CODE IS PROVIDED *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
13 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
14 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
15 | MERCHANTABLITY OR NON-INFRINGEMENT.
16 |
17 | See the Apache Version 2.0 License for specific language governing permissions
18 | and limitations under the License.
19 | ***************************************************************************** */
20 |
21 | interface IteratorResult {
22 | done: boolean;
23 | value?: T;
24 | }
25 |
26 | interface Iterator {
27 | next(value?: any): IteratorResult;
28 | return?(value?: any): IteratorResult;
29 | throw?(e?: any): IteratorResult;
30 | }
31 |
32 | interface ForEachable {
33 | forEach(callbackfn: (value: T) => void): void;
34 | }
35 |
36 | interface Map {
37 | clear(): void;
38 | delete(key: K): boolean;
39 | forEach(callbackfn: (value: V, index: K, map: Map) => void, thisArg?: any): void;
40 | get(key: K): V;
41 | has(key: K): boolean;
42 | set(key: K, value?: V): Map;
43 | entries(): Iterator<[K, V]>;
44 | keys(): Iterator;
45 | values(): Iterator;
46 | size: number;
47 | }
48 |
49 | interface MapConstructor {
50 | new (): Map;
51 | new (iterable: ForEachable<[K, V]>): Map;
52 | prototype: Map;
53 | }
54 |
55 | declare var Map: MapConstructor;
56 |
57 | interface Set {
58 | add(value: T): Set;
59 | clear(): void;
60 | delete(value: T): boolean;
61 | forEach(callbackfn: (value: T, index: T, set: Set) => void, thisArg?: any): void;
62 | has(value: T): boolean;
63 | entries(): Iterator<[T, T]>;
64 | keys(): Iterator;
65 | values(): Iterator;
66 | size: number;
67 | }
68 |
69 | interface SetConstructor {
70 | new (): Set;
71 | new (iterable: ForEachable): Set;
72 | prototype: Set;
73 | }
74 |
75 | declare var Set: SetConstructor;
76 |
77 | interface WeakMap {
78 | delete(key: K): boolean;
79 | clear(): void;
80 | get(key: K): V;
81 | has(key: K): boolean;
82 | set(key: K, value?: V): WeakMap;
83 | }
84 |
85 | interface WeakMapConstructor {
86 | new (): WeakMap;
87 | new (iterable: ForEachable<[K, V]>): WeakMap;
88 | prototype: WeakMap;
89 | }
90 |
91 | declare var WeakMap: WeakMapConstructor;
92 |
93 | interface WeakSet {
94 | delete(value: T): boolean;
95 | clear(): void;
96 | add(value: T): WeakSet;
97 | has(value: T): boolean;
98 | }
99 |
100 | interface WeakSetConstructor {
101 | new (): WeakSet;
102 | new (iterable: ForEachable): WeakSet;
103 | prototype: WeakSet;
104 | }
105 |
106 | declare var WeakSet: WeakSetConstructor;
107 |
108 | declare module "es6-collections" {
109 | var Map: MapConstructor;
110 | var Set: SetConstructor;
111 | var WeakMap: WeakMapConstructor;
112 | var WeakSet: WeakSetConstructor;
113 | }
--------------------------------------------------------------------------------
/custom-fields-web-part.njsproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Debug
5 | 2.0
6 | {2b4dd7e2-fd70-4563-80b4-0df3af5f18e1}
7 |
8 | ProjectFiles
9 | node_modules\gulp\bin\gulp.js
10 | .
11 | .
12 | {3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{349c5851-65df-11da-9384-00065b846f21};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}
13 | true
14 | CommonJS
15 | false
16 | 11.0
17 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)
18 | serve
19 | True
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | False
53 | True
54 | 0
55 | /
56 | http://localhost:48022/
57 | False
58 | True
59 | http://localhost:1337
60 | False
61 |
62 |
63 |
64 |
65 |
66 |
67 | CurrentPage
68 | True
69 | False
70 | False
71 | False
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | False
81 | False
82 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/loc/mystrings.d.ts:
--------------------------------------------------------------------------------
1 | declare interface IStrings {
2 | //Web Parts property labels
3 | //You don't need to copy this fields
4 | PropertyPaneDescription: string;
5 | BasicGroupName: string;
6 | DescriptionFieldLabel: string;
7 | DateFieldLabel: string;
8 | DateTimeFieldLabel: string;
9 | PeopleFieldLabel: string;
10 | SPListFieldLabel: string;
11 | ColorFieldLabel: string;
12 | SPFolderFieldLabel: string;
13 | PasswordFieldLabel: string;
14 | FontFieldLabel: string;
15 | FontSizeFieldLabel: string;
16 | PhoneNumberFieldLabel: string;
17 | MaskedInputFieldLabel: string;
18 | GeoLocationFieldLabel: string;
19 | PictureFieldLabel: string;
20 | IconFieldLabel: string;
21 | DocumentFieldLabel: string;
22 | DisplayModeFieldLabel: string;
23 | CustomListFieldLabel: string;
24 | QueryFieldLabel: string;
25 |
26 | //SPListQuery labels
27 | //Copy the following labels in your project if you want to use the SPListQuery
28 | SPListQueryList: string;
29 | SPListQueryOrderBy: string;
30 | SPListQueryArranged: string;
31 | SPListQueryMax: string;
32 | SPListQueryAdd: string;
33 | SPListQueryRemove: string;
34 | SPListQueryOperatorEq: string;
35 | SPListQueryOperatorNe: string;
36 | SPListQueryOperatorStartsWith: string;
37 | SPListQueryOperatorSubstringof: string;
38 | SPListQueryOperatorLt: string;
39 | SPListQueryOperatorLe: string;
40 | SPListQueryOperatorGt: string;
41 | SPListQueryOperatorGe: string;
42 |
43 | //PicturePicker labels
44 | //Copy the following labels in your project if you want to use the PicturePicker
45 | PicturePickerTitle: string;
46 | PicturePickerRecent: string;
47 | PicturePickerSite: string;
48 | PicturePickerButtonSelect: string;
49 | PicturePickerButtonReset: string;
50 |
51 | //DocumentPicker labels
52 | //Copy the following labels in your project if you want to use the DocumentPicker
53 | DocumentPickerTitle: string;
54 | DocumentPickerRecent: string;
55 | DocumentPickerSite: string;
56 | DocumentPickerButtonSelect: string;
57 | DocumentPickerButtonReset: string;
58 |
59 | //PeoplePicker labels
60 | //Copy the following labels in your project if you want to use the PeoplePicker
61 | PeoplePickerSuggestedContacts: string;
62 | PeoplePickerNoResults: string;
63 | PeoplePickerLoading: string;
64 |
65 | //SPListPicker labels
66 | //Copy the following labels in your project if you want to use the SPListPicker
67 | SPListPickerLoading: string;
68 |
69 | //SPFolderPicker labels
70 | //Copy the following labels in your project if you want to use the SPFolderPicker
71 | SPFolderPickerDialogTitle: string;
72 | SPFolderPickerSelectButton: string;
73 | SPFolderPickerCancelButton: string;
74 |
75 | //DatePicker labels
76 | //Copy the following labels in your project if you want to use the DatePicker
77 | DatePickerMonthLongJanuary: string;
78 | DatePickerMonthShortJanuary: string;
79 | DatePickerMonthLongFebruary: string;
80 | DatePickerMonthShortFebruary: string;
81 | DatePickerMonthLongMarch: string;
82 | DatePickerMonthShortMarch: string;
83 | DatePickerMonthLongApril: string;
84 | DatePickerMonthShortApril: string;
85 | DatePickerMonthLongMay: string;
86 | DatePickerMonthShortMay: string;
87 | DatePickerMonthLongJune: string;
88 | DatePickerMonthShortJune: string;
89 | DatePickerMonthLongJuly: string;
90 | DatePickerMonthShortJuly: string;
91 | DatePickerMonthLongAugust: string;
92 | DatePickerMonthShortAugust: string;
93 | DatePickerMonthLongSeptember: string;
94 | DatePickerMonthShortSeptember: string;
95 | DatePickerMonthLongOctober: string;
96 | DatePickerMonthShortOctober: string;
97 | DatePickerMonthLongNovember: string;
98 | DatePickerMonthShortNovember: string;
99 | DatePickerMonthLongDecember: string;
100 | DatePickerMonthShortDecember: string;
101 | DatePickerDayLongSunday: string;
102 | DatePickerDayShortSunday: string;
103 | DatePickerDayLongMonday: string;
104 | DatePickerDayShortMonday: string;
105 | DatePickerDayLongTuesday: string;
106 | DatePickerDayShortTuesday: string;
107 | DatePickerDayLongWednesday: string;
108 | DatePickerDayShortWednesday: string;
109 | DatePickerDayLongThursday: string;
110 | DatePickerDayShortThursday: string;
111 | DatePickerDayLongFriday: string;
112 | DatePickerDayShortFriday: string;
113 | DatePickerDayLongSaturday: string;
114 | DatePickerDayShortSaturday: string;
115 | }
116 |
117 | declare module 'customFieldsWebPartStrings' {
118 | const strings: IStrings;
119 | export = strings;
120 | }
121 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldPassword.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldPassword.ts
3 | * Define a custom field of type PropertyFieldPassword for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldPasswordHost, { IPropertyFieldPasswordHostProps } from './PropertyFieldPasswordHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldPassword custom field
21 | *
22 | */
23 | export interface IPropertyFieldPasswordProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @function
36 | * Defines a onPropertyChange function to raise when the selected Color changed.
37 | * Normally this function must be always defined with the 'this.onPropertyChange'
38 | * method of the web part object.
39 | */
40 | onPropertyChange(propertyPath: string, newValue: any): void;
41 | }
42 |
43 | /**
44 | * @interface
45 | * Private properties of the PropertyFieldPassword custom field.
46 | * We separate public & private properties to include onRender & onDispose method waited
47 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
48 | * the PropertyFieldPassword.
49 | *
50 | */
51 | export interface IPropertyFieldPasswordPropsInternal extends IPropertyPaneCustomFieldProps {
52 | label: string;
53 | initialValue?: string;
54 | targetProperty: string;
55 | onRender(elem: HTMLElement): void;
56 | onDispose(elem: HTMLElement): void;
57 | onPropertyChange(propertyPath: string, newValue: any): void;
58 | }
59 |
60 | /**
61 | * @interface
62 | * Represents a PropertyFieldPassword object
63 | *
64 | */
65 | class PropertyFieldPasswordBuilder implements IPropertyPaneField {
66 |
67 | //Properties defined by IPropertyPaneField
68 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
69 | public targetProperty: string;
70 | public properties: IPropertyFieldPasswordPropsInternal;
71 |
72 | //Custom properties
73 | private label: string;
74 | private initialValue: string;
75 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
76 |
77 | /**
78 | * @function
79 | * Ctor
80 | */
81 | public constructor(_targetProperty: string, _properties: IPropertyFieldPasswordPropsInternal) {
82 | this.targetProperty = _properties.targetProperty;
83 | this.properties = _properties;
84 | this.label = _properties.label;
85 | this.initialValue = _properties.initialValue;
86 | this.properties.onDispose = this.dispose;
87 | this.properties.onRender = this.render;
88 | this.onPropertyChange = _properties.onPropertyChange;
89 | }
90 |
91 | /**
92 | * @function
93 | * Renders the ColorPicker field content
94 | */
95 | private render(elem: HTMLElement): void {
96 | //Construct the JSX properties
97 | const element: React.ReactElement = React.createElement(PropertyFieldPasswordHost, {
98 | label: this.label,
99 | initialValue: this.initialValue,
100 | targetProperty: this.targetProperty,
101 | onDispose: this.dispose,
102 | onRender: this.render,
103 | onPropertyChange: this.onPropertyChange
104 | });
105 | //Calls the REACT content generator
106 | ReactDom.render(element, elem);
107 | }
108 |
109 | /**
110 | * @function
111 | * Disposes the current object
112 | */
113 | private dispose(elem: HTMLElement): void {
114 |
115 | }
116 |
117 | }
118 |
119 | /**
120 | * @function
121 | * Helper method to create a Color Picker on the PropertyPane.
122 | * @param targetProperty - Target property the Color picker is associated to.
123 | * @param properties - Strongly typed Color Picker properties.
124 | */
125 | export function PropertyFieldPassword(targetProperty: string, properties: IPropertyFieldPasswordProps): IPropertyPaneField {
126 |
127 | //Create an internal properties object from the given properties
128 | var newProperties: IPropertyFieldPasswordPropsInternal = {
129 | label: properties.label,
130 | targetProperty: targetProperty,
131 | initialValue: properties.initialValue,
132 | onPropertyChange: properties.onPropertyChange,
133 | onDispose: null,
134 | onRender: null
135 | };
136 | //Calles the PropertyFieldPassword builder object
137 | //This object will simulate a PropertyFieldCustom to manage his rendering process
138 | return new PropertyFieldPasswordBuilder(targetProperty, newProperties);
139 | }
140 |
141 |
142 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldColorPicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldColorPicker.ts
3 | * Define a custom field of type PropertyFieldColorPicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldColorPickerHost, { IPropertyFieldColorPickerHostProps } from './PropertyFieldColorPickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldColorPicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldColorPickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial color
32 | */
33 | initialColor?: string;
34 | /**
35 | * @function
36 | * Defines a onPropertyChange function to raise when the selected Color changed.
37 | * Normally this function must be always defined with the 'this.onPropertyChange'
38 | * method of the web part object.
39 | */
40 | onPropertyChange(propertyPath: string, newValue: any): void;
41 | }
42 |
43 | /**
44 | * @interface
45 | * Private properties of the PropertyFieldColorPicker custom field.
46 | * We separate public & private properties to include onRender & onDispose method waited
47 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
48 | * the PropertyFieldColorPicker.
49 | *
50 | */
51 | export interface IPropertyFieldColorPickerPropsInternal extends IPropertyPaneCustomFieldProps {
52 | label: string;
53 | initialColor?: string;
54 | targetProperty: string;
55 | onRender(elem: HTMLElement): void;
56 | onDispose(elem: HTMLElement): void;
57 | onPropertyChange(propertyPath: string, newValue: any): void;
58 | }
59 |
60 | /**
61 | * @interface
62 | * Represents a PropertyFieldColorPicker object
63 | *
64 | */
65 | class PropertyFieldColorPickerBuilder implements IPropertyPaneField {
66 |
67 | //Properties defined by IPropertyPaneField
68 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
69 | public targetProperty: string;
70 | public properties: IPropertyFieldColorPickerPropsInternal;
71 |
72 | //Custom properties
73 | private label: string;
74 | private initialColor: string;
75 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
76 |
77 | /**
78 | * @function
79 | * Ctor
80 | */
81 | public constructor(_targetProperty: string, _properties: IPropertyFieldColorPickerPropsInternal) {
82 | this.targetProperty = _properties.targetProperty;
83 | this.properties = _properties;
84 | this.label = _properties.label;
85 | this.initialColor = _properties.initialColor;
86 | this.properties.onDispose = this.dispose;
87 | this.properties.onRender = this.render;
88 | this.onPropertyChange = _properties.onPropertyChange;
89 | }
90 |
91 | /**
92 | * @function
93 | * Renders the ColorPicker field content
94 | */
95 | private render(elem: HTMLElement): void {
96 | //Construct the JSX properties
97 | const element: React.ReactElement = React.createElement(PropertyFieldColorPickerHost, {
98 | label: this.label,
99 | initialColor: this.initialColor,
100 | targetProperty: this.targetProperty,
101 | onDispose: this.dispose,
102 | onRender: this.render,
103 | onPropertyChange: this.onPropertyChange
104 | });
105 | //Calls the REACT content generator
106 | ReactDom.render(element, elem);
107 | }
108 |
109 | /**
110 | * @function
111 | * Disposes the current object
112 | */
113 | private dispose(elem: HTMLElement): void {
114 |
115 | }
116 |
117 | }
118 |
119 | /**
120 | * @function
121 | * Helper method to create a Color Picker on the PropertyPane.
122 | * @param targetProperty - Target property the Color picker is associated to.
123 | * @param properties - Strongly typed Color Picker properties.
124 | */
125 | export function PropertyFieldColorPicker(targetProperty: string, properties: IPropertyFieldColorPickerProps): IPropertyPaneField {
126 |
127 | //Create an internal properties object from the given properties
128 | var newProperties: IPropertyFieldColorPickerPropsInternal = {
129 | label: properties.label,
130 | targetProperty: targetProperty,
131 | initialColor: properties.initialColor,
132 | onPropertyChange: properties.onPropertyChange,
133 | onDispose: null,
134 | onRender: null
135 | };
136 | //Calles the PropertyFieldColorPicker builder object
137 | //This object will simulate a PropertyFieldCustom to manage his rendering process
138 | return new PropertyFieldColorPickerBuilder(targetProperty, newProperties);
139 | }
140 |
141 |
142 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldDisplayMode.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDisplayMode.ts
3 | * Define a custom field of type PropertyFieldDisplayMode for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldDisplayModeHost, { IPropertyFieldDisplayModeHostProps } from './PropertyFieldDisplayModeHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldDisplayMode custom field
21 | *
22 | */
23 | export interface IPropertyFieldDisplayModeProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @function
36 | * Defines a onPropertyChange function to raise when the selected Color changed.
37 | * Normally this function must be always defined with the 'this.onPropertyChange'
38 | * method of the web part object.
39 | */
40 | onPropertyChange(propertyPath: string, newValue: any): void;
41 | }
42 |
43 | /**
44 | * @interface
45 | * Private properties of the PropertyFieldDisplayMode custom field.
46 | * We separate public & private properties to include onRender & onDispose method waited
47 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
48 | * the PropertyFieldDisplayMode.
49 | *
50 | */
51 | export interface IPropertyFieldDisplayModePropsInternal extends IPropertyPaneCustomFieldProps {
52 | label: string;
53 | initialValue?: string;
54 | targetProperty: string;
55 | onRender(elem: HTMLElement): void;
56 | onDispose(elem: HTMLElement): void;
57 | onPropertyChange(propertyPath: string, newValue: any): void;
58 | }
59 |
60 | /**
61 | * @interface
62 | * Represents a PropertyFieldDisplayMode object
63 | *
64 | */
65 | class PropertyFieldDisplayModeBuilder implements IPropertyPaneField {
66 |
67 | //Properties defined by IPropertyPaneField
68 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
69 | public targetProperty: string;
70 | public properties: IPropertyFieldDisplayModePropsInternal;
71 |
72 | //Custom properties
73 | private label: string;
74 | private initialValue: string;
75 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
76 |
77 | /**
78 | * @function
79 | * Ctor
80 | */
81 | public constructor(_targetProperty: string, _properties: IPropertyFieldDisplayModePropsInternal) {
82 | this.targetProperty = _properties.targetProperty;
83 | this.properties = _properties;
84 | this.label = _properties.label;
85 | this.initialValue = _properties.initialValue;
86 | this.properties.onDispose = this.dispose;
87 | this.properties.onRender = this.render;
88 | this.onPropertyChange = _properties.onPropertyChange;
89 | }
90 |
91 | /**
92 | * @function
93 | * Renders the ColorPicker field content
94 | */
95 | private render(elem: HTMLElement): void {
96 | //Construct the JSX properties
97 | const element: React.ReactElement = React.createElement(PropertyFieldDisplayModeHost, {
98 | label: this.label,
99 | initialValue: this.initialValue,
100 | targetProperty: this.targetProperty,
101 | onDispose: this.dispose,
102 | onRender: this.render,
103 | onPropertyChange: this.onPropertyChange
104 | });
105 | //Calls the REACT content generator
106 | ReactDom.render(element, elem);
107 | }
108 |
109 | /**
110 | * @function
111 | * Disposes the current object
112 | */
113 | private dispose(elem: HTMLElement): void {
114 |
115 | }
116 |
117 | }
118 |
119 | /**
120 | * @function
121 | * Helper method to create a Color Picker on the PropertyPane.
122 | * @param targetProperty - Target property the Color picker is associated to.
123 | * @param properties - Strongly typed Color Picker properties.
124 | */
125 | export function PropertyFieldDisplayMode(targetProperty: string, properties: IPropertyFieldDisplayModeProps): IPropertyPaneField {
126 |
127 | //Create an internal properties object from the given properties
128 | var newProperties: IPropertyFieldDisplayModePropsInternal = {
129 | label: properties.label,
130 | targetProperty: targetProperty,
131 | initialValue: properties.initialValue,
132 | onPropertyChange: properties.onPropertyChange,
133 | onDispose: null,
134 | onRender: null
135 | };
136 | //Calles the PropertyFieldDisplayMode builder object
137 | //This object will simulate a PropertyFieldCustom to manage his rendering process
138 | return new PropertyFieldDisplayModeBuilder(targetProperty, newProperties);
139 | }
140 |
141 |
142 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/loc/en-us.js:
--------------------------------------------------------------------------------
1 | define([], function() {
2 | return {
3 | "PropertyPaneDescription": "Customize your web part",
4 | "BasicGroupName": "Group Name",
5 | "DescriptionFieldLabel": "Description Field",
6 | "DateFieldLabel": "Date Field",
7 | "DateTimeFieldLabel": "Date Time Field",
8 | "PeopleFieldLabel": "People Picker Field",
9 | "SPListFieldLabel": "SharePoint List Field",
10 | "ColorFieldLabel": "Color Field",
11 | "SPFolderFieldLabel": "SharePoint Folder Field",
12 | "PasswordFieldLabel": "Password Field",
13 | "FontFieldLabel": "Font Field",
14 | "FontSizeFieldLabel": "Font Size Field",
15 | "PhoneNumberFieldLabel": "Phone Number Field",
16 | "MaskedInputFieldLabel": "Masked Input Field",
17 | "GeoLocationFieldLabel": "Geolocation Field",
18 | "PictureFieldLabel": "Picture Field",
19 | "IconFieldLabel": "Icon Field",
20 | "DocumentFieldLabel": "Document Field",
21 | "DisplayModeFieldLabel": "Display Mode Field",
22 | "CustomListFieldLabel": "Custom List Field",
23 | "QueryFieldLabel": "List Query Field",
24 |
25 | //SPListQuery labels
26 | //Copy the following labels in your project if you want to use the SPListQuery
27 | "SPListQueryList": "List",
28 | "SPListQueryOrderBy": "Order By",
29 | "SPListQueryArranged": "Arranged",
30 | "SPListQueryMax": "Max",
31 | "SPListQueryAdd": "Add filter",
32 | "SPListQueryRemove": "Remove",
33 | "SPListQueryOperatorEq": "Equals",
34 | "SPListQueryOperatorNe": "Not Equals",
35 | "SPListQueryOperatorStartsWith": "Starts With",
36 | "SPListQueryOperatorSubstringof": "Sub String of",
37 | "SPListQueryOperatorLt": "Less than",
38 | "SPListQueryOperatorLe": "Less or equal to",
39 | "SPListQueryOperatorGt": "Greater than",
40 | "SPListQueryOperatorGe": "Greater or equal to",
41 |
42 | //PicturePicker labels
43 | //Copy the following labels in your project if you want to use the PicturePicker
44 | "PicturePickerTitle": "Select a picture",
45 | "PicturePickerRecent": "Recent",
46 | "PicturePickerSite": "Site",
47 | "PicturePickerButtonSelect": "Select a picture",
48 | "PicturePickerButtonReset": "Reset",
49 |
50 | //DocumentPicker labels
51 | //Copy the following labels in your project if you want to use the DocumentPicker
52 | "DocumentPickerTitle": "Select a document",
53 | "DocumentPickerRecent": "Recent",
54 | "DocumentPickerSite": "Site",
55 | "DocumentPickerButtonSelect": "Select a document",
56 | "DocumentPickerButtonReset": "Reset",
57 |
58 | //PeoplePicker labels
59 | //Copy the following labels in your project if you want to use the PeoplePicker
60 | "PeoplePickerSuggestedContacts": "Suggested contacts",
61 | "PeoplePickerNoResults": "No result found",
62 | "PeoplePickerLoading": "Loading contacts...",
63 |
64 | //SPListPicker labels
65 | //Copy the following labels in your project if you want to use the SPListPicker
66 | "SPListPickerLoading": "Loading lists...",
67 |
68 | //SPFolderPicker labels
69 | //Copy the following labels in your project if you want to use the SPFolderPicker
70 | "SPFolderPickerDialogTitle": "Select a folder",
71 | "SPFolderPickerSelectButton": "Select",
72 | "SPFolderPickerCancelButton": "Cancel",
73 |
74 | //DatePicker labels
75 | //Copy the following labels in your project if you want to use the DatePicker
76 | "DatePickerMonthLongJanuary": "January",
77 | "DatePickerMonthShortJanuary": "Jan",
78 | "DatePickerMonthLongFebruary": "February",
79 | "DatePickerMonthShortFebruary": "Feb",
80 | "DatePickerMonthLongMarch": "March",
81 | "DatePickerMonthShortMarch": "Mar",
82 | "DatePickerMonthLongApril": "April",
83 | "DatePickerMonthShortApril": "Apr",
84 | "DatePickerMonthLongMay": "May",
85 | "DatePickerMonthShortMay": "May",
86 | "DatePickerMonthLongJune": "June",
87 | "DatePickerMonthShortJune": "Jun",
88 | "DatePickerMonthLongJuly": "July",
89 | "DatePickerMonthShortJuly": "Jul",
90 | "DatePickerMonthLongAugust": "August",
91 | "DatePickerMonthShortAugust": "Aug",
92 | "DatePickerMonthLongSeptember": "September",
93 | "DatePickerMonthShortSeptember": "Sept",
94 | "DatePickerMonthLongOctober": "October",
95 | "DatePickerMonthShortOctober": "Oct",
96 | "DatePickerMonthLongNovember": "November",
97 | "DatePickerMonthShortNovember": "Nov",
98 | "DatePickerMonthLongDecember": "December",
99 | "DatePickerMonthShortDecember": "Dec",
100 | "DatePickerDayLongSunday": "Sunday",
101 | "DatePickerDayShortSunday": "Sun",
102 | "DatePickerDayLongMonday": "Monday",
103 | "DatePickerDayShortMonday": "Mon",
104 | "DatePickerDayLongTuesday": "Tuesday",
105 | "DatePickerDayShortTuesday": "Tue",
106 | "DatePickerDayLongWednesday": "Wednesday",
107 | "DatePickerDayShortWednesday": "Web",
108 | "DatePickerDayLongThursday": "Thursday",
109 | "DatePickerDayShortThursday": "Thu",
110 | "DatePickerDayLongFriday": "Friday",
111 | "DatePickerDayShortFriday": "Fri",
112 | "DatePickerDayLongSaturday": "Saturday",
113 | "DatePickerDayShortSaturday": "Sat"
114 | }
115 | });
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldPicturePicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldPicturePicker.ts
3 | * Define a custom field of type PropertyFieldPicturePicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldPicturePickerHost, { IPropertyFieldPicturePickerHostProps } from './PropertyFieldPicturePickerHost';
17 | import { IWebPartContext } from '@microsoft/sp-client-preview';
18 |
19 | /**
20 | * @interface
21 | * Public properties of the PropertyFieldPicturePicker custom field
22 | *
23 | */
24 | export interface IPropertyFieldPicturePickerProps {
25 | /**
26 | * @var
27 | * Property field label displayed on top
28 | */
29 | label: string;
30 | /**
31 | * @var
32 | * Initial value
33 | */
34 | initialValue?: string;
35 | /**
36 | * @var
37 | * Parent web part context
38 | */
39 | context: IWebPartContext;
40 | /**
41 | * @function
42 | * Defines a onPropertyChange function to raise when the selected Color changed.
43 | * Normally this function must be always defined with the 'this.onPropertyChange'
44 | * method of the web part object.
45 | */
46 | onPropertyChange(propertyPath: string, newValue: any): void;
47 | }
48 |
49 | /**
50 | * @interface
51 | * Private properties of the PropertyFieldPicturePicker custom field.
52 | * We separate public & private properties to include onRender & onDispose method waited
53 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
54 | * the PropertyFieldPicturePicker.
55 | *
56 | */
57 | export interface IPropertyFieldPicturePickerPropsInternal extends IPropertyPaneCustomFieldProps {
58 | label: string;
59 | initialValue?: string;
60 | targetProperty: string;
61 | context: IWebPartContext;
62 | onRender(elem: HTMLElement): void;
63 | onDispose(elem: HTMLElement): void;
64 | onPropertyChange(propertyPath: string, newValue: any): void;
65 | }
66 |
67 | /**
68 | * @interface
69 | * Represents a PropertyFieldPicturePicker object
70 | *
71 | */
72 | class PropertyFieldPicturePickerBuilder implements IPropertyPaneField {
73 |
74 | //Properties defined by IPropertyPaneField
75 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
76 | public targetProperty: string;
77 | public properties: IPropertyFieldPicturePickerPropsInternal;
78 |
79 | //Custom properties
80 | private label: string;
81 | private initialValue: string;
82 | private context: IWebPartContext;
83 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
84 |
85 | /**
86 | * @function
87 | * Ctor
88 | */
89 | public constructor(_targetProperty: string, _properties: IPropertyFieldPicturePickerPropsInternal) {
90 | this.targetProperty = _properties.targetProperty;
91 | this.properties = _properties;
92 | this.label = _properties.label;
93 | this.initialValue = _properties.initialValue;
94 | this.context = _properties.context;
95 | this.properties.onDispose = this.dispose;
96 | this.properties.onRender = this.render;
97 | this.onPropertyChange = _properties.onPropertyChange;
98 | }
99 |
100 | /**
101 | * @function
102 | * Renders the ColorPicker field content
103 | */
104 | private render(elem: HTMLElement): void {
105 | //Construct the JSX properties
106 | const element: React.ReactElement = React.createElement(PropertyFieldPicturePickerHost, {
107 | label: this.label,
108 | initialValue: this.initialValue,
109 | context: this.context,
110 | targetProperty: this.targetProperty,
111 | onDispose: this.dispose,
112 | onRender: this.render,
113 | onPropertyChange: this.onPropertyChange
114 | });
115 | //Calls the REACT content generator
116 | ReactDom.render(element, elem);
117 | }
118 |
119 | /**
120 | * @function
121 | * Disposes the current object
122 | */
123 | private dispose(elem: HTMLElement): void {
124 |
125 | }
126 |
127 | }
128 |
129 | /**
130 | * @function
131 | * Helper method to create a Color Picker on the PropertyPane.
132 | * @param targetProperty - Target property the Color picker is associated to.
133 | * @param properties - Strongly typed Color Picker properties.
134 | */
135 | export function PropertyFieldPicturePicker(targetProperty: string, properties: IPropertyFieldPicturePickerProps): IPropertyPaneField {
136 |
137 | //Create an internal properties object from the given properties
138 | var newProperties: IPropertyFieldPicturePickerPropsInternal = {
139 | label: properties.label,
140 | targetProperty: targetProperty,
141 | initialValue: properties.initialValue,
142 | onPropertyChange: properties.onPropertyChange,
143 | context: properties.context,
144 | onDispose: null,
145 | onRender: null
146 | };
147 | //Calles the PropertyFieldPicturePicker builder object
148 | //This object will simulate a PropertyFieldCustom to manage his rendering process
149 | return new PropertyFieldPicturePickerBuilder(targetProperty, newProperties);
150 | }
151 |
152 |
153 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldDatePicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDatePicker.ts
3 | * Define a custom field of type PropertyFieldDatePicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldDatePickerHost, { IPropertyFieldDatePickerHostProps } from './PropertyFieldDatePickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldDatePicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldDatePickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial date of the control
32 | */
33 | initialDate?: string;
34 | /**
35 | * @function
36 | * Defines a formatDate function to display the date of the custom Field.
37 | * By defaut date.toDateString() is used.
38 | */
39 | formatDate?: (date: Date) => string;
40 | /**
41 | * @function
42 | * Defines a onPropertyChange function to raise when the selected date changed.
43 | * Normally this function must be always defined with the 'this.onPropertyChange'
44 | * method of the web part object.
45 | */
46 | onPropertyChange(propertyPath: string, newValue: any): void;
47 | }
48 |
49 | /**
50 | * @interface
51 | * Private properties of the PropertyFieldDatePicker custom field.
52 | * We separate public & private properties to include onRender & onDispose method waited
53 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
54 | * the PropertyFieldDatePicker.
55 | *
56 | */
57 | export interface IPropertyFieldDatePickerPropsInternal extends IPropertyPaneCustomFieldProps {
58 | label: string;
59 | initialDate?: string;
60 | targetProperty: string;
61 | formatDate?: (date: Date) => string;
62 | onRender(elem: HTMLElement): void;
63 | onDispose(elem: HTMLElement): void;
64 | onPropertyChange(propertyPath: string, newValue: any): void;
65 | }
66 |
67 | /**
68 | * @interface
69 | * Represents a PropertyFieldDatePicker object
70 | *
71 | */
72 | export class PropertyFieldDatePickerBuilder implements IPropertyPaneField {
73 |
74 | //Properties defined by IPropertyPaneField
75 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
76 | public targetProperty: string;
77 | public properties: IPropertyFieldDatePickerPropsInternal;
78 |
79 | //Custom properties
80 | private label: string;
81 | private initialDate: string;
82 | private formatDate: (date: Date) => string;
83 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
84 |
85 | /**
86 | * @function
87 | * Ctor
88 | */
89 | public constructor(_targetProperty: string, _properties: IPropertyFieldDatePickerPropsInternal) {
90 | this.targetProperty = _properties.targetProperty;
91 | this.properties = _properties;
92 | this.label = _properties.label;
93 | this.initialDate = _properties.initialDate;
94 | this.properties.onDispose = this.dispose;
95 | this.properties.onRender = this.render;
96 | this.onPropertyChange = _properties.onPropertyChange;
97 | this.formatDate = _properties.formatDate;
98 | }
99 |
100 | /**
101 | * @function
102 | * Renders the DatePicker field content
103 | */
104 | private render(elem: HTMLElement): void {
105 | //Construct the JSX properties
106 | const element: React.ReactElement = React.createElement(PropertyFieldDatePickerHost, {
107 | label: this.label,
108 | initialDate: this.initialDate,
109 | targetProperty: this.targetProperty,
110 | formatDate: this.formatDate,
111 | onDispose: this.dispose,
112 | onRender: this.render,
113 | onPropertyChange: this.onPropertyChange
114 | });
115 | //Calls the REACT content generator
116 | ReactDom.render(element, elem);
117 | }
118 |
119 | /**
120 | * @function
121 | * Disposes the current object
122 | */
123 | private dispose(elem: HTMLElement): void {
124 |
125 | }
126 |
127 | }
128 |
129 | /**
130 | * @function
131 | * Helper method to create a Date Picker on the PropertyPane.
132 | * @param targetProperty - Target property the date picker is associated to.
133 | * @param properties - Strongly typed Date Picker properties.
134 | */
135 | export function PropertyFieldDatePicker(targetProperty: string, properties: IPropertyFieldDatePickerProps): IPropertyPaneField {
136 |
137 | //Create an internal properties object from the given properties
138 | var newProperties: IPropertyFieldDatePickerPropsInternal = {
139 | label: properties.label,
140 | targetProperty: targetProperty,
141 | initialDate: properties.initialDate,
142 | onPropertyChange: properties.onPropertyChange,
143 | formatDate: properties.formatDate,
144 | onDispose: null,
145 | onRender: null
146 | };
147 | //Calles the PropertyFieldDatePicker builder object
148 | //This object will simulate a PropertyFieldCustom to manage his rendering process
149 | return new PropertyFieldDatePickerBuilder(targetProperty, newProperties);
150 | }
151 |
152 |
153 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldDocumentPicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDocumentPicker.ts
3 | * Define a custom field of type PropertyFieldDocumentPicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldDocumentPickerHost, { IPropertyFieldDocumentPickerHostProps } from './PropertyFieldDocumentPickerHost';
17 | import { IWebPartContext } from '@microsoft/sp-client-preview';
18 |
19 | /**
20 | * @interface
21 | * Public properties of the PropertyFieldDocumentPicker custom field
22 | *
23 | */
24 | export interface IPropertyFieldDocumentPickerProps {
25 | /**
26 | * @var
27 | * Property field label displayed on top
28 | */
29 | label: string;
30 | /**
31 | * @var
32 | * Initial value
33 | */
34 | initialValue?: string;
35 | /**
36 | * @var
37 | * Parent web part context
38 | */
39 | context: IWebPartContext;
40 | /**
41 | * @function
42 | * Defines a onPropertyChange function to raise when the selected Color changed.
43 | * Normally this function must be always defined with the 'this.onPropertyChange'
44 | * method of the web part object.
45 | */
46 | onPropertyChange(propertyPath: string, newValue: any): void;
47 | }
48 |
49 | /**
50 | * @interface
51 | * Private properties of the PropertyFieldDocumentPicker custom field.
52 | * We separate public & private properties to include onRender & onDispose method waited
53 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
54 | * the PropertyFieldDocumentPicker.
55 | *
56 | */
57 | export interface IPropertyFieldDocumentPickerPropsInternal extends IPropertyPaneCustomFieldProps {
58 | label: string;
59 | initialValue?: string;
60 | targetProperty: string;
61 | context: IWebPartContext;
62 | onRender(elem: HTMLElement): void;
63 | onDispose(elem: HTMLElement): void;
64 | onPropertyChange(propertyPath: string, newValue: any): void;
65 | }
66 |
67 | /**
68 | * @interface
69 | * Represents a PropertyFieldDocumentPicker object
70 | *
71 | */
72 | class PropertyFieldDocumentPickerBuilder implements IPropertyPaneField {
73 |
74 | //Properties defined by IPropertyPaneField
75 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
76 | public targetProperty: string;
77 | public properties: IPropertyFieldDocumentPickerPropsInternal;
78 |
79 | //Custom properties
80 | private label: string;
81 | private initialValue: string;
82 | private context: IWebPartContext;
83 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
84 |
85 | /**
86 | * @function
87 | * Ctor
88 | */
89 | public constructor(_targetProperty: string, _properties: IPropertyFieldDocumentPickerPropsInternal) {
90 | this.targetProperty = _properties.targetProperty;
91 | this.properties = _properties;
92 | this.label = _properties.label;
93 | this.initialValue = _properties.initialValue;
94 | this.context = _properties.context;
95 | this.properties.onDispose = this.dispose;
96 | this.properties.onRender = this.render;
97 | this.onPropertyChange = _properties.onPropertyChange;
98 | }
99 |
100 | /**
101 | * @function
102 | * Renders the ColorPicker field content
103 | */
104 | private render(elem: HTMLElement): void {
105 | //Construct the JSX properties
106 | const element: React.ReactElement = React.createElement(PropertyFieldDocumentPickerHost, {
107 | label: this.label,
108 | initialValue: this.initialValue,
109 | context: this.context,
110 | targetProperty: this.targetProperty,
111 | onDispose: this.dispose,
112 | onRender: this.render,
113 | onPropertyChange: this.onPropertyChange
114 | });
115 | //Calls the REACT content generator
116 | ReactDom.render(element, elem);
117 | }
118 |
119 | /**
120 | * @function
121 | * Disposes the current object
122 | */
123 | private dispose(elem: HTMLElement): void {
124 |
125 | }
126 |
127 | }
128 |
129 | /**
130 | * @function
131 | * Helper method to create a Color Picker on the PropertyPane.
132 | * @param targetProperty - Target property the Color picker is associated to.
133 | * @param properties - Strongly typed Color Picker properties.
134 | */
135 | export function PropertyFieldDocumentPicker(targetProperty: string, properties: IPropertyFieldDocumentPickerProps): IPropertyPaneField {
136 |
137 | //Create an internal properties object from the given properties
138 | var newProperties: IPropertyFieldDocumentPickerPropsInternal = {
139 | label: properties.label,
140 | targetProperty: targetProperty,
141 | initialValue: properties.initialValue,
142 | onPropertyChange: properties.onPropertyChange,
143 | context: properties.context,
144 | onDispose: null,
145 | onRender: null
146 | };
147 | //Calles the PropertyFieldDocumentPicker builder object
148 | //This object will simulate a PropertyFieldCustom to manage his rendering process
149 | return new PropertyFieldDocumentPickerBuilder(targetProperty, newProperties);
150 | }
151 |
152 |
153 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldMapPicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldMapPicker.ts
3 | * Define a custom field of type PropertyFieldMapPicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldMapPickerHost, { IPropertyFieldMapPickerHostProps } from './PropertyFieldMapPickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldMapPicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldMapPickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @var
36 | * Longitude
37 | */
38 | longitude?: string;
39 | /**
40 | * @var
41 | * latitude
42 | */
43 | latitude?: string;
44 | /**
45 | * @function
46 | * Defines a onPropertyChange function to raise when the selected Color changed.
47 | * Normally this function must be always defined with the 'this.onPropertyChange'
48 | * method of the web part object.
49 | */
50 | onPropertyChange(propertyPath: string, newValue: any): void;
51 | }
52 |
53 | /**
54 | * @interface
55 | * Private properties of the PropertyFieldMapPicker custom field.
56 | * We separate public & private properties to include onRender & onDispose method waited
57 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
58 | * the PropertyFieldMapPicker.
59 | *
60 | */
61 | export interface IPropertyFieldMapPickerPropsInternal extends IPropertyPaneCustomFieldProps {
62 | label: string;
63 | initialValue?: string;
64 | targetProperty: string;
65 | longitude?: string;
66 | latitude?: string;
67 | onRender(elem: HTMLElement): void;
68 | onDispose(elem: HTMLElement): void;
69 | onPropertyChange(propertyPath: string, newValue: any): void;
70 | }
71 |
72 | /**
73 | * @interface
74 | * Represents a PropertyFieldMapPicker object
75 | *
76 | */
77 | class PropertyFieldMapPickerBuilder implements IPropertyPaneField {
78 |
79 | //Properties defined by IPropertyPaneField
80 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
81 | public targetProperty: string;
82 | public properties: IPropertyFieldMapPickerPropsInternal;
83 |
84 | //Custom properties
85 | private label: string;
86 | private initialValue: string;
87 | private longitude: string;
88 | private latitude: string;
89 |
90 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
91 |
92 | /**
93 | * @function
94 | * Ctor
95 | */
96 | public constructor(_targetProperty: string, _properties: IPropertyFieldMapPickerPropsInternal) {
97 | this.targetProperty = _properties.targetProperty;
98 | this.properties = _properties;
99 | this.label = _properties.label;
100 | this.initialValue = _properties.initialValue;
101 | this.longitude = _properties.longitude;
102 | this.latitude = _properties.latitude;
103 | this.properties.onDispose = this.dispose;
104 | this.properties.onRender = this.render;
105 | this.onPropertyChange = _properties.onPropertyChange;
106 | }
107 |
108 | /**
109 | * @function
110 | * Renders the ColorPicker field content
111 | */
112 | private render(elem: HTMLElement): void {
113 | //Construct the JSX properties
114 | const element: React.ReactElement = React.createElement(PropertyFieldMapPickerHost, {
115 | label: this.label,
116 | initialValue: this.initialValue,
117 | latitude: this.latitude,
118 | longitude: this.longitude,
119 | targetProperty: this.targetProperty,
120 | onDispose: this.dispose,
121 | onRender: this.render,
122 | onPropertyChange: this.onPropertyChange
123 | });
124 | //Calls the REACT content generator
125 | ReactDom.render(element, elem);
126 | }
127 |
128 | /**
129 | * @function
130 | * Disposes the current object
131 | */
132 | private dispose(elem: HTMLElement): void {
133 |
134 | }
135 |
136 | }
137 |
138 | /**
139 | * @function
140 | * Helper method to create a Color Picker on the PropertyPane.
141 | * @param targetProperty - Target property the Color picker is associated to.
142 | * @param properties - Strongly typed Color Picker properties.
143 | */
144 | export function PropertyFieldMapPicker(targetProperty: string, properties: IPropertyFieldMapPickerProps): IPropertyPaneField {
145 |
146 | //Create an internal properties object from the given properties
147 | var newProperties: IPropertyFieldMapPickerPropsInternal = {
148 | label: properties.label,
149 | targetProperty: targetProperty,
150 | initialValue: properties.initialValue,
151 | latitude: properties.latitude,
152 | longitude: properties.longitude,
153 | onPropertyChange: properties.onPropertyChange,
154 | onDispose: null,
155 | onRender: null
156 | };
157 | //Calles the PropertyFieldMapPicker builder object
158 | //This object will simulate a PropertyFieldCustom to manage his rendering process
159 | return new PropertyFieldMapPickerBuilder(targetProperty, newProperties);
160 | }
161 |
162 |
163 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldDateTimePicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDateTimePicker.ts
3 | * Define a custom field of type PropertyFieldDateTimePicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldDateTimePickerHost, { IPropertyFieldDateTimePickerHostProps } from './PropertyFieldDateTimePickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldDateTimePicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldDateTimePickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial date of the control
32 | */
33 | initialDate?: string;
34 | /**
35 | * @function
36 | * Defines a formatDate function to display the date of the custom Field.
37 | * By defaut date.toDateString() is used.
38 | */
39 | formatDate?: (date: Date) => string;
40 | /**
41 | * @function
42 | * Defines a onPropertyChange function to raise when the selected date changed.
43 | * Normally this function must be always defined with the 'this.onPropertyChange'
44 | * method of the web part object.
45 | */
46 | onPropertyChange(propertyPath: string, newValue: any): void;
47 | }
48 |
49 | /**
50 | * @interface
51 | * Private properties of the PropertyFieldDateTimePicker custom field.
52 | * We separate public & private properties to include onRender & onDispose method waited
53 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
54 | * the PropertyFieldDateTimePicker.
55 | *
56 | */
57 | export interface IPropertyFieldDateTimePickerPropsInternal extends IPropertyPaneCustomFieldProps {
58 | label: string;
59 | initialDate?: string;
60 | targetProperty: string;
61 | formatDate?: (date: Date) => string;
62 | onRender(elem: HTMLElement): void;
63 | onDispose(elem: HTMLElement): void;
64 | onPropertyChange(propertyPath: string, newValue: any): void;
65 | }
66 |
67 | /**
68 | * @interface
69 | * Represents a PropertyFieldDateTimePicker object
70 | *
71 | */
72 | class PropertyFieldDateTimePickerBuilder implements IPropertyPaneField {
73 |
74 | //Properties defined by IPropertyPaneField
75 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
76 | public targetProperty: string;
77 | public properties: IPropertyFieldDateTimePickerPropsInternal;
78 |
79 | //Custom properties
80 | private label: string;
81 | private initialDate: string;
82 | private formatDate: (date: Date) => string;
83 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
84 |
85 | /**
86 | * @function
87 | * Ctor
88 | */
89 | public constructor(_targetProperty: string, _properties: IPropertyFieldDateTimePickerPropsInternal) {
90 | this.targetProperty = _properties.targetProperty;
91 | this.properties = _properties;
92 | this.label = _properties.label;
93 | this.initialDate = _properties.initialDate;
94 | this.properties.onDispose = this.dispose;
95 | this.properties.onRender = this.render;
96 | this.onPropertyChange = _properties.onPropertyChange;
97 | this.formatDate = _properties.formatDate;
98 | }
99 |
100 | /**
101 | * @function
102 | * Renders the DatePicker field content
103 | */
104 | private render(elem: HTMLElement): void {
105 | //Construct the JSX properties
106 | const element: React.ReactElement = React.createElement(PropertyFieldDateTimePickerHost, {
107 | label: this.label,
108 | initialDate: this.initialDate,
109 | targetProperty: this.targetProperty,
110 | formatDate: this.formatDate,
111 | onDispose: this.dispose,
112 | onRender: this.render,
113 | onPropertyChange: this.onPropertyChange
114 | });
115 | //Calls the REACT content generator
116 | ReactDom.render(element, elem);
117 | }
118 |
119 | /**
120 | * @function
121 | * Disposes the current object
122 | */
123 | private dispose(elem: HTMLElement): void {
124 |
125 | }
126 |
127 | }
128 |
129 | /**
130 | * @function
131 | * Helper method to create a Date Picker on the PropertyPane.
132 | * @param targetProperty - Target property the date picker is associated to.
133 | * @param properties - Strongly typed Date Picker properties.
134 | */
135 | export function PropertyFieldDateTimePicker(targetProperty: string, properties: IPropertyFieldDateTimePickerProps): IPropertyPaneField {
136 |
137 | //Create an internal properties object from the given properties
138 | var newProperties: IPropertyFieldDateTimePickerPropsInternal = {
139 | label: properties.label,
140 | targetProperty: targetProperty,
141 | initialDate: properties.initialDate,
142 | onPropertyChange: properties.onPropertyChange,
143 | formatDate: properties.formatDate,
144 | onDispose: null,
145 | onRender: null
146 | };
147 | //Calles the PropertyFieldDateTimePicker builder object
148 | //This object will simulate a PropertyFieldCustom to manage his rendering process
149 | return new PropertyFieldDateTimePickerBuilder(targetProperty, newProperties);
150 | }
151 |
152 |
153 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFIeldDatePickerHost.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDatePickerHost.tsx
3 | * Renders the controls for PropertyFieldDatePicker component
4 | *
5 | * @copyright 2016 Olivier Carpentier
6 | * Released under MIT licence
7 | */
8 | import * as React from 'react';
9 | import { IPropertyFieldDatePickerPropsInternal } from './PropertyFieldDatePicker';
10 | import { DatePicker, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
11 | import * as strings from 'customFieldsWebPartStrings';
12 |
13 | /**
14 | * @interface
15 | * PropertyFieldDatePickerHost properties interface
16 | *
17 | */
18 | export interface IPropertyFieldDatePickerHostProps extends IPropertyFieldDatePickerPropsInternal {
19 | }
20 |
21 | /**
22 | * @class
23 | * Defines the labels of the DatePicker control (as months, days, etc.)
24 | *
25 | */
26 | class DatePickerStrings implements IDatePickerStrings {
27 | /**
28 | * An array of strings for the full names of months.
29 | * The array is 0-based, so months[0] should be the full name of January.
30 | */
31 | public months: string[] = [
32 | strings.DatePickerMonthLongJanuary, strings.DatePickerMonthLongFebruary,
33 | strings.DatePickerMonthLongMarch, strings.DatePickerMonthLongApril,
34 | strings.DatePickerMonthLongMay, strings.DatePickerMonthLongJune, strings.DatePickerMonthLongJuly,
35 | strings.DatePickerMonthLongAugust, strings.DatePickerMonthLongSeptember, strings.DatePickerMonthLongOctober,
36 | strings.DatePickerMonthLongNovember, strings.DatePickerMonthLongDecember
37 | ];
38 | /**
39 | * An array of strings for the short names of months.
40 | * The array is 0-based, so shortMonths[0] should be the short name of January.
41 | */
42 | public shortMonths: string[] = [
43 | strings.DatePickerMonthShortJanuary, strings.DatePickerMonthShortFebruary,
44 | strings.DatePickerMonthShortMarch, strings.DatePickerMonthShortApril,
45 | strings.DatePickerMonthShortMay, strings.DatePickerMonthShortJune, strings.DatePickerMonthShortJuly,
46 | strings.DatePickerMonthShortAugust, strings.DatePickerMonthShortSeptember, strings.DatePickerMonthShortOctober,
47 | strings.DatePickerMonthShortNovember, strings.DatePickerMonthShortDecember
48 | ];
49 | /**
50 | * An array of strings for the full names of days of the week.
51 | * The array is 0-based, so days[0] should be the full name of Sunday.
52 | */
53 | public days: string[] = [
54 | strings.DatePickerDayLongSunday, strings.DatePickerDayLongMonday, strings.DatePickerDayLongTuesday,
55 | strings.DatePickerDayLongWednesday, strings.DatePickerDayLongThursday, strings.DatePickerDayLongFriday,
56 | strings.DatePickerDayLongSaturday
57 | ];
58 | /**
59 | * An array of strings for the initials of the days of the week.
60 | * The array is 0-based, so days[0] should be the initial of Sunday.
61 | */
62 | public shortDays: string[] = [
63 | strings.DatePickerDayShortSunday, strings.DatePickerDayShortMonday, strings.DatePickerDayShortTuesday,
64 | strings.DatePickerDayShortWednesday, strings.DatePickerDayShortThursday, strings.DatePickerDayShortFriday,
65 | strings.DatePickerDayShortSaturday
66 | ];
67 | /**
68 | * String to render for button to direct the user to today's date.
69 | */
70 | public goToToday: string = "";
71 | /**
72 | * Error message to render for TextField if isRequired validation fails.
73 | */
74 | public isRequiredErrorMessage: string = "";
75 | /**
76 | * Error message to render for TextField if input date string parsing fails.
77 | */
78 | public invalidInputErrorMessage: string = "";
79 | }
80 |
81 | /**
82 | * @class
83 | * Renders the controls for PropertyFieldDatePicker component
84 | */
85 | export default class PropertyFieldDatePickerHost extends React.Component {
86 |
87 | /**
88 | * @function
89 | * Contructor
90 | */
91 | constructor(props: IPropertyFieldDatePickerHostProps) {
92 | super(props);
93 | //Bind the current object to the external called onSelectDate method
94 | this.onSelectDate = this.onSelectDate.bind(this);
95 | }
96 |
97 | /**
98 | * @function
99 | * Function called when the DatePicker Office UI Fabric component selected date changed
100 | */
101 | private onSelectDate(date: Date): void {
102 | //Checks if there is a method to called
103 | if (this.props.onPropertyChange && date != null) {
104 | //Checks if a formatDate function has been defined
105 | if (this.props.formatDate)
106 | this.props.onPropertyChange(this.props.targetProperty, this.props.formatDate(date));
107 | else
108 | this.props.onPropertyChange(this.props.targetProperty, date.toDateString());
109 | }
110 | }
111 |
112 | /**
113 | * @function
114 | * Renders the datepicker controls with Office UI Fabric
115 | */
116 | public render(): JSX.Element {
117 | //Defines the DatePicker control labels
118 | var dateStrings: DatePickerStrings = new DatePickerStrings();
119 | //Constructs a Date type object from the initalDate string property
120 | var date: Date;
121 | if (this.props.initialDate != null && this.props.initialDate != '')
122 | date = new Date(this.props.initialDate);
123 | //Renders content
124 | return (
125 |
126 |
130 |
131 | );
132 | }
133 | }
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldFontPicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldFontPicker.ts
3 | * Define a custom field of type PropertyFieldFontPicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldFontPickerHost, { IPropertyFieldFontPickerHostProps } from './PropertyFieldFontPickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldFontPicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldFontPickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @var
36 | * Uses web safe font or exact name (default is true)
37 | */
38 | useSafeFont?: boolean;
39 | /**
40 | * @var
41 | * Preview the fonts in the dropdown control (default is true)
42 | */
43 | previewFonts?: boolean;
44 | /**
45 | * @function
46 | * Defines a onPropertyChange function to raise when the selected Font changed.
47 | * Normally this function must be always defined with the 'this.onPropertyChange'
48 | * method of the web part object.
49 | */
50 | onPropertyChange(propertyPath: string, newValue: any): void;
51 | }
52 |
53 | /**
54 | * @interface
55 | * Private properties of the PropertyFieldFontPicker custom field.
56 | * We separate public & private properties to include onRender & onDispose method waited
57 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
58 | * the PropertyFieldFontPicker.
59 | *
60 | */
61 | export interface IPropertyFieldFontPickerPropsInternal extends IPropertyPaneCustomFieldProps {
62 | label: string;
63 | initialValue?: string;
64 | useSafeFont?: boolean;
65 | previewFonts?: boolean;
66 | targetProperty: string;
67 | onRender(elem: HTMLElement): void;
68 | onDispose(elem: HTMLElement): void;
69 | onPropertyChange(propertyPath: string, newValue: any): void;
70 | }
71 |
72 | /**
73 | * @interface
74 | * Represents a PropertyFieldFontPicker object
75 | *
76 | */
77 | class PropertyFieldFontPickerBuilder implements IPropertyPaneField {
78 |
79 | //Properties defined by IPropertyPaneField
80 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
81 | public targetProperty: string;
82 | public properties: IPropertyFieldFontPickerPropsInternal;
83 |
84 | //Custom properties
85 | private label: string;
86 | private initialValue: string;
87 | private useSafeFont: boolean;
88 | private previewFonts: boolean;
89 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
90 |
91 | /**
92 | * @function
93 | * Ctor
94 | */
95 | public constructor(_targetProperty: string, _properties: IPropertyFieldFontPickerPropsInternal) {
96 | this.targetProperty = _properties.targetProperty;
97 | this.properties = _properties;
98 | this.label = _properties.label;
99 | this.initialValue = _properties.initialValue;
100 | this.useSafeFont = _properties.useSafeFont;
101 | this.previewFonts = _properties.previewFonts;
102 | this.properties.onDispose = this.dispose;
103 | this.properties.onRender = this.render;
104 | this.onPropertyChange = _properties.onPropertyChange;
105 | }
106 |
107 | /**
108 | * @function
109 | * Renders the ColorPicker field content
110 | */
111 | private render(elem: HTMLElement): void {
112 | //Construct the JSX properties
113 | const element: React.ReactElement = React.createElement(PropertyFieldFontPickerHost, {
114 | label: this.label,
115 | initialValue: this.initialValue,
116 | useSafeFont: this.useSafeFont,
117 | previewFonts: this.previewFonts,
118 | targetProperty: this.targetProperty,
119 | onDispose: this.dispose,
120 | onRender: this.render,
121 | onPropertyChange: this.onPropertyChange
122 | });
123 | //Calls the REACT content generator
124 | ReactDom.render(element, elem);
125 | }
126 |
127 | /**
128 | * @function
129 | * Disposes the current object
130 | */
131 | private dispose(elem: HTMLElement): void {
132 |
133 | }
134 |
135 | }
136 |
137 | /**
138 | * @function
139 | * Helper method to create a Font Picker on the PropertyPane.
140 | * @param targetProperty - Target property the Font picker is associated to.
141 | * @param properties - Strongly typed Font Picker properties.
142 | */
143 | export function PropertyFieldFontPicker(targetProperty: string, properties: IPropertyFieldFontPickerProps): IPropertyPaneField {
144 |
145 | //Create an internal properties object from the given properties
146 | var newProperties: IPropertyFieldFontPickerPropsInternal = {
147 | label: properties.label,
148 | targetProperty: targetProperty,
149 | initialValue: properties.initialValue,
150 | useSafeFont: properties.useSafeFont,
151 | previewFonts: properties.previewFonts,
152 | onPropertyChange: properties.onPropertyChange,
153 | onDispose: null,
154 | onRender: null
155 | };
156 | //Calles the PropertyFieldFontPicker builder object
157 | //This object will simulate a PropertyFieldCustom to manage his rendering process
158 | return new PropertyFieldFontPickerBuilder(targetProperty, newProperties);
159 | }
160 |
161 |
162 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldIconPicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldIconPicker.ts
3 | * Define a custom field of type PropertyFieldIconPicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldIconPickerHost, { IPropertyFieldIconPickerHostProps } from './PropertyFieldIconPickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldIconPicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldIconPickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @var
36 | * Uses MSDN order or alphabetical for icons
37 | */
38 | orderAlphabetical?: boolean;
39 | /**
40 | * @var
41 | * Preview the fonts in the dropdown control (default is true)
42 | */
43 | preview?: boolean;
44 | /**
45 | * @function
46 | * Defines a onPropertyChange function to raise when the selected Font changed.
47 | * Normally this function must be always defined with the 'this.onPropertyChange'
48 | * method of the web part object.
49 | */
50 | onPropertyChange(propertyPath: string, newValue: any): void;
51 | }
52 |
53 | /**
54 | * @interface
55 | * Private properties of the PropertyFieldIconPicker custom field.
56 | * We separate public & private properties to include onRender & onDispose method waited
57 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
58 | * the PropertyFieldIconPicker.
59 | *
60 | */
61 | export interface IPropertyFieldIconPickerPropsInternal extends IPropertyPaneCustomFieldProps {
62 | label: string;
63 | initialValue?: string;
64 | orderAlphabetical?: boolean;
65 | preview?: boolean;
66 | targetProperty: string;
67 | onRender(elem: HTMLElement): void;
68 | onDispose(elem: HTMLElement): void;
69 | onPropertyChange(propertyPath: string, newValue: any): void;
70 | }
71 |
72 | /**
73 | * @interface
74 | * Represents a PropertyFieldIconPicker object
75 | *
76 | */
77 | class PropertyFieldIconPickerBuilder implements IPropertyPaneField {
78 |
79 | //Properties defined by IPropertyPaneField
80 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
81 | public targetProperty: string;
82 | public properties: IPropertyFieldIconPickerPropsInternal;
83 |
84 | //Custom properties
85 | private label: string;
86 | private initialValue: string;
87 | private orderAlphabetical: boolean;
88 | private preview: boolean;
89 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
90 |
91 | /**
92 | * @function
93 | * Ctor
94 | */
95 | public constructor(_targetProperty: string, _properties: IPropertyFieldIconPickerPropsInternal) {
96 | this.targetProperty = _properties.targetProperty;
97 | this.properties = _properties;
98 | this.label = _properties.label;
99 | this.initialValue = _properties.initialValue;
100 | this.orderAlphabetical = _properties.orderAlphabetical;
101 | this.preview = _properties.preview;
102 | this.properties.onDispose = this.dispose;
103 | this.properties.onRender = this.render;
104 | this.onPropertyChange = _properties.onPropertyChange;
105 | }
106 |
107 | /**
108 | * @function
109 | * Renders the ColorPicker field content
110 | */
111 | private render(elem: HTMLElement): void {
112 | //Construct the JSX properties
113 | const element: React.ReactElement = React.createElement(PropertyFieldIconPickerHost, {
114 | label: this.label,
115 | initialValue: this.initialValue,
116 | orderAlphabetical: this.orderAlphabetical,
117 | preview: this.preview,
118 | targetProperty: this.targetProperty,
119 | onDispose: this.dispose,
120 | onRender: this.render,
121 | onPropertyChange: this.onPropertyChange
122 | });
123 | //Calls the REACT content generator
124 | ReactDom.render(element, elem);
125 | }
126 |
127 | /**
128 | * @function
129 | * Disposes the current object
130 | */
131 | private dispose(elem: HTMLElement): void {
132 |
133 | }
134 |
135 | }
136 |
137 | /**
138 | * @function
139 | * Helper method to create a Font Picker on the PropertyPane.
140 | * @param targetProperty - Target property the Font picker is associated to.
141 | * @param properties - Strongly typed Font Picker properties.
142 | */
143 | export function PropertyFieldIconPicker(targetProperty: string, properties: IPropertyFieldIconPickerProps): IPropertyPaneField {
144 |
145 | //Create an internal properties object from the given properties
146 | var newProperties: IPropertyFieldIconPickerPropsInternal = {
147 | label: properties.label,
148 | targetProperty: targetProperty,
149 | initialValue: properties.initialValue,
150 | orderAlphabetical: properties.orderAlphabetical,
151 | preview: properties.preview,
152 | onPropertyChange: properties.onPropertyChange,
153 | onDispose: null,
154 | onRender: null
155 | };
156 | //Calles the PropertyFieldIconPicker builder object
157 | //This object will simulate a PropertyFieldCustom to manage his rendering process
158 | return new PropertyFieldIconPickerBuilder(targetProperty, newProperties);
159 | }
160 |
161 |
162 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldFontSizePicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldFontSizePicker.ts
3 | * Define a custom field of type PropertyFieldFontSizePicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldFontSizePickerHost, { IPropertyFieldFontSizePickerHostProps } from './PropertyFieldFontSizePickerHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldFontSizePicker custom field
21 | *
22 | */
23 | export interface IPropertyFieldFontSizePickerProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @var
36 | * Uses pixels ('12px') or label ('xx-large') mode
37 | */
38 | usePixels?: boolean;
39 | /**
40 | * @var
41 | * Preview the fonts in the dropdown control (default is true)
42 | */
43 | preview?: boolean;
44 | /**
45 | * @function
46 | * Defines a onPropertyChange function to raise when the selected Font changed.
47 | * Normally this function must be always defined with the 'this.onPropertyChange'
48 | * method of the web part object.
49 | */
50 | onPropertyChange(propertyPath: string, newValue: any): void;
51 | }
52 |
53 | /**
54 | * @interface
55 | * Private properties of the PropertyFieldFontSizePicker custom field.
56 | * We separate public & private properties to include onRender & onDispose method waited
57 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
58 | * the PropertyFieldFontSizePicker.
59 | *
60 | */
61 | export interface IPropertyFieldFontSizePickerPropsInternal extends IPropertyPaneCustomFieldProps {
62 | label: string;
63 | initialValue?: string;
64 | usePixels?: boolean;
65 | preview?: boolean;
66 | targetProperty: string;
67 | onRender(elem: HTMLElement): void;
68 | onDispose(elem: HTMLElement): void;
69 | onPropertyChange(propertyPath: string, newValue: any): void;
70 | }
71 |
72 | /**
73 | * @interface
74 | * Represents a PropertyFieldFontSizePicker object
75 | *
76 | */
77 | class PropertyFieldFontSizePickerBuilder implements IPropertyPaneField {
78 |
79 | //Properties defined by IPropertyPaneField
80 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
81 | public targetProperty: string;
82 | public properties: IPropertyFieldFontSizePickerPropsInternal;
83 |
84 | //Custom properties
85 | private label: string;
86 | private initialValue: string;
87 | private usePixels: boolean;
88 | private preview: boolean;
89 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
90 |
91 | /**
92 | * @function
93 | * Ctor
94 | */
95 | public constructor(_targetProperty: string, _properties: IPropertyFieldFontSizePickerPropsInternal) {
96 | this.targetProperty = _properties.targetProperty;
97 | this.properties = _properties;
98 | this.label = _properties.label;
99 | this.initialValue = _properties.initialValue;
100 | this.usePixels = _properties.usePixels;
101 | this.preview = _properties.preview;
102 | this.properties.onDispose = this.dispose;
103 | this.properties.onRender = this.render;
104 | this.onPropertyChange = _properties.onPropertyChange;
105 | }
106 |
107 | /**
108 | * @function
109 | * Renders the ColorPicker field content
110 | */
111 | private render(elem: HTMLElement): void {
112 | //Construct the JSX properties
113 | const element: React.ReactElement = React.createElement(PropertyFieldFontSizePickerHost, {
114 | label: this.label,
115 | initialValue: this.initialValue,
116 | usePixels: this.usePixels,
117 | preview: this.preview,
118 | targetProperty: this.targetProperty,
119 | onDispose: this.dispose,
120 | onRender: this.render,
121 | onPropertyChange: this.onPropertyChange
122 | });
123 | //Calls the REACT content generator
124 | ReactDom.render(element, elem);
125 | }
126 |
127 | /**
128 | * @function
129 | * Disposes the current object
130 | */
131 | private dispose(elem: HTMLElement): void {
132 |
133 | }
134 |
135 | }
136 |
137 | /**
138 | * @function
139 | * Helper method to create a Font Picker on the PropertyPane.
140 | * @param targetProperty - Target property the Font picker is associated to.
141 | * @param properties - Strongly typed Font Picker properties.
142 | */
143 | export function PropertyFieldFontSizePicker(targetProperty: string, properties: IPropertyFieldFontSizePickerProps): IPropertyPaneField {
144 |
145 | //Create an internal properties object from the given properties
146 | var newProperties: IPropertyFieldFontSizePickerPropsInternal = {
147 | label: properties.label,
148 | targetProperty: targetProperty,
149 | initialValue: properties.initialValue,
150 | usePixels: properties.usePixels,
151 | preview: properties.preview,
152 | onPropertyChange: properties.onPropertyChange,
153 | onDispose: null,
154 | onRender: null
155 | };
156 | //Calles the PropertyFieldFontSizePicker builder object
157 | //This object will simulate a PropertyFieldCustom to manage his rendering process
158 | return new PropertyFieldFontSizePickerBuilder(targetProperty, newProperties);
159 | }
160 |
161 |
162 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldSPFolderPicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldSPFolderPicker.ts
3 | * Define a custom field of type PropertyFieldSPFolderPicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import { IWebPartContext } from '@microsoft/sp-client-preview';
17 | import PropertyFieldSPFolderPickerHost, { IPropertyFieldSPFolderPickerHostProps } from './PropertyFieldSPFolderPickerHost';
18 |
19 | /**
20 | * @interface
21 | * Public properties of the PropertyFieldSPFolderPicker custom field
22 | *
23 | */
24 | export interface IPropertyFieldSPFolderPickerProps {
25 | /**
26 | * @var
27 | * Property field label displayed on top
28 | */
29 | label: string;
30 | /**
31 | * @var
32 | * Defines the initial selected folder
33 | */
34 | initialFolder?: string;
35 | /**
36 | * @var
37 | * Defines the root folder. If empty, the base folder is the current web root folder
38 | */
39 | baseFolder?: string;
40 | /**
41 | * @var
42 | * Parent web part context
43 | */
44 | context: IWebPartContext;
45 | /**
46 | * @function
47 | * Defines a onPropertyChange function to raise when the selected folder changed.
48 | * Normally this function must be always defined with the 'this.onPropertyChange'
49 | * method of the web part object.
50 | */
51 | onPropertyChange(propertyPath: string, newValue: any): void;
52 | }
53 |
54 | /**
55 | * @interface
56 | * Private properties of the PropertyFieldSPFolderPicker custom field.
57 | * We separate public & private properties to include onRender & onDispose method waited
58 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
59 | * the PropertyFieldSPFolderPicker.
60 | *
61 | */
62 | export interface IPropertyFieldSPFolderPickerPropsInternal extends IPropertyPaneCustomFieldProps {
63 | label: string;
64 | initialFolder?: string;
65 | baseFolder?: string;
66 | targetProperty: string;
67 | context: IWebPartContext;
68 | onRender(elem: HTMLElement): void;
69 | onDispose(elem: HTMLElement): void;
70 | onPropertyChange(propertyPath: string, newValue: any): void;
71 | }
72 |
73 | /**
74 | * @interface
75 | * Represents a PropertyFieldSPFolderPicker object
76 | *
77 | */
78 | class PropertyFieldSPFolderPickerBuilder implements IPropertyPaneField {
79 |
80 | //Properties defined by IPropertyPaneField
81 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
82 | public targetProperty: string;
83 | public properties: IPropertyFieldSPFolderPickerPropsInternal;
84 |
85 | //Custom properties
86 | private label: string;
87 | private initialFolder: string;
88 | private baseFolder: string;
89 | private context: IWebPartContext;
90 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
91 |
92 | /**
93 | * @function
94 | * Ctor
95 | */
96 | public constructor(_targetProperty: string, _properties: IPropertyFieldSPFolderPickerPropsInternal) {
97 | this.targetProperty = _properties.targetProperty;
98 | this.properties = _properties;
99 | this.label = _properties.label;
100 | this.initialFolder = _properties.initialFolder;
101 | this.baseFolder = this.baseFolder;
102 | this.context = _properties.context;
103 | this.properties.onDispose = this.dispose;
104 | this.properties.onRender = this.render;
105 | this.onPropertyChange = _properties.onPropertyChange;
106 | }
107 |
108 | /**
109 | * @function
110 | * Renders the SPFolderPicker field content
111 | */
112 | private render(elem: HTMLElement): void {
113 | //Construct the JSX properties
114 | const element: React.ReactElement = React.createElement(PropertyFieldSPFolderPickerHost, {
115 | label: this.label,
116 | initialFolder: this.initialFolder,
117 | baseFolder: this.baseFolder,
118 | context: this.context,
119 | targetProperty: this.targetProperty,
120 | onDispose: this.dispose,
121 | onRender: this.render,
122 | onPropertyChange: this.onPropertyChange
123 | });
124 | //Calls the REACT content generator
125 | ReactDom.render(element, elem);
126 | }
127 |
128 | /**
129 | * @function
130 | * Disposes the current object
131 | */
132 | private dispose(elem: HTMLElement): void {
133 |
134 | }
135 |
136 | }
137 |
138 | /**
139 | * @function
140 | * Helper method to create a SharePoint Folder Picker on the PropertyPane.
141 | * @param targetProperty - Target property the Folder picker is associated to.
142 | * @param properties - Strongly typed Folder Picker properties.
143 | */
144 | export function PropertyFieldSPFolderPicker(targetProperty: string, properties: IPropertyFieldSPFolderPickerProps): IPropertyPaneField {
145 |
146 | //Create an internal properties object from the given properties
147 | var newProperties: IPropertyFieldSPFolderPickerPropsInternal = {
148 | label: properties.label,
149 | initialFolder: properties.initialFolder,
150 | baseFolder: properties.baseFolder,
151 | context: properties.context,
152 | targetProperty: targetProperty,
153 | onPropertyChange: properties.onPropertyChange,
154 | onDispose: null,
155 | onRender: null
156 | };
157 | //Calles the PropertyFieldSPFolderPicker builder object
158 | //This object will simulate a PropertyFieldCustom to manage his rendering process
159 | return new PropertyFieldSPFolderPickerBuilder(targetProperty, newProperties);
160 | }
161 |
162 |
163 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldMaskedInput.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldMaskedInput.ts
3 | * Define a custom field of type PropertyFieldMaskedInput for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | */
9 | import * as React from 'react';
10 | import * as ReactDom from 'react-dom';
11 | import {
12 | IPropertyPaneField,
13 | IPropertyPaneFieldType,
14 | IPropertyPaneCustomFieldProps
15 | } from '@microsoft/sp-client-preview';
16 | import PropertyFieldMaskedInputHost, { IPropertyFieldMaskedInputHostProps } from './PropertyFieldMaskedInputHost';
17 |
18 | /**
19 | * @interface
20 | * Public properties of the PropertyFieldMaskedInput custom field
21 | *
22 | */
23 | export interface IPropertyFieldMaskedInputProps {
24 | /**
25 | * @var
26 | * Property field label displayed on top
27 | */
28 | label: string;
29 | /**
30 | * @var
31 | * Initial value
32 | */
33 | initialValue?: string;
34 | /**
35 | * @var
36 | * Reg exp pattern
37 | */
38 | pattern: string;
39 | /**
40 | * @var
41 | * Placeholder
42 | */
43 | placeholder: string;
44 | /**
45 | * @var
46 | * Max length
47 | */
48 | maxLength: string;
49 | /**
50 | * @function
51 | * Defines a onPropertyChange function to raise when the selected Color changed.
52 | * Normally this function must be always defined with the 'this.onPropertyChange'
53 | * method of the web part object.
54 | */
55 | onPropertyChange(propertyPath: string, newValue: any): void;
56 | }
57 |
58 | /**
59 | * @interface
60 | * Private properties of the PropertyFieldMaskedInput custom field.
61 | * We separate public & private properties to include onRender & onDispose method waited
62 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
63 | * the PropertyFieldMaskedInput.
64 | *
65 | */
66 | export interface IPropertyFieldMaskedInputPropsInternal extends IPropertyPaneCustomFieldProps {
67 | label: string;
68 | initialValue?: string;
69 | pattern: string;
70 | placeholder: string;
71 | maxLength: string;
72 | targetProperty: string;
73 | onRender(elem: HTMLElement): void;
74 | onDispose(elem: HTMLElement): void;
75 | onPropertyChange(propertyPath: string, newValue: any): void;
76 | }
77 |
78 | /**
79 | * @interface
80 | * Represents a PropertyFieldMaskedInput object
81 | *
82 | */
83 | class PropertyFieldMaskedInputBuilder implements IPropertyPaneField {
84 |
85 | //Properties defined by IPropertyPaneField
86 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
87 | public targetProperty: string;
88 | public properties: IPropertyFieldMaskedInputPropsInternal;
89 |
90 | //Custom properties
91 | private label: string;
92 | private initialValue: string;
93 | private pattern: string;
94 | private placeholder: string;
95 | private maxLength: string;
96 |
97 | private onPropertyChange: (propertyPath: string, newValue: any) => void;
98 |
99 | /**
100 | * @function
101 | * Ctor
102 | */
103 | public constructor(_targetProperty: string, _properties: IPropertyFieldMaskedInputPropsInternal) {
104 | this.targetProperty = _properties.targetProperty;
105 | this.properties = _properties;
106 | this.label = _properties.label;
107 | this.initialValue = _properties.initialValue;
108 | this.pattern = _properties.pattern;
109 | this.placeholder = _properties.placeholder;
110 | this.maxLength = _properties.maxLength;
111 | this.properties.onDispose = this.dispose;
112 | this.properties.onRender = this.render;
113 | this.onPropertyChange = _properties.onPropertyChange;
114 | }
115 |
116 | /**
117 | * @function
118 | * Renders the ColorPicker field content
119 | */
120 | private render(elem: HTMLElement): void {
121 | //Construct the JSX properties
122 | const element: React.ReactElement = React.createElement(PropertyFieldMaskedInputHost, {
123 | label: this.label,
124 | initialValue: this.initialValue,
125 | pattern: this.pattern,
126 | placeholder: this.placeholder,
127 | maxLength: this.maxLength,
128 | targetProperty: this.targetProperty,
129 | onDispose: this.dispose,
130 | onRender: this.render,
131 | onPropertyChange: this.onPropertyChange
132 | });
133 | //Calls the REACT content generator
134 | ReactDom.render(element, elem);
135 | }
136 |
137 | /**
138 | * @function
139 | * Disposes the current object
140 | */
141 | private dispose(elem: HTMLElement): void {
142 |
143 | }
144 |
145 | }
146 |
147 | /**
148 | * @function
149 | * Helper method to create a Color Picker on the PropertyPane.
150 | * @param targetProperty - Target property the Color picker is associated to.
151 | * @param properties - Strongly typed Color Picker properties.
152 | */
153 | export function PropertyFieldMaskedInput(targetProperty: string, properties: IPropertyFieldMaskedInputProps): IPropertyPaneField {
154 |
155 | //Create an internal properties object from the given properties
156 | var newProperties: IPropertyFieldMaskedInputPropsInternal = {
157 | label: properties.label,
158 | targetProperty: targetProperty,
159 | pattern: properties.pattern,
160 | placeholder: properties.placeholder,
161 | maxLength: properties.maxLength,
162 | initialValue: properties.initialValue,
163 | onPropertyChange: properties.onPropertyChange,
164 | onDispose: null,
165 | onRender: null
166 | };
167 | //Calles the PropertyFieldMaskedInput builder object
168 | //This object will simulate a PropertyFieldCustom to manage his rendering process
169 | return new PropertyFieldMaskedInputBuilder(targetProperty, newProperties);
170 | }
171 |
172 |
173 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldDisplayModeHost.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDisplayModeHost.tsx
3 | * Renders the controls for PropertyFieldDisplayMode component
4 | *
5 | * @copyright 2016 Olivier Carpentier
6 | * Released under MIT licence
7 | */
8 | import * as React from 'react';
9 | import { IPropertyFieldDisplayModePropsInternal } from './PropertyFieldDisplayMode';
10 | import { Label } from 'office-ui-fabric-react/lib/Label';
11 |
12 | /**
13 | * @interface
14 | * PropertyFieldDisplayModeHost properties interface
15 | *
16 | */
17 | export interface IPropertyFieldDisplayModeHostProps extends IPropertyFieldDisplayModePropsInternal {
18 | }
19 |
20 | export interface IPropertyFieldDisplayModeHostState {
21 | mode?: string;
22 | overList?: boolean;
23 | overTiles?: boolean;
24 | }
25 |
26 | /**
27 | * @class
28 | * Renders the controls for PropertyFieldDisplayMode component
29 | */
30 | export default class PropertyFieldDisplayModeHost extends React.Component {
31 |
32 | /**
33 | * @function
34 | * Contructor
35 | */
36 | constructor(props: IPropertyFieldDisplayModeHostProps) {
37 | super(props);
38 | //Bind the current object to the external called onSelectDate method
39 | this.onValueChanged = this.onValueChanged.bind(this);
40 | this.onClickBullets = this.onClickBullets.bind(this);
41 | this.onClickTiles = this.onClickTiles.bind(this);
42 | this.mouseListEnterDropDown = this.mouseListEnterDropDown.bind(this);
43 | this.mouseListLeaveDropDown = this.mouseListLeaveDropDown.bind(this);
44 | this.mouseTilesEnterDropDown = this.mouseTilesEnterDropDown.bind(this);
45 | this.mouseTilesLeaveDropDown = this.mouseTilesLeaveDropDown.bind(this);
46 |
47 | this.state = {
48 | mode: this.props.initialValue != null && this.props.initialValue != '' ? this.props.initialValue : '',
49 | overList: false, overTiles: false
50 | };
51 | }
52 |
53 | /**
54 | * @function
55 | * Function called when the ColorPicker Office UI Fabric component selected color changed
56 | */
57 | private onValueChanged(element: any, value: string): void {
58 | //Checks if there is a method to called
59 | if (this.props.onPropertyChange && element != null) {
60 | this.props.onPropertyChange(this.props.targetProperty, value);
61 | }
62 | }
63 |
64 | private onClickBullets(element?: any) {
65 | this.state.mode = 'list';
66 | this.setState(this.state);
67 | this.onValueChanged(this, this.state.mode);
68 | }
69 |
70 | private onClickTiles(element?: any) {
71 | this.state.mode = 'tiles';
72 | this.setState(this.state);
73 | this.onValueChanged(this, this.state.mode);
74 | }
75 |
76 | private mouseListEnterDropDown() {
77 | this.state.overList = true;
78 | this.setState(this.state);
79 | }
80 |
81 | private mouseListLeaveDropDown() {
82 | this.state.overList = false;
83 | this.setState(this.state);
84 | }
85 |
86 | private mouseTilesEnterDropDown() {
87 | this.state.overTiles = true;
88 | this.setState(this.state);
89 | }
90 |
91 | private mouseTilesLeaveDropDown() {
92 | this.state.overTiles = false;
93 | this.setState(this.state);
94 | }
95 |
96 | /**
97 | * @function
98 | * Renders the datepicker controls with Office UI Fabric
99 | */
100 | public render(): JSX.Element {
101 |
102 | var backgroundTiles = this.state.overTiles ? '#DFDFDF': '';
103 | var backgroundLists = this.state.overList ? '#DFDFDF': '';
104 | if (this.state.mode == 'list')
105 | backgroundLists = '#EEEEEE';
106 | if (this.state.mode == 'tiles')
107 | backgroundTiles = '#EEEEEE';
108 |
109 | //Renders content
110 | return (
111 |
112 |
113 |
114 |
115 |
117 |
118 |
119 |
123 |
128 |
129 |
130 |
132 |
133 |
137 |
142 |
143 |
144 |
145 |
(
100 | element: ReactElement
): Component;
101 | export function renderIntoDocument>(
102 | element: ReactElement): C;
103 |
104 | export function mockComponent(
105 | mocked: MockedComponentClass, mockTagName?: string): typeof TestUtils;
106 |
107 | export function isElementOfType(
108 | element: ReactElement, type: ReactType): boolean;
109 | export function isDOMComponent(instance: ReactInstance): boolean;
110 | export function isCompositeComponent(instance: ReactInstance): boolean;
111 | export function isCompositeComponentWithType(
112 | instance: ReactInstance,
113 | type: ComponentClass): boolean;
114 |
115 | export function findAllInRenderedTree(
116 | root: Component,
117 | fn: (i: ReactInstance) => boolean): ReactInstance[];
118 |
119 | export function scryRenderedDOMComponentsWithClass(
120 | root: Component,
121 | className: string): Element[];
122 | export function findRenderedDOMComponentWithClass(
123 | root: Component,
124 | className: string): Element;
125 |
126 | export function scryRenderedDOMComponentsWithTag(
127 | root: Component,
128 | tagName: string): Element[];
129 | export function findRenderedDOMComponentWithTag(
130 | root: Component,
131 | tagName: string): Element;
132 |
133 | export function scryRenderedComponentsWithType(
134 | root: Component,
135 | type: ComponentClass): Component[];
136 | export function scryRenderedComponentsWithType>(
137 | root: Component,
138 | type: ComponentClass): C[];
139 |
140 | export function findRenderedComponentWithType(
141 | root: Component,
142 | type: ComponentClass): Component;
143 | export function findRenderedComponentWithType>(
144 | root: Component,
145 | type: ComponentClass): C;
146 |
147 | export function createRenderer(): ShallowRenderer;
148 | }
149 | }
150 | }
151 |
152 | declare module "react-addons-test-utils" {
153 | import TestUtils = __React.__Addons.TestUtils;
154 | export = TestUtils;
155 | }
156 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldSPListMultiplePicker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldSPListMultiplePicker.ts
3 | * Define a custom field of type PropertyFieldSPListMultiplePicker for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | *
9 | */
10 | import * as React from 'react';
11 | import * as ReactDom from 'react-dom';
12 | import {
13 | IPropertyPaneField,
14 | IPropertyPaneFieldType,
15 | IWebPartContext
16 | } from '@microsoft/sp-client-preview';
17 | import PropertyFieldSPListMultiplePickerHost, { IPropertyFieldSPListMultiplePickerHostProps } from './PropertyFieldSPListMultiplePickerHost';
18 |
19 | /**
20 | * @enum
21 | * Enumerated the sort order of the lists
22 | *
23 | */
24 | export enum PropertyFieldSPListMultiplePickerOrderBy {
25 | Id = 0,
26 | Title = 1
27 | }
28 |
29 | /**
30 | * @interface
31 | * Public properties of the PropertyFieldSPListMultiplePicker custom field
32 | *
33 | */
34 | export interface IPropertyFieldSPListMultiplePickerProps {
35 | /**
36 | * @var
37 | * Property field label displayed on top
38 | */
39 | label: string;
40 | /**
41 | * @var
42 | * Parent web part context
43 | */
44 | context: IWebPartContext;
45 | /**
46 | * @var
47 | * Default selected values of the picker (must be a collection of list Ids)
48 | */
49 | selectedLists?: string[];
50 | /**
51 | * @var
52 | * Defines the base template number to filter the list kind
53 | */
54 | baseTemplate?: number;
55 | /**
56 | * @var
57 | * Defines if the hidden list are included or not
58 | */
59 | includeHidden?: boolean;
60 | orderBy?: PropertyFieldSPListMultiplePickerOrderBy;
61 | /**
62 | * @function
63 | * Defines a onPropertyChange function to raise when the selected value changed.
64 | * Normally this function must be always defined with the 'this.onPropertyChange'
65 | * method of the web part object.
66 | */
67 | onPropertyChange(propertyPath: string, newValue: any): void;
68 | }
69 |
70 | /**
71 | * @interface
72 | * Private properties of the PropertyFieldSPListMultiplePicker custom field.
73 | * We separate public & private properties to include onRender & onDispose method waited
74 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
75 | * the PropertyFieldSPListMultiplePicker.
76 | *
77 | */
78 | export interface IPropertyFieldSPListMultiplePickerPropsInternal extends IPropertyFieldSPListMultiplePickerProps {
79 | label: string;
80 | targetProperty: string;
81 | context: IWebPartContext;
82 | selectedLists?: string[];
83 | baseTemplate?: number;
84 | orderBy?: PropertyFieldSPListMultiplePickerOrderBy;
85 | includeHidden?: boolean;
86 | onRender(elem: HTMLElement): void;
87 | onDispose(elem: HTMLElement): void;
88 | onPropertyChange(propertyPath: string, newValue: any): void;
89 | }
90 |
91 | /**
92 | * @interface
93 | * Represents a PropertyFieldSPListMultiplePicker object
94 | *
95 | */
96 | class PropertyFieldSPListMultiplePickerBuilder implements IPropertyPaneField {
97 |
98 | //Properties defined by IPropertyPaneField
99 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
100 | public targetProperty: string;
101 | public properties: IPropertyFieldSPListMultiplePickerPropsInternal;
102 |
103 | //Custom properties label: string;
104 | private label: string;
105 | private context: IWebPartContext;
106 | private selectedLists: string[];
107 | private baseTemplate: number;
108 | private orderBy: PropertyFieldSPListMultiplePickerOrderBy;
109 | private includeHidden: boolean;
110 |
111 | public onPropertyChange(propertyPath: string, newValue: any): void {}
112 |
113 | /**
114 | * @function
115 | * Ctor
116 | */
117 | public constructor(_targetProperty: string, _properties: IPropertyFieldSPListMultiplePickerPropsInternal) {
118 | this.targetProperty = _targetProperty;
119 | this.properties = _properties;
120 | this.properties.onDispose = this.dispose;
121 | this.properties.onRender = this.render;
122 | this.label = _properties.label;
123 | this.context = _properties.context;
124 | this.selectedLists = _properties.selectedLists;
125 | this.baseTemplate = _properties.baseTemplate;
126 | this.orderBy = _properties.orderBy;
127 | this.includeHidden = _properties.includeHidden;
128 | this.onPropertyChange = _properties.onPropertyChange;
129 | }
130 |
131 | /**
132 | * @function
133 | * Renders the SPListPicker field content
134 | */
135 | private render(elem: HTMLElement): void {
136 | //Construct the JSX properties
137 | const element: React.ReactElement = React.createElement(PropertyFieldSPListMultiplePickerHost, {
138 | label: this.label,
139 | targetProperty: this.targetProperty,
140 | context: this.context,
141 | selectedLists: this.selectedLists,
142 | baseTemplate: this.baseTemplate,
143 | orderBy: this.orderBy,
144 | includeHidden: this.includeHidden,
145 | onDispose: this.dispose,
146 | onRender: this.render,
147 | onPropertyChange: this.onPropertyChange
148 | });
149 | //Calls the REACT content generator
150 | ReactDom.render(element, elem);
151 | }
152 |
153 | /**
154 | * @function
155 | * Disposes the current object
156 | */
157 | private dispose(elem: HTMLElement): void {
158 |
159 | }
160 |
161 | }
162 |
163 | /**
164 | * @function
165 | * Helper method to create a SPList Picker on the PropertyPane.
166 | * @param targetProperty - Target property the SharePoint list picker is associated to.
167 | * @param properties - Strongly typed SPList Picker properties.
168 | */
169 | export function PropertyFieldSPListMultiplePicker(targetProperty: string, properties: IPropertyFieldSPListMultiplePickerProps): IPropertyPaneField {
170 |
171 | //Create an internal properties object from the given properties
172 | var newProperties: IPropertyFieldSPListMultiplePickerPropsInternal = {
173 | label: properties.label,
174 | targetProperty: targetProperty,
175 | context: properties.context,
176 | selectedLists: properties.selectedLists,
177 | baseTemplate: properties.baseTemplate,
178 | orderBy: properties.orderBy,
179 | includeHidden: properties.includeHidden,
180 | onPropertyChange: properties.onPropertyChange,
181 | onDispose: null,
182 | onRender: null
183 | };
184 | //Calles the PropertyFieldSPListMultiplePicker builder object
185 | //This object will simulate a PropertyFieldCustom to manage his rendering process
186 | return new PropertyFieldSPListMultiplePickerBuilder(targetProperty, newProperties);
187 | }
188 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldSPListPickerHost.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldSPListPickerHost.tsx
3 | * Renders the controls for PropertyFieldSPListPicker component
4 | *
5 | * @copyright 2016 Olivier Carpentier
6 | * Released under MIT licence
7 | *
8 | */
9 | import * as React from 'react';
10 | import { IWebPartContext } from '@microsoft/sp-client-preview';
11 | import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
12 | import { EnvironmentType } from '@microsoft/sp-client-base';
13 | import { IPropertyFieldSPListPickerPropsInternal, PropertyFieldSPListPickerOrderBy } from './PropertyFieldSPListPicker';
14 |
15 | /**
16 | * @interface
17 | * PropertyFieldSPListPickerHost properties interface
18 | *
19 | */
20 | export interface IPropertyFieldSPListPickerHostProps extends IPropertyFieldSPListPickerPropsInternal {
21 | }
22 |
23 | /**
24 | * @class
25 | * Renders the controls for PropertyFieldSPListPicker component
26 | */
27 | export default class PropertyFieldSPListPickerHost extends React.Component {
28 |
29 | private options: IDropdownOption[] = [];
30 | private selectedKey: string;
31 |
32 | /**
33 | * @function
34 | * Contructor
35 | */
36 | constructor(props: IPropertyFieldSPListPickerHostProps) {
37 | super(props);
38 |
39 | this.onChanged = this.onChanged.bind(this);
40 | this.state = {
41 | results: this.options,
42 | selectedKey: this.selectedKey
43 | };
44 | this.loadLists();
45 | }
46 |
47 | /**
48 | * @function
49 | * Loads the list from SharePoint current web site
50 | */
51 | private loadLists(): void {
52 | var listService: SPListPickerService = new SPListPickerService(this.props, this.props.context);
53 | listService.getLibs().then((response: ISPLists) => {
54 | response.value.map((list: ISPList) => {
55 | var isSelected: boolean = false;
56 | if (this.props.selectedList == list.Id) {
57 | isSelected = true;
58 | this.selectedKey = list.Id;
59 | }
60 | this.options.push({
61 | key: list.Id,
62 | text: list.Title,
63 | isSelected: isSelected
64 | });
65 | });
66 | this.setState({results: this.options, selectedKey: this.selectedKey});
67 | });
68 | }
69 |
70 | /**
71 | * @function
72 | * Raises when a list has been selected
73 | */
74 | private onChanged(option: IDropdownOption, index?: number): void {
75 | if (this.props.onPropertyChange && option) {
76 | this.props.onPropertyChange(this.props.targetProperty, option.key);
77 | }
78 | }
79 |
80 | /**
81 | * @function
82 | * Renders the SPListpicker controls with Office UI Fabric
83 | */
84 | public render(): JSX.Element {
85 | //Renders content
86 | return (
87 |
88 |
94 |
95 | );
96 | }
97 | }
98 |
99 | /**
100 | * @interface
101 | * Defines a collection of SharePoint lists
102 | */
103 | interface ISPLists {
104 | value: ISPList[];
105 | }
106 |
107 | /**
108 | * @interface
109 | * Defines a SharePoint list
110 | */
111 | interface ISPList {
112 | Title: string;
113 | Id: string;
114 | BaseTemplate: string;
115 | }
116 |
117 | /**
118 | * @class
119 | * Service implementation to get list & list items from current SharePoint site
120 | */
121 | class SPListPickerService {
122 |
123 | private context: IWebPartContext;
124 | private props: IPropertyFieldSPListPickerHostProps;
125 |
126 | /**
127 | * @function
128 | * Service constructor
129 | */
130 | constructor(_props: IPropertyFieldSPListPickerHostProps, pageContext: IWebPartContext){
131 | this.props = _props;
132 | this.context = pageContext;
133 | }
134 |
135 | /**
136 | * @function
137 | * Gets the collection of libs in the current SharePoint site
138 | */
139 | public getLibs(): Promise {
140 | if (this.context.environment.type === EnvironmentType.Local) {
141 | //If the running environment is local, load the data from the mock
142 | return this.getLibsFromMock();
143 | }
144 | else {
145 | //If the running environment is SharePoint, request the lists REST service
146 | var queryUrl: string = this.context.pageContext.web.absoluteUrl;
147 | queryUrl += "/_api/lists?$select=Title,id,BaseTemplate";
148 | if (this.props.orderBy != null) {
149 | queryUrl += "&$orderby=";
150 | if (this.props.orderBy == PropertyFieldSPListPickerOrderBy.Id)
151 | queryUrl += "Id";
152 | else if (this.props.orderBy == PropertyFieldSPListPickerOrderBy.Title)
153 | queryUrl += "Title";
154 | }
155 | if (this.props.baseTemplate != null && this.props.baseTemplate) {
156 | queryUrl += "&$filter=BaseTemplate%20eq%20";
157 | queryUrl += this.props.baseTemplate;
158 | if (this.props.includeHidden === false) {
159 | queryUrl += "%20and%20Hidden%20eq%20false";
160 | }
161 | }
162 | else {
163 | if (this.props.includeHidden === false) {
164 | queryUrl += "&$filter=Hidden%20eq%20false";
165 | }
166 | }
167 | return this.context.httpClient.get(queryUrl).then((response: Response) => {
168 | return response.json();
169 | });
170 | }
171 | }
172 |
173 | /**
174 | * @function
175 | * Returns 3 fake SharePoint lists for the Mock mode
176 | */
177 | private getLibsFromMock(): Promise {
178 | return SPListPickerMockHttpClient.getLists(this.context.pageContext.web.absoluteUrl).then(() => {
179 | const listData: ISPLists = {
180 | value:
181 | [
182 | { Title: 'Mock List One', Id: '6770c83b-29e8-494b-87b6-468a2066bcc6', BaseTemplate: '109' },
183 | { Title: 'Mock List Two', Id: '2ece98f2-cc5e-48ff-8145-badf5009754c', BaseTemplate: '109' },
184 | { Title: 'Mock List Three', Id: 'bd5dbd33-0e8d-4e12-b289-b276e5ef79c2', BaseTemplate: '109' }
185 | ]
186 | };
187 | return listData;
188 | }) as Promise;
189 | }
190 |
191 | }
192 |
193 |
194 | /**
195 | * @class
196 | * Defines a http client to request mock data to use the web part with the local workbench
197 | */
198 | class SPListPickerMockHttpClient {
199 |
200 | /**
201 | * @var
202 | * Mock SharePoint result sample
203 | */
204 | private static _results: ISPLists = { value: []};
205 |
206 | /**
207 | * @function
208 | * Mock search People method
209 | */
210 | public static getLists(restUrl: string, options?: any): Promise {
211 | return new Promise((resolve) => {
212 | resolve(SPListPickerMockHttpClient._results);
213 | });
214 | }
215 |
216 | }
217 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldSPListQuery.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldSPListQuery.ts
3 | * Define a custom field of type PropertyFieldSPListQuery for
4 | * the SharePoint Framework (SPfx)
5 | *
6 | * @copyright 2016 Olivier Carpentier
7 | * Released under MIT licence
8 | *
9 | */
10 | import * as React from 'react';
11 | import * as ReactDom from 'react-dom';
12 | import {
13 | IPropertyPaneField,
14 | IPropertyPaneFieldType,
15 | IWebPartContext
16 | } from '@microsoft/sp-client-preview';
17 | import PropertyFieldSPListQueryHost, { IPropertyFieldSPListQueryHostProps } from './PropertyFieldSPListQueryHost';
18 |
19 |
20 | export enum PropertyFieldSPListQueryOrderBy {
21 | Id = 0,
22 | Title = 1
23 | }
24 |
25 | /**
26 | * @interface
27 | * Public properties of the PropertyFieldSPListQuery custom field
28 | *
29 | */
30 | export interface IPropertyFieldSPListQueryProps {
31 | /**
32 | * @var
33 | * Property field label displayed on top
34 | */
35 | label: string;
36 | context: IWebPartContext;
37 | query?: string;
38 | selectedList?: string;
39 | baseTemplate?: number;
40 | includeHidden?: boolean;
41 | orderBy?: PropertyFieldSPListQueryOrderBy;
42 | showOrderBy?: boolean;
43 | showMax?: boolean;
44 | showFilters?: boolean;
45 | max?: number;
46 | /**
47 | * @function
48 | * Defines a onPropertyChange function to raise when the selected value changed.
49 | * Normally this function must be always defined with the 'this.onPropertyChange'
50 | * method of the web part object.
51 | */
52 | onPropertyChange(propertyPath: string, newValue: any): void;
53 | }
54 |
55 | /**
56 | * @interface
57 | * Private properties of the PropertyFieldSPListQuery custom field.
58 | * We separate public & private properties to include onRender & onDispose method waited
59 | * by the PropertyFieldCustom, witout asking to the developer to add it when he's using
60 | * the PropertyFieldSPListQuery.
61 | *
62 | */
63 | export interface IPropertyFieldSPListQueryPropsInternal extends IPropertyFieldSPListQueryProps {
64 | label: string;
65 | targetProperty: string;
66 | context: IWebPartContext;
67 | query?: string;
68 | selectedList?: string;
69 | baseTemplate?: number;
70 | orderBy?: PropertyFieldSPListQueryOrderBy;
71 | includeHidden?: boolean;
72 | showOrderBy?: boolean;
73 | showMax?: boolean;
74 | showFilters?: boolean;
75 | max?: number;
76 | onRender(elem: HTMLElement): void;
77 | onDispose(elem: HTMLElement): void;
78 | onPropertyChange(propertyPath: string, newValue: any): void;
79 | }
80 |
81 | /**
82 | * @interface
83 | * Represents a PropertyFieldSPListQuery object
84 | *
85 | */
86 | class PropertyFieldSPListQueryBuilder implements IPropertyPaneField {
87 |
88 | //Properties defined by IPropertyPaneField
89 | public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;
90 | public targetProperty: string;
91 | public properties: IPropertyFieldSPListQueryPropsInternal;
92 |
93 | //Custom properties label: string;
94 | private label: string;
95 | private context: IWebPartContext;
96 | private query: string;
97 | private selectedList: string;
98 | private baseTemplate: number;
99 | private orderBy: PropertyFieldSPListQueryOrderBy;
100 | private includeHidden: boolean;
101 | private showOrderBy: boolean;
102 | private showMax: boolean;
103 | private showFilters: boolean;
104 | private max: number;
105 | public onPropertyChange(propertyPath: string, newValue: any): void {}
106 |
107 | /**
108 | * @function
109 | * Ctor
110 | */
111 | public constructor(_targetProperty: string, _properties: IPropertyFieldSPListQueryPropsInternal) {
112 | this.targetProperty = _targetProperty;
113 | this.properties = _properties;
114 | this.properties.onDispose = this.dispose;
115 | this.properties.onRender = this.render;
116 | this.label = _properties.label;
117 | this.context = _properties.context;
118 | this.query = _properties.query;
119 | this.selectedList = _properties.selectedList;
120 | this.baseTemplate = _properties.baseTemplate;
121 | this.orderBy = _properties.orderBy;
122 | this.includeHidden = _properties.includeHidden;
123 | this.showOrderBy = _properties.showOrderBy;
124 | this.showMax = _properties.showMax;
125 | this.showFilters = _properties.showFilters;
126 | this.max = _properties.max;
127 | this.onPropertyChange = _properties.onPropertyChange;
128 | }
129 |
130 | /**
131 | * @function
132 | * Renders the SPListPicker field content
133 | */
134 | private render(elem: HTMLElement): void {
135 | //Construct the JSX properties
136 | const element: React.ReactElement = React.createElement(PropertyFieldSPListQueryHost, {
137 | label: this.label,
138 | targetProperty: this.targetProperty,
139 | context: this.context,
140 | query: this.query,
141 | selectedList: this.selectedList,
142 | baseTemplate: this.baseTemplate,
143 | orderBy: this.orderBy,
144 | includeHidden: this.includeHidden,
145 | showOrderBy: this.showOrderBy,
146 | showMax: this.showMax,
147 | showFilters: this.showFilters,
148 | max: this.max,
149 | onDispose: this.dispose,
150 | onRender: this.render,
151 | onPropertyChange: this.onPropertyChange
152 | });
153 | //Calls the REACT content generator
154 | ReactDom.render(element, elem);
155 | }
156 |
157 | /**
158 | * @function
159 | * Disposes the current object
160 | */
161 | private dispose(elem: HTMLElement): void {
162 |
163 | }
164 |
165 | }
166 |
167 | /**
168 | * @function
169 | * Helper method to create a SPList Picker on the PropertyPane.
170 | * @param targetProperty - Target property the SharePoint list picker is associated to.
171 | * @param properties - Strongly typed SPList Picker properties.
172 | */
173 | export function PropertyFieldSPListQuery(targetProperty: string, properties: IPropertyFieldSPListQueryProps): IPropertyPaneField {
174 |
175 | //Create an internal properties object from the given properties
176 | var newProperties: IPropertyFieldSPListQueryPropsInternal = {
177 | label: properties.label,
178 | targetProperty: targetProperty,
179 | context: properties.context,
180 | query: properties.query,
181 | selectedList: properties.selectedList,
182 | baseTemplate: properties.baseTemplate,
183 | orderBy: properties.orderBy,
184 | includeHidden: properties.includeHidden,
185 | showOrderBy: properties.showOrderBy,
186 | showMax: properties.showMax,
187 | showFilters: properties.showFilters,
188 | max: properties.max,
189 | onPropertyChange: properties.onPropertyChange,
190 | onDispose: null,
191 | onRender: null
192 | };
193 | //Calles the PropertyFieldSPListQuery builder object
194 | //This object will simulate a PropertyFieldCustom to manage his rendering process
195 | return new PropertyFieldSPListQueryBuilder(targetProperty, newProperties);
196 | }
197 |
--------------------------------------------------------------------------------
/typings/mocha/mocha.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for mocha 2.2.5
2 | // Project: http://mochajs.org/
3 | // Definitions by: Kazi Manzur Rashid , otiai10 , jt000 , Vadim Macagon
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | interface MochaSetupOptions {
7 | //milliseconds to wait before considering a test slow
8 | slow?: number;
9 |
10 | // timeout in milliseconds
11 | timeout?: number;
12 |
13 | // ui name "bdd", "tdd", "exports" etc
14 | ui?: string;
15 |
16 | //array of accepted globals
17 | globals?: any[];
18 |
19 | // reporter instance (function or string), defaults to `mocha.reporters.Spec`
20 | reporter?: any;
21 |
22 | // bail on the first test failure
23 | bail?: boolean;
24 |
25 | // ignore global leaks
26 | ignoreLeaks?: boolean;
27 |
28 | // grep string or regexp to filter tests with
29 | grep?: any;
30 | }
31 |
32 | interface MochaDone {
33 | (error?: Error): void;
34 | }
35 |
36 | declare var mocha: Mocha;
37 | declare var describe: Mocha.IContextDefinition;
38 | declare var xdescribe: Mocha.IContextDefinition;
39 | // alias for `describe`
40 | declare var context: Mocha.IContextDefinition;
41 | // alias for `describe`
42 | declare var suite: Mocha.IContextDefinition;
43 | declare var it: Mocha.ITestDefinition;
44 | declare var xit: Mocha.ITestDefinition;
45 | // alias for `it`
46 | declare var test: Mocha.ITestDefinition;
47 |
48 | declare function before(action: () => void): void;
49 |
50 | declare function before(action: (done: MochaDone) => void): void;
51 |
52 | declare function setup(action: () => void): void;
53 |
54 | declare function setup(action: (done: MochaDone) => void): void;
55 |
56 | declare function after(action: () => void): void;
57 |
58 | declare function after(action: (done: MochaDone) => void): void;
59 |
60 | declare function teardown(action: () => void): void;
61 |
62 | declare function teardown(action: (done: MochaDone) => void): void;
63 |
64 | declare function beforeEach(action: () => void): void;
65 |
66 | declare function beforeEach(action: (done: MochaDone) => void): void;
67 |
68 | declare function suiteSetup(action: () => void): void;
69 |
70 | declare function suiteSetup(action: (done: MochaDone) => void): void;
71 |
72 | declare function afterEach(action: () => void): void;
73 |
74 | declare function afterEach(action: (done: MochaDone) => void): void;
75 |
76 | declare function suiteTeardown(action: () => void): void;
77 |
78 | declare function suiteTeardown(action: (done: MochaDone) => void): void;
79 |
80 | declare class Mocha {
81 | constructor(options?: {
82 | grep?: RegExp;
83 | ui?: string;
84 | reporter?: string;
85 | timeout?: number;
86 | bail?: boolean;
87 | });
88 |
89 | /** Setup mocha with the given options. */
90 | setup(options: MochaSetupOptions): Mocha;
91 | bail(value?: boolean): Mocha;
92 | addFile(file: string): Mocha;
93 | /** Sets reporter by name, defaults to "spec". */
94 | reporter(name: string): Mocha;
95 | /** Sets reporter constructor, defaults to mocha.reporters.Spec. */
96 | reporter(reporter: (runner: Mocha.IRunner, options: any) => any): Mocha;
97 | ui(value: string): Mocha;
98 | grep(value: string): Mocha;
99 | grep(value: RegExp): Mocha;
100 | invert(): Mocha;
101 | ignoreLeaks(value: boolean): Mocha;
102 | checkLeaks(): Mocha;
103 | /** Enables growl support. */
104 | growl(): Mocha;
105 | globals(value: string): Mocha;
106 | globals(values: string[]): Mocha;
107 | useColors(value: boolean): Mocha;
108 | useInlineDiffs(value: boolean): Mocha;
109 | timeout(value: number): Mocha;
110 | slow(value: number): Mocha;
111 | enableTimeouts(value: boolean): Mocha;
112 | asyncOnly(value: boolean): Mocha;
113 | noHighlighting(value: boolean): Mocha;
114 | /** Runs tests and invokes `onComplete()` when finished. */
115 | run(onComplete?: (failures: number) => void): Mocha.IRunner;
116 | }
117 |
118 | // merge the Mocha class declaration with a module
119 | declare module Mocha {
120 | /** Partial interface for Mocha's `Runnable` class. */
121 | interface IRunnable {
122 | title: string;
123 | fn: Function;
124 | async: boolean;
125 | sync: boolean;
126 | timedOut: boolean;
127 | }
128 |
129 | /** Partial interface for Mocha's `Suite` class. */
130 | interface ISuite {
131 | parent: ISuite;
132 | title: string;
133 |
134 | fullTitle(): string;
135 | }
136 |
137 | /** Partial interface for Mocha's `Test` class. */
138 | interface ITest extends IRunnable {
139 | parent: ISuite;
140 | pending: boolean;
141 |
142 | fullTitle(): string;
143 | }
144 |
145 | /** Partial interface for Mocha's `Runner` class. */
146 | interface IRunner {}
147 |
148 | interface IContextDefinition {
149 | (description: string, spec: () => void): ISuite;
150 | only(description: string, spec: () => void): ISuite;
151 | skip(description: string, spec: () => void): void;
152 | timeout(ms: number): void;
153 | }
154 |
155 | interface ITestDefinition {
156 | (expectation: string, assertion?: () => void): ITest;
157 | (expectation: string, assertion?: (done: MochaDone) => void): ITest;
158 | only(expectation: string, assertion?: () => void): ITest;
159 | only(expectation: string, assertion?: (done: MochaDone) => void): ITest;
160 | skip(expectation: string, assertion?: () => void): void;
161 | skip(expectation: string, assertion?: (done: MochaDone) => void): void;
162 | timeout(ms: number): void;
163 | }
164 |
165 | export module reporters {
166 | export class Base {
167 | stats: {
168 | suites: number;
169 | tests: number;
170 | passes: number;
171 | pending: number;
172 | failures: number;
173 | };
174 |
175 | constructor(runner: IRunner);
176 | }
177 |
178 | export class Doc extends Base {}
179 | export class Dot extends Base {}
180 | export class HTML extends Base {}
181 | export class HTMLCov extends Base {}
182 | export class JSON extends Base {}
183 | export class JSONCov extends Base {}
184 | export class JSONStream extends Base {}
185 | export class Landing extends Base {}
186 | export class List extends Base {}
187 | export class Markdown extends Base {}
188 | export class Min extends Base {}
189 | export class Nyan extends Base {}
190 | export class Progress extends Base {
191 | /**
192 | * @param options.open String used to indicate the start of the progress bar.
193 | * @param options.complete String used to indicate a complete test on the progress bar.
194 | * @param options.incomplete String used to indicate an incomplete test on the progress bar.
195 | * @param options.close String used to indicate the end of the progress bar.
196 | */
197 | constructor(runner: IRunner, options?: {
198 | open?: string;
199 | complete?: string;
200 | incomplete?: string;
201 | close?: string;
202 | });
203 | }
204 | export class Spec extends Base {}
205 | export class TAP extends Base {}
206 | export class XUnit extends Base {
207 | constructor(runner: IRunner, options?: any);
208 | }
209 | }
210 | }
211 |
212 | declare module "mocha" {
213 | export = Mocha;
214 | }
215 |
--------------------------------------------------------------------------------
/src/webparts/customFieldsWebPart/controls/PropertyFieldDateTimePickerHost.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @file PropertyFieldDateTimePickerHost.tsx
3 | * Renders the controls for PropertyFieldDateTimePicker component
4 | *
5 | * @copyright 2016 Olivier Carpentier
6 | * Released under MIT licence
7 | */
8 | import * as React from 'react';
9 | import { IPropertyFieldDateTimePickerPropsInternal } from './PropertyFieldDateTimePicker';
10 | import { DatePicker, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
11 | import { Label } from 'office-ui-fabric-react/lib/Label';
12 | import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
13 | import * as strings from 'customFieldsWebPartStrings';
14 |
15 | /**
16 | * @interface
17 | * PropertyFieldDateTimePickerHost properties interface
18 | *
19 | */
20 | export interface IPropertyFieldDateTimePickerHostProps extends IPropertyFieldDateTimePickerPropsInternal {
21 | }
22 |
23 | /**
24 | * @class
25 | * Defines the labels of the DatePicker control (as months, days, etc.)
26 | *
27 | */
28 | class DatePickerStrings implements IDatePickerStrings {
29 | /**
30 | * An array of strings for the full names of months.
31 | * The array is 0-based, so months[0] should be the full name of January.
32 | */
33 | public months: string[] = [
34 | strings.DatePickerMonthLongJanuary, strings.DatePickerMonthLongFebruary,
35 | strings.DatePickerMonthLongMarch, strings.DatePickerMonthLongApril,
36 | strings.DatePickerMonthLongMay, strings.DatePickerMonthLongJune, strings.DatePickerMonthLongJuly,
37 | strings.DatePickerMonthLongAugust, strings.DatePickerMonthLongSeptember, strings.DatePickerMonthLongOctober,
38 | strings.DatePickerMonthLongNovember, strings.DatePickerMonthLongDecember
39 | ];
40 | /**
41 | * An array of strings for the short names of months.
42 | * The array is 0-based, so shortMonths[0] should be the short name of January.
43 | */
44 | public shortMonths: string[] = [
45 | strings.DatePickerMonthShortJanuary, strings.DatePickerMonthShortFebruary,
46 | strings.DatePickerMonthShortMarch, strings.DatePickerMonthShortApril,
47 | strings.DatePickerMonthShortMay, strings.DatePickerMonthShortJune, strings.DatePickerMonthShortJuly,
48 | strings.DatePickerMonthShortAugust, strings.DatePickerMonthShortSeptember, strings.DatePickerMonthShortOctober,
49 | strings.DatePickerMonthShortNovember, strings.DatePickerMonthShortDecember
50 | ];
51 | /**
52 | * An array of strings for the full names of days of the week.
53 | * The array is 0-based, so days[0] should be the full name of Sunday.
54 | */
55 | public days: string[] = [
56 | strings.DatePickerDayLongSunday, strings.DatePickerDayLongMonday, strings.DatePickerDayLongTuesday,
57 | strings.DatePickerDayLongWednesday, strings.DatePickerDayLongThursday, strings.DatePickerDayLongFriday,
58 | strings.DatePickerDayLongSaturday
59 | ];
60 | /**
61 | * An array of strings for the initials of the days of the week.
62 | * The array is 0-based, so days[0] should be the initial of Sunday.
63 | */
64 | public shortDays: string[] = [
65 | strings.DatePickerDayShortSunday, strings.DatePickerDayShortMonday, strings.DatePickerDayShortTuesday,
66 | strings.DatePickerDayShortWednesday, strings.DatePickerDayShortThursday, strings.DatePickerDayShortFriday,
67 | strings.DatePickerDayShortSaturday
68 | ];
69 | /**
70 | * String to render for button to direct the user to today's date.
71 | */
72 | public goToToday: string = "";
73 | /**
74 | * Error message to render for TextField if isRequired validation fails.
75 | */
76 | public isRequiredErrorMessage: string = "";
77 | /**
78 | * Error message to render for TextField if input date string parsing fails.
79 | */
80 | public invalidInputErrorMessage: string = "";
81 | }
82 |
83 | export interface IPropertyFieldDateTimePickerHostPropsState {
84 | day?: Date;
85 | hours?: number;
86 | minutes?: number;
87 | }
88 |
89 | /**
90 | * @class
91 | * Renders the controls for PropertyFieldDateTimePicker component
92 | */
93 | export default class PropertyFieldDateTimePickerHost extends React.Component {
94 |
95 | /**
96 | * @function
97 | * Contructor
98 | */
99 | constructor(props: IPropertyFieldDateTimePickerHostProps) {
100 | super(props);
101 | //Bind the current object to the external called onSelectDate method
102 | this.onSelectDate = this.onSelectDate.bind(this);
103 | this.dropdownHoursChanged = this.dropdownHoursChanged.bind(this);
104 | this.dropdownMinutesChanged = this.dropdownMinutesChanged.bind(this);
105 |
106 | this.state = {
107 | day: (this.props.initialDate != null && this.props.initialDate != '') ? new Date(this.props.initialDate) : null,
108 | hours: (this.props.initialDate != null && this.props.initialDate != '') ? new Date(this.props.initialDate).getHours() : 0,
109 | minutes: (this.props.initialDate != null && this.props.initialDate != '') ? new Date(this.props.initialDate).getMinutes() : 0,
110 | };
111 | this.setState(this.state);
112 | }
113 |
114 | /**
115 | * @function
116 | * Function called when the DatePicker Office UI Fabric component selected date changed
117 | */
118 | private onSelectDate(date: Date): void {
119 | if (date == null)
120 | return;
121 | this.state.day = date;
122 | this.setState(this.state);
123 | this.saveDate();
124 | }
125 |
126 | private dropdownHoursChanged(element?: IDropdownOption): void {
127 | this.state.hours = Number(element.key);
128 | this.setState(this.state);
129 | this.saveDate();
130 | }
131 |
132 | private dropdownMinutesChanged(element?: any): void {
133 | this.state.minutes = Number(element.key);
134 | this.setState(this.state);
135 | this.saveDate();
136 | }
137 |
138 | private saveDate(): void {
139 | if (this.state.day == null)
140 | return;
141 | var finalDate = new Date(this.state.day.toISOString());
142 | finalDate.setHours(this.state.hours);
143 | finalDate.setMinutes(this.state.minutes);
144 |
145 | if (this.props.onPropertyChange && finalDate != null) {
146 | //Checks if a formatDate function has been defined
147 | if (this.props.formatDate)
148 | this.props.onPropertyChange(this.props.targetProperty, this.props.formatDate(finalDate));
149 | else
150 | this.props.onPropertyChange(this.props.targetProperty, finalDate.toString());
151 | }
152 | }
153 |
154 | /**
155 | * @function
156 | * Renders the datepicker controls with Office UI Fabric
157 | */
158 | public render(): JSX.Element {
159 | //Defines the DatePicker control labels
160 | var dateStrings: DatePickerStrings = new DatePickerStrings();
161 | //Constructs a Date type object from the initalDate string property
162 | var hours: IDropdownOption[] = [];
163 | for (var i = 0; i < 24; i++) {
164 | var digit: string;
165 | if (i < 10)
166 | digit = '0' + i;
167 | else
168 | digit = i.toString();
169 | var selected: boolean = false;
170 | if (i == this.state.hours)
171 | selected = true;
172 | hours.push({ key: i, text: digit, isSelected: selected});
173 | }
174 | var minutes: IDropdownOption[] = [];
175 | for (var j = 0; j < 60; j++) {
176 | var digitMin: string;
177 | if (j < 10)
178 | digitMin = '0' + j;
179 | else
180 | digitMin = j.toString();
181 | var selected2: boolean = false;
182 | if (j == this.state.minutes)
183 | selected2 = true;
184 | minutes.push({ key: j, text: digitMin, isSelected: selected2});
185 | }
186 | //Renders content
187 | return (
188 |
189 |
190 |
191 |
192 |
195 |
196 |
197 |
198 |
202 |
203 |
:
204 |
205 |
208 |
209 |
210 |
211 |
123 |
124 |
125 |
126 | );
127 | }
128 | else
129 | {
130 | //Renders content
131 | return (
132 |
133 |
134 | {this.options.map((item: IChoiceGroupOption, index: number) => {
135 | var uniqueKey = this.props.targetProperty + '-' + item.key;
136 | return (
137 |
138 |
139 |
140 |
141 | );
142 | })
143 | }
144 |
121 |
122 |
123 |
124 |
125 |
126 |
127 | Longitude
128 |
129 |
142 |
143 |
144 |
145 |
146 | Latitude
147 |
148 |
161 |
162 |
167 |
168 |
169 |
179 |
180 |
186 |
187 |
188 |
189 |
190 |
191 | Longitude
192 |
193 |
206 |
207 |
208 |
209 | Latitude
210 |
211 |
224 |
225 |
230 |
231 |
232 |