Skip to content

Commit add39f8

Browse files
author
Monalisa Baltatescu
committed
Changed selection to multiple for Recent, OneDrive and Site Files tabs for FilePicker component
1 parent 870467e commit add39f8

File tree

10 files changed

+70
-105
lines changed

10 files changed

+70
-105
lines changed

‎src/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabState.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { OneDriveFilesBreadcrumbItem } from "./OneDriveFilesTab.types";
22
import { IFilePickerResult } from "../FilePicker.types";
33

44
export interface IOneDriveFilesTabState {
5-
filePickerResult: IFilePickerResult;
5+
filePickerResults: IFilePickerResult[];
66
libraryAbsolutePath: string;
77
libraryUrl: string;
88
folderPath: string;

‎src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
1818
super(props);
1919

2020
this.state = {
21-
filePickerResult: null,
21+
filePickerResults: [],
2222
libraryAbsolutePath: undefined,
2323
libraryUrl: '/Documents',
2424
folderPath: undefined,
@@ -66,12 +66,12 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
6666
return (
6767
<div className={styles.tabContainer}>
6868
<div className={styles.tabHeaderContainer}>
69-
<Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav}/>
69+
<Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav} />
7070
</div>
7171
<div className={styles.tabFiles}>
7272
{this.state.libraryAbsolutePath !== undefined &&
7373
<FileBrowser
74-
onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
74+
onChange={(filePickerResults: IFilePickerResult[]) => this._handleSelectionChange(filePickerResults)}
7575
onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
7676
fileBrowserService={this.props.oneDriveService}
7777
libraryUrl={this.state.libraryUrl}
@@ -81,7 +81,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
8181
<div className={styles.actionButtonsContainer}>
8282
<div className={styles.actionButtons}>
8383
<PrimaryButton
84-
disabled={!this.state.filePickerResult}
84+
disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
8585
onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
8686
<DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
8787
</div>
@@ -124,27 +124,26 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
124124

125125
this.setState({
126126
breadcrumbItems,
127-
filePickerResult: undefined
127+
filePickerResults: []
128128
});
129129
}
130130

131131
/**
132132
* Is called when user selects a different file
133133
*/
134-
private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
135-
if (filePickerResult) {
134+
private _handleSelectionChange = (filePickerResults: IFilePickerResult[]) => {
135+
filePickerResults.map((filePickerResult: IFilePickerResult) => {
136136
filePickerResult.downloadFileContent = () => { return this.props.oneDriveService.downloadSPFileContent(filePickerResult.spItemUrl, filePickerResult.fileName); };
137-
}
138-
this.setState({
139-
filePickerResult
140137
});
138+
139+
this.setState({ filePickerResults });
141140
}
142141

143142
/**
144143
* Called when user saves
145144
*/
146145
private _handleSave = () => {
147-
this.props.onSave([this.state.filePickerResult]);
146+
this.props.onSave(this.state.filePickerResults);
148147
}
149148

150149
/**

‎src/controls/filePicker/RecentFilesTab/IRecentFilesTabState.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ import { IRecentFile } from "../../../services/FilesSearchService.types";
44
export interface IRecentFilesTabState {
55
results: IRecentFile[];
66
isLoading: boolean;
7-
filePickerResult: IFilePickerResult;
7+
filePickerResults: IFilePickerResult[];
88
}

‎src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,13 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
3939
constructor(props: IRecentFilesTabProps) {
4040
super(props);
4141

42-
this._selection = new Selection({
43-
selectionMode: SelectionMode.single,
44-
onSelectionChanged: this._onSelectionChanged
45-
});
42+
this._selection = null;
4643

4744

4845
this.state = {
4946
isLoading: true,
5047
results: [],
51-
filePickerResult: null
48+
filePickerResults: null
5249
};
5350
}
5451

@@ -57,6 +54,10 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
5754
*/
5855
public async componentDidMount() {
5956
const recentFilesResult = await this.props.fileSearchService.executeRecentSearch(this.props.accepts);
57+
this._selection = new Selection({
58+
selectionMode: SelectionMode.multiple,
59+
onSelectionChanged: this._onSelectionChanged
60+
});
6061
this._selection.setItems(recentFilesResult, true);
6162

6263
this.setState({
@@ -85,7 +86,7 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
8586
<div className={styles.actionButtonsContainer}>
8687
<div className={styles.actionButtons}>
8788
<PrimaryButton
88-
disabled={!this.state.filePickerResult}
89+
disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
8990
onClick={() => this._handleSave()}
9091
className={styles.actionButton}
9192
>{strings.OpenButtonLabel}</PrimaryButton>
@@ -97,28 +98,20 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
9798
}
9899

99100
private _onSelectionChanged = () => {
101+
let filePickerResults: IFilePickerResult[] = [];
100102
// Get the selected item
101-
const selectedItems = this._selection.getSelection();
102-
if (selectedItems && selectedItems.length > 0) {
103-
//Get the selected key
104-
const selectedKey: IRecentFile = selectedItems[0] as IRecentFile;
105-
const filePickerResult: IFilePickerResult = {
103+
this._selection.getSelection().map((selectedKey: IRecentFile) => {
104+
this._selection.setKeySelected(selectedKey.key, true, true);
105+
filePickerResults.push({
106106
fileAbsoluteUrl: selectedKey.fileUrl,
107107
fileName: GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl),
108108
fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedKey.fileUrl),
109109
downloadFileContent: () => { return this.props.fileSearchService.downloadSPFileContent(selectedKey.fileUrl, GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl)); }
110-
};
111-
112-
// Save the selected file
113-
this.setState({
114-
filePickerResult
115-
});
116-
} else {
117-
// Remove any selected file
118-
this.setState({
119-
filePickerResult: undefined
120110
});
121-
}
111+
});
112+
113+
this.setState({ filePickerResults });
114+
122115
if (this._listElem) {
123116
// Force the list to update to show the selection check
124117
this._listElem.forceUpdate();
@@ -167,8 +160,7 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
167160
private _renderGridList = (): JSX.Element => {
168161
return <span className={styles.recentGridList} role="grid">
169162
<FocusZone>
170-
<SelectionZone selection={this._selection}
171-
onItemInvoked={(item: IRecentFile) => this._handleItemInvoked(item)}>
163+
<SelectionZone selection={this._selection} selectionMode={SelectionMode.multiple} onItemInvoked={(item: IRecentFile) => this._handleItemInvoked(item)}>
172164
<List
173165
ref={this._linkElement}
174166
items={this.state.results}
@@ -188,8 +180,8 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
188180
private _onRenderCell = (item: IRecentFile, index: number | undefined): JSX.Element => {
189181
let isSelected: boolean = false;
190182

191-
if (this._selection && index !== undefined) {
192-
isSelected = this._selection.isIndexSelected(index);
183+
if (this._selection) {
184+
isSelected = this._selection.isKeySelected(item.key);
193185
}
194186

195187
return (
@@ -249,7 +241,7 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
249241
* Gets called when it is time to save the currently selected item
250242
*/
251243
private _handleSave = () => {
252-
this.props.onSave([this.state.filePickerResult]);
244+
this.props.onSave(this.state.filePickerResults);
253245
}
254246

255247
/**

‎src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabState.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { IFilePickerResult , FilePickerBreadcrumbItem} from "../FilePicker.types";
22

33
export interface ISiteFilePickerTabState {
4-
filePickerResult: IFilePickerResult;
4+
filePickerResults: IFilePickerResult[];
55
libraryAbsolutePath: string;
66
libraryUrl: string;
77
libraryPath: string;

‎src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
4545
breadcrumbItems[breadcrumbItems.length - 1].isCurrentItem = true;
4646

4747
this.state = {
48-
filePickerResult: null,
48+
filePickerResults: [],
4949
libraryAbsolutePath: folderAbsPath || undefined,
5050
libraryUrl: libraryServRelUrl || urlCombine(props.context.pageContext.web.serverRelativeUrl, '/Shared%20Documents'),
5151
libraryPath: folderServRelPath,
@@ -157,7 +157,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
157157
onOpenLibrary={(selectedLibrary: ILibrary) => this._handleOpenLibrary(selectedLibrary, true)} />}
158158
{this.state.libraryAbsolutePath !== undefined &&
159159
<FileBrowser
160-
onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
160+
onChange={(filePickerResults: IFilePickerResult[]) => this._handleSelectionChange(filePickerResults)}
161161
onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
162162
fileBrowserService={this.props.fileBrowserService}
163163
libraryUrl={this.state.libraryUrl}
@@ -167,7 +167,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
167167
<div className={styles.actionButtonsContainer}>
168168
<div className={styles.actionButtons}>
169169
<PrimaryButton
170-
disabled={!this.state.filePickerResult}
170+
disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
171171
onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
172172
<DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
173173
</div>
@@ -215,28 +215,26 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
215215

216216
this.setState({
217217
breadcrumbItems,
218-
filePickerResult: undefined
218+
filePickerResults: undefined
219219
});
220220
}
221221

222222
/**
223223
* Is called when user selects a different file
224224
*/
225-
private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
226-
if (filePickerResult) {
225+
private _handleSelectionChange = (filePickerResults: IFilePickerResult[]) => {
226+
filePickerResults.map((filePickerResult: IFilePickerResult) => {
227227
filePickerResult.downloadFileContent = () => { return this.props.fileBrowserService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName); };
228-
}
229-
// this.props.fileBrowserService
230-
this.setState({
231-
filePickerResult
232228
});
229+
// this.props.fileBrowserService
230+
this.setState({ filePickerResults });
233231
}
234232

235233
/**
236234
* Called when user saves
237235
*/
238236
private _handleSave = () => {
239-
this.props.onSave([this.state.filePickerResult]);
237+
this.props.onSave(this.state.filePickerResults);
240238
}
241239

242240
/**
@@ -265,7 +263,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
265263
}
266264

267265
this.setState({
268-
filePickerResult: null,
266+
filePickerResults: null,
269267
libraryPath: folder.serverRelativeUrl,
270268
folderName: folder.name,
271269
libraryAbsolutePath: folder.absoluteUrl,

0 commit comments

Comments
 (0)