Skip to content

Commit 652ebae

Browse files
AteinaAteina
committed
added FilePickerTab enum to collect tab types and remove hardcoded strings
1 parent 470af0a commit 652ebae

5 files changed

Lines changed: 53 additions & 37 deletions

File tree

‎src/controls/filePicker/FilePicker.tsx‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { StockImages } from "./StockImagesTab/StockImages";
3636
import UploadFilePickerTab from "./UploadFilePickerTab/UploadFilePickerTab";
3737
import MultipleUploadFilePickerTab from "./MultipleUploadFilePickerTab/MultipleUploadFilePickerTab";
3838
import WebSearchTab from "./WebSearchTab/WebSearchTab";
39+
import { FilePickerTab } from "./FilePickerTab";
3940

4041

4142
export class FilePicker extends React.Component<
@@ -47,8 +48,6 @@ export class FilePicker extends React.Component<
4748
private orgAssetsService: OrgAssetsService;
4849
private fileSearchService: FilesSearchService;
4950

50-
private tabOrder = this.props.tabOrder ?? ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"];
51-
5251
constructor(props: IFilePickerProps) {
5352
super(props);
5453

@@ -192,7 +191,7 @@ export class FilePicker extends React.Component<
192191
/>
193192
</div>
194193
<div className={styles.tabsContainer}>
195-
{this.state.selectedTab === "keyLink" && (
194+
{this.state.selectedTab === FilePickerTab.Link && (
196195
<LinkFilePickerTab
197196
fileSearchService={this.fileSearchService}
198197
renderCustomLinkTabContent={
@@ -203,7 +202,7 @@ export class FilePicker extends React.Component<
203202
{...linkTabProps}
204203
/>
205204
)}
206-
{this.state.selectedTab === "keyUpload" && (
205+
{this.state.selectedTab === FilePickerTab.Upload && (
207206
<UploadFilePickerTab
208207
renderCustomUploadTabContent={
209208
this.props.renderCustomUploadTabContent
@@ -212,7 +211,7 @@ export class FilePicker extends React.Component<
212211
onChange={this._handleOnChange}
213212
/>
214213
)}
215-
{this.state.selectedTab === "keyMultipleUpload" && (
214+
{this.state.selectedTab === FilePickerTab.MultipleUpload && (
216215
<MultipleUploadFilePickerTab
217216
renderCustomMultipleUploadTabContent={
218217
this.props.renderCustomMultipleUploadTabContent
@@ -221,7 +220,7 @@ export class FilePicker extends React.Component<
221220
onChange={this._handleOnChange}
222221
/>
223222
)}
224-
{this.state.selectedTab === "keySite" && (
223+
{this.state.selectedTab === FilePickerTab.Site && (
225224
<SiteFilePickerTab
226225
fileBrowserService={this.fileBrowserService}
227226
includePageLibraries={this.props.includePageLibraries}
@@ -232,37 +231,37 @@ export class FilePicker extends React.Component<
232231
{...linkTabProps}
233232
/>
234233
)}
235-
{this.state.selectedTab === "keyOrgAssets" && (
234+
{this.state.selectedTab === FilePickerTab.OrgAssets && (
236235
<SiteFilePickerTab
237236
breadcrumbFirstNode={{
238237
isCurrentItem: true,
239238
text: strings.OrgAssetsTabLabel,
240-
key: "keyOrgAssets",
239+
key: FilePickerTab.OrgAssets,
241240
}}
242241
fileBrowserService={this.orgAssetsService}
243242
webTitle={this.state.webTitle}
244243
{...linkTabProps}
245244
/>
246245
)}
247-
{this.state.selectedTab === "keyWeb" && (
246+
{this.state.selectedTab === FilePickerTab.Web && (
248247
<WebSearchTab
249248
bingSearchService={this.fileSearchService}
250249
{...linkTabProps}
251250
/>
252251
)}
253-
{this.state.selectedTab === "keyOneDrive" && (
252+
{this.state.selectedTab === FilePickerTab.OneDrive && (
254253
<OneDriveFilesTab
255254
oneDriveService={this.oneDriveService}
256255
{...linkTabProps}
257256
/>
258257
)}
259-
{this.state.selectedTab === "keyRecent" && (
258+
{this.state.selectedTab === FilePickerTab.Recent && (
260259
<RecentFilesTab
261260
fileSearchService={this.fileSearchService}
262261
{...linkTabProps}
263262
/>
264263
)}
265-
{this.state.selectedTab === "keyStockImages" && (
264+
{this.state.selectedTab === FilePickerTab.StockImages && (
266265
<StockImages
267266
language={
268267
this.props.context.pageContext.cultureInfo.currentCultureName
@@ -346,29 +345,29 @@ export class FilePicker extends React.Component<
346345
*/
347346
private _getNavPanelOptions = (): INavLinkGroup[] => {
348347
const addUrl = this.props.storeLastActiveTab !== false;
349-
let links: INavLink[] = [];
348+
let links = [];
350349

351350
if (!this.props.hideRecentTab) {
352351
links.push({
353352
name: strings.RecentLinkLabel,
354353
url: addUrl ? "#recent" : undefined,
355354
icon: "Recent",
356-
key: "keyRecent",
355+
key: FilePickerTab.Recent,
357356
});
358357
}
359358
if (!this.props.hideStockImages) {
360359
links.push({
361360
name: strings.StockImagesLinkLabel,
362361
url: addUrl ? "#stockImages" : undefined,
363-
key: "keyStockImages",
362+
key: FilePickerTab.StockImages,
364363
icon: "ImageSearch",
365364
});
366365
}
367366
if (this.props.bingAPIKey && !this.props.hideWebSearchTab) {
368367
links.push({
369368
name: strings.WebSearchLinkLabel,
370369
url: addUrl ? "#search" : undefined,
371-
key: "keyWeb",
370+
key: FilePickerTab.Web,
372371
icon: "Search",
373372
});
374373
}
@@ -380,46 +379,46 @@ export class FilePicker extends React.Component<
380379
name: strings.OrgAssetsLinkLabel,
381380
url: addUrl ? "#orgAssets" : undefined,
382381
icon: "FabricFolderConfirm",
383-
key: "keyOrgAssets",
382+
key: FilePickerTab.OrgAssets,
384383
});
385384
}
386385
if (!this.props.hideOneDriveTab) {
387386
links.push({
388387
name: "OneDrive",
389388
url: addUrl ? "#onedrive" : undefined,
390-
key: "keyOneDrive",
389+
key: FilePickerTab.OneDrive,
391390
icon: "OneDrive",
392391
});
393392
}
394393
if (!this.props.hideSiteFilesTab) {
395394
links.push({
396395
name: strings.SiteLinkLabel,
397396
url: addUrl ? "#globe" : undefined,
398-
key: "keySite",
397+
key: FilePickerTab.Site,
399398
icon: "Globe",
400399
});
401400
}
402401
if (!this.props.hideLocalUploadTab) {
403402
links.push({
404403
name: strings.UploadLinkLabel,
405404
url: addUrl ? "#upload" : undefined,
406-
key: "keyUpload",
405+
key: FilePickerTab.Upload,
407406
icon: "System",
408407
});
409408
}
410409
if (!this.props.hideLocalMultipleUploadTab) {
411410
links.push({
412411
name: strings.UploadLinkLabel + " " + strings.OneDriveRootFolderName,
413412
url: addUrl ? "#Multipleupload" : undefined,
414-
key: "keyMultipleUpload",
413+
key: FilePickerTab.MultipleUpload,
415414
icon: "BulkUpload",
416415
});
417416
}
418417
if (!this.props.hideLinkUploadTab) {
419418
links.push({
420419
name: strings.FromLinkLinkLabel,
421420
url: addUrl ? "#link" : undefined,
422-
key: "keyLink",
421+
key: FilePickerTab.Link,
423422
icon: "Link",
424423
});
425424
}
@@ -435,10 +434,10 @@ export class FilePicker extends React.Component<
435434
/**
436435
* Sorts navigation tabs based on the tabOrder prop
437436
*/
438-
private _getTabOrder = (links: INavLink[]): INavLink[] => {
437+
private _getTabOrder = (links): INavLink[] => {
439438
const sortedKeys = [
440-
...this.tabOrder,
441-
...links.map(l => l.key).filter(key => !this.tabOrder.includes(key)),
439+
...this.props.tabOrder,
440+
...links.map(l => l.key).filter(key => !this.props.tabOrder.includes(key)),
442441
];
443442

444443
links.sort((a, b) => {
@@ -456,15 +455,15 @@ export class FilePicker extends React.Component<
456455
orgAssetsEnabled: boolean
457456
): string => {
458457
const tabsConfig = [
459-
{ isTabVisible: !props.hideRecentTab, tabKey: "keyRecent" },
460-
{ isTabVisible: !props.hideStockImages, tabKey: "keyStockImages" },
461-
{ isTabVisible: props.bingAPIKey && !props.hideWebSearchTab, tabKey: "keyWeb" },
462-
{ isTabVisible: !props.hideOrganisationalAssetTab && orgAssetsEnabled, tabKey: "keyOrgAssets" },
463-
{ isTabVisible: !props.hideOneDriveTab, tabKey: "keyOneDrive" },
464-
{ isTabVisible: !props.hideSiteFilesTab, tabKey: "keySite" },
465-
{ isTabVisible: !props.hideLocalUploadTab, tabKey: "keyUpload" },
466-
{ isTabVisible: !props.hideLinkUploadTab, tabKey: "keyLink" },
467-
{ isTabVisible: !props.hideLocalMultipleUploadTab, tabKey: "keyMultipleUpload" }
458+
{ isTabVisible: !props.hideRecentTab, tabKey: FilePickerTab.Recent },
459+
{ isTabVisible: !props.hideStockImages, tabKey: FilePickerTab.StockImages },
460+
{ isTabVisible: props.bingAPIKey && !props.hideWebSearchTab, tabKey: FilePickerTab.Web },
461+
{ isTabVisible: !props.hideOrganisationalAssetTab && orgAssetsEnabled, tabKey: FilePickerTab.OrgAssets },
462+
{ isTabVisible: !props.hideOneDriveTab, tabKey: FilePickerTab.OneDrive },
463+
{ isTabVisible: !props.hideSiteFilesTab, tabKey: FilePickerTab.Site },
464+
{ isTabVisible: !props.hideLocalUploadTab, tabKey: FilePickerTab.Upload },
465+
{ isTabVisible: !props.hideLinkUploadTab, tabKey: FilePickerTab.Link },
466+
{ isTabVisible: !props.hideLocalMultipleUploadTab, tabKey: FilePickerTab.MultipleUpload }
468467
];
469468

470469
const visibleTabs = tabsConfig.filter(tab => tab.isTabVisible);
@@ -478,7 +477,7 @@ export class FilePicker extends React.Component<
478477
// If no valid default tab is provided, find the first visible tab in the order
479478
if (this.props.tabOrder) {
480479
const visibleTabSet = new Set(visibleTabKeys);
481-
return this.tabOrder.find(key => visibleTabSet.has(key));
480+
return this.props.tabOrder.find(key => visibleTabSet.has(key));
482481
} else {
483482
return visibleTabKeys[0]; // first visible tab from default order
484483
}

‎src/controls/filePicker/FilePickerTab.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export enum FilePickerTab {
2+
Recent = "keyRecent",
3+
StockImages = "keyStockImages",
4+
Web = "keyWeb",
5+
OrgAssets = "keyOrgAssets",
6+
OneDrive = "keyOneDrive",
7+
Site = "keySite",
8+
Upload = "keyUpload",
9+
Link = "keyLink",
10+
MultipleUpload = "keyMultipleUpload"
11+
}

‎src/controls/filePicker/IFilePickerProps.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { IIconProps } from "@fluentui/react/lib/Icon";
33
import { BaseComponentContext } from '@microsoft/sp-component-base';
44

55
import { IFilePickerResult } from "./FilePicker.types";
6+
import { FilePickerTab } from "./FilePickerTab";
67

78
export interface IFilePickerProps {
89
/**
@@ -179,11 +180,11 @@ export interface IFilePickerProps {
179180
* Specifies tab order
180181
* default ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
181182
*/
182-
tabOrder?: string[];
183+
tabOrder?: FilePickerTab[];
183184
/**
184185
* Specifies default selected tab
185186
* One of the keys from tabOrder
186187
* One of ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
187188
*/
188-
defaultSelectedTab?: string;
189+
defaultSelectedTab?: FilePickerTab;
189190
}

‎src/controls/filePicker/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from "./FilePicker";
22
export * from "./FilePicker.types";
33
export * from "./IFilePickerProps";
44
export * from "./IFilePickerState";
5+
export * from "./FilePickerTab";

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ import { debounce } from 'lodash';
167167
import { mergeStyles } from '@fluentui/react/lib/Styling';
168168
import { sp } from '@pnp/sp';
169169
import styles from './ControlsTest.module.scss';
170+
import { FilePickerTab } from '../../../controls/filePicker/FilePickerTab';
170171

171172
//#endregion
172173

@@ -2137,13 +2138,16 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
21372138
onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}
21382139
context={this.props.context}
21392140
hideRecentTab={false}
2141+
hideLinkUploadTab={true}
21402142
renderCustomUploadTabContent={() => (
21412143
<FolderExplorer context={this.props.context}
21422144
rootFolder={this.rootFolder}
21432145
defaultFolder={this.rootFolder}
21442146
onSelect={this._onFolderSelect}
21452147
canCreateFolders={true}
21462148
/>)}
2149+
tabOrder={[FilePickerTab.Web, FilePickerTab.OneDrive]}
2150+
defaultSelectedTab={FilePickerTab.MultipleUpload}
21472151
/>
21482152
</div>
21492153
<p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>

0 commit comments

Comments
 (0)