@weavy/uikit-react 11.2.0 → 12.1.0

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 = {
@@ -198,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
@@ -258,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,7 +4,6 @@ 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> = () => {
 
@@ -16,13 +15,13 @@ const Messenger: FC<Messenger> = () => {
     
     return (
         <MessengerProvider>
-            <div className={wy('messenger-provider')}>
+            <div className="wy-messenger-provider">
 
-                <div className={wy('messenger-sidebar scroll-y')}>
+                <div className="wy-messenger-sidebar wy-scroll-y">
                     <ConversationList />
                 </div>
 
-                <div className={wy('messenger-conversation scroll-y')}>
+                <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>
         </>
 

package/src/components/PdfViewer.tsx

@@ -0,0 +1,271 @@
+import React, { useEffect, useRef, useCallback, useState } from "react";
+import pdfjsLib from 'pdfjs-dist';
+import pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
+import Icon from "../ui/Icon";
+
+type Props = {
+    src: string
+}
+
+const PdfViewer = ({ src }: Props) => {
+    //const viewerRef = useRef(null);
+    const pageNumberRef = useRef<HTMLInputElement>(null);
+    const totalPagesRef = useRef<HTMLSpanElement>(null);
+    const zoomLevelRef = useRef<HTMLInputElement>(null);
+
+    const [pdfEventBus, setPdfEventBus] = useState<pdfjsViewer.EventBus>();
+
+    const [pdfViewer, setPdfViewer] = useState<pdfjsViewer.PDFViewer>();
+    const [pdfLinkService, setPdfLinkService] = useState<pdfjsViewer.PDFLinkService>();
+    const [pdfFindController, setPdfFindController] = useState<pdfjsViewer.PDFFindController>();
+
+    const DEFAULT_SCALE_DELTA = 1.1;
+    const MAX_SCALE = 3.0;
+    const MIN_SCALE = 0.2;
+
+    const SEARCH_FOR = "";
+    const ENABLE_XFA = true;
+
+    // Some PDFs need external cmaps.
+    const CMAP_URL = "/cmaps/";
+    const CMAP_PACKED = true;
+
+    // Setting worker path to worker bundle.
+    pdfjsLib.GlobalWorkerOptions.workerSrc = "/js/pdf.worker.min.js";
+
+    const viewerRef = useCallback((container: any) => {
+        if (container !== null) {
+
+            let linkService = pdfLinkService;
+            let findController = pdfFindController;
+            let viewer = pdfViewer;
+            let eventBus = pdfEventBus;
+
+            if (!pdfEventBus) {
+                eventBus = new pdfjsViewer.EventBus();
+                setPdfEventBus(eventBus);
+            }
+
+            // (Optionally) enable hyperlinks within PDF files.
+            if (!pdfLinkService) {
+                linkService = new pdfjsViewer.PDFLinkService({
+                    eventBus: eventBus!,
+                })
+                setPdfLinkService(linkService);
+            }
+
+            // (Optionally) enable find controller.
+            if (!pdfFindController) {
+                findController = new pdfjsViewer.PDFFindController({
+                    eventBus: eventBus!,
+                    linkService: linkService!,
+                })
+                setPdfFindController(findController);
+            }
+
+            if (!pdfViewer && eventBus) {
+                // @ts-ignore due to incorrect type def
+                viewer = new pdfjsViewer.PDFViewer({
+                    container: container,
+                    eventBus: eventBus,
+                    linkService: linkService!,
+                    findController: findController,
+                    //defaultZoomValue: 1.0,
+                    //scriptingManager: pdfScriptingManager,
+                    //enableScripting: true, // Only necessary in PDF.js version 2.10.377 and below.
+                })
+                //pdfViewer!.MAX_AUTO_SCALE = 1.0;
+                linkService!.setViewer(viewer);
+                setPdfViewer(viewer);
+
+                eventBus.on("scalechanging", function () {
+                    console.debug("scalechanging")
+                    zoomLevelRef.current!.value = (Math.round(viewer!.currentScale * 100)).toFixed(0) + "%";
+                });
+
+                eventBus.on("pagechanging", function () {
+                    console.debug("pagechanging")
+                    if (pageNumberRef.current) {
+                        pageNumberRef.current.value = viewer!.currentPageNumber.toFixed(0);
+                    }
+                });
+
+                eventBus.on("pagesinit", function () {
+                    // We can use pdfViewer now, e.g. let's change default scale.
+                    viewer!.currentScaleValue = "auto";
+                    pageNumberRef.current!.value = "1";
+                    totalPagesRef.current!.innerText = viewer!.pagesCount.toFixed(0);
+
+                    // We can try searching for things.
+                    if (SEARCH_FOR) {
+                        if (findController && !("_onFind" in findController)) {
+                            // @ts-ignore due to missing type def
+                            findController.executeCommand("find", { query: SEARCH_FOR });
+                        } else {
+                            eventBus!.dispatch("find", { type: "", query: SEARCH_FOR });
+                        }
+                    }
+                });
+            }
+
+        } else {
+            console.warn("pdf viewer dismounted")
+        }
+    }, []);
+
+    useEffect(() => {
+        if (src && pdfViewer && pdfLinkService) {
+            let loadingTask: pdfjsLib.PDFDocumentLoadingTask;
+            let loadedDoc: pdfjsLib.PDFDocumentProxy;
+
+            loadingTask = pdfjsLib.getDocument({
+                url: src,
+                enableXfa: ENABLE_XFA,
+                cMapUrl: CMAP_URL,
+                cMapPacked: CMAP_PACKED,
+            });
+
+            // Re-use the worker?
+            //pdfjsLib.GlobalWorkerOptions.workerPort = loadingTask._worker.port
+
+            loadingTask.promise.then(function (doc) {
+                loadedDoc = doc;
+                //console.log("LOADED PDF");
+                pdfViewer.setDocument(doc);
+                pdfLinkService.setDocument(doc, null);
+            });
+
+            return () => {
+                if (loadingTask) {
+                    console.log("resetting pdf viewer");
+                    if(loadingTask._transport){
+                        loadingTask._transport.destroy();
+                    }
+                    
+                    if (loadedDoc) {
+                        loadedDoc.destroy();
+                    }
+
+                    //loadingTask.destroy();
+                    pdfViewer.cleanup();
+                }
+            }
+        }
+    }, [src, pdfViewer])
+
+    function setScale(scale: number | string) {
+        console.debug("setScale:", scale)
+        if (pdfViewer) {
+            pdfViewer.currentScaleValue = typeof scale === "number" ? scale.toFixed(2) : scale;
+        }
+    }
+
+    function setPage(pageNumber: number) {
+        console.debug("setPage:", pageNumber)
+        if (pdfViewer) {
+            pdfViewer.currentPageNumber = pageNumber;
+        }
+    }
+
+    function updatePage() {
+        console.debug("updatePage");
+        if (pdfViewer && pageNumberRef.current) {
+            let pageNumber = parseInt(pageNumberRef.current.value);
+
+            if (isNaN(pageNumber)) {
+                setPage(pdfViewer.currentPageNumber);
+            } else if (pageNumber > pdfViewer.pagesCount) {
+                setPage(pdfViewer.pagesCount);
+            } else if (pageNumber <= 0) {
+                setPage(1);
+            } else {
+                setPage(pageNumber);
+            }
+
+        }
+    }
+
+    function select(e: any) {
+        console.debug("select");
+        e.target.setSelectionRange(0, e.target.value.length);
+    }
+
+    function fitToPage() {
+        setScale("page-fit");
+    }
+
+    function fitToWidth() {
+        setScale("page-width");
+    }
+
+    function zoomIn() {
+        console.debug("zoomIn");
+
+        if (pdfViewer) {
+            let newScale = pdfViewer.currentScale;
+            let steps = 1;
+            do {
+                newScale = newScale * DEFAULT_SCALE_DELTA;
+                newScale = Math.floor(newScale * 10) / 10;
+                newScale = Math.min(MAX_SCALE, newScale);
+            } while (--steps > 0 && newScale < MAX_SCALE);
+
+            setScale(newScale);
+        }
+    }
+
+    function zoomOut() {
+        console.debug("zoomOut");
+        if (pdfViewer) {
+            let newScale = pdfViewer.currentScale;
+            let steps = 1;
+            do {
+                newScale = newScale / DEFAULT_SCALE_DELTA;
+                newScale = Math.floor(newScale * 10) / 10;
+                newScale = Math.max(MIN_SCALE, newScale);
+            } while (--steps > 0 && newScale > MIN_SCALE);
+
+            setScale(newScale);
+        }
+    }
+
+    function updateZoom() {
+        console.debug("updateZoom");
+        if (pdfViewer && zoomLevelRef.current) {
+            let zoomValue = parseFloat(zoomLevelRef.current.value.replace("%", ""));
+            if (isNaN(zoomValue)) {
+                setScale(pdfViewer.currentScale + 0.0001);
+            } else {
+                setScale(zoomValue / 100);
+            }
+        }
+    }
+
+    return (
+        <div className="wy-content-pdf" data-controller="pdf" data-pdf-url-value="">
+            <div className="wy-toolbar">
+                <nav className="wy-tools">
+                    <div className="wy-tool">
+                        <input type="text" className="wy-input" ref={pageNumberRef} onChange={updatePage} onClick={select} data-pdf-target="pageNumber"/>
+                        <span>/</span>
+                        <span ref={totalPagesRef}>1</span>
+                    </div>
+                    <div className="wy-tool">
+                        <button className="wy-button wy-button-icon btn-zoom-out" onClick={zoomOut} title="Zoom out"><Icon.UI name="minus" /></button>
+                        <input type="text" className="wy-input" ref={zoomLevelRef} onChange={updateZoom} onClick={select} value="100%" data-pdf-target="zoomLevel"/>
+                        <button className="wy-button wy-button-icon btn-zoom-in" onClick={zoomIn} title="Zoom in"><Icon.UI name="plus" /></button>
+                    </div>
+                    <div className="wy-tool">
+                        <button className="wy-button wy-button-icon btn-fit-page" onClick={fitToWidth} title="Fit to width"><Icon.UI name="fit-width" /></button>
+                        <button className="wy-button wy-button-icon" onClick={fitToPage} title="Fit to screen"><Icon.UI name="fit-screen" /></button>
+                    </div>
+                </nav>
+            </div>
+            <div ref={viewerRef} className="wy-pdf-container">
+                <div id="viewer" className="pdfViewer"></div>
+            </div>
+        </div>
+    )
+}
+
+export default PdfViewer;   

package/src/components/Presence.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { prefix as wy } from "../utils/styles";
+import classNames from "classnames";
 
 type Props = {
     id: number,
@@ -8,7 +8,7 @@ type Props = {
 
 const Presence = ({ id, status }: Props) => {
     return (
-        <span className={wy(`presence ${status === "active" ? "presence-active" : ""}`)} data-presence-id={id}></span>
+        <span className={classNames("wy-presence", { "wy-presence-active": status === "active" })} data-presence-id={id}></span>
     )
 }