Skip to content

Commit 6e43ef9

Browse files
estruyfestruyf
committed
Merge branch 'dev' of https://github.com/spdavid/sp-dev-fx-controls-react into spdavid-dev
2 parents 8226fdd + fa28b54 commit 6e43ef9

15 files changed

+1518
-1
lines changed

‎src/TaxonomyPicker.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './controls/taxonomyPicker/index';

‎src/controls/taxonomyPicker/ErrorMessage.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import styles from './TaxonomyPicker.module.scss';
3+
import { Icon } from 'office-ui-fabric-react/lib/Icon';
4+
5+
export interface IFieldErrorMessageProps {
6+
errorMessage: string;
7+
}
8+
9+
/**
10+
* Component that shows an error message when something went wront with the property control
11+
*/
12+
export default class FieldErrorMessage extends React.Component<IFieldErrorMessageProps> {
13+
public render(): JSX.Element {
14+
if (this.props.errorMessage !== 'undefined' && this.props.errorMessage !== null && this.props.errorMessage !== '') {
15+
return (
16+
<div aria-live="assertive">
17+
<p className={`ms-TextField-errorMessage ${styles.errorMessage}`}>
18+
<Icon iconName='Error' className={styles.errorIcon} />
19+
<span data-automation-id="error-message">{this.props.errorMessage}</span>
20+
</p>
21+
</div>
22+
);
23+
} else {
24+
return null;
25+
}
26+
}
27+
}

‎src/controls/taxonomyPicker/ITaxonomyPicker.ts

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { IPickerTerms } from './ITermPicker';
2+
import { ITermStore, IGroup, ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
3+
import SPTermStorePickerService from '../../services/SPTermStorePickerService';
4+
import { IWebPartContext } from '@microsoft/sp-webpart-base';
5+
6+
/**
7+
* PropertyFieldTermPickerHost properties interface
8+
// */
9+
export interface ITaxonomyPickerProps {
10+
/**
11+
* Property field label displayed on top
12+
*/
13+
label: string;
14+
/**
15+
* TermSet Picker Panel title
16+
*/
17+
panelTitle: string;
18+
/**
19+
* Defines if the user can select only one or many term sets. Default value is false.
20+
*/
21+
allowMultipleSelections?: boolean;
22+
/**
23+
* Defines the selected by default term sets.
24+
*/
25+
initialValues?: IPickerTerms;
26+
/**
27+
* WebPart's context
28+
*/
29+
context: IWebPartContext;
30+
/**
31+
* Limit the terms that can be picked by the Term Set name or ID
32+
*/
33+
termsetNameOrID: string;
34+
/**
35+
* Id of a child term in the termset where to be able to selected and search the terms from
36+
*/
37+
ancoreId?: string;
38+
/**
39+
* Whether the property pane field is enabled or not.
40+
*/
41+
disabled?: boolean;
42+
/**
43+
* The method is used to get the validation error message and determine whether the input value is valid or not.
44+
*
45+
* When it returns string:
46+
* - If valid, it returns empty string.
47+
* - If invalid, it returns the error message string and the text field will
48+
* show a red border and show an error message below the text field.
49+
*
50+
* When it returns Promise<string>:
51+
* - The resolved value is display as error message.
52+
* - The rejected, the value is thrown away.
53+
*
54+
*/
55+
onGetErrorMessage?: (value: IPickerTerms) => string | Promise<string>;
56+
57+
/**
58+
* onChange Event
59+
*/
60+
onChange?: (newValue?: IPickerTerms) => void;
61+
}
62+
63+
/**
64+
* PropertyFieldTermPickerHost state interface
65+
*/
66+
export interface ITaxonomyPickerState {
67+
68+
termSetAndTerms? : ITermSet;
69+
errorMessage?: string;
70+
openPanel?: boolean;
71+
loaded?: boolean;
72+
activeNodes?: IPickerTerms;
73+
}
74+
75+
export interface ITermChanges {
76+
changedCallback: (term: ITerm, checked: boolean) => void;
77+
activeNodes?: IPickerTerms;
78+
}
79+
80+
81+
export interface ITermParentProps extends ITermChanges {
82+
termset: ITermSet;
83+
autoExpand: () => void;
84+
multiSelection: boolean;
85+
anchorId? : string;
86+
}
87+
88+
export interface ITermParentState {
89+
90+
loaded?: boolean;
91+
expanded?: boolean;
92+
}
93+
94+
export interface ITermProps extends ITermChanges {
95+
termset: string;
96+
term: ITerm;
97+
multiSelection: boolean;
98+
}
99+
100+
export interface ITermState {
101+
selected?: boolean;
102+
}

‎src/controls/taxonomyPicker/ITermPicker.ts

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { IWebPartContext } from '@microsoft/sp-webpart-base';
2+
3+
4+
5+
/**
6+
* Selected terms
7+
*/
8+
export interface IPickerTerm {
9+
name: string;
10+
key: string;
11+
path: string;
12+
termSet: string;
13+
termSetName? : string;
14+
}
15+
16+
export interface IPickerTerms extends Array<IPickerTerm> { }
17+
18+
/**
19+
* Public properties of the PropertyFieldTermPicker custom field
20+
*/
21+
export interface IPropertyFieldTermPickerProps {
22+
/**
23+
* Property field label displayed on top
24+
*/
25+
label: string;
26+
/**
27+
* TermSet Picker Panel title
28+
*/
29+
panelTitle: string;
30+
/**
31+
* Defines if the user can select only one or many term sets. Default value is false.
32+
*/
33+
allowMultipleSelections?: boolean;
34+
/**
35+
* Defines the selected by default term sets.
36+
*/
37+
initialValues?: IPickerTerms;
38+
/**
39+
* Indicator to define if the system Groups are exclude. Default is false.
40+
*/
41+
excludeSystemGroup?: boolean;
42+
/**
43+
* WebPart's context
44+
*/
45+
context: IWebPartContext;
46+
/**
47+
* Limit the term sets that can be used by the group name or ID
48+
*/
49+
limitByGroupNameOrID?: string;
50+
/**
51+
* Limit the terms that can be picked by the Term Set name or ID
52+
*/
53+
limitByTermsetNameOrID?: string;
54+
/**
55+
* Defines a onPropertyChange function to raise when the selected value changed.
56+
* Normally this function must be always defined with the 'this.onPropertyChange'
57+
* method of the web part object.
58+
*/
59+
onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
60+
/**
61+
* Parent Web Part properties
62+
*/
63+
properties: any;
64+
/**
65+
* An UNIQUE key indicates the identity of this control
66+
*/
67+
key: string;
68+
/**
69+
* Whether the property pane field is enabled or not.
70+
*/
71+
disabled?: boolean;
72+
/**
73+
* The method is used to get the validation error message and determine whether the input value is valid or not.
74+
*
75+
* When it returns string:
76+
* - If valid, it returns empty string.
77+
* - If invalid, it returns the error message string and the text field will
78+
* show a red border and show an error message below the text field.
79+
*
80+
* When it returns Promise<string>:
81+
* - The resolved value is display as error message.
82+
* - The rejected, the value is thrown away.
83+
*
84+
*/
85+
onGetErrorMessage?: (value: IPickerTerms) => string | Promise<string>;
86+
/**
87+
* Custom Field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
88+
* Default value is 200.
89+
*/
90+
deferredValidationTime?: number;
91+
92+
}
93+

‎src/controls/taxonomyPicker/TaxonomyPicker.module.scss

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
.listItem {
2+
height: 36px;
3+
line-height: 36px;
4+
cursor: pointer;
5+
6+
>div {
7+
display: inline-block;
8+
margin-right: 10px;
9+
}
10+
11+
img {
12+
margin-right: 5px;
13+
vertical-align: middle;
14+
}
15+
}
16+
17+
.termFieldTable {
18+
border-spacing: 0;
19+
width: 100%;
20+
21+
.termFieldRow {
22+
vertical-align: initial;
23+
}
24+
25+
input[type="text"] {
26+
cursor: pointer;
27+
opacity: 0.8;
28+
width: 100%;
29+
}
30+
}
31+
32+
.termset {
33+
cursor: pointer;
34+
margin-left: 15px;
35+
}
36+
37+
.term {
38+
padding-left: 20px;
39+
40+
.termEnabled,
41+
.termDisabled {
42+
background-repeat: no-repeat;
43+
background-position: 30px 3px;
44+
}
45+
46+
.termEnabled {
47+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACzSURBVDhPY2AYNKCoqIgTiOcD8X8S8F6wB4Aa1IH4akNDw+mPHz++/E8EuHTp0jmQRSDNCcXFxa/XrVt3gAh9KEpgBvx/9OjRLVI1g9TDDYBp3rlz5//Kysr/IJoYgGEASPPatWsbQDQxAMOAbdu2gZ0FookBcAOePHlyhxgN6GqQY+Hdhg0bDpJqCNgAaDrQAnJuNDY2nvr06dMbYgw6e/bsabgBUEN4yEiJ2wdNViLfIQC3sTh2vtJcswAAAABJRU5ErkJggg=='); // /_layouts/15/Images/EMMTerm.png
48+
}
49+
50+
.termDisabled {
51+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFMSURBVDhPzZPNSsNAFIULQqEQEPoSQqAg7gqC0HdwXxAElyYgBBGSZ+gDdOUyIauULATdKrgIKCKuQjbiDySCkNV4TrkzpJW2cefAxwwzc86de2em0/k3zXGcHpgC9Qeu5glAsAMefN+/K8vyVbVoWZbdMxDFY9d136Ioum6hW9iiDVSe588rxDXmJ+AAdAWOOVcbAy1O01R5nqfYoxVglyk+Hu7Z4FiwOcc1GBRMwQSnOAxDHz0jDyCwwCVQS3DO0gU0BkmSzG8A/UQiz7DxC5yLGQ1PwDeYGYOiKF6WarCPDUOJeor+A4z0m8P4SNaG+hY+4zi+aZh0scEBNeB41DTBuCcGjj6FjaM/BUFwW1XVO6vdMNiSdIzJLwN5TJZ+iSLQKYwbR9cmZyaFdX+JhZIiMue+cLFQxA0G22uusd/6I8OEb4LXRwZN4Q+3Ys8Mb9+nRgAAAABJRU5ErkJggg=='); // /_layouts/15/Images/EMMTermDeprecated.png
52+
}
53+
54+
label>span {
55+
padding-left: 25px;
56+
}
57+
}
58+
59+
.actions {
60+
button:first-child {
61+
margin-right: 15px;
62+
}
63+
}
64+
65+
.termBasePicker
66+
{
67+
background-color: #fff;
68+
}
69+
.termSuggestion
70+
{
71+
min-height: 40px;
72+
width: 100%;
73+
text-align: left;
74+
cursor: pointer;
75+
76+
77+
.termSuggestionSubTitle
78+
{
79+
font-size: 12px;
80+
color: #666666;
81+
}
82+
83+
}
84+
85+
.pickedTermRoot
86+
{
87+
position: relative;
88+
outline: transparent;
89+
box-sizing: content-box;
90+
flex-shrink: 1;
91+
background: #f4f4f4;
92+
margin: 2px;
93+
height: 26px;
94+
line-height: 26px;
95+
cursor: default;
96+
display: flex;
97+
flex-wrap: nowrap;
98+
max-width: 300px;
99+
100+
.pickedTermText
101+
{
102+
overflow: hidden;
103+
text-overflow: ellipsis;
104+
white-space: nowrap;
105+
min-width: 30px;
106+
margin: 0 8px;
107+
}
108+
.pickedTermCloseIcon
109+
{
110+
cursor: pointer;
111+
color: #666666;
112+
font-size: 12px;
113+
display: inline-block;
114+
text-align: center;
115+
vertical-align: top;
116+
width: 30px;
117+
height: 100%;
118+
-ms-flex-negative: 0;
119+
flex-shrink: 0;
120+
}
121+
}
122+
123+
.errorMessage {
124+
font-size: 12px;
125+
font-weight: 400;
126+
color: #a80000;
127+
margin: 0;
128+
padding-top: 5px;
129+
display: flex;
130+
align-items: center;
131+
}
132+
133+
.errorIcon {
134+
font-size: 14px;
135+
margin-right: 5px;
136+
}
137+
138+
139+
140+

0 commit comments

Comments
 (0)