@salesforcedevs/dx-components 0.43.3-tree-selected-scroll → 0.43.3-tree-selected-scroll-2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.3-tree-selected-scroll",
+    "version": "0.43.3-tree-selected-scroll-2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/base-elements/sidebarBase/sidebarBase.ts

@@ -0,0 +1,25 @@
+import { LightningElement } from "lwc";
+
+const HEIGHT_OF_SIDEBAR_ITEM = 32;
+
+export class SidebarBase extends LightningElement {
+    /*Scroll to selected tree item */
+    private onSelectedItemRendered(event: CustomEvent) {
+        event.preventDefault();
+        const selectedTreeItem = event.detail.element;
+        if (selectedTreeItem) {
+            const sidebarContent = this.template.querySelector(
+                ".sidebar-content-tree"
+            );
+            if (sidebarContent) {
+                sidebarContent.scrollTo({
+                    top:
+                        selectedTreeItem.offsetTop +
+                        HEIGHT_OF_SIDEBAR_ITEM + // add height of sidebar item
+                        HEIGHT_OF_SIDEBAR_ITEM * 2, // add height of 2 more items so that user can see at least two more items after selected item
+                    behavior: "smooth"
+                });
+            }
+        }
+    }
+}

package/src/modules/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
     </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { track as trackAnalytics } from "dx/instrumentation";
-import { LightningElement, api, track } from "lwc";
+import { api, track } from "lwc";
 import {
     TreeNode,
     SidebarGtmAction,
@@ -9,11 +9,12 @@ import {
 import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
+import { SidebarBase } from "base-elements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoSearchHub!: string;

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -49,7 +49,7 @@
                     ></dx-input>
                 </div>
             </div>
-            <div class="sidebar-content" if:true={anyResultMatch}>
+            <div class="sidebar-content sidebar-content-tree" if:true={anyResultMatch}>
                 <dx-tree
                     for:each={filteredTrees}
                     for:item="tree"
@@ -57,6 +57,7 @@
                     tree-root={tree.tree}
                     onselect={onSelect}
                     value={value}
+                    onselecteditemrendered={onSelectedItemRendered}
                 ></dx-tree>
             </div>
             <dx-empty-state

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -1,15 +1,16 @@
 import cx from "classnames";
 import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
+import { api } from "lwc";
 
 import { TreeNode, SidebarGtmAction } from "typings/custom";
 import { toJson } from "utils/normalizers";
+import { SidebarBase } from "base-elements/sidebarBase";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
     @api

package/src/modules/dx/treeItem/treeItem.css

@@ -4,11 +4,6 @@
     display: block;
 }
 
-/* This is to scroll to some more space in the bottom so that user will see some more available items in the bottom */
-dx-tree-tile {
-    scroll-margin-bottom: 90px;
-}
-
 button {
     width: 100%;
     text-align: left;

package/src/modules/dx/treeItem/treeItem.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dx/instrumentation";
 import { SidebarGtmAction } from "typings/custom";
+import { isInViewport } from "utils/browser";
 
 const DEFAULT_TARGET = "_self";
 
@@ -62,18 +63,19 @@ export default class TreeItem extends LightningElement {
     }
 
     renderedCallback(): void {
+        this.sendEventToParentIfSelected();
+    }
+
+    private sendEventToParentIfSelected(): void {
         /**
-         * This is to scroll to the selected element in the sidebar if it's not visible in the viewport
-         * Please refer https://stackoverflow.com/a/67433987/5059959 for reason of values given to scrollIntoView props
+         * This is to send selected element reference to parent if it's not visible in the viewport
+         * Parent component will use the elements offsetTop scrollTo that element's position
          */
-
         if (this.isSelected) {
             const element = this.template.querySelector("dx-tree-tile");
-            if (element) {
-                element.scrollIntoView({
-                    block: "nearest",
-                    inline: "nearest",
-                    behavior: "smooth"
+            if (element && !isInViewport(element)) {
+                this.fireEvent("selecteditemrendered", {
+                    element
                 });
             }
         }

package/src/modules/utils/browser/browser.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns whether given element is in browser viewport or not
+ */
+function isInViewport(element: HTMLElement): boolean {
+    if (element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <=
+                (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+    return false;
+}
+
+export { isInViewport };