@weavy/uikit-react 11.0.1 → 12.1.0

package/src/components/ConversationList.tsx

@@ -5,7 +5,6 @@ import ConversationListItem from './ConversationListItem';
 import NewConversation from './NewConversation';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
-import { prefix as wy } from "../utils/styles";
 
 const ConversationList = () => {
     const { client } = useContext(WeavyContext);
@@ -40,19 +39,19 @@ const ConversationList = () => {
 
     return (
         <>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
                     <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={24} />
                     <div>Messenger</div>
                     <NewConversation />
                 </nav>
             </header>
-            <div className={wy('conversations')}>
+            <div className="wy-conversations">
                 {data && data.data?.map((item) =>
                     <ConversationListItem key={item.id} refetchConversations={refetch} item={item} />
                 )}
 
-                {/* <a className={wy('pager')}><svg className={wy('spinner spin')} width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2"></circle></svg></a> */}
+                {/* <a className="wy-pager"><svg className="wy-spinner wy-spin" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2"></circle></svg></a> */}
             </div>
         </>
     )

package/src/components/ConversationListItem.tsx

@@ -13,8 +13,7 @@ import Typing from './Typing';
 import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
-import { prefix as wy } from "../utils/styles";
-
+import classNames from 'classnames';
 
 const ConversationListItem = ({ item, refetchConversations }: ConversationListItemProps) => {
 
@@ -40,10 +39,10 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     }, [item.id])
 
     useEffect(() => {
-        client.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+        client?.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
 
         return () => {
-            client.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+            client?.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
         }
     }, [item.id])
 
@@ -79,25 +78,25 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     // }
 
     return (
-        <div className={wy('conversation' + (item.is_unread ? ' unread' : ''))} key={item.id}>
-            <a className={wy('conversation-link' + (selectedConversationId === item.id ? ' active': ''))} href="#" onClick={(e) => handleClick(e, item.id)}>
+        <div className={classNames('wy-conversation', {"wy-unread": item.is_unread})} key={item.id}>
+            <a className={classNames('wy-conversation-link', { "wy-active": selectedConversationId === item.id})} href="#" onClick={(e) => handleClick(e, item.id)}>
                 <Avatar src={item.avatar_url} id={otherId || -1} presence={item.type !== ChatRoom ? "away" : ""} name={item.display_name} />
 
-                <div className={wy('conversation-body')}>
-                    <div className={wy('conversation-header')}>
-                        <div className={wy('conversation-title')}>{item.display_name}</div>
+                <div className="wy-conversation-body">
+                    <div className="wy-conversation-header">
+                        <div className="wy-conversation-title">{item.display_name}</div>
                         {item.last_message &&
-                            <time className={wy('conversation-time')} dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
+                            <time className="wy-conversation-time" dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
                         }
                     </div>
-                    <div className={wy('conversation-summary')}>
+                    <div className="wy-conversation-summary">
                         <Typing id={item.id} context="listitem">
 
                             {item.last_message?.html &&
-                                <span className={wy('typing-hide')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
+                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
                             }
                             {!item.last_message?.html &&
-                                <span className={wy('typing-hide')}>
+                                <span className="wy-typing-hide">
                                     {item.last_message?.attachment_ids?.length > 0 &&
                                         <Icon.UI name="attachment" size={1} />
                                     }
@@ -112,7 +111,7 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
                 </div>
             </a>
 
-            <div className={wy('conversation-actions')}>
+            <div className="wy-conversation-actions">
                 {item.is_pinned &&
                     <Button.UI onClick={handleUnpin}>
                         <Icon.UI name="pin" size={.75} />
@@ -120,7 +119,6 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
 
                 }
 
-
                 <Dropdown.UI directionX='left'>
                     <>
                         {item.is_unread &&

package/src/components/FileBrowser.tsx

@@ -4,7 +4,6 @@ import Button from '../ui/Button';
 import Icon from '../ui/Icon';
 import useMutateExternalBlobs from '../hooks/useMutateExternalBlobs';
 import { UserContext } from "../contexts/UserContext";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     onFileAdded: Function
@@ -60,8 +59,8 @@ const FileBrowser = ({ onFileAdded }: Props) => {
             $filebrowserFrame.id = "weavy-filebrowser";
             $filebrowserFrame.name = "weavy-filebrowser";
             $filebrowserFrame.src = filebrowserSrc;
-            $filebrowserFrame.className = wy('filebrowser-frame');
-            $filebrowserFrame.style.cssText = "position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
+            $filebrowserFrame.className = "wy-filebrowser-frame";
+            $filebrowserFrame.style.cssText = "position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
 
             window.top?.document.body.appendChild($filebrowserFrame);
 

package/src/components/Image.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import { prefix as wy } from "../utils/styles";
+import React, { useCallback } from "react";
 
 type ImageProps = {
     src: string,
@@ -10,6 +9,33 @@ type ImageProps = {
     onClick: (e: any) => void
 }
 
+export function checkImageLoad(img: HTMLImageElement) {
+    var isLoaded = img.complete && img.naturalHeight !== 0;
+    if (isLoaded) {
+      if (!img.classList.contains("wy-loading")) {
+        console.debug("image is instantly loaded")
+        img.classList.add("wy-loading", "wy-loaded");
+      } else {
+        img.decode().then(() => {
+          console.debug("image is loaded after delay")
+          img.classList.add("wy-loaded");
+        })
+      }
+
+      
+    } else {
+      console.debug("image is loading")
+      img.classList.add("wy-loading");
+    }
+  }
+
+export function imageLoaded(event: any) {
+    var img = event.target;
+    if (img.tagName === 'IMG' && img.classList.contains("wy-loading") && !img.classList.contains("wy-loaded")) {
+      console.debug("load event"); img.classList.add("wy-loaded")
+      }
+  }
+
 export const Image = ({src, previewSrc, width, height, more, onClick}: ImageProps) => {
     let ratio = width / height;
     let baseSize = 64;
@@ -20,17 +46,23 @@ export const Image = ({src, previewSrc, width, height, more, onClick}: ImageProp
     let intrinsicWidth = width + "px"
     let maxWidth = (maxScale * width) + "px";
 
+    const imageRef = useCallback((element: HTMLImageElement) => {
+        if (element) {
+            checkImageLoad(element);
+        }
+    }, [])
+
     return (
-        <a href={src} className={wy('image')} onClick={(e) => onClick(e)} style={{
+        <a href={src} className="wy-image" onClick={(e) => onClick(e)} style={{
             flexBasis: flexBasis,
             flexGrow: flexRatio,
             flexShrink: flexRatio,
             width: intrinsicWidth,
             maxWidth: maxWidth
         }}>
-            <div className={wy('image-area')} style={{ paddingBottom: padding}}>
-                <img src={previewSrc} alt="" loading="lazy" decoding="async" />
-                {!!more && <span className={wy('more')}>+{more}</span>}
+            <div className="wy-image-area" style={{ paddingBottom: padding }}>
+                <img ref={imageRef} src={previewSrc} onLoad={imageLoaded} alt="" loading="lazy" decoding="async" />
+                {!!more && <span className="wy-more">+{more}</span>}
             </div>
         </a>
     );
@@ -57,7 +89,7 @@ export const ImageGrid = ({ children, limit = 3}: ImageGridProps) => {
     }
 
     return (        
-        <div className={wy('image-grid')}>
+        <div className="wy-image-grid">
             {firstImages}
         </div>        
     );

package/src/components/MeetingCard.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     meeting: MeetingCardType
@@ -14,13 +13,13 @@ const MeetingCard = ({ meeting }: Props) => {
     }
 
     return (
-        <div className={wy('attachments')}>
-            <a className={wy('attachment')} href={meeting.join_url} target="_blank">
-                <div className={wy('attachment-icon')} title="Zoom meeting"><Icon.UI name="zoom" color="#4a8cff" size={4} /></div>
-                <div className={wy('attachment-content')}>
-                    <div className={wy('attachment-title')}>Zoom meeting</div>
-                    <div className={wy('attachment-meta')}>Meeting ID: {`${meeting.provider_id.substring(0,3)}-${meeting.provider_id.substring(3,6)}-${meeting.provider_id.substring(6)}`}</div>                    
-                    <Button.UI className={wy('button-primary')}>Join meeting</Button.UI>
+        <div className="wy-attachments">
+            <a className="wy-attachment" href={meeting.join_url} target="_blank">
+                <div className="wy-attachment-icon" title="Zoom meeting"><Icon.UI name="zoom" color="#4a8cff" size={4} /></div>
+                <div className="wy-attachment-content">
+                    <div className="wy-attachment-title">Zoom meeting</div>
+                    <div className="wy-attachment-meta">Meeting ID: {`${meeting.provider_id.substring(0,3)}-${meeting.provider_id.substring(3,6)}-${meeting.provider_id.substring(6)}`}</div>                    
+                    <Button.UI className="wy-button-primary">Join meeting</Button.UI>
                 </div>
             </a>
         </div>

package/src/components/Message.tsx

@@ -9,13 +9,12 @@ import SeenBy from './SeenBy';
 import Avatar from "./Avatar";
 import MeetingCard from './MeetingCard';
 import usePreview from '../hooks/usePreview';
-import { prefix as wy } from "../utils/styles";
+import classNames from 'classnames';
 
 const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_at, attachments, meeting, parentId, reactions, seenBy }) => {
 
     const { open, close } = usePreview(attachments);
 
-    var messageClassName = wy("message" + (me ? " message-me" : ""));
     var images = attachments?.filter((a: AttachmentType) => a.kind === "image" && a.thumbnail_url);
     var files = attachments?.filter((a: AttachmentType) => a.kind !== "image" || !a.thumbnail_url);
 
@@ -28,20 +27,20 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
 
     return (
         <>
-            <div className={messageClassName}>
+            <div className={classNames("wy-message", { "wy-message-me": me })}>
                 {!me && (
-                    <div className={wy('message-author')}>
+                    <div className="wy-message-author">
                         {avatar && <Avatar src={avatar} size={32} name={name} />}
                     </div>
                 )}
-                <div className={wy('message-content')}>
-                    <div className={wy('message-meta')}>
+                <div className="wy-message-content">
+                    <div className="wy-message-meta">
                         <time dateTime={created_at} title={date.format('LLLL')}>{date.fromNow()}</time>
                     </div>
-                    <div className={wy('message-content-row')}>
-                        <div className={wy('message-bubble')}>
+                    <div className="wy-message-content-row">
+                        <div className="wy-message-bubble">
                             {temp &&
-                                <div className={wy('message-text')}>{html}</div>
+                                <div className="wy-message-text">{html}</div>
                             }
                             {!temp &&
                                 <>
@@ -51,13 +50,13 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
                                         )}
                                     </ImageGrid>}
 
-                                    {html && <div className={wy('message-text')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
+                                    {html && <div className="wy-message-text" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
 
                                     {meeting &&
                                         <MeetingCard meeting={meeting} />
                                     }
 
-                                    {files && !!files.length && <div className={wy('attachments')}>
+                                    {files && !!files.length && <div className="wy-attachments">
                                         {files.map((a: AttachmentType) =>
                                             <Attachment key={a.id} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
                                         )}
@@ -66,13 +65,13 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
 
                             }
                         </div>
-                        <div className={wy('message-buttons')}>
+                        <div className="wy-message-buttons">
                             {!temp && <ReactionsMenu id={id} reactions={reactions} />}
                         </div>
                     </div>
 
                     {!temp && (
-                        <div className={wy('reactions')}>
+                        <div className="wy-reactions">
                             <ReactionsList id={id} parentId={parentId} reactions={reactions} />
                         </div>
                     )}

package/src/components/Messages.tsx

@@ -11,7 +11,6 @@ import useMutateRead from '../hooks/useMutateRead';
 import useMutateMessage from '../hooks/useMutateMessage';
 import { useQueryClient } from 'react-query';
 import { WeavyContext } from '../contexts/WeavyContext';
-import { prefix as wy } from "../utils/styles";
 import Avatar from './Avatar';
 
 type Props = {
@@ -94,30 +93,31 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
             // mark conversation as read
             readMessageMutation.mutate({ id: id, read: true })
 
-            client.subscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
-            client.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
-            client.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
-            client.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+            client?.subscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
+            client?.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
+            client?.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+            client?.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
         }
 
         return () => {
             window.removeEventListener('focus', handleFocus, false)
 
             if (id) {
-
                 // remove additional pages in cache. Only get first page
                 let qd = queryClient.getQueryData(["messages", id]);
+                
                 if (qd) {
+                    
                     queryClient.setQueryData(["messages", id], (data: any) => ({
-                        pages: data?.pages.splice(0, 1),
-                        pageParams: data?.pageParams.splice(0, 1),
-                    }));
+                        pages: data?.pages.slice(0,1),
+                        pageParams: [undefined]                        
+                    }));                    
                 }
 
-                client.unsubscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
-                client.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
-                client.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
-                client.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+                client?.unsubscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
+                client?.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
+                client?.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+                client?.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
             }
         }
     }, [id]);
@@ -197,16 +197,16 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
         readMessageMutation.mutate({ id: id, read: true })
     }, [id]);
 
-    let messageHeader = <div className={wy('avatar-header')}>
+    let messageHeader = <div className="wy-avatar-header">
         {avatarUrl && displayName && <Avatar src={avatarUrl} name={displayName} id={id} size={128} /> || ''}
-        {displayName && <div className={wy('avatar-display-name')}>{displayName}</div> || ''}
+        {displayName && <div className="wy-avatar-display-name">{displayName}</div> || ''}
     </div>;
 
-    let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className={wy('message-readmore')}>Load more</Button.UI>;
+    let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className="wy-message-readmore">Load more</Button.UI>;
 
     let messages = (
         <>
-            <div className={wy('message-readmore')} ref={readMoreRef}>
+            <div className="wy-message-readmore" ref={readMoreRef}>
             {isFetchingNextPage
                         ? 'Loading more...'
                         : hasNextPage
@@ -257,10 +257,10 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
 
     return (
         <>
-            <div id="container" className={wy('messages')}>
+            <div id="container" className="wy-messages">
                 {messages}
             </div>
-            <div className={wy('message-editor')}>
+            <div className="wy-message-editor">
                 <ConversationForm key={id} conversationId={id} handleInsert={handleNewMessage} />
             </div>
         </>

package/src/components/Messenger.tsx

@@ -4,9 +4,8 @@ import Conversation from './Conversation';
 import ConversationList from './ConversationList';
 import { Messenger } from '../types/Messenger';
 import { WeavyContext } from '../contexts/WeavyContext';
-import { prefix as wy } from "../utils/styles";
 
-const Messenger: FC<Messenger> = ({ options }) => {
+const Messenger: FC<Messenger> = () => {
 
     const { client } = useContext(WeavyContext);
 
@@ -15,14 +14,14 @@ const Messenger: FC<Messenger> = ({ options }) => {
     }
     
     return (
-        <MessengerProvider options={options}>
-            <div className={wy('messenger-provider')}>
+        <MessengerProvider>
+            <div className="wy-messenger-provider">
 
-                <div className={wy('messenger-sidebar')}>
+                <div className="wy-messenger-sidebar wy-scroll-y">
                     <ConversationList />
                 </div>
 
-                <div  className={wy('messenger-conversation')}>
+                <div className="wy-messenger-conversation wy-scroll-y">
                     <Conversation id={null} />
                 </div>
             </div>

package/src/components/NewConversation.tsx

@@ -4,7 +4,6 @@ import Icon from '../ui/Icon';
 import Overlay from '../ui/Overlay';
 import Button from '../ui/Button';
 import SearchUsers from './SearchUsers';
-import { prefix as wy } from "../utils/styles";
 
 const NewConversation = () => {
     const [modalOpen, setModalOpen] = useState(false);
@@ -27,18 +26,17 @@ const NewConversation = () => {
 
     return (
         <>
-
             <Button.UI onClick={handleOpen}><Icon.UI name="plus" /></Button.UI>
 
-            <Overlay.UI isOpen={modalOpen} className={wy('modal')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalOpen} className="wy-modal">
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
                         <Button.UI onClick={handleClose}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>Create conversation</div>
+                        <div className="wy-appbar-text">Create conversation</div>
                     </nav>
                 </header>
 
-                <SearchUsers handleSubmit={handleCreate} buttonTitle="Create conversation"/>
+                <SearchUsers handleSubmit={handleCreate} buttonTitle="Next"/>
             </Overlay.UI>
         </>