Skip to content

Commit

Permalink
Merge branch 'feature/filepicker-multiselect' of https://github.com/M…
Browse files Browse the repository at this point in the history 
…onalisaBaltatescu/sp-dev-fx-controls-react into MonalisaBaltatescu-feature/filepicker-multiselect
  • Loading branch information
@joelfmrodrigues
joelfmrodrigues committed Feb 7, 2022
2 parents b6535f2 + b058c63 commit f2383f6
Show file tree
Hide file tree
Showing 13 changed files with 74 additions and 107 deletions.
2 changes: 1 addition & 1 deletion src/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { OneDriveFilesBreadcrumbItem } from "./OneDriveFilesTab.types";
import { IFilePickerResult } from "../FilePicker.types";

export interface IOneDriveFilesTabState {
filePickerResult: IFilePickerResult;
filePickerResults: IFilePickerResult[];
libraryAbsolutePath: string;
libraryUrl: string;
folderPath: string;
Expand Down
21 changes: 10 additions & 11 deletions src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
super(props);

this.state = {
filePickerResult: null,
filePickerResults: [],
libraryAbsolutePath: undefined,
libraryUrl: '/Documents',
folderPath: undefined,
Expand Down Expand Up @@ -66,12 +66,12 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
return (
<div className={styles.tabContainer}>
<div className={styles.tabHeaderContainer}>
<Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav}/>
<Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav} />
</div>
<div className={styles.tabFiles}>
{this.state.libraryAbsolutePath !== undefined &&
<FileBrowser
onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
onChange={(filePickerResults: IFilePickerResult[]) => this._handleSelectionChange(filePickerResults)}
onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
fileBrowserService={this.props.oneDriveService}
libraryUrl={this.state.libraryUrl}
Expand All @@ -81,7 +81,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
<div className={styles.actionButtonsContainer}>
<div className={styles.actionButtons}>
<PrimaryButton
disabled={!this.state.filePickerResult}
disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
<DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
</div>
Expand Down Expand Up @@ -124,27 +124,26 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO

this.setState({
breadcrumbItems,
filePickerResult: undefined
filePickerResults: []
});
}

/**
* Is called when user selects a different file
*/
private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
if (filePickerResult) {
private _handleSelectionChange = (filePickerResults: IFilePickerResult[]) => {
filePickerResults.map((filePickerResult: IFilePickerResult) => {
filePickerResult.downloadFileContent = () => { return this.props.oneDriveService.downloadSPFileContent(filePickerResult.spItemUrl, filePickerResult.fileName); };
}
this.setState({
filePickerResult
});

this.setState({ filePickerResults });
}

/**
* Called when user saves
*/
private _handleSave = () => {
this.props.onSave([this.state.filePickerResult]);
this.props.onSave(this.state.filePickerResults);
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/controls/filePicker/RecentFilesTab/IRecentFilesTabState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ import { IRecentFile } from "../../../services/FilesSearchService.types";
export interface IRecentFilesTabState {
results: IRecentFile[];
isLoading: boolean;
filePickerResult: IFilePickerResult;
filePickerResults: IFilePickerResult[];
}
1 change: 0 additions & 1 deletion src/controls/filePicker/RecentFilesTab/RecentFilesTab.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,6 @@
opacity: 1;
}
}

.itemTileNamePlate {
position: absolute;
bottom: 0;
Expand Down
50 changes: 23 additions & 27 deletions src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,13 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
constructor(props: IRecentFilesTabProps) {
super(props);

this._selection = new Selection({
selectionMode: SelectionMode.single,
onSelectionChanged: this._onSelectionChanged
});
this._selection = null;


this.state = {
isLoading: true,
results: [],
filePickerResult: null
filePickerResults: []
};
}

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

this.setState({
Expand Down Expand Up @@ -85,7 +86,7 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
<div className={styles.actionButtonsContainer}>
<div className={styles.actionButtons}>
<PrimaryButton
disabled={!this.state.filePickerResult}
disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
onClick={() => this._handleSave()}
className={styles.actionButton}
>{strings.OpenButtonLabel}</PrimaryButton>
Expand All @@ -97,28 +98,20 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
}

private _onSelectionChanged = () => {
let filePickerResults: IFilePickerResult[] = [];
// Get the selected item
const selectedItems = this._selection.getSelection();
if (selectedItems && selectedItems.length > 0) {
//Get the selected key
const selectedKey: IRecentFile = selectedItems[0] as IRecentFile;
const filePickerResult: IFilePickerResult = {
this._selection.getSelection().map((selectedKey: IRecentFile) => {
if(!selectedKey.isFolder && selectedKey.fileUrl)
filePickerResults.push({
fileAbsoluteUrl: selectedKey.fileUrl,
fileName: GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl),
fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedKey.fileUrl),
downloadFileContent: () => { return this.props.fileSearchService.downloadSPFileContent(selectedKey.fileUrl, GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl)); }
};

// Save the selected file
this.setState({
filePickerResult
});
} else {
// Remove any selected file
this.setState({
filePickerResult: undefined
});
}
});

this.setState({ filePickerResults });

if (this._listElem) {
// Force the list to update to show the selection check
this._listElem.forceUpdate();
Expand Down Expand Up @@ -168,7 +161,8 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
return <span className={styles.recentGridList} role="grid">
<FocusZone>
<SelectionZone selection={this._selection}
onItemInvoked={(item: IRecentFile) => this._handleItemInvoked(item)}>
selectionMode={SelectionMode.multiple}
onItemInvoked={(item: any) => this._handleItemInvoked(item)}>
<List
ref={this._linkElement}
items={this.state.results}
Expand All @@ -188,8 +182,8 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
private _onRenderCell = (item: IRecentFile, index: number | undefined): JSX.Element => {
let isSelected: boolean = false;

if (this._selection && index !== undefined) {
isSelected = this._selection.isIndexSelected(index);
if (this._selection) {
isSelected = this._selection.isKeySelected(item.key);
}

return (
Expand Down Expand Up @@ -242,14 +236,16 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
* Gets called what a file is selected.
*/
private _handleItemInvoked = (item: IRecentFile) => {
this._selection.setKeySelected(item.key, true, true);
if(!item.isFolder) {
this._selection.toggleKeySelected(item.key);
}
}

/**
* Gets called when it is time to save the currently selected item
*/
private _handleSave = () => {
this.props.onSave([this.state.filePickerResult]);
this.props.onSave(this.state.filePickerResults);
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabState.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { IFilePickerResult , FilePickerBreadcrumbItem} from "../FilePicker.types";

export interface ISiteFilePickerTabState {
filePickerResult: IFilePickerResult;
filePickerResults: IFilePickerResult[];
libraryAbsolutePath: string;
libraryUrl: string;
libraryPath: string;
Expand Down
22 changes: 10 additions & 12 deletions src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
breadcrumbItems[breadcrumbItems.length - 1].isCurrentItem = true;

this.state = {
filePickerResult: null,
filePickerResults: [],
libraryAbsolutePath: folderAbsPath || undefined,
libraryUrl: libraryServRelUrl || urlCombine(props.context.pageContext.web.serverRelativeUrl, '/Shared%20Documents'),
libraryPath: folderServRelPath,
Expand Down Expand Up @@ -175,7 +175,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
onOpenLibrary={(selectedLibrary: ILibrary) => this._handleOpenLibrary(selectedLibrary, true)} />}
{this.state.libraryAbsolutePath !== undefined &&
<FileBrowser
onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
onChange={(filePickerResults: IFilePickerResult[]) => this._handleSelectionChange(filePickerResults)}
onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
fileBrowserService={this.props.fileBrowserService}
libraryUrl={this.state.libraryUrl}
Expand All @@ -185,7 +185,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
<div className={styles.actionButtonsContainer}>
<div className={styles.actionButtons}>
<PrimaryButton
disabled={!this.state.filePickerResult}
disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
<DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
</div>
Expand Down Expand Up @@ -233,28 +233,26 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa

this.setState({
breadcrumbItems,
filePickerResult: undefined
filePickerResults: undefined
});
}

/**
* Is called when user selects a different file
*/
private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
if (filePickerResult) {
private _handleSelectionChange = (filePickerResults: IFilePickerResult[]) => {
filePickerResults.map((filePickerResult: IFilePickerResult) => {
filePickerResult.downloadFileContent = () => { return this.props.fileBrowserService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName); };
}
// this.props.fileBrowserService
this.setState({
filePickerResult
});
// this.props.fileBrowserService
this.setState({ filePickerResults });
}

/**
* Called when user saves
*/
private _handleSave = () => {
this.props.onSave([this.state.filePickerResult]);
this.props.onSave(this.state.filePickerResults);
}

/**
Expand Down Expand Up @@ -283,7 +281,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
}

this.setState({
filePickerResult: null,
filePickerResults: null,
libraryPath: folder.serverRelativeUrl,
folderName: folder.name,
libraryAbsolutePath: folder.absoluteUrl,
Expand Down
Loading

0 comments on commit f2383f6

Please sign in to comment.