Skip to content

Commit 6907dfd

Browse files
michaelmaillotmichaelmaillot
authored
Fixing issue related to organization assets libraries browsing: (#1861)
- Adding definitions to file browsing services and SiteFilePickerTab component - Typo / methods order fix - Adding size info in the ControlsTest webpart
1 parent d980335 commit 6907dfd

4 files changed

Lines changed: 215 additions & 139 deletions

File tree

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

Lines changed: 116 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
2828
key: props.webId || props.context.pageContext.web.id.toString(),
2929
};
3030
// add click event after defining breadcrumb so that it also applies to breadcrumb items passed to the component as properties
31-
breadcrumbSiteNode.onClick = (ev, itm) => { this.onBreadcrumpItemClick(itm); };
31+
breadcrumbSiteNode.onClick = (ev, itm) => { this.onBreadcrumbItemClick(itm); };
3232

3333
const breadcrumbItems: FilePickerBreadcrumbItem[] = [breadcrumbSiteNode];
3434

@@ -59,100 +59,6 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
5959
};
6060
}
6161

62-
private _parseInitialLocationState(folderAbsPath: string, { serverRelativeUrl: webServRelUrl, absoluteUrl: webAbsUrl }): {
63-
libraryServRelUrl: string;
64-
folderServRelPath: string;
65-
folderAbsPath: string;
66-
folderBreadcrumbs: FilePickerBreadcrumbItem[];
67-
} {
68-
// folderAbsPath: "https://tenant.sharepoint.com/teams/Test/DocLib/Folder"
69-
70-
// folderServRelPath: "/teams/Test/DocLib/Folder"
71-
let folderServRelPath = folderAbsPath && folderAbsPath.substr(folderAbsPath.indexOf(webServRelUrl));
72-
73-
// folderAbsPath: "https://tenant.sharepoint.com/DocLib/Folder"
74-
if (webServRelUrl === "/") {
75-
folderServRelPath = folderAbsPath && folderAbsPath.split(webAbsUrl)[1];
76-
}
77-
78-
// folderWebRelPath: "/DocLib/Folder"
79-
const folderWebRelPath = folderServRelPath && folderServRelPath.substr(webServRelUrl.length);
80-
let libInternalName = folderWebRelPath && folderWebRelPath.substring(1, Math.max(folderWebRelPath.indexOf("/", 2), 0) || undefined);
81-
if (webServRelUrl === "/") {
82-
libInternalName = folderWebRelPath && folderWebRelPath.substring(0, Math.max(folderWebRelPath.indexOf("/", 2), 0) || undefined);
83-
}
84-
85-
// libraryServRelUrl: "/teams/Test/DocLib/"
86-
const libraryServRelUrl = urlCombine(webServRelUrl, libInternalName);
87-
88-
let tenantUrl = folderAbsPath.substring(0, folderAbsPath.indexOf(webServRelUrl));
89-
if (webAbsUrl === "/") {
90-
tenantUrl = webAbsUrl;
91-
}
92-
const folderBreadcrumbs: FilePickerBreadcrumbItem[] = this.parseBreadcrumbsFromPaths(
93-
libraryServRelUrl,
94-
folderServRelPath,
95-
folderWebRelPath,
96-
webAbsUrl,
97-
tenantUrl,
98-
libInternalName,
99-
webServRelUrl
100-
);
101-
102-
return { libraryServRelUrl, folderServRelPath, folderAbsPath, folderBreadcrumbs };
103-
}
104-
105-
private parseBreadcrumbsFromPaths(
106-
libraryServRelUrl: string,
107-
folderServRelPath: string,
108-
folderWebRelPath: string,
109-
webAbsUrl: string,
110-
tenantUrl: string,
111-
libInternalName: string,
112-
webServRelUrl: string
113-
): FilePickerBreadcrumbItem[] {
114-
this._defaultLibraryNamePromise = this.props.fileBrowserService.getLibraryNameByInternalName(libInternalName);
115-
const folderBreadcrumbs: FilePickerBreadcrumbItem[] = [];
116-
folderBreadcrumbs.push({
117-
isCurrentItem: false,
118-
text: libInternalName,
119-
key: libraryServRelUrl,
120-
libraryData: {
121-
serverRelativeUrl: libraryServRelUrl,
122-
absoluteUrl: urlCombine(webAbsUrl, libInternalName),
123-
title: libInternalName
124-
},
125-
onClick: (ev, itm) => { this.onBreadcrumpItemClick(itm); }
126-
});
127-
128-
if (folderServRelPath !== libraryServRelUrl) {
129-
let folderLibRelPath = folderWebRelPath.substring(libInternalName.length + 2);
130-
if (webServRelUrl === "/") {
131-
folderLibRelPath = folderWebRelPath.substring(libInternalName.length + 1);
132-
}
133-
134-
let breadcrumbFolderServRelPath = libraryServRelUrl;
135-
136-
const crumbs: FilePickerBreadcrumbItem[] = folderLibRelPath.split("/").map((currFolderName => {
137-
breadcrumbFolderServRelPath += `/${currFolderName}`;
138-
return {
139-
isCurrentItem: false,
140-
text: currFolderName,
141-
key: urlCombine(tenantUrl, breadcrumbFolderServRelPath),
142-
folderData: {
143-
name: currFolderName,
144-
absoluteUrl: urlCombine(tenantUrl, breadcrumbFolderServRelPath),
145-
serverRelativeUrl: breadcrumbFolderServRelPath,
146-
},
147-
onClick: (ev, itm) => { this.onBreadcrumpItemClick(itm); }
148-
};
149-
}));
150-
151-
folderBreadcrumbs.push(...crumbs);
152-
}
153-
return folderBreadcrumbs;
154-
}
155-
15662
public componentDidMount(): void {
15763
this._defaultLibraryNamePromise.then(docLibName => {
15864
if (docLibName) {
@@ -208,9 +114,9 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
208114
}
209115

210116
/**
211-
* Handles breadcrump item click
117+
* Handles breadcrumb item click
212118
*/
213-
private onBreadcrumpItemClick = (node: FilePickerBreadcrumbItem): void => {
119+
private onBreadcrumbItemClick = (node: FilePickerBreadcrumbItem): void => {
214120
let { breadcrumbItems } = this.state;
215121
let breadcrumbClickedItemIndx = 0;
216122
// Site node clicked
@@ -282,7 +188,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
282188
isCurrentItem: true,
283189
text: folder.name,
284190
key: folder.absoluteUrl,
285-
onClick: (ev, itm) => { this.onBreadcrumpItemClick(itm); }
191+
onClick: (ev, itm) => { this.onBreadcrumbItemClick(itm); }
286192
};
287193
breadcrumbItems.push(breadcrumbNode);
288194
}
@@ -308,7 +214,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
308214
isCurrentItem: true,
309215
text: library.title,
310216
key: library.serverRelativeUrl,
311-
onClick: (ev, itm) => { this.onBreadcrumpItemClick(itm); }
217+
onClick: (ev, itm) => { this.onBreadcrumbItemClick(itm); }
312218
};
313219
breadcrumbItems.push(breadcrumbNode);
314220
}
@@ -319,4 +225,115 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
319225
breadcrumbItems
320226
});
321227
}
228+
229+
/**
230+
* Initializes the initial location for the navigation
231+
* @param folderAbsPath Absolute folder path
232+
* @param param1 custom object with absolute & relative Url
233+
* @returns initial location parameters set
234+
*/
235+
private _parseInitialLocationState(folderAbsPath: string, { serverRelativeUrl: webServRelUrl, absoluteUrl: webAbsUrl }): {
236+
libraryServRelUrl: string;
237+
folderServRelPath: string;
238+
folderAbsPath: string;
239+
folderBreadcrumbs: FilePickerBreadcrumbItem[];
240+
} {
241+
// folderAbsPath: "https://tenant.sharepoint.com/teams/Test/DocLib/Folder"
242+
243+
// folderServRelPath: "/teams/Test/DocLib/Folder"
244+
let folderServRelPath = folderAbsPath && folderAbsPath.substr(folderAbsPath.indexOf(webServRelUrl));
245+
246+
// folderAbsPath: "https://tenant.sharepoint.com/DocLib/Folder"
247+
if (webServRelUrl === "/") {
248+
folderServRelPath = folderAbsPath && folderAbsPath.split(webAbsUrl)[1];
249+
}
250+
251+
// folderWebRelPath: "/DocLib/Folder"
252+
const folderWebRelPath = folderServRelPath && folderServRelPath.substr(webServRelUrl.length);
253+
let libInternalName = folderWebRelPath && folderWebRelPath.substring(1, Math.max(folderWebRelPath.indexOf("/", 2), 0) || undefined);
254+
if (webServRelUrl === "/") {
255+
libInternalName = folderWebRelPath && folderWebRelPath.substring(0, Math.max(folderWebRelPath.indexOf("/", 2), 0) || undefined);
256+
}
257+
258+
// libraryServRelUrl: "/teams/Test/DocLib/"
259+
const libraryServRelUrl = urlCombine(webServRelUrl, libInternalName);
260+
261+
let tenantUrl = folderAbsPath.substring(0, folderAbsPath.indexOf(webServRelUrl));
262+
if (webAbsUrl === "/") {
263+
tenantUrl = webAbsUrl;
264+
}
265+
const folderBreadcrumbs: FilePickerBreadcrumbItem[] = this.parseBreadcrumbsFromPaths(
266+
libraryServRelUrl,
267+
folderServRelPath,
268+
folderWebRelPath,
269+
webAbsUrl,
270+
tenantUrl,
271+
libInternalName,
272+
webServRelUrl
273+
);
274+
275+
return { libraryServRelUrl, folderServRelPath, folderAbsPath, folderBreadcrumbs };
276+
}
277+
278+
/**
279+
* Creates a breadcrumb from the paths
280+
* @param libraryServRelUrl Library server relative URL
281+
* @param folderServRelPath Folder server relative path
282+
* @param folderWebRelPath Folder web relative path
283+
* @param webAbsUrl Web absolute URL
284+
* @param tenantUrl Tenant URL
285+
* @param libInternalName Library internal name
286+
* @param webServRelUrl Web server relative URL
287+
* @returns Breadcrumb items
288+
*/
289+
private parseBreadcrumbsFromPaths(
290+
libraryServRelUrl: string,
291+
folderServRelPath: string,
292+
folderWebRelPath: string,
293+
webAbsUrl: string,
294+
tenantUrl: string,
295+
libInternalName: string,
296+
webServRelUrl: string
297+
): FilePickerBreadcrumbItem[] {
298+
this._defaultLibraryNamePromise = this.props.fileBrowserService.getLibraryNameByInternalName(libInternalName);
299+
const folderBreadcrumbs: FilePickerBreadcrumbItem[] = [];
300+
folderBreadcrumbs.push({
301+
isCurrentItem: false,
302+
text: libInternalName,
303+
key: libraryServRelUrl,
304+
libraryData: {
305+
serverRelativeUrl: libraryServRelUrl,
306+
absoluteUrl: urlCombine(webAbsUrl, libInternalName),
307+
title: libInternalName
308+
},
309+
onClick: (ev, itm) => { this.onBreadcrumbItemClick(itm); }
310+
});
311+
312+
if (folderServRelPath !== libraryServRelUrl) {
313+
let folderLibRelPath = folderWebRelPath.substring(libInternalName.length + 2);
314+
if (webServRelUrl === "/") {
315+
folderLibRelPath = folderWebRelPath.substring(libInternalName.length + 1);
316+
}
317+
318+
let breadcrumbFolderServRelPath = libraryServRelUrl;
319+
320+
const crumbs: FilePickerBreadcrumbItem[] = folderLibRelPath.split("/").map((currFolderName => {
321+
breadcrumbFolderServRelPath += `/${currFolderName}`;
322+
return {
323+
isCurrentItem: false,
324+
text: currFolderName,
325+
key: urlCombine(tenantUrl, breadcrumbFolderServRelPath),
326+
folderData: {
327+
name: currFolderName,
328+
absoluteUrl: urlCombine(tenantUrl, breadcrumbFolderServRelPath),
329+
serverRelativeUrl: breadcrumbFolderServRelPath,
330+
},
331+
onClick: (ev, itm) => { this.onBreadcrumbItemClick(itm); }
332+
};
333+
}));
334+
335+
folderBreadcrumbs.push(...crumbs);
336+
}
337+
return folderBreadcrumbs;
338+
}
322339
}

0 commit comments

Comments
 (0)