@weavy/uikit-react 12.1.0 → 14.0.0

package/src/types/types.ts

@@ -1,13 +1,16 @@
 interface WeavyClient {
     url: string,
-    tokenFactory: (() => string | Promise<string>),
+    tokenFactoryInternal: () => Promise<string>,
     subscribe: Function,
     unsubscribe: Function,
+    destroy: Function,
+    get: (url: string, retry?: boolean) => Promise<Response>,
+    post: (url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean) => Promise<Response>
 }
 
 type WeavyClientOptions = {
     url: string,
-    tokenFactory: (() => string | Promise<string>)
+    tokenFactory: (refresh: boolean) => Promise<string>
 }
 
 type WeavyContextProps = {
@@ -21,6 +24,8 @@ type WeavyContextOptions = {
     enableCloudFiles?: boolean,
     enableScrollbarDetection?: boolean,
     filebrowserUrl?: string,
+    pdfWorkerUrl?: string,
+    pdfCMapsUrl?: string,
     reactions?: string[]
 }
 
@@ -87,9 +92,16 @@ type MemberType = {
     name: string,
     display_name: string,
     avatar_url: string,    
-    delivered_at: string,
-    read_at: string,
-    presence: string
+    delivered_at?: string,
+    read_at?: string,
+    presence: string,
+    marked_id?: number,
+    marked_at?: string
+
+}
+
+type MemberTypingType =  MemberType & {
+    time: number
 }
 
 type MessageType = {
@@ -100,6 +112,7 @@ type MessageType = {
     temp?: boolean,
     created_at: string,
     created_by: MemberType,    
+    created_by_id: number,
     attachments: AttachmentType[],
     attachment_ids: number[],
     meeting: MeetingCardType,
@@ -109,10 +122,11 @@ type MessageType = {
  
 type UserType = {
     id: number,
+    uid: string,
+    name: string,
     username: string, 
     email: string,
-    name: string,
-    title: string,
+    display_name: string,    
     avatar_url: string,
     presence: string
 }
@@ -132,12 +146,18 @@ type AttachmentType = {
     size: number,
     provider: string,
     download_url: string,
-    preview_url: string,
+    embed_url: string,
+    external_url: string,
     thumbnail_url: string,
-    external_url: string
+    preview_format: PreviewFormatType,
+    application_url: string,
+    preview_url: string,
+    created_at: string,
+    created_by?: UserType,
+    createdById?: number
 }
 
-type PreviewFormatType = "text"|"code"|"markup"|"image"|"video"|"audio"|"document"|"embed"|"link"|"download"|"none";
+type PreviewFormatType = "audio"|"code"|"embed"|"html"|"image"|"pdf"|"text"|"video"|"none";
 
 type ReactionType = {    
     id: number,
@@ -178,3 +198,45 @@ type BadgeType = {
     rooms: number,
     chat: number
 }
+
+type EntityType = {
+    id: number,
+    type: string
+}
+
+type RealtimeMessage = {
+    action: string,
+    id: number,
+    actor: UserType,
+    message: MessageType
+}
+
+type RealtimeReaction = {
+    action: string,
+    id: number,
+    actor: UserType,
+    entity: EntityType,
+    reaction: string
+}
+
+type RealtimeApp = {
+    action: string,
+    id: number,
+    actor: UserType,
+    app: ConversationType    
+}
+
+type RealtimeMember = {
+    action: string,
+    id: number,
+    actor: UserType,
+    app: ConversationType,
+    member: MemberType    
+}
+
+type RealtimeTyping = {
+    action: string,
+    id: number,
+    actor: MemberTypingType,
+    conversation: ConversationType    
+}

package/src/ui/Icon.tsx

@@ -103,7 +103,7 @@ const Icon = ({ name, color = "", size, ...props }: Props) => {
     let overlayPath = getIconOverlay(name);
 
     return (
-        <span className={'wy-icon ' + color} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
+        <span className={'wy-icon' + (color ? ' wy-icon-' + color : '')} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
             {iconPath ? <MdiIcon.Icon color={color} path={iconPath} size={size} /> : name }
             {overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className="wy-icon-overlay" size={(size || 1) / 2} /> }
         </span>

package/src/ui/Spinner.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type SpinnerProps = {
+    size?: number,
+    spin?: boolean,
+    overlay?: boolean
+}
+  
+const SpinnerImpl = ({ spin = true, size = 24, overlay= false }: SpinnerProps) => {
+ 
+    return (
+      <svg className={classNames("wy-spinner", {"wy-spin" : spin, "wy-spinner-overlay" : overlay })} width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" strokeLinecap="butt" strokeWidth="2" /></svg>
+    )
+}
+
+// Export as replacable UI component
+const UISpinner = { UI: SpinnerImpl };
+export default UISpinner;

package/src/utils/fileUtilities.ts

@@ -144,6 +144,16 @@ export function isVideo (ext: string) {
     }
 }
 
+export function isMarkdown (ext: string) {
+    switch (ext) {
+        case ".markdown":
+        case ".md":
+            return true;
+        default:
+            return false;
+    }
+}
+
 export function isMarkup (ext: string) {
     switch (ext) {
         case ".htm":
@@ -192,10 +202,6 @@ export function isCode (ext: string) {
         case ".lst":
         case ".m":
         case ".make":
-        case ".markdown":
-        case ".md":
-        case ".mdown":
-        case ".mkdn":
         case ".ml":
         case ".mm":
         case ".out":
@@ -228,7 +234,7 @@ export function isCode (ext: string) {
 }
 
 export function isText (ext: string) {
-    if (isCode(ext)) {
+    if (isCode(ext) || isMarkdown(ext)) {
         return true;
     }
     switch (ext) {
@@ -261,99 +267,6 @@ export function isOfficeDocument(path: string) {
     }
 }
 
-export function canResize(path:string) {
-    return isBitmap(path) || isMetaFile(path);
-}
-
-export function canConvertToImage (filename: string) {
-    var ext = getExtension(filename);
-    if (canResize(ext) || isText(ext)) {
-        return true;
-    }
-    switch (ext) {
-        case ".ai":
-        case ".csv":
-        case ".doc":
-        case ".docm":
-        case ".docx":
-        case ".dot":
-        case ".dotm":
-        case ".dotx":
-        case ".eml":
-        case ".eps":
-        case ".msg":
-        case ".odp":
-        case ".ods":
-        case ".odt":
-        case ".ott":
-        case ".pdf":
-        case ".potm":
-        case ".potx":
-        case ".ppt":
-        case ".pptx":
-        case ".pps":
-        case ".ppsx":
-        case ".pptm":
-        case ".ppsm":
-        case ".psd":
-        case ".rtf":
-        case ".svg":
-        case ".xls":
-        case ".xlsb":
-        case ".xlsm":
-        case ".xlsx":
-        case ".xltm":
-        case ".xltx":
-        case ".webp":
-            return true;
-        default:
-            return false;
-    }
-}
-
-export function canConvertToPdf (filename: string) {
-    var ext = getExtension(filename);
-    switch (ext) {
-        case ".ai":
-        case ".doc":
-        case ".docm":
-        case ".docx":
-        case ".dot":
-        case ".dotm":
-        case ".dotx":
-        case ".eml":
-        case ".html":
-        case ".mhtml":
-        case ".msg":
-        case ".odt":
-        case ".ott":
-        case ".pdf":
-        case ".rtf":
-        case ".txt":
-        case ".xml":
-        case ".xls":
-        case ".xlsb":
-        case ".xlsm":
-        case ".xlsx":
-        case ".xltm":
-        case ".xltx":
-        case ".ods":
-        case ".csv":
-        case ".ppt":
-        case ".pptx":
-        case ".pps":
-        case ".ppsx":
-        case ".pptm":
-        case ".ppsm":
-        case ".potx":
-        case ".potm":
-        case ".odp":
-            return true;
-        default:
-            return false;
-    }
-}
-
 export function getIcon (name: string, mediaType?: string): { icon: string, color?: string } {
     var ext = getExtension(name);
 
@@ -408,31 +321,4 @@ export function getIcon (name: string, mediaType?: string): { icon: string, colo
 
     // fallback
     return { icon: "file" };
-}
-
-export function getPreviewFormat(filename:string): PreviewFormatType {
-    var ext = getExtension(filename);
-    if (isCode(ext)) {
-        //return "code";
-    }
-    if (isText(ext)) {
-        return "text";
-    }
-    if (isWebImage(ext)) {
-        return "image";
-    }
-    if (isVideo(ext)) {
-        return "video";
-    }
-    if (isAudio(ext)) {
-        return "audio";
-    }
-    if (canConvertToPdf(ext)) {
-        return "document";
-    }
-    if (canConvertToImage(ext)) {
-        return "image";
-    }
-
-    return "none";
 }

package/src/utils/infiniteScroll.js

@@ -9,6 +9,12 @@
     console.log("creating regular 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 scroller handler function defined")); // default
 
     const nextObserver = new IntersectionObserver((entries, observer) => {
@@ -17,7 +23,7 @@
                 whenNext();
             }
         });
-    }, { root: parent, threshold: 0 });
+    }, { root: intersectionParent, threshold: 0, rootMargin: "500px" });
 
     nextObserver.observe(observeElement);
 
@@ -41,6 +47,9 @@ export function createReverseScroller(observeElement, whenNext) {
     // 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 prevObserver = new IntersectionObserver((entries, observer) => {
@@ -97,7 +106,7 @@ export function createReverseScroller(observeElement, whenNext) {
                 }
             }
         })
-    }, { root: parent, threshold: 0, rootMargin: "500px 0px 0px 0px" });
+    }, { root: intersectionParent, threshold: 0, rootMargin: "500px" });
 
     prevObserver.observe(observeElement);