working

microsoft · Aug 6, 2023 · 3787bb6 · 3787bb6
1 parent 4c94c3b
commit 3787bb6
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 92 deletions.
diff --git a/packages/web-components/fast-foundation/src/data-list/data-list.ts b/packages/web-components/fast-foundation/src/data-list/data-list.ts
@@ -43,9 +43,10 @@ export class FASTDataList extends FASTElement {
      * @remarks
      * HTML Attribute: orientation
      */
+    @attr({ attribute: "orientation" })
     public orientation: Orientation = Orientation.vertical;
     protected orientationChanged(): void {
-        if (this.$fastController.isConnected && this.behaviorOrchestrator) {
+        if (this.$fastController.isConnected) {
             this.updateItemTemplate();
         }
     }

diff --git a/packages/web-components/fast-foundation/src/data-list/stories/data-list.register.ts b/packages/web-components/fast-foundation/src/data-list/stories/data-list.register.ts
@@ -4,9 +4,16 @@ import { dataListTemplate } from "../data-list.template.js";
 
 const styles = css`
     :host {
-        height: 100%;
-        display: block;
+        max-height: 100%;
+        display: flex;
         overflow-y: scroll;
+        flex-direction: column;
+    }
+
+    :host([orientation="horizontal"]) {
+        overflow-y: hidden;
+        overflow-x: scroll;
+        flex-direction: row;
     }
 `;
 

diff --git a/packages/web-components/fast-foundation/src/data-list/stories/data-list.stories.ts b/packages/web-components/fast-foundation/src/data-list/stories/data-list.stories.ts
@@ -1,9 +1,7 @@
 import { html, when } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
-import type { FASTDataList as FoundationDataList } from "../data-list.js";
-
-type DataListStoryArgs = Args & FoundationDataList;
-type DataListStoryMeta = Meta<DataListStoryArgs>;
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
+import type { FASTDataList } from "../data-list.js";
 
 // create a sample data set
 function newDataSet(rowCount: number, prefix: number): object[] {
@@ -58,7 +56,7 @@ const itemContentsTemplate = html`
     </fast-card>
 `;
 
-const storyTemplate = html<DataListStoryArgs>`
+const storyTemplate = html<StoryArgs<FASTDataList>>`
     <fast-data-list
         :sourceItems="${newDataSet(100, 1)}"
         orientation="${x => x.orientation}"
@@ -89,10 +87,13 @@ export default {
             control: { type: "text" },
         },
     },
-} as DataListStoryMeta;
+} as Meta<FASTDataList>;
+
+export const DataList: Story<FASTDataList> = renderComponent(storyTemplate).bind({});
 
-export const DataList = (args: DataListStoryArgs) => {
-    const storyFragment = new DocumentFragment();
-    storyTemplate.render(args, storyFragment);
-    return storyFragment.firstElementChild;
+export const DataListHorizontal: Story<FASTDataList> = renderComponent(
+    storyTemplate
+).bind({});
+DataListHorizontal.args = {
+    orientation: "horizontal",
 };
diff --git a/packages/web-components/fast-foundation/src/utilities/idle-load-queue.ts b/packages/web-components/fast-foundation/src/utilities/idle-load-queue.ts
@@ -24,10 +24,6 @@ export class DefaultIdleLoadQueue implements IdleLoadQueue {
     public currentCallbackElement: Element | undefined;
     public currentCallback: (() => void) | undefined;
 
-    constructor() {
-        console.log("cons");
-    }
-
     /**
      * Suspends idle loading
      *
@@ -42,7 +38,6 @@ export class DefaultIdleLoadQueue implements IdleLoadQueue {
      * @public
      */
     public requestIdleCallback(target: Element, callback: () => void): void {
-        console.log(`request ${this.callbackQueue.size}`);
         if (this.callbackQueue.has(target)) {
             return;
         }
@@ -58,21 +53,19 @@ export class DefaultIdleLoadQueue implements IdleLoadQueue {
      * @public
      */
     public cancelIdleCallback(target: Element): void {
-        console.log("cancel");
-
         if (this.callbackQueue.has(target)) {
             this.callbackQueue.delete(target);
             return;
         }
 
         if (this.currentCallbackElement === target && this.currentCallbackId) {
-            console.log("cancel current");
             (window as unknown as WindowWithIdleCallback).cancelIdleCallback(
                 this.currentCallbackId
             );
             this.currentCallbackId = undefined;
             this.currentCallbackElement = undefined;
             this.currentCallback = undefined;
+            this.nextCallback();
         }
     }
 
@@ -100,8 +93,6 @@ export class DefaultIdleLoadQueue implements IdleLoadQueue {
             return;
         }
 
-        console.log(`next ${new Date().getUTCMilliseconds()}`);
-
         const [nextCallbackElement] = this.callbackQueue.keys();
         this.currentCallback = this.callbackQueue.get(nextCallbackElement);
         this.callbackQueue.delete(nextCallbackElement);

diff --git a/packages/web-components/fast-foundation/src/virtual-list/stories/virtual-list.register.ts b/packages/web-components/fast-foundation/src/virtual-list/stories/virtual-list.register.ts
@@ -8,6 +8,12 @@ const styles = css`
         display: block;
         overflow-y: scroll;
     }
+    :host([orientation="horizontal"]) {
+        width: 100%;
+        overflow-y: hidden;
+        overflow-x: scroll;
+    }
+
     .container {
         position: relative;
     }

diff --git a/packages/web-components/fast-foundation/src/virtual-list/stories/virtual-list.stories.ts b/packages/web-components/fast-foundation/src/virtual-list/stories/virtual-list.stories.ts
@@ -1,9 +1,7 @@
 import { html, when } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
-import type { FASTVirtualList as FoundationVirtualList } from "../virtual-list.js";
-
-type VirtualListStoryArgs = Args & FoundationVirtualList;
-type VirtualListStoryMeta = Meta<VirtualListStoryArgs>;
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
+import type { FASTVirtualList } from "../virtual-list.js";
 
 // create a sample data set
 function newDataSet(rowCount: number, prefix: number): object[] {
@@ -60,7 +58,7 @@ const itemContentsTemplate = html`
     </fast-card>
 `;
 
-const storyTemplate = html<VirtualListStoryArgs>`
+const storyTemplate = html<StoryArgs<FASTVirtualList>>`
     <fast-virtual-list
         :sourceItems="${newDataSet(5000, 1)}"
         :sizemap="${x => x.sizemap}"
@@ -116,10 +114,15 @@ export default {
             control: { type: "text" },
         },
     },
-} as VirtualListStoryMeta;
+} as Meta<FASTVirtualList>;
+
+export const VirtualList: Story<FASTVirtualList> = renderComponent(storyTemplate).bind(
+    {}
+);
 
-export const VirtualList = (args: VirtualListStoryArgs) => {
-    const storyFragment = new DocumentFragment();
-    storyTemplate.render(args, storyFragment);
-    return storyFragment.firstElementChild;
+export const VirtualListHorizontal: Story<FASTVirtualList> = renderComponent(
+    storyTemplate
+).bind({});
+VirtualListHorizontal.args = {
+    orientation: "horizontal",
 };
diff --git a/packages/web-components/fast-foundation/src/virtual-list/virtual-list-item.ts b/packages/web-components/fast-foundation/src/virtual-list/virtual-list-item.ts
@@ -1,5 +1,4 @@
 import { FASTElement, HTMLView, observable, ViewTemplate } from "@microsoft/fast-element";
-import { convertStylePropertyPixelsToNumber } from "@microsoft/fast-web-utilities";
 import { IdleLoadQueue } from "../utilities/idle-load-queue.js";
 import type { SizeMap } from "./virtual-list.options.js";
 

diff --git a/packages/web-components/fast-foundation/src/virtual-list/virtual-list.template.ts b/packages/web-components/fast-foundation/src/virtual-list/virtual-list.template.ts
@@ -77,7 +77,7 @@ export function virtualListTemplate<T extends FASTVirtualList>(
                         ? "100%"
                         : `${x.virtualizer.totalListSize}px`};
                 height: ${x =>
-                    x.orientation !== Orientation.vertical
+                    x.orientation === Orientation.horizontal
                         ? "100%"
                         : `${x.virtualizer.totalListSize}px`};
             "

diff --git a/packages/web-components/fast-foundation/src/virtual-list/virtual-list.ts b/packages/web-components/fast-foundation/src/virtual-list/virtual-list.ts
@@ -51,9 +51,8 @@ export class FASTVirtualList extends FASTDataList {
     // protected viewportChanged(): void {
     //     if (this.$fastController.isConnected) {
     //         this.viewportElement = this.getViewport();
-    //         this.updateDimensions();
     //     }
-    //}
+    // }
 
     /**
      * The HTML element being used as the viewport
@@ -67,6 +66,13 @@ export class FASTVirtualList extends FASTDataList {
     //      }
     //  }
 
+    protected orientationChanged(): void {
+        super.orientationChanged();
+        if (this.$fastController.isConnected) {
+            this.virtualizer.orientation = this.orientation;
+        }
+    }
+
     /**
      *
      *
@@ -87,6 +93,7 @@ export class FASTVirtualList extends FASTDataList {
         );
 
         this.virtualizer.itemSize = this.itemSize;
+        this.virtualizer.orientation = this.orientation;
         this.virtualizer.connect(
             this.sourceItems,
             this.viewportElement,
@@ -129,7 +136,7 @@ export class FASTVirtualList extends FASTDataList {
     }
 
     protected getRepeatOptions(): RepeatOptions {
-        //positioning is always true for virtual lists
+        // positioning is always true for virtual lists
         const options = super.getRepeatOptions();
         options.positioning = true;
         return options;