From f9722387835d6f11b62a6943313b08f38a0c0c04 Mon Sep 17 00:00:00 2001 From: Piotr Siatka Date: Mon, 9 Sep 2019 14:36:40 +0200 Subject: [PATCH] Replace accepts to string[]. Replace IconButton with Action button. Update documentation. --- .../documentation/docs/controls/FilePicker.md | 7 ++----- src/controls/filePicker/FilePicker.tsx | 9 +++++---- src/controls/filePicker/FilePicker.types.ts | 2 +- src/controls/filePicker/IFilePickerProps.ts | 2 +- .../UploadFilePickerTab.tsx | 3 ++- .../controls/FileBrowser/IFileBrowserProps.ts | 2 +- src/services/FileBrowserService.ts | 20 +++++++++---------- src/services/FilesSearchService.ts | 6 +++--- src/services/OneDriveService.ts | 4 ++-- src/services/OrgAssetsService.ts | 4 ++-- .../controlsTest/components/ControlsTest.tsx | 3 ++- 11 files changed, 31 insertions(+), 31 deletions(-) diff --git a/docs/documentation/docs/controls/FilePicker.md b/docs/documentation/docs/controls/FilePicker.md index 8263c58c7..b65821a8c 100644 --- a/docs/documentation/docs/controls/FilePicker.md +++ b/docs/documentation/docs/controls/FilePicker.md @@ -13,9 +13,6 @@ Currently supported locations The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported. ![File Picker overview](../assets/FilePickerOverview.png) -### Contribution -**File picker control has been developed based on the great SPFx project made by Hugo and presented in the [SP-Dev-Fx-WebParts Sample Repository](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-comparer)**. - ## Different display types File picker support 3 types of views : List, Compact list and Tiles. In case Tiles view is selected, the control shows the thumbnail of the file. @@ -61,11 +58,11 @@ The FilePicker component can be configured with the following properties: | ---- | ---- | ---- | ---- | | label | string | no | Specifies the text describing the file picker. | | buttonLabel | string | no | Specifies the label of the file picker button. | -| buttonIcon | string | no | In case it is provided the file picker will be rendered as an Icon button. | +| buttonIcon | string | no | In case it is provided the file picker will be rendered as an action button. | | onSave | (filePickerResult: IFilePickerResult) => void | yes | Handler when the file has been selected and picker has been closed. | | onChange | (filePickerResult: IFilePickerResult) => void | yes | Handler when the file selection has been changed. | | webPartContext | WebPartContext | yes | Current context. | -| accepts | string | no | Comma separated list of file extensions that going to be displayed. E.g. ".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg" | +| accepts | string[] | no | Array of strings containing allowed files extensions. E.g. [".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"] | | required | boolean | no | Sets the label to inform that the value is required. | | bingAPIKey | string | no | Used to execute WebSearch. If not provided SearchTab will not be available. | | disabled | boolean | no | Specifies if the picker button is disabled | diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx index 8b1bc0023..20be4f0dc 100644 --- a/src/controls/filePicker/FilePicker.tsx +++ b/src/controls/filePicker/FilePicker.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { IFilePickerProps } from './IFilePickerProps'; import { IFilePickerState } from './IFilePickerState'; -import { PrimaryButton, IconButton } from 'office-ui-fabric-react/lib/components/Button'; +import { PrimaryButton, IconButton, ActionButton } from 'office-ui-fabric-react/lib/components/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/components/Panel'; import { Label } from 'office-ui-fabric-react/lib/components/Label'; import { Nav, INavLink, INavLinkGroup } from 'office-ui-fabric-react/lib/Nav'; @@ -64,7 +64,7 @@ export class FilePicker extends React.Component { this._handleSave(value); } }; const buttonProps = { + text: this.props.buttonLabel, disabled: this.props.disabled, onClick: this._handleOpenPanel }; @@ -84,8 +85,8 @@ export class FilePicker extends React.Component : - + : + } void; onClose: () => void; } diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts index c75ae4a42..ab7a04102 100644 --- a/src/controls/filePicker/IFilePickerProps.ts +++ b/src/controls/filePicker/IFilePickerProps.ts @@ -34,7 +34,7 @@ export interface IFilePickerProps { /** * File extensions to be displayed. */ - accepts?: string; + accepts?: string[]; /** * Sets the label to inform that the value is required. diff --git a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx index 75e70924f..719f19b14 100644 --- a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx +++ b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx @@ -21,6 +21,7 @@ export default class UploadFilePickerTab extends React.Component { const { filePickerResult } = this.state; const fileName: string = filePickerResult ? filePickerResult.fileName : null; + const acceptedFilesExtensions = this.props.accepts ? this.props.accepts.join(",") : null; return (
@@ -31,7 +32,7 @@ export default class UploadFilePickerTab extends React.Component) => this._handleFileUpload(event)} + accept={acceptedFilesExtensions} multiple={false} onChange={(event: React.ChangeEvent) => this._handleFileUpload(event)} /> { fileName && diff --git a/src/controls/filePicker/controls/FileBrowser/IFileBrowserProps.ts b/src/controls/filePicker/controls/FileBrowser/IFileBrowserProps.ts index a229b4c0f..d941ef856 100644 --- a/src/controls/filePicker/controls/FileBrowser/IFileBrowserProps.ts +++ b/src/controls/filePicker/controls/FileBrowser/IFileBrowserProps.ts @@ -7,7 +7,7 @@ export interface IFileBrowserProps { fileBrowserService: FileBrowserService; libraryName: string; folderPath: string; - accepts: string; + accepts: string[]; onChange: (filePickerResult: IFilePickerResult) => void; onOpenFolder: (folder: IFile) => void; } diff --git a/src/services/FileBrowserService.ts b/src/services/FileBrowserService.ts index f6967bced..35334e42f 100644 --- a/src/services/FileBrowserService.ts +++ b/src/services/FileBrowserService.ts @@ -22,9 +22,9 @@ export class FileBrowserService { * Gets files from current sites library * @param libraryName * @param folderPath - * @param acceptedFilesExtensionsList + * @param acceptedFilesExtensions */ - public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensionsList?: string, nextPageQueryStringParams?: string): Promise => { + public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise => { let filesQueryResult: FilesQueryResult = { items: [], nextHref: null }; try { let restApi = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/GetByTitle('${libraryName}')/RenderListDataAsStream`; @@ -36,7 +36,7 @@ export class FileBrowserService { folderPath = null; } - filesQueryResult = await this._getListDataAsStream(restApi, folderPath, acceptedFilesExtensionsList); + filesQueryResult = await this._getListDataAsStream(restApi, folderPath, acceptedFilesExtensions); } catch (error) { filesQueryResult.items = null; console.error(error.message); @@ -80,9 +80,9 @@ export class FileBrowserService { * Executes query to load files with possible extension filtering * @param restApi * @param folderPath - * @param acceptedFilesExtensionsList + * @param acceptedFilesExtensions */ - protected _getListDataAsStream = async (restApi: string, folderPath: string, acceptedFilesExtensionsList?: string): Promise => { + protected _getListDataAsStream = async (restApi: string, folderPath: string, acceptedFilesExtensions?: string[]): Promise => { let filesQueryResult: FilesQueryResult = { items: [], nextHref: null }; try { const body = { @@ -90,7 +90,7 @@ export class FileBrowserService { AllowMultipleValueFilterForTaxonomyFields: true, // ContextInfo (1), ListData (2), ListSchema (4), ViewMetadata (1024), EnableMediaTAUrls (4096), ParentInfo (8192) RenderOptions: 1 | 2 | 4 | 1024 | 4096 | 8192, - ViewXml: this.getFilesCamlQueryViewXml(acceptedFilesExtensionsList) + ViewXml: this.getFilesCamlQueryViewXml(acceptedFilesExtensions) } }; if (folderPath) { @@ -128,12 +128,12 @@ export class FileBrowserService { * Generates CamlQuery files filter. * @param accepts */ - protected getFileTypeFilter(accepts: string) { + protected getFileTypeFilter(accepts: string[]) { let fileFilter: string = ""; - if (accepts && accepts != "") { + if (accepts && accepts.length > 0) { fileFilter = ""; - accepts.split(",").forEach((fileType: string, index: number) => { + accepts.forEach((fileType: string, index: number) => { fileType = fileType.replace(".", ""); if (index >= 0) { fileFilter = fileFilter + `${fileType}`; @@ -148,7 +148,7 @@ export class FileBrowserService { /** * Generates Files CamlQuery ViewXml */ - protected getFilesCamlQueryViewXml = (accepts: string) => { + protected getFilesCamlQueryViewXml = (accepts: string[]) => { const fileFilter: string = this.getFileTypeFilter(accepts); let queryCondition = fileFilter && fileFilter != "" ? ` diff --git a/src/services/FilesSearchService.ts b/src/services/FilesSearchService.ts index 3600820e3..7d69cb052 100644 --- a/src/services/FilesSearchService.ts +++ b/src/services/FilesSearchService.ts @@ -41,7 +41,7 @@ export class FilesSearchService { } } - public executeRecentSearch = async (accepts?: string) => { + public executeRecentSearch = async (accepts?: string[]) => { try { const webId = this.context.pageContext.web.id.toString(); const siteId = this.context.pageContext.site.id.toString(); @@ -193,11 +193,11 @@ export class FilesSearchService { /** * Builds a file filter using the accepted file extensions */ - private _getFileFilter(accepts?: string) { + private _getFileFilter(accepts?: string[]) { let fileFilter: string = undefined; if (accepts) { fileFilter = " AND ("; - accepts.split(",").forEach((fileType: string, index: number) => { + accepts.forEach((fileType: string, index: number) => { fileType = fileType.replace(".", ""); if (index > 0) { fileFilter = fileFilter + " OR "; diff --git a/src/services/OneDriveService.ts b/src/services/OneDriveService.ts index b200b319d..c5b201acc 100644 --- a/src/services/OneDriveService.ts +++ b/src/services/OneDriveService.ts @@ -26,7 +26,7 @@ export class OneDriveService extends FileBrowserService { /** * Gets files from OneDrive personal library */ - public getListItems = async (libraryName: string, folderPath?: string, acceptedFilesExtensionsList?: string, nextPageQueryStringParams?: string): Promise => { + public getListItems = async (libraryName: string, folderPath?: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise => { let filesQueryResult: FilesQueryResult = { items: [], nextHref: null }; try { const oneDriveRootFolder = await this.getOneDriveRootFolderFullUrl(); @@ -47,7 +47,7 @@ export class OneDriveService extends FileBrowserService { } const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/SP.List.GetListDataAsStream?listFullUrl='${encodedListUrl}'&${queryStringParams}`; - filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensionsList); + filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensions); } catch (error) { filesQueryResult.items = null; console.error(error.message); diff --git a/src/services/OrgAssetsService.ts b/src/services/OrgAssetsService.ts index f2a9f9e27..39b96f558 100644 --- a/src/services/OrgAssetsService.ts +++ b/src/services/OrgAssetsService.ts @@ -10,7 +10,7 @@ export class OrgAssetsService extends FileBrowserService { super(context, itemsToDownloadCount); } - public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensionsList?: string, nextPageQueryStringParams?: string): Promise => { + public getListItems = async (libraryName: string, folderPath: string, acceptedFilesExtensions?: string[], nextPageQueryStringParams?: string): Promise => { let filesQueryResult: FilesQueryResult = { items: [], nextHref: null }; try { // Retrieve Lib path from folder path @@ -37,7 +37,7 @@ export class OrgAssetsService extends FileBrowserService { } const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/SP.List.GetListDataAsStream?listFullUrl='${libFullUrl}'&${queryStringParams}`; - filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensionsList); + filesQueryResult = await this._getListDataAsStream(restApi, null, acceptedFilesExtensions); } catch (error) { filesQueryResult.items = null; console.error(error.message); diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 651a88f58..0ddca8932 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -804,7 +804,8 @@ export default class ControlsTest extends React.Component { this.setState({ filePickerResult }); }} onChanged={(filePickerResult: IFilePickerResult) => { this.setState({ filePickerResult }); }}