@weavy/uikit-react 14.0.4 → 15.0.0

package/src/utils/fileUtilities.ts

@@ -1,6 +1,6 @@
-import { isConstructorDeclaration } from "typescript";
+import { getAllJSDocTagsOfKind, isConstructorDeclaration } from "typescript";
 
-export const fileSizeAsString = (size: number) => {
+export const fileSizeAsString = (size: number, significantDigits: number = 3) => {
     var s = size;
     var format = [" B", " KB", " MB", " GB", " TB", " PB", " EB", " ZB", " YB"];
     var i = 0;
@@ -8,14 +8,15 @@ export const fileSizeAsString = (size: number) => {
         s = (100 * s / 1024) / 100.0;
         i++;
     }
-    return s.toLocaleString() + format[i];
+
+    return s.toLocaleString(undefined, { maximumSignificantDigits: significantDigits }) + format[i];
 }
 
-export function getExtension (name: string) {
-    return name.substring(name.lastIndexOf('.') , name.length) || name;
+export function getExtension(name: string) {
+    return (name.substring(name.lastIndexOf('.'), name.length) || name).toLowerCase();
 }
 
-export function isAudio (ext: string) {
+export function isAudio(ext: string) {
     switch (ext) {
         case ".aac":
         case ".aif":
@@ -41,7 +42,7 @@ export function isAudio (ext: string) {
     }
 }
 
-export function isImage (ext: string) {
+export function isImage(ext: string) {
     switch (ext) {
         case ".ai":
         case ".apng":
@@ -66,7 +67,7 @@ export function isImage (ext: string) {
     }
 }
 
-export function isWebImage (path: string) {
+export function isWebImage(path: string) {
     // see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
     var ext = getExtension(path);
     switch (ext) {
@@ -113,7 +114,7 @@ export function isMetaFile(path: string) {
     }
 }
 
-export function isVideo (ext: string) {
+export function isVideo(ext: string) {
     switch (ext) {
         case ".3g2":
         case ".asx":
@@ -144,7 +145,7 @@ export function isVideo (ext: string) {
     }
 }
 
-export function isMarkdown (ext: string) {
+export function isMarkdown(ext: string) {
     switch (ext) {
         case ".markdown":
         case ".md":
@@ -154,7 +155,7 @@ export function isMarkdown (ext: string) {
     }
 }
 
-export function isMarkup (ext: string) {
+export function isMarkup(ext: string) {
     switch (ext) {
         case ".htm":
         case ".html":
@@ -166,7 +167,7 @@ export function isMarkup (ext: string) {
     }
 }
 
-export function isCode (ext: string) {
+export function isCode(ext: string) {
     if (isMarkup(ext)) {
         return true;
     }
@@ -233,7 +234,7 @@ export function isCode (ext: string) {
     }
 }
 
-export function isText (ext: string) {
+export function isText(ext: string) {
     if (isCode(ext) || isMarkdown(ext)) {
         return true;
     }
@@ -267,7 +268,7 @@ export function isOfficeDocument(path: string) {
     }
 }
 
-export function getIcon (name: string, mediaType?: string): { icon: string, color?: string } {
+export function getIcon(name: string, mediaType?: string): { icon: string, color?: string } {
     var ext = getExtension(name);
 
     if (ext === "") return { icon: "file" };
@@ -284,41 +285,224 @@ export function getIcon (name: string, mediaType?: string): { icon: string, colo
         return { icon: "file-code", color: "purple" };
     } else if (isText(ext)) {
         return { icon: "file-document" };
-    } else{
+    } else {
         switch (ext) {
             case ".7z":
             case ".zip":
-                return { icon: "file-compressed", color: "orange"};                
+                return { icon: "file-compressed", color: "orange" };
             case ".doc":
             case ".docm":
             case ".docx":
             case ".dotm":
             case ".dotx":
-                return { icon: "file-word", color: "native"};                                                
+                return { icon: "file-word", color: "native" };
             case ".eml":
             case ".msg":
-                return { icon: "email", color: ""};                                                
+                return { icon: "email", color: "" };
             case ".xls":
             case ".xlsm":
             case ".xlsx":
             case ".xltx":
-                return { icon: "file-excel", color: "native"};
+                return { icon: "file-excel", color: "native" };
             case ".pdf":
-                return { icon: "file-pdf", color: "native"};                                                
+                return { icon: "file-pdf", color: "native" };
             case ".ppt":
             case ".pptm":
             case ".pptx":
             case ".potx":
-                return { icon: "file-powerpoint", color: "native"};                                                                
+                return { icon: "file-powerpoint", color: "native" };
             case ".pages":
-                return { icon: "file", color: "orange"};                                                                                
+                return { icon: "file", color: "orange" };
             case ".numbers":
-                return { icon: "file", color: "green"};                                                                
+                return { icon: "file", color: "green" };
             case ".keynote":
-                return { icon: "file", color: "blue"};                                                                
+                return { icon: "file", color: "blue" };
         }
     }
 
     // fallback
     return { icon: "file" };
+}
+
+/**
+ * Returns preview formats that can be rendered directly in the browser
+ * 
+ * @param {string} name - Name of the file
+ * @returns PreviewFormatType
+ */
+export function getWebPreviewFormat(name: string): PreviewFormatType {
+    var ext = getExtension(name);
+
+    if (ext === "") return "none";
+
+    // TODO: Handle embed?
+
+    if (isWebImage(ext)) {
+        return "image";
+    } else if (isCode(ext)) {
+        return "code";
+    } else if (isText(ext)) {
+        return "text";
+    } else if (isAudio(ext)) {
+        return "audio";
+    } else if (isVideo(ext)) {
+        return "video";
+    }
+
+    return "none";
+}
+
+export function getProvider(provider: string | undefined): ProviderType | "" {
+    switch (provider) {
+        case "Google Drive":
+            return "google-drive";
+        case "Dropbox":
+            return "dropbox";
+        case "OneDrive":
+            return "onedrive";
+        case "Box":
+            return "box";
+        default:
+            return "";
+    }
+}
+
+export function getKind(name: string): FileKindType {
+    var kind: FileKindType = "file";
+    var ext = getExtension(name);
+
+    switch (ext) {
+        case ".7z":
+        case ".zip":
+            kind = "archive";
+            break;
+        case ".aac":
+        case ".aif":
+        case ".aiff":
+        case ".au":
+        case ".gsm":
+        case ".m4a":
+        case ".mid":
+        case ".midi":
+        case ".mka":
+        case ".mp3":
+        case ".oga":
+        case ".ogg":
+        case ".ra":
+        case ".ram":
+        case ".snd":
+        case ".spx":
+        case ".wav":
+        case ".wma":
+            kind = "audio";
+            break;
+        case ".c":
+        case ".cgi":
+        case ".cpp":
+        case ".cs":
+        case ".cshtml":
+        case ".css":
+        case ".html":
+        case ".java":
+        case ".js":
+        case ".json":
+        case ".less":
+        case ".php":
+        case ".pl":
+        case ".ps1":
+        case ".py":
+        case ".rb":
+        case ".rs":
+        case ".scss":
+        case ".sh":
+        case ".swift":
+        case ".sql":
+        case ".ts":
+        case ".xml":
+        case ".yaml":
+        case ".yml":
+            kind = "code";
+            break;
+        case ".doc":
+        case ".docm":
+        case ".docx":
+        case ".dotm":
+        case ".dotx":
+        case ".gdoc":
+        case ".pages":
+        case ".pdf":
+            kind = "document";
+            break;
+        case ".eml":
+        case ".msg":
+            kind = "email";
+            break;
+        case ".gslides":
+        case ".keynote":
+        case ".ppt":
+        case ".pptm":
+        case ".pptx":
+        case ".potx":
+            kind = "presentation";
+            break;
+        case ".gsheet":
+        case ".numbers":
+        case ".xls":
+        case ".xlsm":
+        case ".xlsx":
+        case ".xltx":
+            kind = "spreadsheet";
+            break;
+        case ".ai":
+        case ".apng":
+        case ".bmp":
+        case ".emf":
+        case ".eps":
+        case ".gif":
+        case ".heic":
+        case ".ico":
+        case ".jpg":
+        case ".jpeg":
+        case ".png":
+        case ".psd":
+        case ".svg":
+        case ".tif":
+        case ".tiff":
+        case ".webp":
+        case ".wmf":
+            kind = "image";
+            break;
+        case ".md":
+        case ".markdown":
+        case ".txt":
+            kind = "text";
+            break;
+        case ".3g2":
+        case ".asx":
+        case ".asf":
+        case ".avi":
+        case ".flv":
+        case ".mk3d":
+        case ".mkv":
+        case ".mov":
+        case ".mp4":
+        case ".mpeg":
+        case ".mpg":
+        case ".ogm":
+        case ".ogv":
+        case ".ogx":
+        case ".qt":
+        case ".rm":
+        case ".rv":
+        case ".smi":
+        case ".smil":
+        case ".swf":
+        case ".webm":
+        case ".wmv":
+        case ".xaml":
+            kind = "video";
+            break;
+    }
+
+    return kind;
 }

package/src/utils/infinite-scroll.js

@@ -0,0 +1,103 @@
+import { getNextPositionedChild, getScrollParent } from "./scroll-position"
+
+const THRESHOLD = 0; // as soon as even one pixel is visible, the callback will be run
+const ROOT_MARGIN = "24px"; // margin around the root, used to grow or shrink the root element's bounding box before computing intersections
+
+/**
+ * Creates a new regular scroll listener
+ * 
+ * @param {Element} observeElement 
+ * @param {Function} whenNext
+ * @returns IntersectionObserver
+ */
+ export function createScroller(observeElement, whenNext, reverse = false) {
+    // inverted infinite scroll (e.g. for messages)
+    let prevSleep = false;
+
+    //console.log("creating reverse scroller");
+    var parent = getScrollParent(observeElement);
+
+    // Disable scroll anchoring https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+    parent.style.overflowAnchor = "none";
+
+    // Bug using scrollingElement in frames. See https://github.com/w3c/IntersectionObserver/issues/372
+    var intersectionParent = (parent === document.documentElement ? document : parent);
+
+    whenNext ??= () => Promise.reject(new Error("No reverse scroller handler function defined")); // default
+
+    const scrollObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting && !prevSleep) {
+                prevSleep = true;
+
+                // find first child (that is regularly positioned)
+                if (reverse) {
+                    var nextPositionedChild = getNextPositionedChild(entry.target);
+                    var prevScrollHeight = parent.scrollHeight;
+                    var childOffsetBefore = nextPositionedChild.offsetTop;
+                }
+                
+                let afterNext = () => {
+                    queueMicrotask(() => { // Place last in microtask queue
+                        // scroll parent so that first child remains in the same position as before
+                        // NOTE: when this is called via observer we need to requestAnimationFrame, otherwise scrolling happens to fast (before the DOM has been updated)
+                        if (prevScrollHeight !== parent.scrollHeight) {
+                            // layout already rendered
+                            //console.log("infinite scroll updated instantly");
+                            if (reverse) {
+                                let diff = nextPositionedChild.offsetTop - childOffsetBefore;
+                                parent.scrollTop += diff;
+                            }
+                            requestAnimationFrame(() => prevSleep = false);
+                        } else {
+                            queueMicrotask(() => {
+                                if (prevScrollHeight !== parent.scrollHeight) {
+                                    // layout rendered after 
+                                    //console.log("infinite scroll updated by microtask");
+                                    if (reverse) {
+                                        let diff = nextPositionedChild.offsetTop - childOffsetBefore;
+                                        parent.scrollTop += diff;
+                                    }
+                                    requestAnimationFrame(() => prevSleep = false);
+                                } else {
+                                    // layout not rendered yet
+                                    requestAnimationFrame(() => {
+                                        //console.log("infinite scroll updated by animationframe", diff);
+                                        if (reverse) {
+                                            let diff = nextPositionedChild.offsetTop - childOffsetBefore;
+                                            parent.scrollTop += diff;
+                                        }
+                                        requestAnimationFrame(() => prevSleep = false);
+                                    });
+                                }
+                            });
+                        }
+                    });
+                };
+
+                let whenNextResult = whenNext();
+
+                if (whenNextResult) {
+                    whenNextResult.then(afterNext);
+                } else {
+                    afterNext();
+                }
+            }
+        })
+    }, { root: intersectionParent, threshold: THRESHOLD, rootMargin: ROOT_MARGIN });
+
+    scrollObserver.observe(observeElement);
+
+    return scrollObserver;
+}
+
+/**
+ * Creates a new reverse scroll listener
+ * 
+ * @param {Element} observeElement 
+ * @param {Function} whenNext 
+ * @returns IntersectionObserver
+ */
+export function createReverseScroller(observeElement, whenNext) {
+    return createScroller(observeElement, whenNext, true);
+}

package/src/utils/mentions.ts

@@ -0,0 +1,50 @@
+import { EditorView, MatchDecorator, Decoration, ViewPlugin, WidgetType, ViewUpdate } from "@codemirror/view"
+import { RangeSet } from "@codemirror/state"
+
+const mentionMatcher = new MatchDecorator({
+    regexp: /(\[(.+?)\])(\(@u(\d+)\))/g,
+    decoration: match => Decoration.replace({
+        // NOTE: can't use backspace to go "up one row" when inclusive is false
+        inclusive: true,
+        widget: new MentionWidget(match)
+    })
+})
+
+class MentionWidget extends WidgetType {
+
+    match: RegExpExecArray;
+
+    constructor(match: RegExpExecArray) {
+        super();
+        this.match = match;
+    }
+
+    eq(other: MentionWidget) {
+        return other.match[1] === this.match[1];
+    }
+
+    toDOM() {
+        let wrap = document.createElement("span");
+        wrap.className = "wy-mention";
+        wrap.innerHTML = typeof (this.match[5]) !== "undefined" ? this.match[5] : this.match[2];
+        return wrap
+    }
+    ignoreEvent() { return false }
+}
+
+export const mentions = ViewPlugin.fromClass(class {
+
+    mentions: RangeSet<Decoration>;
+
+    constructor(view: EditorView) {
+        this.mentions = mentionMatcher.createDeco(view)
+    }
+    update(update: ViewUpdate) {
+        this.mentions = mentionMatcher.updateDeco(update, this.mentions)
+    }
+}, {
+    decorations: instance => instance.mentions,
+    provide: plugin => EditorView.atomicRanges.of(view => {
+        return view.plugin(plugin)?.mentions || Decoration.none
+    })
+})

package/src/utils/openUrl.ts

@@ -0,0 +1,41 @@
+export default function openUrl(url: string = "", target: string = "", name: string = "", download: boolean = false) {
+    if (url) {
+        // a is needed for downloading object urls
+        const a = document.createElement('a');
+        
+        if (download) {
+            if(/^(data:|blob:)/.test(url)) {
+                // Only set download param for files not from server
+                a.download = name || 'download'
+            } else {
+                // add download parameter, needed for CORS downloads
+                url = url.includes("?d=1") || url.includes("&d=1") ? url : url.includes("?") ? url + "&d=1" : url + "?d=1";
+            } 
+        }
+
+        if (target) {
+            a.target = target;
+        }
+
+        a.href = url;
+    
+        document.body.appendChild(a);
+    
+        try {
+            a.click();
+        } catch(e) {
+            console.warn("Could not open link normally, trying fallback");
+            if (!/^(?:blob:|data:)/.test(url)) {
+                try {
+                    window.open(url, target);
+                } catch(e) {
+                    console.error(`Could not ${download ? "download" : "open" } ${name}`)
+                }
+            } else {
+                console.error(`Could not ${download ? "download" : "open" } ${name}`)
+            }
+        }
+    
+        document.body.removeChild(a);
+    }
+}

package/src/utils/{scrollToBottom.js → scroll-position.js}

@@ -1,3 +1,19 @@
+
+/**
+ * Gets the next positioned child relative to the element.
+ * 
+ * @param {Element} el - Reference element in the scrollable area
+ * @returns Element
+ */
+export function getNextPositionedChild(el) {
+    while (el) {
+        el = el.nextElementSibling;
+        if (/absolute|sticky|fixed/.test(getComputedStyle(el).position) === false) {
+            return el;
+        }
+    }
+}
+  
 /**
  * Finds the nearest scrollable area. Defaults to document.scrollingElement.
  * 
@@ -41,9 +57,9 @@ export function isParentAtBottom(element, bottomThreshold) {
         bottomThreshold ??= 32; // Minimum 1 to catch float errors
 
         let area = getScrollParent(element);
-        //console.log("isParentAtBottom", area.scrollTop, area.clientHeight, area.scrollHeight, Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) <= bottomThreshold)
+        
         // We need to account for scrollTop being a float
-        return Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) <= bottomThreshold;
+        return Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) < bottomThreshold;
     }
     return false;
 }
@@ -54,22 +70,47 @@ export function isParentAtBottom(element, bottomThreshold) {
  * @param {Element?} element - Element in the scroll area
  * @param {boolean} [smooth] - Use smooth scrolling instead of instant scrolling
  */
-export function scrollParentToBottom(element, smooth) {
+export async function scrollParentToBottom(element, smooth) {
     if (element) {
         let area = getScrollParent(element);
-        //console.log("scrolling to bottom", area.scrollHeight);
+        //console.log("scrolling to bottom", {scrollTop: area.scrollTop, clientHeight: area.clientHeight, scrollHeight: area.scrollHeight}, (area.scrollTop + area.clientHeight) - area.scrollHeight);
 
         // Don't bother if the scroll already is correct
-        if (area.scrollTop + area.clientHeight !== area.scrollHeight) {
+        // We need to account for scrollTop being a float by using 1px diff
+        if (Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) > 1) {
             if (smooth) {
                 area.scrollTo({
-                    top: area.scrollHeight,
-                    left: 0,
-                    behavior: 'smooth'
+                top: area.scrollHeight,
+                left: 0,
+                behavior: 'smooth'
                 });
             } else {
                 area.scrollTop = area.scrollHeight;
             }
         }
+
+        // Check when the scroll is done
+        await new Promise((resolve) => {
+            let lastScrollTop = area.scrollTop;
+            let scrollCheck = () => {
+                if (smooth && area.scrollTop === lastScrollTop) {
+                    //console.log("smooth scroll interrupted, performing unsmooth scroll instead");
+                    area.scrollTop = area.scrollHeight;
+                }
+
+                lastScrollTop = area.scrollTop;
+
+                // We need to account for scrollTop being a float by using 1px diff
+                if (Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) > 1) {
+                    requestAnimationFrame(scrollCheck);
+                } else {
+                    resolve();
+                }
+            }
+
+            requestAnimationFrame(scrollCheck);
+        })
+        //console.log("scrolltoBottom done")
     }
-}
+}
+  

package/src/utils/utils.js

@@ -237,7 +237,7 @@ export function sanitizeJSON(key, value) {
 }
 
 /**
- * Changes a string to snake_case from camelCase, PascalCase and spinal-case.
+ * Changes a string to snake_case from camelCase, PascalCase and spinal-case/kebab-case.
  * 
  * @param {string} str - The string to change to snake case
  * @returns {string} The processed string as snake_case
@@ -250,6 +250,20 @@ export function toSnakeCase(str) {
   }
 }
 
+/**
+ * Changes a string to kebab-case/spinal-case from camelCase, PascalCase and snake_case.
+ * 
+ * @param {string} str - The string to change to kebab case
+ * @returns {string} The processed string as kebab-case
+ */
+ export function toKebabCase(str) {
+  if (str.length > 0) {
+    return str.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').replace(/_|\s+/g, '-').toLowerCase();
+  } else {
+    return str;
+  }
+}
+
 /**
  * Changes a string to camelCase from PascalCase, spinal-case and snake_case.
  * 

package/tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2019",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */

package/dist/cjs/components/ConversationForm.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    conversationId: number;
-    handleInsert: Function;
-};
-declare const ConversationForm: ({ conversationId, handleInsert }: Props) => JSX.Element;
-export default ConversationForm;

package/dist/cjs/components/File.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    id: number;
-    name: string;
-    className?: string;
-    icon: string;
-};
-declare const File: ({ id, name, className, icon }: Props) => JSX.Element;
-export default File;

package/dist/cjs/components/FileBrowser.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    onFileAdded: Function;
-};
-declare const FileBrowser: ({ onFileAdded }: Props) => JSX.Element;
-export default FileBrowser;