@weavy/uikit-react 14.0.3 → 15.0.0

package/dist/cjs/hooks/usePreview.d.ts

@@ -1,4 +0,0 @@
-export default function usePreview(attachments: AttachmentType[]): {
-    open: (attachmentId: number) => void;
-    close: () => void;
-};

package/dist/cjs/hooks/useReactions.d.ts

@@ -1,3 +0,0 @@
-export default function useReactions(id: number, reactions: ReactableType[]): {
-    reactionsList: ReactionGroup[];
-};

package/dist/esm/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/esm/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/esm/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;

package/dist/esm/hooks/usePreview.d.ts

@@ -1,4 +0,0 @@
-export default function usePreview(attachments: AttachmentType[]): {
-    open: (attachmentId: number) => void;
-    close: () => void;
-};

package/dist/esm/hooks/useReactions.d.ts

@@ -1,3 +0,0 @@
-export default function useReactions(id: number, reactions: ReactableType[]): {
-    reactionsList: ReactionGroup[];
-};

package/src/components/ConversationForm.tsx

@@ -1,210 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import useFileUploader from '../hooks/useFileUploader';
-import File from './File';
-import Icon from '../ui/Icon';
-import Button from '../ui/Button';
-import useMutateTyping from '../hooks/useMutateTyping';
-import useThrottle from '../hooks/useThrottle';
-import { flushSync } from 'react-dom';
-import Meetings from './Meetings';
-import Meeting from './Meeting';
-import FileBrowser from './FileBrowser';
-import { getIcon } from '../utils/fileUtilities';
-
-type Props = {
-    conversationId: number,
-    handleInsert: Function
-}
-
-let uploadedFiles: any[] = [];
-
-const ConversationForm = ({ conversationId, handleInsert }: Props) => {
-
-    const [text, setText] = useState<string>("");
-    const [files, setFiles] = useState<string>("");
-    const [fileCount, setFileCount] = useState<number>(0);
-    const [currentUploadCount, setCurrentUploadCount] = useState<number>(1);
-    const [working, setWorking] = useState<boolean>(false);
-    const queryClient = useQueryClient();
-    const [attachments, setAttachments] = useState<FileType[]>([]);
-    const [meetings, setMeetings] = useState<MeetingType[]>([]);
-    const [uploadError, setUploadError] = useState<string | boolean>(false);
-    const startTyping = useMutateTyping();
-    const textInput = useRef<HTMLTextAreaElement>(null);
-
-    let fileInput: HTMLInputElement | null;
-
-    const handleUploaded = (attachment: any) => {
-        // update attachment list        
-        flushSync(() => {
-            if (attachment.status && attachment.status !== 200) {
-                setUploadError(attachment.detail);
-            } else {
-                setAttachments([...attachments, attachment[0]]);
-            }
-        })
-    }
-
-    const { mutateAsync: uploadFile, isSuccess: uploadSuccess } = useFileUploader(handleUploaded);
-
-    useEffect(() => {
-        // set stored text and attachments if available
-        let textValue: any = queryClient.getQueryData(["form-text", conversationId]) || "";
-        setText(textValue);
-        
-        let attachmentValue: any = queryClient.getQueryData(["form-attachments", conversationId]) || [];
-        setAttachments(attachmentValue);
-    }, [conversationId]);
-
-    useEffect(() => {
-        // store attachments
-        queryClient.setQueryData(["form-attachments", conversationId], attachments);
-    }, [attachments]);
-
-    useEffect(() => {
-        handleAutoGrow();
-    }, [text])
-
-    const handleInsertMessage = (e: React.KeyboardEvent<EventTarget>) => {
-
-        if(e.type === 'keydown' && !(e.key === "Enter" && e.ctrlKey )) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-        
-        if (text === "" && attachments.length === 0 && meetings.length === 0) return;
-
-        handleInsert(text, attachments, meetings);
-        setText("");
-        setFiles("");
-        setAttachments([]);
-        setMeetings([]);
-        
-        // clear stored text and attachments
-        queryClient.setQueryData(["form-text", conversationId], "");
-        queryClient.setQueryData(["form-attachments", conversationId], []);
-    }
-
-    const handleChange = (e: any) => {
-
-        // store text
-        queryClient.setQueryData(["form-text", conversationId], e.target.value);
-
-        // set text  value
-        setText(e.target.value);
-        
-    }
-
-    const handleFileUpload = async (e: any) => {
-        setUploadError(false);
-        setFiles(e.target.value);
-        setFileCount(e.target.files.length);
-        setWorking(true);
-
-        for (var i = 0; i < e.target.files.length; i++) {
-            setCurrentUploadCount(i + 1);
-            const file = e.target.files[i];
-            await uploadFile({ request: { file } });
-        }
-
-        setWorking(false)
-    }
-
-    const handleRemoveFile = (id: number, e: any) => {
-        setFiles("");
-        setAttachments(attachments.filter((a: FileType) => {
-            return a.id !== id
-        }));
-    }
-
-    const handleKeyPress = () => {
-        startTyping.mutate({ id: conversationId });
-    }
-
-    const openFileInput = (e: any) => {
-        fileInput?.click();
-    }
-
-    const handleAddMeeting = (data: any) => {
-        if (meetings.length > 0) return;
-
-        setMeetings([...meetings, data]);
-    }
-
-    const handleExternalFileAdded = (blobs: FileType[]) => {
-        setAttachments([...attachments, ...blobs]);
-    }
-
-    const handleRemoveMeeting = (id: number, e: any) => {
-        setMeetings(meetings.filter((a: MeetingType) => {
-            return a.id !== id
-        }));
-    }
-
-    const handleAutoGrow = () => {
-        if(textInput.current && textInput.current.parentNode){
-            const parent = textInput.current.parentNode as HTMLElement;            
-            parent.dataset.replicatedValue = textInput.current.value;
-        }
-        
-    }
-
-
-    return (
-        <form className="wy-message-form">
-            {uploadError &&
-                <div>{uploadError}</div>
-            }
-
-            {(working || attachments.length > 0 || meetings.length > 0) &&
-                <div>
-                    {working &&
-                        <div>Now uploading ({currentUploadCount} of {fileCount}) selected files</div>
-                    }
-                    <div className="wy-picker-list">
-                        {attachments.map((a: FileType) => {
-                            let { icon } = getIcon(a.name);
-                            return (
-                                <div key={a.id} className="wy-picker-list-item">
-                                    <File id={a.id} name={a.name} className="wy-picker-list-item-title" icon={ icon } />
-                                    <Button.UI onClick={handleRemoveFile.bind(ConversationForm, a.id)}><Icon.UI name='close-circle' /></Button.UI>
-                                </div>
-
-                            )
-                        })}
-
-                        {meetings.map((m: MeetingType) => {
-                            return (
-                                <div key={m.id} className="wy-picker-list-item">
-                                    <Meeting id={m.id} title={m.provider} className="wy-picker-list-item-title" />
-                                    <Button.UI onClick={handleRemoveMeeting.bind(ConversationForm, m.id)}><Icon.UI name='close-circle' /></Button.UI>
-                                </div>
-
-                            )
-                        })}
-                    </div>
-                </div>
-            }
-            <div className="wy-message-editor-inputs">
-
-                <div className="wy-message-editor-buttons">
-                    <input type="file" ref={input => fileInput = input} value={files} onChange={handleFileUpload} multiple hidden tabIndex={-1} />
-                    <Button.UI title="Upload attachment" onClick={openFileInput}><Icon.UI name="attachment" /></Button.UI>
-                    <Meetings onMeetingAdded={handleAddMeeting} />
-                    <FileBrowser onFileAdded={handleExternalFileAdded} />
-                </div>
-
-                <div className="wy-message-editor-text wy-message-editor-grow">
-                    <textarea rows={1} ref={textInput} className="wy-message-editor-textfield wy-message-editor-textcontent"  value={text} onChange={handleChange} onKeyDown={handleInsertMessage} onKeyPress={useThrottle(handleKeyPress, 4000)}></textarea>
-                </div>
-                <div className="wy-message-editor-buttons">
-                    <Button.UI type="button" onClick={handleInsertMessage} ><Icon.UI color="primary" name="send"/></Button.UI>
-                </div>
-            </div>
-        </form>
-
-    )
-}
-
-export default ConversationForm;

package/src/components/File.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import Icon from "../ui/Icon";
-
-type Props = {
-    id: number,
-    name: string
-    className?: string,
-    icon: string
-}
-const File = ({ id, name, className, icon }: Props) => {
-
-    return (
-        <>
-            <Icon.UI name={icon} size={1} />
-            <div className={className}>{name}</div>
-            <input type="hidden" value={id} name="blob"/>
-        </>
-    )
-}
-
-export default File;

package/src/hooks/usePreview.ts

@@ -1,21 +0,0 @@
-import { useContext, useEffect } from "react";
-import { PreviewContext } from "../contexts/PreviewContext";
-
-
-export default function usePreview(attachments: AttachmentType[]) {
-
-    const { openPreview, closePreview } = useContext(PreviewContext);
-
-    const open = (attachmentId: number) => {        
-        openPreview(attachments, attachmentId);
-    }
-
-    const close = () => {
-        closePreview()
-    }
-
-    return {
-        open,
-        close
-    }
-}

package/src/hooks/useReactions.ts

@@ -1,51 +0,0 @@
-import { useCallback, useContext, useEffect, useLayoutEffect, useState } from "react";
-import { UserContext } from "../contexts/UserContext";
-import useEvents from "./useEvents";
-
-export default function useReactions(id: number, reactions: ReactableType[]) {
-    const { on, off } = useEvents();
-    const { user } = useContext(UserContext);
-    const [reactionsList, setReactionsList] = useState<ReactableType[]>([]);
-
-    const groupReactions = useCallback((data: ReactableType[]) => {
-        var group = [...new Map<string, ReactableType>(data.map((item: ReactableType) => [item.content, item])).values()];
-
-        return group.map((item: ReactableType): ReactionGroup => {
-            return {
-                content: item.content,
-                count: data.filter((r) => r.content === item.content).length,
-                has_reacted: data.filter((r) => r.content === item.content && r.created_by_id === user.id).length > 0
-            }
-        });
-    }, [reactionsList]);
-
-    const handleRealtimeReactionInserted = useCallback((reaction: RealtimeReaction) => {        
-        if (reaction.entity.id === id) {            
-            setReactionsList((oldList) => {
-                return [...oldList || [], { content: reaction.reaction, created_by_id: reaction.actor.id }];
-            });
-        }
-    }, [id, reactionsList]);
-
-    const handleRealtimeReactionDeleted = useCallback((reaction: RealtimeReaction) => {        
-        if (reaction.entity.id === id) {
-            setReactionsList(oldList => oldList.filter(item => item.created_by_id !== reaction.actor.id));
-        }
-    }, [id, reactionsList]);
-
-    useLayoutEffect(() => {
-        setReactionsList(reactions || []);
-    }, [reactions]);
-
-    useEffect(() => {
-        on('reaction_added_' + id, handleRealtimeReactionInserted);
-        on('reaction_deleted_' + id, handleRealtimeReactionDeleted);
-
-        return () => {
-            off('reaction_added_' + id, handleRealtimeReactionInserted);
-            off('reaction_deleted_' + id, handleRealtimeReactionDeleted);
-        }
-    }, [id]);
-
-    return { reactionsList: groupReactions(reactionsList) };
-}

package/src/utils/infiniteScroll.js

@@ -1,184 +0,0 @@
-/**
- * Creates a new regular scroll listener
- * 
- * @param {Element} observeElement 
- * @param {Function} whenNext
- * @returns IntersectionObserver
- */
- export function createScroller(observeElement, whenNext) {
-    //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) => {
-        entries.forEach(function (entry) {
-            if (entry.isIntersecting) {
-                whenNext();
-            }
-        });
-    }, { root: intersectionParent, threshold: 0, rootMargin: "500px" });
-
-    nextObserver.observe(observeElement);
-
-    return nextObserver;
-}
-
-/**
- * Creates a new reverse scroll listener
- * 
- * @param {Element} observeElement 
- * @param {Function} whenNext 
- * @returns IntersectionObserver
- */
-export function createReverseScroller(observeElement, whenNext) {
-    // 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 prevObserver = new IntersectionObserver((entries, observer) => {
-        entries.forEach(function (entry) {
-            if (entry.isIntersecting && !prevSleep) {
-                prevSleep = true;
-
-                // find first child (that is regularly positioned)
-                var nextPositionedChild = getNextPositionedChild(entry.target);
-
-                var prevScrollHeight = parent.scrollHeight;
-                var childOffsetBefore = nextPositionedChild.offsetTop;
-                
-                //console.log("intersecting", childOffsetBefore);
-                
-                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
-                            let diff = nextPositionedChild.offsetTop - childOffsetBefore;
-                            //console.log("infinite scroll updated instantly", diff);
-                            parent.scrollTop += diff;
-                            requestAnimationFrame(() => prevSleep = false);
-                        } else {
-                            queueMicrotask(() => {
-                                if (prevScrollHeight !== parent.scrollHeight) {
-                                    // layout rendered after 
-                                    let diff = nextPositionedChild.offsetTop - childOffsetBefore;
-                                    //console.log("infinite scroll updated by microtask", diff);
-                                    parent.scrollTop += diff;
-                                    requestAnimationFrame(() => prevSleep = false);
-                                } else {
-                                    // layout not rendered yet
-                                    requestAnimationFrame(() => {
-                                        let diff = nextPositionedChild.offsetTop - childOffsetBefore;
-                                        //console.log("infinite scroll updated by animationframe", diff);
-                                        parent.scrollTop += diff;
-                                        requestAnimationFrame(() => prevSleep = false);
-                                    });
-                                }
-                            });
-                        }
-                    });
-                };
-
-                let whenNextResult = whenNext();
-
-                if (whenNextResult) {
-                    whenNextResult.then(afterNext);
-                } else {
-                    afterNext();
-                }
-            }
-        })
-    }, { root: intersectionParent, threshold: 0, rootMargin: "500px" });
-
-    prevObserver.observe(observeElement);
-
-    return prevObserver;
-}
-
-/**
- * 
- * @param {Element} el 
- * @returns Element
- */
-export function getNextPositionedChild(el) {
-    while(el = el?.nextElementSibling) {
-        if(/absolute|sticky|fixed/.test(getComputedStyle(el).position) === false) {
-            return el;
-        }
-    }
-}
-
-// get the closest ancestor element that is scrollable (adapted from https://stackoverflow.com/a/42543908/891843)
-/**
- * 
- * @param {Element} element 
- * @returns Element
- */
-export function getScrollParent(element) {
-    var includeHidden = false;
-
-    if (element) {
-        var style = getComputedStyle(element);
-        var excludeStaticParent = style.position === "absolute";
-        var overflowRegex = includeHidden ? /(auto|scroll|overlay|hidden)/ : /(auto|overlay|scroll)/;
-
-        if (style.position === "fixed") {
-            return document.scrollingElement;
-        }
-
-        for (var parent = element; (parent = parent.parentElement);) {
-            style = getComputedStyle(parent);
-            
-            if (excludeStaticParent && style.position === "static") {
-                continue;
-            }
-            if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
-                return parent;
-            }
-        }
-    }
-
-    return document.scrollingElement;
-}
-
-/**
- * 
- * @param {Element} ref 
- * @param {boolean} smooth 
- */
-export function scrollToBottom(ref, smooth) {
-    var parent = getScrollParent(ref);
-    //console.log("scrolling #messages", origin, el.scrollHeight, el);
-    
-    if (parent && parent.scrollTop + parent.clientHeight !== parent.scrollHeight) {
-        if (smooth) {
-            parent.scrollTo({
-                top: parent.scrollHeight,
-                left: 0,
-                behavior: 'smooth'
-            });
-        } else {
-            parent.scrollTop = parent.scrollHeight;
-        }
-    }
-
-}
-