@weavy/uikit-react 14.0.4 → 15.0.1

package/src/ui/Icon.tsx

@@ -1,12 +1,32 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { 
+    mdiAccountMinus,
+    mdiAccountPlus,
+    mdiAlert,
+    mdiAlertCircle,
+    mdiAlertOctagon,
     mdiArrowLeft, 
     mdiArrowRight, 
     mdiAttachment, 
+    mdiBackupRestore, 
+    mdiBell, 
+    mdiBellOff, 
     mdiBox, 
+    mdiChartBox,
+    mdiCheck, 
+    mdiCheckboxBlankOutline,
+    mdiCheckboxMarkedOutline,    
+    mdiCheckCircle, 
+    mdiCircleOutline, 
     mdiClose, 
     mdiCloseCircle, 
     mdiCloud, 
+    mdiComment, 
+    mdiCommentOutline, 
+    mdiContentSave,
+    mdiDelete, 
+    mdiDeleteForever, 
+    mdiDeleteRestore, 
     mdiDotsVertical, 
     mdiDownload, 
     mdiDropbox, 
@@ -23,46 +43,95 @@ import {
     mdiFitToPage, 
     mdiFitToScreen, 
     mdiFolderZip, 
+    mdiFormTextbox, 
     mdiGoogleDrive, 
+    mdiHelpCircle, 
+    mdiInformationOutline,
     mdiMagnify, 
+    mdiMenuDown, 
+    mdiMenuUp, 
+    mdiMessageBadge,
     mdiMicrosoftOnedrive, 
     mdiMinus, 
     mdiOpenInNew, 
+    mdiPencil,
     mdiPin, 
+    mdiPinOff,
     mdiPlus, 
-    mdiPlusCircleOutline, 
+    mdiPlusCircleOutline,
+    mdiRestore,
     mdiSend, 
-    mdiVideo 
+    mdiSort, 
+    mdiStar,
+    mdiStarOff,
+    mdiSwapHorizontal,
+    mdiTextBox,
+    mdiTrashCan,    
+    mdiVideo, 
+    mdiViewListOutline,
+    mdiViewModuleOutline
 } from "@mdi/js";
 import MdiIcon from '@mdi/react/Icon';
-
-type Props = {
-    name: string,
-    color?: string,
-    size?: number,
-}
+import classNames from "classnames";
 
 // Custom mapping to MDI instead of symbols
 const iconMapping: { [index: string]: string } = {
+    "account-minus": mdiAccountMinus,
+    "account-plus": mdiAccountPlus,
+    "alert": mdiAlert,
+    "alert-circle": mdiAlertCircle,
+    "alert-octagon": mdiAlertOctagon,
     "attachment": mdiAttachment,
     "back": mdiArrowLeft,
+    "backup-restore": mdiBackupRestore,
+    "bell": mdiBell,
+    "bell-off": mdiBellOff,
+    "check": mdiCheck,
+    "checkbox-blank": mdiCheckboxBlankOutline,
+    "checkbox-marked": mdiCheckboxMarkedOutline,
+    "circle-outline": mdiCircleOutline,
+    "check-circle": mdiCheckCircle,
     "close": mdiClose,
     "close-circle": mdiCloseCircle,
+    "comment": mdiComment,
+    "comment-outline": mdiCommentOutline,
+    "content-save": mdiContentSave,
+    "delete": mdiDelete,
+    "delete-restore": mdiDeleteRestore,
+    "delete-forever": mdiDeleteForever,
     "dots-vertical": mdiDotsVertical,
     "download": mdiDownload,
     "emoticon-plus": "M 19 0 L 19 3 L 16 3 L 16 5 L 19 5 L 19 8 L 21 8 L 21 5 L 24 5 L 24 3 L 21 3 L 21 0 L 19 0 z M 12 2 C 6.5 2 2 6.5 2 12 C 2 17.5 6.5 22 12 22 C 17.5 22 22 17.5 22 12 L 20 12 C 20 16.4 16.4 20 12 20 C 7.6 20 4 16.4 4 12 C 4 7.6 7.6 4 12 4 L 12 2 z M 8.5 8 C 7.7 8 7 8.7 7 9.5 C 7 10.3 7.7 11 8.5 11 C 9.3 11 10 10.3 10 9.5 C 10 8.7 9.3 8 8.5 8 z M 15.5 8 C 14.7 8 14 8.7 14 9.5 C 14 10.3 14.7 11 15.5 11 C 16.3 11 17 10.3 17 9.5 C 17 8.7 16.3 8 15.5 8 z M 6.9 14 C 7.7 16 9.7 17.5 12 17.5 C 14.3 17.5 16.3 16 17.1 14 L 6.9 14 z",
     "fit-screen": mdiFitToScreen,
     "fit-width": mdiFitToPage,
+    "help-circle": mdiHelpCircle,
+    "information": mdiInformationOutline,    
     "magnify": mdiMagnify,
+    "menu-down": mdiMenuDown,
+    "menu-up":mdiMenuUp,
     "minus": mdiMinus,
     "next": mdiArrowRight,
     "open-in-new": mdiOpenInNew,
+    "pencil": mdiPencil,
     "pin": mdiPin,
+    "unpin": mdiPinOff,
     "plus": mdiPlus,
     "plus-circle-outline": mdiPlusCircleOutline,
+    "poll": mdiChartBox,
     "previous": mdiArrowLeft,
+    "read": mdiMessageBadge,
+    "restore": mdiRestore,
+    "unread": mdiCheck,
     "send": mdiSend,
+    "sort": mdiSort,
+    "star": mdiStar,
+    "unstar": mdiStarOff,
+    "swap-horizontal": mdiSwapHorizontal,
+    "textbox": mdiFormTextbox,
+    "trashcan": mdiTrashCan,
     "video": mdiVideo,
+    "view-list-outline": mdiViewListOutline,
+    "view-module-outline": mdiViewModuleOutline,
     // Files
     "email": mdiEmail,
     "file": mdiFile,
@@ -79,13 +148,20 @@ const iconMapping: { [index: string]: string } = {
     "file-compressed": mdiFolderZip,
     // Providers
     "dropbox": mdiDropbox,
-    "ondedrive": mdiMicrosoftOnedrive,
+    "onedrive": mdiMicrosoftOnedrive,
     "box": mdiBox,
     "google-drive": mdiGoogleDrive,
     "zoom": "m12 2c-5.6 0-10 4.5-10 10 0 5.6 4.5 10 10 10 5.5 0 9.9-4.5 9.9-10 .1-5.6-4.4-10-9.9-10zm2.6 13.1c0 .2-.1.3-.3.3h-6.9c-1.1 0-1.9-.8-1.9-1.9v-4.6c0-.2.1-.3.3-.3h6.9c1 0 1.9.8 1.9 1.9zm3.8.1c0 .4-.2.4-.5.2l-2.8-2.1v-2.6l2.8-2.1c.2-.2.5-.1.5.2z",
     "cloud": mdiCloud
 }
 
+type Props = {
+    name: string,
+    color?: string,
+    size?: number,
+    title?: string,
+    className?: string
+}
 
 function getIconMapping(name: string) {
     let [iconName] = name.split("+");
@@ -98,18 +174,39 @@ function getIconOverlay(name: string) {
     return overlay in iconMapping ? iconMapping[overlay] : "";
 }
 
-const Icon = ({ name, color = "", size, ...props }: Props) => {
+const Icon = ({ name, color = "", size, className, title, ...props }: Props) => {
     let iconPath = getIconMapping(name);
     let overlayPath = getIconOverlay(name);
 
     return (
-        <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 className={classNames('wy-icon', (color ? 'wy-icon-' + color : ''), className)} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} title={title} { ...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>
     );
 }
 
+const IconRaw = ({ name, color = "", size, className, title, ...props }: Props) => {
+    let iconPath = getIconMapping(name);
+    let overlayPath = getIconOverlay(name);
+
+    return (
+        <>
+            {iconPath ? <MdiIcon.Icon color={color && ""} path={iconPath} size={size} title={title} /> : name }
+            {overlayPath && <MdiIcon.Icon color={color && ""} path={overlayPath} className="wy-icon-overlay" size={(size || 1) / 2} title={title} /> }
+        </>
+    );
+}
+
+type IconActiveStackProps = {
+    className?: string,
+    children: ReactNode  
+}
+
+const IconActiveStack = ({ className, children }: IconActiveStackProps) => {
+    return <div className={classNames("wy-icon-active-stack", className)}>{children}</div>
+}
+
 // Export as replacable UI component
-const UIIcon = { UI: Icon };
+const UIIcon = { UI: Icon, Raw: IconRaw, ActiveStack: IconActiveStack };
 export default UIIcon;

package/src/ui/Overlay.tsx

@@ -6,7 +6,9 @@ type OverlayProps = {
     children: React.ReactNode,
     className?: string,
     isOpen: boolean,
-    style?: Styles
+    style?: Styles,
+    closeOnEsc?: boolean,
+    onClose?: () => void
 }
 
 const customStyles = {
@@ -16,7 +18,7 @@ const customStyles = {
   };
   
   
-  const OverlayImpl = ({ children, className = "", isOpen, style }: OverlayProps) => {
+  const OverlayImpl = ({ children, className = "", isOpen, style, closeOnEsc, onClose }: OverlayProps) => {
     const [modalShowing, setModalShowing] = useState(false);
 
     return (
@@ -25,10 +27,12 @@ const customStyles = {
             ariaHideApp={false}
             onAfterOpen={() => { setModalShowing(true)} }
             onRequestClose={() => { setModalShowing(false)}}
+            onAfterClose={() => onClose && onClose()}
             className={classNames("wy-panel wy-overlay wy-transition", className, {"wy-open": modalShowing})}
             overlayClassName="wy-overlays wy-viewport"
             contentLabel="Example Modal"
             style={style}
+            shouldCloseOnEsc={closeOnEsc}
         >
           {children}
         </Modal>

package/src/ui/Sheet.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import Modal, { Styles } from 'react-modal';
+import classNames from 'classnames';
+import Icon from "./Icon";
+import Button from "./Button";
+import useEvents from '../hooks/useEvents';
+
+type SheetProps = {
+    children: React.ReactNode,
+    className?: string,
+    isOpen: boolean,
+    style?: Styles
+    title: string,
+    onClose?: (e: any) => void
+}
+
+const customStyles = {
+    content: {
+      padding: 0
+    },
+  };
+  
+  
+  const SheetImpl = ({ children, className = "", isOpen, style, title, onClose }: SheetProps) => {
+    const [sheetShowing, setSheetShowing] = useState(false);
+    const { dispatch, on, off } = useEvents();
+
+    // Register/unregister close_sheet listener
+    useEffect(() => {
+      if (onClose) {
+        if (sheetShowing) {
+          on("close_sheet", onClose);
+          
+          return () => {
+            off("close_sheet", onClose)
+          }
+        } else {
+          off("close_sheet", onClose)
+        }
+      }
+    }, [sheetShowing])
+
+
+    useEffect(() => {
+      if (!isOpen) {
+        setSheetShowing(false)
+      } else {
+        // Close others on open
+        dispatch("close_sheet", {})
+      }
+    }, [isOpen])
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            ariaHideApp={false}
+            onAfterOpen={() => { setSheetShowing(true)} }
+            onAfterClose={() => { setSheetShowing(false)} }
+            onRequestClose={onClose}
+            closeTimeoutMS={201}
+            className={classNames("wy-sheet", className, {"wy-show": sheetShowing})}
+            overlayClassName="wy-viewport"
+            contentLabel={title}
+            shouldCloseOnOverlayClick={false}
+            style={style}
+        >
+          <div className="wy-appbar">
+            <div></div>
+            <div className="wy-appbar-text">{title}</div>
+            <div className="wy-appbar-buttons">
+              {onClose && 
+                <Button.UI onClick={(e: any) => onClose(e)} title="Close">
+                  <Icon.UI name="close" />
+                </Button.UI>
+              }
+            </div>
+          </div>
+          <div className="wy-sheet-body wy-scroll-y">
+            {children}
+          </div>
+        </Modal>
+    )
+}
+
+// Export as replacable UI component
+const UISheet = { UI: SheetImpl };
+export default UISheet;

package/src/ui/Spinner.tsx

@@ -4,12 +4,15 @@ import classNames from 'classnames';
 type SpinnerProps = {
     size?: number,
     spin?: boolean,
-    overlay?: boolean
+    overlay?: boolean,
+    progress?: number
 }
   
-const SpinnerImpl = ({ spin = true, size = 24, overlay= false }: SpinnerProps) => {
- 
-    return (
+const SpinnerImpl = ({ spin = true, size = 24, overlay= false, progress }: SpinnerProps) => {
+    var strokeDashoffset = !spin && progress && 100 - progress || undefined;
+    return (strokeDashoffset !== undefined ?
+      <svg viewBox="0 0 24 24" width={size} height={size} transform="rotate(-90)" data-icon="progress" className="wy-icon wy-icon-primary"><circle cx="12" cy="12" r="10" strokeLinecap="butt" strokeWidth="2" fill="none" stroke="#eee"></circle><circle cx="12" cy="12" r="10" strokeDasharray="100" strokeDashoffset={strokeDashoffset} strokeLinecap="butt" strokeWidth="2" fill="none" stroke="currentColor" pathLength="100"></circle></svg>
+      :
       <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>
     )
 }

package/src/utils/cacheUtils.ts

@@ -0,0 +1,246 @@
+import { InfiniteData, QueryClient, QueryKey } from "react-query";
+
+// export const getCacheItem = <T>(queryClient: QueryClient, key: QueryKey, id: number): T | null => {
+
+//     const data = queryClient.getQueryData<any>(key);
+//     if (data) {
+//         if (data.pages) {
+//             const items = data.pages.map((p: any) => p.data).flat();
+//             return items.find((i: any) => i.id === id)
+//         } else {
+//             // not paged data...
+//         }
+//     }
+
+//     return null;
+// }
+
+export function findAnyExistingItem<TDataItem>(queryData: InfiniteData<any> | undefined, propertyName:string, value: string, copy = false) {
+    var existingItem: TDataItem | undefined;
+    // Find any existing item with same property value
+    if (queryData && queryData.pages) {
+        queryData.pages.some((page: any) => {
+            return page.data?.some((item: any) => {
+                if (item[propertyName] === value) {
+                    existingItem = item;
+                    return true;
+                }
+            })
+        })
+    }
+
+    return existingItem && copy ? <TDataItem>JSON.parse(JSON.stringify(existingItem)) : existingItem;
+}
+
+export function addToQueryData(queryData: any, item: any, sorting: { by?: string, descending?: boolean } = { }, tempId?: number) {
+    if (queryData) {
+        if (queryData.pages) {
+            var foundIndex = -1;
+
+            const newPagesArray = queryData.pages.map((page: any, i: number) => {
+                if (foundIndex >= 0) {
+                    return page;
+                }
+                
+                var pageData = page.data as any[] || [];
+                    
+                // remove any previous item or tempId
+                pageData = pageData.filter((pageItem: any) => pageItem.id !== item.id && (!tempId || pageItem.id !== tempId));
+
+                if (sorting && sorting.by) {
+                    // Use sorting
+                    foundIndex = pageData.findIndex((pageItem: any) => {
+                        var pageItemValue = pageItem[sorting.by!];
+                        var itemValue =  item[sorting.by!];
+
+                        // modified_at should fallback to created_at
+                        if (sorting.by === "modified_at") {
+                            pageItemValue ??= pageItem["created_at"];
+                            itemValue ??= item["created_at"];
+                        }
+
+                        if (typeof pageItemValue === "string" && typeof itemValue === "string") {
+                            let sortCompare = pageItemValue.localeCompare(itemValue, undefined, { sensitivity: "base", numeric: true });
+                            return (sorting.descending ? sortCompare < 0 : sortCompare > 0);
+                        }
+    
+                        return (sorting.descending ? pageItemValue < itemValue : pageItemValue > itemValue);
+                    });
+                    
+
+                    if (foundIndex >= 0) {
+                        pageData.splice(foundIndex, 0, item);
+                        page.data = [...pageData];
+                    } else if (i == queryData.pages.length - 1 && page.end === page.count) {
+                        // end of the list
+                        page.data = [...pageData, item];
+                    } else {
+                        page.data = [...pageData];
+                    }
+                } else {
+                    // add new item to first page
+                    if (i === 0) {
+                        if (sorting.descending){
+                            page.data = [                            
+                                item,
+                                ...pageData                         
+                            ]
+                        } else {
+                            page.data = [                            
+                                ...pageData,
+                                item
+                            ]
+                        }
+                    }
+                }
+
+                return page;
+
+            }) ?? [];
+
+            return {
+                pages: newPagesArray,
+                pageParams: queryData.pageParams,
+            }
+        } else if (queryData.length) {
+            // not paged data...
+            var foundIndex = -1;
+            // remove any previous item or tempId
+            var newData = [...queryData.filter((dataItem: any) => dataItem.id !== item.id && (!tempId || dataItem.id !== tempId))];
+
+            if (sorting && sorting.by) {
+                // Use sorting
+                foundIndex = newData.findIndex((dataItem: any) => {
+                    var dataItemValue = dataItem[sorting.by!];
+                    var itemValue =  item[sorting.by!];
+
+                    // modified_at should fallback to created_at
+                    if (sorting.by === "modified_at") {
+                        dataItemValue ??= dataItem["created_at"];
+                        itemValue ??= item["created_at"];
+                    }
+
+                    if (typeof dataItemValue === "string" && typeof itemValue === "string") {
+                        let sortCompare = dataItemValue.localeCompare(itemValue, undefined, { sensitivity: "base", numeric: true });
+                        return (sorting.descending ? sortCompare < 0 : sortCompare > 0);
+                    }
+
+                    return (sorting.descending ? dataItemValue < itemValue : dataItemValue > itemValue);
+                });
+                
+
+                if (foundIndex >= 0) {
+                    newData.splice(foundIndex, 0, item);
+                } else {
+                    // end of the list
+                    newData.push(item);
+                }
+            } else {
+                // no specific sorting
+                if (sorting.descending){
+                    newData.unshift(item)
+                } else {
+                    newData.push(item);
+                }
+            }
+            return newData;
+        }
+    }
+    return queryData;
+}
+
+export function updateQueryData (queryData: any, select: number|((item: any) => boolean), fnUpdater: Function) {
+    if (select !== undefined) {
+        const predicate = select instanceof Function ? select : (item: any) => item.id === select;
+
+        if (queryData) {
+            if (queryData.pages) {
+                
+                const newPagesArray = queryData.pages.map((page: any, i: number) => {
+                    // update item
+                    page.data = [...page.data.map((item: any) => {
+                        if (predicate(item)) {
+                            item = JSON.parse(JSON.stringify(item)); // Immutable copy
+                            fnUpdater(item)
+                        }
+                        return item;
+                    })]
+                    return page;
+                }) ?? [];
+                
+                return {
+                    pages: newPagesArray,
+                    pageParams: queryData.pageParams,
+                };
+            } else if(queryData.length) {
+                return [...queryData.map((item: any) => {
+                    if (predicate(item)) {
+                        item = JSON.parse(JSON.stringify(item)); // Immutable copy
+                        fnUpdater(item)
+                    }
+                    return item;
+                })]
+            }
+        }
+    }
+    return queryData;
+}
+
+export function removeQueryData(queryData: any, select: number|((item: any) => boolean)) {
+    if (select !== undefined) {
+        const predicate = select instanceof Function ? select : (item: any) => item.id === select;
+
+        if (queryData) {
+            if (queryData.pages) {
+                const newPagesArray = queryData.pages.map((page: any, i: number) => {
+                    // update item
+                    page.data = [...page.data.filter((item: any) => !predicate(item))]
+                    return page;
+                }) ?? [];
+
+                return {
+                    pages: newPagesArray,
+                    pageParams: queryData.pageParams,
+                };
+            } else if(queryData.length) {
+                return [...queryData.filter((item: any) => !predicate(item))];
+            }
+        }
+    }
+    return queryData;
+}
+
+
+
+export const addCacheItem = <T>(queryClient: QueryClient, key: QueryKey, item: any, tempId?: number, sorting?: { by?: string, descending?: boolean }): T | void => {
+    queryClient.setQueryData(key, (data: any) => addToQueryData(data, item, sorting, tempId));
+}
+
+
+export const updateCacheItem = <T>(queryClient: QueryClient, key: QueryKey, select: number|((item: any) => boolean), fnUpdater: Function): T | void => {
+    queryClient.setQueryData(key, (data: any) => updateQueryData(data, select, fnUpdater))
+}
+
+export const removeCacheItem = <T>(queryClient: QueryClient, key: QueryKey, select: number|((item: any) => boolean)): T | void => {
+    queryClient.setQueryData(key, (data: any) => removeQueryData(data, select));
+}
+
+// export const setCacheItem = (queryClient: QueryClient, key: QueryKey, id: number, updated: any) => {
+//     const data = queryClient.getQueryData<any>(key);
+//     if (data) {
+//         if (data.pages) {
+//             const newPagesArray = data.pages.map((page: any, i: number) => {
+//                 // update entity
+//                 page.data = [...page.data.map((item: any) => item.id === id ? updated : item)]
+//                 return page;
+//             }) ?? [];
+
+//             queryClient.setQueryData(key, (data: any) => ({
+//                 pages: newPagesArray,
+//                 pageParams: data.pageParams,
+//             }));
+//         } else {
+//             // not paged data...
+//         }
+//     }
+// }