@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha0.4

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

@@ -1,255 +0,0 @@
-import cx from "classnames";
-import { track as trackAnalytics } from "dx/instrumentation";
-import { LightningElement, api, track } from "lwc";
-import {
-    TreeNode,
-    SidebarGtmAction,
-    SidebarSearchResult
-} from "typings/custom";
-import { getSidebarSearchParams } from "utils-internal/coveo";
-import { toJson } from "utils/normalizers";
-import SidebarSearch from "dx/sidebarSearch";
-
-const MOBILE_SIZE_MATCH = "768px";
-const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
-
-export default class Sidebar extends LightningElement {
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoSearchHub!: string;
-    @api coveoAdvancedQueryConfig!: string;
-    @api header: string = "";
-
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
-
-    @api
-    get trees() {
-        return this._trees;
-    }
-
-    set trees(value: string | Array<TreeNode>) {
-        let parsedValue = toJson(value) || [];
-        if (parsedValue && !Array.isArray(parsedValue)) {
-            parsedValue = [parsedValue];
-        }
-
-        parsedValue.forEach((tree: TreeNode) => this.assignValueToLabel(tree));
-
-        this._trees = parsedValue.map((tree: TreeNode) => ({
-            key: this.makeKey(),
-            tree
-        }));
-    }
-
-    @api
-    setInputValue(searchTerm: string) {
-        (
-            this.template.querySelector(
-                "dx-sidebar-search"
-            ) as unknown as SidebarSearch
-        )?.setInputValue(searchTerm);
-    }
-
-    private expanded: boolean = true;
-    private _toggleHovered: boolean = false;
-    private _value?: string = undefined;
-
-    @track
-    private _trees!: Array<TreeNode>;
-
-    private mobile: boolean = true;
-    private matchMedia!: MediaQueryList;
-    private valueToLabel: { [key: string]: string } = {};
-
-    private isSearchLoading: boolean = false;
-    private searchValue: string | null = null;
-    private searchResults: SidebarSearchResult[] = [];
-    private scrollToSelectedSearchResult: boolean = false;
-    private selectedSearchResultIndex: number = -1;
-    private requestedFetchMoreResults: boolean = false;
-
-    private get areResultsEmpty(): boolean {
-        return (
-            (!this.searchResults ||
-                (this.searchResults && this.searchResults.length < 1)) &&
-            !this.isSearchLoading
-        );
-    }
-
-    private get isSearchEmpty(): boolean {
-        return this.isUserSearching && this.areResultsEmpty;
-    }
-
-    private get showResultsHeading(): boolean {
-        return this.isUserSearching && !this.areResultsEmpty;
-    }
-
-    private get isUserSearching(): boolean {
-        return !!this.searchValue || this.isSearchLoading;
-    }
-
-    private get showSearchResults(): boolean {
-        return (
-            !!this.searchValue && !this.isSearchLoading && !this.areResultsEmpty
-        );
-    }
-
-    private get isNearBottomOfSearchResults(): boolean {
-        const scrollArea = this.template.querySelector(
-            ".sidebar-content-search"
-        );
-        if (!scrollArea) {
-            return false;
-        }
-
-        const { scrollHeight, scrollTop } = scrollArea;
-        const { height } = scrollArea?.getBoundingClientRect();
-
-        return scrollHeight - scrollTop - height < 300;
-    }
-
-    private get containerClass() {
-        return cx("container", {
-            collapsed: !this.expanded,
-            "container-border-active": this._toggleHovered,
-            "container-mobile": this.mobile,
-            "user-searching": this.isUserSearching,
-            "show-tree": !this.isUserSearching,
-            "search-empty": this.isSearchEmpty
-        });
-    }
-
-    private get headerMobile() {
-        return (
-            (this.value && this.valueToLabel[this.value]) ||
-            Object.values(this.valueToLabel)[0] ||
-            ""
-        );
-    }
-
-    constructor() {
-        super();
-
-        if (getSidebarSearchParams()) {
-            this.isSearchLoading = true;
-            this.scrollToSelectedSearchResult = true;
-        }
-    }
-
-    renderedCallback() {
-        this.initializeSearchScrollPosition();
-    }
-
-    connectedCallback() {
-        this.matchMedia = window.matchMedia(
-            `(max-width: ${MOBILE_SIZE_MATCH})`
-        );
-
-        this.expanded = !this.matchMedia.matches;
-        this.onMediaChange(this.matchMedia);
-        this.matchMedia.addEventListener("change", this.onMediaChange);
-    }
-
-    disconnectedCallback() {
-        this.matchMedia.removeEventListener("change", this.onMediaChange);
-    }
-
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
-        (this.mobile = event.matches);
-
-    private onSelect(event: CustomEvent) {
-        this._value = event.detail.name;
-    }
-
-    private onToggleClick(event: Event) {
-        this.expanded = !this.expanded;
-        this._toggleHovered = false;
-        const sideNavAction: SidebarGtmAction = this.expanded
-            ? "expand"
-            : "collapse";
-        trackAnalytics(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sideNavAction,
-            clickText: TOGGLE_BUTTON_LABEL
-        });
-    }
-
-    private onToggleMouseEnter() {
-        this._toggleHovered = true;
-    }
-
-    private onToggleMouseLeave() {
-        this._toggleHovered = false;
-    }
-
-    private makeKey(): string {
-        return Math.random().toString(36).substring(7);
-    }
-
-    private onSearchChange(e: CustomEvent) {
-        this.requestedFetchMoreResults = false;
-        this.searchResults = e.detail.results;
-        this.searchValue = e.detail.value;
-    }
-
-    private onSearchLoading(e: CustomEvent) {
-        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
-            this.selectedSearchResultIndex = this.searchResults.findIndex(
-                (r) => r.selected
-            );
-        }
-        this.isSearchLoading = e.detail;
-    }
-
-    private onSidebarSearchContentScroll() {
-        if (this.isSearchLoading) {
-            return;
-        }
-
-        const search = this.template.querySelector(
-            "dx-sidebar-search"
-        ) as unknown as SidebarSearch;
-
-        if (
-            this.isNearBottomOfSearchResults &&
-            search &&
-            !this.requestedFetchMoreResults
-        ) {
-            this.requestedFetchMoreResults = true;
-            search.fetchMoreResults();
-        }
-    }
-
-    private initializeSearchScrollPosition() {
-        if (
-            this.scrollToSelectedSearchResult &&
-            this.selectedSearchResultIndex >= 0
-        ) {
-            const selectedResult = this.template.querySelector(
-                `dx-sidebar-search-result:nth-child(${
-                    this.selectedSearchResultIndex + 1
-                })`
-            );
-            if (!selectedResult || !selectedResult.parentNode) {
-                return;
-            }
-            (selectedResult.parentNode as HTMLElement).scrollTop =
-                selectedResult.offsetTop -
-                (selectedResult.parentNode as HTMLElement).offsetTop;
-            this.scrollToSelectedSearchResult = false;
-        }
-    }
-
-    private assignValueToLabel(node: TreeNode): void {
-        this.valueToLabel[node.name] = node.label;
-        if (node.children && node.children.length > 0) {
-            node.children.forEach((child) => this.assignValueToLabel(child));
-        }
-    }
-}

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

@@ -1,178 +0,0 @@
-import { TreeNode } from "typings/custom";
-
-export const SAMPLE_TREES: TreeNode[] = [
-    {
-        label: "Getting started",
-        name: "started",
-        isExpanded: true,
-        children: [
-            {
-                label: "Introduction",
-                name: "introduction"
-            },
-            {
-                label: "Getting started",
-                name: "started-child"
-            },
-            {
-                label: "Authentication",
-                name: "authentication"
-            },
-            {
-                label: "Token",
-                name: "token"
-            },
-            {
-                label: "Error",
-                name: "error"
-            },
-            {
-                label: "Limits",
-                name: "limit"
-            },
-            {
-                label: "Release note",
-                name: "release-note"
-            }
-        ]
-    },
-    {
-        label: "Einstein Vision",
-        name: "einstein-vision",
-        children: [
-            {
-                label: "Introduction",
-                name: "einstein-introduction"
-            },
-            {
-                label: "Terminology",
-                name: "terminology"
-            },
-            {
-                label: "Object detection quickstart for beginner",
-                name: "object-quickstart",
-                isExpanded: true,
-                children: [
-                    {
-                        label: "Scenario: this block is intended to show how a large text looks like in the sidebar",
-                        name: "scenario",
-                        isExpanded: true,
-                        children: [
-                            {
-                                label: "Scenario A: this block is intended to show how a large text looks like in the sidebar",
-                                name: "scenario-a"
-                            },
-                            {
-                                label: "Scenario B",
-                                name: "scenario-b"
-                            }
-                        ]
-                    },
-                    {
-                        label: "Prerequisites",
-                        name: "prerequisites"
-                    }
-                ]
-            },
-            {
-                label: "Best Practices",
-                name: "best-practices"
-            }
-        ]
-    }
-];
-
-export const SAMPLE_TREES_WITH_METHODS: TreeNode[] = [
-    {
-        label: "Getting started",
-        name: "started",
-        isExpanded: true,
-        children: [
-            {
-                label: "Introduction",
-                name: "introduction",
-                method: "post"
-            },
-            {
-                label: "Getting started",
-                name: "started-child",
-                method: "get"
-            },
-            {
-                label: "Authentication",
-                name: "authentication",
-                method: "delete"
-            },
-            {
-                label: "Token",
-                name: "token",
-                method: "patch"
-            },
-            {
-                label: "Error",
-                name: "error",
-                method: "put"
-            },
-            {
-                label: "Limits",
-                name: "limit",
-                method: "get"
-            },
-            {
-                label: "Release note",
-                name: "release-note",
-                method: "post"
-            }
-        ]
-    },
-    {
-        label: "Einstein Vision",
-        name: "einstein-vision",
-        children: [
-            {
-                label: "Introduction",
-                name: "einstein-introduction",
-                method: "get"
-            },
-            {
-                label: "Terminology",
-                name: "terminology",
-                method: "get"
-            },
-            {
-                label: "Object detection quickstart for beginner",
-                name: "object-quickstart",
-                isExpanded: true,
-                children: [
-                    {
-                        label: "Scenario",
-                        name: "scenario",
-                        isExpanded: true,
-                        children: [
-                            {
-                                label: "Scenario A: this block is intended to show how a large text looks like in the sidebar",
-                                name: "scenario-a",
-                                method: "post"
-                            },
-                            {
-                                label: "Scenario B",
-                                name: "scenario-b",
-                                method: "put"
-                            }
-                        ]
-                    },
-                    {
-                        label: "Prerequisites",
-                        name: "prerequisites",
-                        method: "delete"
-                    }
-                ]
-            },
-            {
-                label: "Best Practices",
-                name: "best-practices",
-                method: "patch"
-            }
-        ]
-    }
-];