@weavy/uikit-react 11.0.0 → 11.2.0

package/src/hooks/useMutateTyping.ts

@@ -18,7 +18,7 @@ export default function useMutateTyping() {
 
     const mutateTyping = async ({ id }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/typing", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/typing", {
             method: "PUT",
             body: JSON.stringify({}),
             headers: {

package/src/hooks/usePresence.ts

@@ -6,6 +6,10 @@ export default function usePresence() {
 
     const {client} = useContext(WeavyContext);
     
+    if (!client) {
+        throw new Error('usePresence must be used within an WeavyProvider');
+    }
+
     useEffect(() => {
         client.subscribe("online", "online", handlePresenceChange)
     }, []);

package/src/hooks/useSearchUsers.ts

@@ -12,7 +12,7 @@ export default function useSearchUsers(text: string, options: any) {
     }
 
     const getUsers = async () => {
-        const response = await fetch(client.uri + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
+        const response = await fetch(client.url + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useUser.ts

@@ -1,9 +1,10 @@
 //import { useContext } from "react";
 import { useQuery } from "react-query";
+import WeavyClient from "../client/WeavyClient";
 //import { WeavyContext } from "../contexts/WeavyContext";
 
 /// GET current user
-export default function useUser(client: any) {
+export default function useUser(client: WeavyClient) {
     //const { client } = useContext(WeavyContext);
 
     if (!client) {
@@ -13,7 +14,7 @@ export default function useUser(client: any) {
     const getUser = async () => {
 
         try {
-            const response = await fetch(client.uri + "/api/user", {
+            const response = await fetch(client.url + "/api/user", {
                 headers: {
                     "content-type": "application/json",
                     "Authorization": "Bearer " + await client.tokenFactory()
@@ -27,7 +28,7 @@ export default function useUser(client: any) {
             console.error("Could not load Weavy user data...")
             return null;
         } catch(err: any){
-            console.error(`Could not connect to the Weavy backend. Please make sure ${client.uri} is up and running!`)
+            console.error(`Could not connect to the Weavy backend. Please make sure ${client.url} is up and running!`)
         }
         
         

package/src/index.ts

@@ -1,8 +1,8 @@
 import WeavyClient from './client/WeavyClient';
 import WeavyProvider from './contexts/WeavyContext';
-import  { WeavyContext } from './contexts/WeavyContext';
+import { WeavyContext } from './contexts/WeavyContext';
 import MessengerProvider from './contexts/MessengerContext';
-import  { MessengerContext } from './contexts/MessengerContext';
+import { MessengerContext } from './contexts/MessengerContext';
 import Messenger from './components/Messenger';
 import ConversationBadge from './components/ConversationBadge';
 import ConversationList from './components/ConversationList';

package/src/types/Messenger.ts

@@ -1,3 +1,3 @@
 export interface Messenger {
-    options?: MessengerContextOptions
+    
 }

package/src/types/types.ts

@@ -1,10 +1,17 @@
+interface WeavyClient {
+    url: string,
+    tokenFactory: (() => string | Promise<string>),
+    subscribe: Function,
+    unsubscribe: Function,
+}
+
 type WeavyClientOptions = {
-    uri: string,
+    url: string,
     tokenFactory: (() => string | Promise<string>)
 }
 
 type WeavyContextProps = {
-    client: any,
+    client: WeavyClient | null,
     options?: WeavyContextOptions  
 };
 
@@ -12,11 +19,12 @@ type WeavyContextOptions = {
     zoomAuthenticationUrl?: string,
     teamsAuthenticationUrl?: string,
     enableCloudFiles?: boolean,
-    filebrowserUrl?: string
+    enableScrollbarDetection?: boolean,
+    filebrowserUrl?: string,
+    reactions?: string[]
 }
 
 type MessengerContextProps = {    
-    options?: MessengerContextOptions,    
     selectedConversationId: null | number,
     setSelectedConversationId: Function    
 };
@@ -25,11 +33,6 @@ type UserContextProps = {
     user: UserType    
 };
 
-
-type MessengerContextOptions = {
-    reactions?: string[]
-}
-
 type PreviewContextProps = {
     openPreview: Function,
     closePreview: Function

package/src/utils/scrollbarDetection.js

@@ -0,0 +1,50 @@
+import { prefix } from "./styles";
+
+// SCROLLBAR DETECTION
+
+/**
+ * The target which the scrollbar classname will be applied to.
+ * @type Element
+ */
+export var scrollbarClassnameTarget = document.documentElement;
+
+/**
+ * The callback function for the scrollbar observer.
+ * @param {ResizeObserverTarget[]} entries 
+ */
+export function checkScrollbar(entries) {
+  var element, overflowWidth;
+  for (var entry in entries) {
+    element = entries[entry].target;
+    try {
+      overflowWidth = element === document.documentElement ? window.innerWidth : element.clientWidth;
+      if (overflowWidth !== element.offsetWidth) {
+        // we have visible scrollbars, add .scrollbar to html element
+        scrollbarClassnameTarget.classList.add(prefix("scrollbars"));
+      } else {
+        scrollbarClassnameTarget.classList.remove(prefix("scrollbars"));
+      }
+    } catch (e) {
+      console.warn("scrollbar detection failed", e);
+    }
+  }
+}
+
+/**
+ * Creates a scrollbar detection element and starts observing it.
+ */
+export default function observeScrollbars() {
+  // insert scrollbar detection element
+  var scrollCheck = document.getElementById(prefix("scrollbar-detection"));
+
+  if (!scrollCheck) {
+    scrollCheck = document.createElement("aside");
+    scrollCheck.id = prefix("scrollbar-detection");
+    scrollCheck.className = prefix("scrollbar-detection");
+    document.documentElement.insertBefore(scrollCheck, document.body);
+  }
+
+  var scrollObserver = new ResizeObserver(checkScrollbar);
+  scrollObserver.observe(scrollCheck);
+}
+

package/src/utils/styles.ts

@@ -13,7 +13,7 @@ var themePrefix = "wy";
   
   
   /**
-   * Prefixes one or more classnames (with or without dot) using the themePrefix
+   * Prefixes one or more classnames (with or without dot or double dash) using the themePrefix
    * @param {...string} strs 
    * @returns string[]
    */
@@ -22,18 +22,33 @@ var themePrefix = "wy";
     if (_prefix) {
       strs = strs.map((str) => {
         str ??= '';
-        if (str[0] === '.') {
-          return `.${_prefix}-${str.substring(1)}`;
-        } else {
-          return `${_prefix}-${str}`;
+        if (str[0] === '.') { // .example-class
+          // Skip if already set
+          if (str.substring(1).indexOf(_prefix + "-") !== 0) {
+            return `.${_prefix}-${str.substring(1)}`;
+          }
+        } else if (str.indexOf("--") === 0) { // --example-var
+          // Skip if already set
+          if (str.substring(2).indexOf(_prefix + "-") !== 0) {
+            return `--${_prefix}-${str.substring(2)}`;
+          }
+        } else { // example-class
+          // Skip if already set
+          if (str.indexOf(_prefix + "-") !== 0) {
+            return `${_prefix}-${str}`;
+          }
         }
+
+        // return untouched str
+        return str;
+        
       })
     }
     return strs;
   }
 
   /**
-   * Prefixes one classname (with or without dot) using the themePrefix
+   * Prefixes a classname string (containing one or multiple space-separated classnames, with or without dot or double dash) using the themePrefix
    * @param {string} str 
    * @returns string
    */