Skip to content

Commit ea2c154

Browse files
petkirpetkir
authored
Add label to list item picker
* Combobox Label * one linebreak to much * Loading Spinner * ListItemPicker Label * added label * Docs
1 parent 8532b05 commit ea2c154

File tree

7 files changed

+70
-40
lines changed

7 files changed

+70
-40
lines changed

‎docs/documentation/docs/controls/ComboBoxListItemPicker.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,5 +122,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
122122
| multiSelect | boolean | no | Allows multiple selection|
123123
| onInitialized | () => void | no | Calls when component is ready|
124124
| itemLimit | number | no | Maximum number of items to be displayed in the combobox. Default: 100 |
125+
| label | string | no | Specifies the text describing the combobox ListItemPicker. |
125126

126127
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ComboBoxListItemPicker)

‎docs/documentation/docs/controls/ListItemPicker.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,5 +64,6 @@ The `ListItemPicker` control can be configured with the following properties:
6464
| orderBy | string | no | condition to order by list Item, same as $orderby ODATA parameter|
6565
| placeholder | string | no | Short text hint to display in empty picker |
6666
| substringSearch | boolean | no | Specifies if substring search should be used |
67+
| label | string | no | Specifies the text describing the ListItemPicker. |
6768

6869
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

‎src/controls/listItemPicker/ComboBoxListItemPicker.module.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.comboBoxListItemPickerWrapper{
2+
position: relative;
3+
.loading{
4+
position: absolute;
5+
right:8px;
6+
bottom:9px;
7+
}
8+
}

‎src/controls/listItemPicker/ComboBoxListItemPicker.tsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { IComboBoxListItemPickerProps, IComboBoxListItemPickerState } from ".";
55
import * as telemetry from '../../common/telemetry';
66
import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
77
import { ListItemRepository } from '../../common/dal/ListItemRepository';
8+
import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
9+
import styles from './ComboBoxListItemPicker.module.scss';
810

911

1012
export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
@@ -73,7 +75,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
7375
this.setState({
7476
availableOptions: options
7577
});
76-
if(onInitialized && isInitialLoad !== false){
78+
if (onInitialized && isInitialLoad !== false) {
7779
onInitialized();
7880
}
7981
}
@@ -97,33 +99,35 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
9799
public render(): React.ReactElement<IComboBoxListItemPickerProps> {
98100
const { className, disabled } = this.props;
99101

100-
return (this.state.availableOptions ? (
101-
<div>
102-
<ComboBox options={this.state.availableOptions}
103-
autoComplete={this.props.autoComplete}
104-
comboBoxOptionStyles={this.props.comboBoxOptionStyles}
105-
allowFreeform={this.props.allowFreeform}
106-
keytipProps={this.props.keytipProps}
107-
onMenuDismissed={this.props.onMenuDismiss}
108-
onMenuOpen={this.props.onMenuOpen}
109-
text={this.props.text}
110-
onChanged={this.onChanged}
111-
multiSelect={this.props.multiSelect}
112-
defaultSelectedKey={this.selectedItems.map(item=>item.key) || []}
113-
className={className}
114-
disabled={disabled} />
115-
102+
return (
103+
<div className={styles.comboBoxListItemPickerWrapper}>
104+
<ComboBox
105+
label={this.props.label}
106+
options={this.state.availableOptions}
107+
autoComplete={this.props.autoComplete}
108+
comboBoxOptionStyles={this.props.comboBoxOptionStyles}
109+
allowFreeform={this.props.allowFreeform}
110+
keytipProps={this.props.keytipProps}
111+
onMenuDismissed={this.props.onMenuDismiss}
112+
onMenuOpen={this.props.onMenuOpen}
113+
text={this.props.text}
114+
onChanged={this.onChanged}
115+
multiSelect={this.props.multiSelect}
116+
defaultSelectedKey={this.selectedItems.map(item => item.key) || []}
117+
className={className}
118+
disabled={disabled || !this.state.availableOptions} />
119+
{!this.state.errorMessage && !this.state.availableOptions && (<Spinner className={styles.loading} size={SpinnerSize.small} />)}
116120
{!!this.state.errorMessage &&
117121
(<Label style={{ color: '#FF0000' }}> {this.state.errorMessage} </Label>)}
118-
</div>) : <span>Loading...</span>
122+
</div>
119123
);
120124
}
121125

122126
/**
123127
* On Selected Item
124128
*/
125129
private onChanged = (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any): void => {
126-
if(this.props.multiSelect){
130+
if (this.props.multiSelect) {
127131
if (option && option.selected) {
128132
this.selectedItems.push({
129133
[this.props.keyColumnInternalName || "Id"]: option.key,
@@ -133,7 +137,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
133137
} else {
134138
this.selectedItems = this.selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] !== option.key);
135139
}
136-
}else{
140+
} else {
137141
this.selectedItems.push({
138142
[this.props.keyColumnInternalName || "Id"]: option.key,
139143
[this.props.columnInternalName]: option.text

‎src/controls/listItemPicker/IComboBoxListItemPickerProps.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,8 @@ export interface IComboBoxListItemPickerProps {
2929
onInitialized?: () => void;
3030

3131
onSelectedItem: (item: any) => void;
32+
/**
33+
* The label for the control
34+
*/
35+
label?: string;
3236
}

‎src/controls/listItemPicker/IListItemPickerProps.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,9 @@ export interface IListItemPickerProps {
2222
placeholder?: string;
2323

2424
onSelectedItem: (item:any) => void;
25+
/**
26+
* The label for the control
27+
*/
28+
label?: string;
29+
2530
}

‎src/controls/listItemPicker/ListItemPicker.tsx

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import { Label } from "office-ui-fabric-react/lib/Label";
66
import { IListItemPickerProps, IListItemPickerState } from ".";
77
import * as telemetry from '../../common/telemetry';
88
import isEqual from 'lodash/isEqual';
9+
import { getId } from 'office-ui-fabric-react/lib/Utilities';
910

1011

1112
export class ListItemPicker extends React.Component<IListItemPickerProps, IListItemPickerState> {
1213
private _spservice: SPservice;
14+
private _tagPickerId = getId('tagPicker');
1315

1416
constructor(props: IListItemPickerProps) {
1517
super(props);
@@ -49,8 +51,8 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
4951
if (this.props.listId !== nextProps.listId
5052
|| this.props.columnInternalName !== nextProps.columnInternalName
5153
|| this.props.webUrl !== nextProps.webUrl) {
52-
this.loadField(nextProps);
53-
}
54+
this.loadField(nextProps);
55+
}
5456
}
5557

5658
/**
@@ -67,24 +69,29 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
6769

6870
return (
6971
<div>
70-
<TagPicker onResolveSuggestions={this.onFilterChanged}
71-
// getTextFromItem={(item: any) => { return item.name; }}
72-
getTextFromItem={this.getTextFromItem}
73-
pickerSuggestionsProps={{
74-
suggestionsHeaderText: suggestionsHeaderText,
75-
noResultsFoundText: noresultsFoundText
76-
}}
77-
selectedItems={selectedItems}
78-
onChange={this.onItemChanged}
79-
className={className}
80-
itemLimit={itemLimit}
81-
disabled={disabled}
82-
inputProps={{
83-
placeholder: placeholder
84-
}} />
85-
86-
{!!errorMessage &&
87-
(<Label style={{ color: '#FF0000' }}> {errorMessage} </Label>)}
72+
{!!this.props.label &&
73+
<Label htmlFor={this._tagPickerId} >{this.props.label}</Label>
74+
}<div id={this._tagPickerId}>
75+
<TagPicker
76+
onResolveSuggestions={this.onFilterChanged}
77+
// getTextFromItem={(item: any) => { return item.name; }}
78+
getTextFromItem={this.getTextFromItem}
79+
pickerSuggestionsProps={{
80+
suggestionsHeaderText: suggestionsHeaderText,
81+
noResultsFoundText: noresultsFoundText
82+
}}
83+
selectedItems={selectedItems}
84+
onChange={this.onItemChanged}
85+
className={className}
86+
itemLimit={itemLimit}
87+
disabled={disabled}
88+
inputProps={{
89+
placeholder: placeholder
90+
}} />
91+
92+
{!!errorMessage &&
93+
(<Label style={{ color: '#FF0000' }}> {errorMessage} </Label>)}
94+
</div>
8895
</div>
8996
);
9097
}

0 commit comments

Comments
 (0)