Skip to content

Commit 03b825f

Browse files
joelfmrodriguesjoelfmrodrigues
committed
ComboBoxListItemPicker support for changing defaultSelectedItems
1 parent 9b95e0d commit 03b825f

File tree

5 files changed

+79
-34
lines changed

5 files changed

+79
-34
lines changed

‎CHANGELOG.JSON

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"fixes": [
1616
"`RichText`: Image button is checked when hyperlink is added to the text [#948](https://github.com/pnp/sp-dev-fx-controls-react/issues/948)",
1717
"`RichText`: impossible to display link with the text equal to the url [#949](https://github.com/pnp/sp-dev-fx-controls-react/issues/949)",
18+
"`ComboBoxListItemPicker`: defaultSelectedItems not working [#954](https://github.com/pnp/sp-dev-fx-controls-react/issues/954)",
1819
"`PeoplePicker`: Default selected items for groups [#958](https://github.com/pnp/sp-dev-fx-controls-react/issues/958)"
1920
]
2021
},

‎src/controls/listItemPicker/ComboBoxListItemPicker.tsx

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
77
import { ListItemRepository } from '../../common/dal/ListItemRepository';
88
import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
99
import styles from './ComboBoxListItemPicker.module.scss';
10+
import { cloneDeep, isEqual } from 'lodash';
1011

1112

1213
export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
1314
private _listItemRepo: ListItemRepository;
14-
public selectedItems: any[];
15+
private _options: any[] = null;
1516

1617
constructor(props: IComboBoxListItemPickerProps) {
1718
super(props);
@@ -23,13 +24,13 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
2324
noresultsFoundText: !this.props.noResultsFoundText ? strings.genericNoResultsFoundText : this.props.noResultsFoundText,
2425
showError: false,
2526
errorMessage: "",
26-
suggestionsHeaderText: !this.props.suggestionsHeaderText ? strings.ListItemPickerSelectValue : this.props.suggestionsHeaderText
27+
suggestionsHeaderText: !this.props.suggestionsHeaderText ? strings.ListItemPickerSelectValue : this.props.suggestionsHeaderText,
28+
selectedItems: this.props.defaultSelectedItems || [],
2729
};
2830

2931
// Get SPService Factory
3032
this._listItemRepo = new ListItemRepository(this.props.webUrl, this.props.spHttpClient);
3133

32-
this.selectedItems = [];
3334
}
3435

3536
public componentDidMount(): void {
@@ -44,36 +45,32 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
4445
columnInternalName,
4546
webUrl,
4647
itemLimit,
47-
defaultSelectedItems,
4848
onInitialized
4949
} = props;
5050
let query = filter || "";
5151
//query += filter;
5252
let keyColumnName = keyColumnInternalName || "Id";
53-
let listItems = await this._listItemRepo.getListItemsByFilterClause(query,
54-
listId,
55-
columnInternalName,
56-
keyColumnInternalName,
57-
webUrl,
58-
itemLimit || 100);
59-
60-
let options = listItems.map(option => {
61-
return {
62-
key: option[keyColumnName],
63-
text: option[columnInternalName || "Id"]
64-
};
65-
});
66-
if (defaultSelectedItems) {
67-
//if passed only ids
68-
if (!isNaN(defaultSelectedItems[0])) {
69-
this.selectedItems = options.filter(opt => defaultSelectedItems.indexOf(opt.key) >= 0);
70-
}
71-
else {
72-
this.selectedItems = options.filter(opt => defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
73-
}
53+
if (!this._options || listId !== this.props.listId) {
54+
const listItems = await this._listItemRepo.getListItemsByFilterClause(query,
55+
listId,
56+
columnInternalName,
57+
keyColumnInternalName,
58+
webUrl,
59+
itemLimit || 100);
60+
61+
this._options = listItems.map(option => {
62+
return {
63+
key: option[keyColumnName],
64+
text: option[columnInternalName || "Id"]
65+
};
66+
});
7467
}
68+
69+
const selectedItems = this._getSelectedItems(props);
70+
7571
this.setState({
76-
availableOptions: options
72+
availableOptions: this._options,
73+
selectedItems: selectedItems,
7774
});
7875
if (onInitialized && isInitialLoad !== false) {
7976
onInitialized();
@@ -82,9 +79,41 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
8279

8380
public async componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {
8481
if (nextProps.listId !== this.props.listId) {
82+
this.setState({
83+
selectedItems: [],
84+
});
8585
await this.loadOptions(nextProps, false);
86-
this.selectedItems = [];
8786
}
87+
if (!isEqual(nextProps.defaultSelectedItems, this.props.defaultSelectedItems)) {
88+
const selectedItems = this._getSelectedItems(nextProps);
89+
this.setState({
90+
selectedItems: selectedItems,
91+
});
92+
}
93+
}
94+
95+
private _getSelectedItems(props: IComboBoxListItemPickerProps): any[] {
96+
let selectedItems: any[] = [];
97+
let keyColumnName = props.keyColumnInternalName || "Id";
98+
if (props.defaultSelectedItems) {
99+
//if passed only ids
100+
if (!isNaN(props.defaultSelectedItems[0])) {
101+
selectedItems = this._options.filter(opt => props.defaultSelectedItems.indexOf(opt.key) >= 0);
102+
}
103+
else {
104+
selectedItems = this._options.filter(opt => props.defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
105+
}
106+
}
107+
if (selectedItems && selectedItems.length > 0) {
108+
selectedItems = selectedItems.map(item => {
109+
return {
110+
[this.props.keyColumnInternalName || "Id"]: item.key,
111+
[this.props.columnInternalName]: item.text
112+
};
113+
});
114+
}
115+
116+
return selectedItems;
88117
}
89118

90119
/*public componentDidUpdate(prevProps: IComboBoxListItemPickerProps, prevState: IComboBoxListItemPickerState): void {
@@ -98,6 +127,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
98127
*/
99128
public render(): React.ReactElement<IComboBoxListItemPickerProps> {
100129
const { className, disabled } = this.props;
130+
const selectedKeys = this.state.selectedItems ? this.state.selectedItems.map(item => item[this.props.keyColumnInternalName || "Id"]) : [];
101131

102132
return (
103133
<div className={styles.comboBoxListItemPickerWrapper}>
@@ -113,7 +143,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
113143
text={this.props.text}
114144
onChanged={this.onChanged}
115145
multiSelect={this.props.multiSelect}
116-
defaultSelectedKey={this.selectedItems.map(item => item.key) || []}
146+
selectedKey={selectedKeys}
117147
className={className}
118148
disabled={disabled || !this.state.availableOptions} />
119149
{!this.state.errorMessage && !this.state.availableOptions && (<Spinner className={styles.loading} size={SpinnerSize.small} />)}
@@ -127,25 +157,30 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
127157
* On Selected Item
128158
*/
129159
private onChanged = (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any): void => {
160+
let selectedItems: any[] = cloneDeep(this.state.selectedItems);
130161
if (this.props.multiSelect) {
131162
if (option && option.selected) {
132-
this.selectedItems.push({
163+
selectedItems.push({
133164
[this.props.keyColumnInternalName || "Id"]: option.key,
134165
[this.props.columnInternalName]: option.text,
135166
selected: option.selected
136167
});
137168
} else {
138-
this.selectedItems = this.selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] !== option.key);
169+
selectedItems = selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] !== option.key);
139170
}
140171
} else {
141-
this.selectedItems.push({
172+
selectedItems.push({
142173
[this.props.keyColumnInternalName || "Id"]: option.key,
143174
[this.props.columnInternalName]: option.text
144175
});
145176

146-
this.selectedItems = this.selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] === option.key);
177+
selectedItems = selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] === option.key);
147178
}
148179

149-
this.props.onSelectedItem(this.selectedItems);
180+
this.setState({
181+
selectedItems: selectedItems,
182+
});
183+
184+
this.props.onSelectedItem(selectedItems);
150185
}
151186
}

‎src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
418418
canMoveNext: true,
419419
currentCarouselElement: this.carouselElements[0],
420420
comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
421+
comboBoxListItemPickerIds: [{Id: 1, Title: '111'}],
421422
treeViewSelectedKeys: ['3', 'gc3'],
422423
showAnimatedDialog: false,
423424
showCustomisedAnimatedDialog: false,
@@ -1376,13 +1377,19 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
13761377
console.log(`Item(s):`, data);
13771378
}}
13781379
webUrl={this.props.context.pageContext.web.absoluteUrl}
1380+
defaultSelectedItems={this.state.comboBoxListItemPickerIds}
13791381
spHttpClient={this.props.context.spHttpClient} />
13801382

13811383
<PrimaryButton text="Change List" onClick={() => {
13821384
this.setState({
13831385
comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'
13841386
});
13851387
}} />
1388+
<PrimaryButton text="Change default items" onClick={() => {
1389+
this.setState({
1390+
comboBoxListItemPickerIds: [{Id: 2, Title: '222'}]
1391+
});
1392+
}} />
13861393

13871394
</div>
13881395

‎src/webparts/controlsTest/components/ControlsTest_SingleComponent.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
133133
canMovePrev: false,
134134
canMoveNext: true,
135135
currentCarouselElement: this.carouselElements[0],
136-
comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da'
136+
comboBoxListItemPickerListId: '0ffa51d7-4ad1-4f04-8cfe-98209905d6da',
137+
comboBoxListItemPickerIds: [],
137138
};
138139

139140
this._onIconSizeChange = this._onIconSizeChange.bind(this);

‎src/webparts/controlsTest/components/IControlsTestProps.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface IControlsTestState {
2929
canMovePrev: boolean;
3030
canMoveNext: boolean;
3131
comboBoxListItemPickerListId: string;
32+
comboBoxListItemPickerIds: any[];
3233
filePickerResult?: IFilePickerResult[];
3334
treeViewSelectedKeys?: string[];
3435
showAnimatedDialog?: boolean;

0 commit comments

Comments
 (0)