this.handleFileClick(file, e)} tabindex="0">
+
this.handleSharedInsightClick(file, e)} tabindex="0">
{
- const fileList = this.renderRoot.querySelector('.file-list');
+ const target = event.target as HTMLElement;
+ let fileList: HTMLElement;
+ if (!target.classList) {
+ fileList = this.renderRoot.querySelector('.file-list-children');
+ } else {
+ fileList = this.renderRoot.querySelector('.file-list');
+ }
let focusedItem: HTMLElement;
if (!fileList?.children.length) {
@@ -822,6 +831,18 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
this.files = files;
}
}
+ for (const file of this.files) {
+ if (file?.folder?.childCount > 0) {
+ // expand the file with children
+ const driveId = file?.parentReference?.driveId;
+ const itemId = file?.id;
+ const iterator = await getDriveFilesByIdIterator(graph, driveId, itemId, 5);
+ if (iterator) {
+ const children = [...iterator.value];
+ file.children = children;
+ }
+ }
+ }
}
/**
@@ -894,15 +915,52 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio
this.requestUpdate();
}
- private readonly handleFileClick = (file: DriveItem | SharedInsight, e?: MouseEvent) => {
- if (e && isSharedInsight(file) && file.resourceReference?.webUrl && !this.disableOpenOnClick) {
+ private readonly handleSharedInsightClick = (file: SharedInsight, e?: MouseEvent) => {
+ if (file.resourceReference?.webUrl && !this.disableOpenOnClick) {
e.preventDefault();
window.open(file.resourceReference.webUrl, '_blank', 'noreferrer');
- } else if (!isSharedInsight(file) && file?.webUrl && !this.disableOpenOnClick) {
+ }
+ };
+
+ private readonly handleFileClick = (file: DriveItem) => {
+ const hasChildFolders = file?.folder?.childCount > 0 && file?.children;
+ // the item has child folders, on click should get the child folders and render them
+ if (hasChildFolders) {
+ this.showChildren(file.id);
+ return;
+ }
+
+ if (file?.webUrl && !this.disableOpenOnClick) {
window.open(file.webUrl, '_blank', 'noreferrer');
}
};
+ private readonly showChildren = (fileId: string) => {
+ const itemDOM = this.renderRoot.querySelector(`#file-list-item-${fileId}`);
+ this.renderChildren(fileId, itemDOM);
+ };
+
+ private readonly renderChildren = (itemId: string, itemDOM: Element) => {
+ const fileListName = customElementHelper.isDisambiguated
+ ? `${customElementHelper.prefix}-file-list`
+ : 'mgt-file-list';
+ const childrenContainer = this.renderRoot.querySelector(`#file-list-children-${itemId}`);
+ if (!childrenContainer) {
+ const fl = document.createElement(fileListName);
+ fl.setAttribute('item-id', itemId);
+ fl.setAttribute('id', `file-list-children-${itemId}`);
+ fl.setAttribute('class', 'file-list-children-show');
+ itemDOM.after(fl);
+ } else {
+ // toggle to show/hide the children container
+ if (childrenContainer.classList.contains('file-list-children-hide')) {
+ childrenContainer.setAttribute('class', 'file-list-children-show');
+ } else {
+ childrenContainer.setAttribute('class', 'file-list-children-hide');
+ }
+ }
+ };
+
/**
* Get file extension string from file name
*
diff --git a/packages/mgt-element/src/utils/version.ts b/packages/mgt-element/src/utils/version.ts
index a44b7a71fa..9600038d9c 100644
--- a/packages/mgt-element/src/utils/version.ts
+++ b/packages/mgt-element/src/utils/version.ts
@@ -8,4 +8,4 @@
// THIS FILE IS AUTO GENERATED
// ANY CHANGES WILL BE LOST DURING BUILD
-export const PACKAGE_VERSION = '4.2.4';
+export const PACKAGE_VERSION = '4.3.0';
diff --git a/stories/components/fileList/fileList.html.stories.js b/stories/components/fileList/fileList.html.stories.js
index d73a19d1ff..5e0e250160 100644
--- a/stories/components/fileList/fileList.html.stories.js
+++ b/stories/components/fileList/fileList.html.stories.js
@@ -102,60 +102,38 @@ export const openFolderBreadcrumbs = () => html`
-