@inboxsdk/core 0.2.29-alpha.3 → 0.2.29-alpha.5

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts

@@ -23,16 +23,17 @@ export declare class CollapsiblePanelView extends CollapsiblePanelView_base {
         /** A hover popover has both ACTIVE _and_ HOVER */
         readonly HOVER: "aJu";
         readonly COLLAPSED_HOVER: "bym";
+        readonly PANEL_LESS: "a3W";
     };
-    get element(): HTMLElement | undefined;
+    get loading(): boolean;
+    setLoading(loading: boolean): void;
+    get panelDescriptor(): AppMenuItemPanelDescriptor;
     set panelDescriptor(panelDescriptor: AppMenuItemPanelDescriptor);
-    constructor(driver: GmailDriver);
-    /**
-     * @internal
-     */
-    activate(): void;
+    get element(): HTMLElement;
+    get scrollablePaneElement(): Element | null;
+    constructor(driver: GmailDriver, panelDescriptor: AppMenuItemPanelDescriptor);
     remove(): void;
-    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView | undefined;
+    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView;
 }
 export {};
 //# sourceMappingURL=collapsible-panel-view.d.ts.map

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,eAAO,MAAM,YAAY,OAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,8BAAwC,CAAC;AAQpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/B,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;;MAGzC;IAQX,IAAI,OAAO,4BAEV;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;gBAEW,MAAM,EAAE,WAAW;IAS/B;;OAEG;IACH,QAAQ;IAQR,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CAkK/C"}
+{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAI1C,eAAO,MAAM,YAAY,OAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,8BAAwC,CAAC;AAcpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/B,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;;;MAIzC;IASX,IAAI,OAAO,YAEV;IAED,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,IAAI,eAAe,+BAElB;IAED,IAAI,eAAe,CAAC,eAAe,4BAAA,EAGlC;IAED,IAAI,OAAO,gBAEV;IAED,IAAI,qBAAqB,mBAExB;gBAGC,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,0BAA0B;IAmB7C,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CA4M/C"}

package/src/platform-implementation-js/views/collapsible-panel-view.js

@@ -6,11 +6,18 @@ import autoHtml from 'auto-html';
 import querySelector from '../lib/dom/querySelectorOrFail';
 import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
 import NavItemView from './nav-item-view';
+import { stylesStream } from '../dom-driver/gmail/gmail-driver/track-gmail-styles';
+import isEqual from 'fast-deep-equal';
 export const NATIVE_CLASS = 'aqn';
 export const INBOXSDK_CLASS = 'inboxsdk__collapsiblePanel';
 const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS} oy8Mbf`;
 const PRIMARY_BUTTON_ELEMENT_CLASS = 'T-I T-I-KE L3';
 const PRIMARY_BUTTON_ELEMENT_SELECTOR = '.T-I.T-I-KE.L3';
+const scrollablePanelClass = 'at9';
+const scrollablePanelSelector = `.${scrollablePanelClass}`;
+const loadingElementClass = 'inboxsdk__collapsiblePanel_loading_container';
+const panelLoadingClass = `${loadingElementClass}--active`;
+const loadingElementSelector = `.${loadingElementClass}`;
 const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
 export class CollapsiblePanelView extends EventEmitter {
     static elementSelectors = {
@@ -23,6 +30,7 @@ export class CollapsiblePanelView extends EventEmitter {
         /** A hover popover has both ACTIVE _and_ HOVER */
         HOVER: 'aJu',
         COLLAPSED_HOVER: 'bym',
+        PANEL_LESS: 'a3W',
     };
     #panelDescriptor;
     #element;
@@ -30,42 +38,57 @@ export class CollapsiblePanelView extends EventEmitter {
     #id = Math.random().toFixed(3);
     #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
     #driver;
-    get element() {
-        return this.#element;
+    #loading;
+    get loading() {
+        return this.#loading;
+    }
+    setLoading(loading) {
+        const changed = this.#loading !== loading;
+        this.#loading = loading;
+        if (changed) {
+            this.#update();
+        }
+    }
+    get panelDescriptor() {
+        return this.#panelDescriptor;
     }
     set panelDescriptor(panelDescriptor) {
         this.#panelDescriptor = panelDescriptor;
         this.#update();
     }
-    constructor(driver) {
+    get element() {
+        return this.#element;
+    }
+    get scrollablePaneElement() {
+        return this.element.querySelector(scrollablePanelSelector);
+    }
+    constructor(driver, panelDescriptor) {
         super();
         this.#driver = driver;
+        this.#panelDescriptor = panelDescriptor;
+        this.#loading = panelDescriptor.loadingIcon != null;
         this.#element = this.#setupElement();
         this.#element.addEventListener('mouseleave', (e) => {
             this.emit('blur', e);
         });
-    }
-    /**
-     * @internal
-     */
-    activate() {
-        const element = this.element;
-        if (!element)
-            return;
-        element?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-        element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+        stylesStream
+            .skipDuplicates((a, b) => isEqual(a, b))
+            .onValue(({ type }) => {
+            if (type === 'theme') {
+                this.#update();
+            }
+        });
     }
     remove() {
         if (this.#destroyed)
             return;
         this.#destroyed = true;
-        this.element?.remove();
+        this.element.remove();
         this.emit('destroy');
     }
     addNavItem(navItemDescriptor) {
-        const element = this.element;
-        if (!element)
-            return;
+        this.setLoading(false);
+        const { element } = this;
         const navMenuContainerElement = querySelector(element, NAV_MENU_CONTAINER_ELEMENT_SELECTOR);
         const appId = `collapsible-panel-${this.#id}`;
         const navItemDescriptorPropertyStream = kefirCast(Kefir, navItemDescriptor).toProperty();
@@ -73,23 +96,39 @@ export class CollapsiblePanelView extends EventEmitter {
         const navItemView = new NavItemView(appId, this.#driver, navItemDescriptorPropertyStream, gmailNavItemView);
         return navItemView;
     }
+    #extractPrimaryButtonTheme() {
+        const { iconUrl } = this.panelDescriptor.primaryButton ?? {};
+        if (!iconUrl) {
+            return;
+        }
+        const theme = GmailElementGetter.isDarkTheme() ? iconUrl.darkTheme : iconUrl.lightTheme;
+        if (!theme) {
+            return;
+        }
+        if (typeof theme === 'string') {
+            return {
+                panelHovered: theme,
+                panelDefault: theme,
+            };
+        }
+        else {
+            return {
+                panelDefault: theme.panelDefault,
+                panelHovered: theme.panelHovered,
+            };
+        }
+    }
     #setupElement() {
-        const { iconUrl: themedIcons, className, name = '', } = this.#panelDescriptor?.primaryButton ?? {};
+        const { panelDescriptor } = this;
+        const { loadingIcon } = panelDescriptor;
+        const { className, name = '' } = panelDescriptor?.primaryButton ?? {};
         const element = document.createElement('div');
-        const burgerMenuOpen = GmailElementGetter.isAppBurgerMenuOpen();
-        element.className = cx(ELEMENT_CLASS, {
-            [CollapsiblePanelView.elementCss.COLLAPSED]: !burgerMenuOpen,
-        });
+        element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className);
         const primaryButtonClass = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
-        let iconUrl;
-        if (themedIcons) {
-            if (GmailElementGetter.isDarkTheme()) {
-                iconUrl = themedIcons.darkTheme;
-            }
-            else {
-                iconUrl = themedIcons.lightTheme;
-            }
-        }
+        const loadingElClass = cx(loadingElementClass, {
+            [panelLoadingClass]: this.#loading,
+        });
+        const { panelDefault: defaultIconUrl, panelHovered: hoverPanelIconUrl } = this.#extractPrimaryButtonTheme() ?? {};
         element.innerHTML = autoHtml `
       <div class="aBO">
         <div class="aic">
@@ -99,7 +138,8 @@ export class CollapsiblePanelView extends EventEmitter {
             </div>
           </div>
         </div>
-        <div class="at9">
+        <div class="${scrollablePanelClass}">
+          <div class="${loadingElClass}">${loadingIcon ? { __html: loadingIcon } : ''}</div>
           <div class="Ls77Lb aZ6">
             <div class="pp" style="user-select: none;">
               <div>
@@ -123,42 +163,42 @@ export class CollapsiblePanelView extends EventEmitter {
           </div>
         </div>
       </div>
-      <div class="aTV" style="top: 27px;"></div>
+      <div class="aTV"></div>
     `.trim();
         const primaryBtnEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
-        primaryBtnEl.style.setProperty('--background-image', iconUrl ? `url(${iconUrl})` : 'unset');
+        primaryBtnEl.style.setProperty('--background-image', defaultIconUrl ? `url(${defaultIconUrl})` : 'unset');
+        primaryBtnEl.style.setProperty('--background-image--hover', hoverPanelIconUrl ? `url(${hoverPanelIconUrl})` : 'unset');
         primaryBtnEl.addEventListener('click', this.#onPrimaryButtonClick);
         return element;
     }
     #onPrimaryButtonClick = (e) => {
-        this.#panelDescriptor?.primaryButton?.onClick?.(e);
+        this.panelDescriptor.primaryButton?.onClick?.(e);
     };
     #update() {
         const element = this.element;
         if (!element)
             return;
-        const { ACTIVE, COLLAPSED } = CollapsiblePanelView.elementCss;
-        const isActive = element.classList.contains(ACTIVE);
-        const isCollapsed = element.classList.contains(COLLAPSED);
-        element.className = cx(ELEMENT_CLASS, this.#panelDescriptor?.className, {
-            [ACTIVE]: isActive,
-            [COLLAPSED]: isCollapsed,
-        });
+        const existingClassNames = Object.values(CollapsiblePanelView.elementCss).filter((className) => element.classList.contains(className));
+        element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className, ...existingClassNames);
         this.#updateName(element);
         this.#updateIcon(element);
+        this.#updateScrollablePanelLoading(element);
     }
     #updateIcon(element) {
         const iconContainerEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
-        const { iconUrl, className } = this.#panelDescriptor?.primaryButton ?? {};
-        if (iconUrl) {
-            const backgroundImage = `url(${GmailElementGetter.isDarkTheme()
-                ? iconUrl.darkTheme
-                : iconUrl.lightTheme})`;
-            iconContainerEl.style.setProperty('--background-image', backgroundImage);
-        }
-        else {
-            iconContainerEl.style.setProperty('--background-image', 'unset');
+        const { panelDefault, panelHovered } = this.#extractPrimaryButtonTheme() ?? {};
+        for (const [key, value] of Object.entries({
+            '--background-image--hover': panelHovered,
+            '--background-image': panelDefault,
+        })) {
+            if (value) {
+                iconContainerEl.style.setProperty(key, `url(${value})`);
+            }
+            else {
+                iconContainerEl.style.removeProperty(key);
+            }
         }
+        const { className } = this.panelDescriptor.primaryButton ?? {};
         iconContainerEl.className = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
     }
     #updateName(element) {
@@ -166,6 +206,18 @@ export class CollapsiblePanelView extends EventEmitter {
         if (!buttonTextEl) {
             return;
         }
-        buttonTextEl.textContent = this.#panelDescriptor?.primaryButton?.name ?? '';
+        buttonTextEl.textContent = this.panelDescriptor.primaryButton?.name ?? '';
+    }
+    #updateScrollablePanelLoading(element) {
+        const scrollablePanelLoadingEl = element.querySelector(loadingElementSelector);
+        if (!scrollablePanelLoadingEl) {
+            return;
+        }
+        if (this.loading) {
+            scrollablePanelLoadingEl.classList.add(panelLoadingClass);
+        }
+        else {
+            scrollablePanelLoadingEl.classList.remove(panelLoadingClass);
+        }
     }
 }