@weavy/uikit-react 11.1.0 → 13.0.0

package/dist/esm/types/client/WeavyClient.d.ts

@@ -1,16 +1,23 @@
 export default class WeavyClient {
     url: string;
-    tokenFactory: () => string | Promise<string>;
     connection: import("@microsoft/signalr").HubConnection;
+    tokenFactory: (refresh: boolean) => Promise<string>;
     groups: string[];
     connectionEvents: any[];
     isConnectionStarted: any;
+    token: string;
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE: string;
     EVENT_CLOSE: string;
     EVENT_RECONNECTING: string;
     EVENT_RECONNECTED: string;
     constructor(options: WeavyClientOptions);
+    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>;
+    getToken(refresh: boolean): Promise<string>;
+    tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
     unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    destroy(): void;
     triggerHandler(name: string, ...data: any): void;
 }

package/dist/esm/types/components/Attachment.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     kind: string;
     size: number;
     provider: string;
+    onClick?: (e: any) => void;
 };
-declare const Attachment: ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: Props) => JSX.Element;
+declare const Attachment: ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => JSX.Element;
 export default Attachment;

package/dist/esm/types/components/Chat.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ChatProps } from '../types/Chat';
-declare const Chat: ({ id }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid }: ChatProps) => JSX.Element;
 export default Chat;

package/dist/esm/types/components/Image.d.ts

@@ -7,6 +7,8 @@ declare type ImageProps = {
     more?: number;
     onClick: (e: any) => void;
 };
+export declare function checkImageLoad(img: HTMLImageElement): void;
+export declare function imageLoaded(event: any): void;
 export declare const Image: ({ src, previewSrc, width, height, more, onClick }: ImageProps) => JSX.Element;
 declare type ImageGridProps = {
     children: React.ReactNode;

package/dist/esm/types/components/PdfViewer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    src: string;
+    pdfCMapsUrl: string;
+    pdfWorkerUrl: string;
+};
+declare const PdfViewer: ({ src, pdfCMapsUrl, pdfWorkerUrl }: Props) => JSX.Element;
+export default PdfViewer;

package/dist/esm/types/components/Preview.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+declare type ImageProps = {
+    src: string;
+    width?: number;
+    height?: number;
+};
+export declare const PreviewImage: ({ src, width, height }: ImageProps) => JSX.Element;
+declare type DocumentProps = {
+    src: string;
+    client: any;
+};
+export declare const PreviewDocument: ({ src, client }: DocumentProps) => JSX.Element;
+declare type MediaProps = {
+    format: string;
+    src: string;
+    name: string;
+    mediaType?: string;
+};
+export declare const PreviewMedia: ({ format, src, name, mediaType }: MediaProps) => JSX.Element;
+declare type TextProps = {
+    src: string;
+    html?: boolean;
+    code?: boolean;
+};
+export declare const PreviewText: ({ src, html, code }: TextProps) => JSX.Element;
+declare type EmbedProps = {
+    src: string;
+    name: string;
+    icon: string;
+    provider?: string;
+};
+export declare const PreviewEmbed: ({ src, name, icon, provider }: EmbedProps) => JSX.Element;
+declare type IconProps = {
+    children?: React.ReactNode;
+    src: string;
+    icon: string;
+    name: string;
+    provider?: string;
+    download?: boolean;
+    className?: string;
+};
+export declare const PreviewIcon: ({ children, src, icon, name, provider, download, className }: IconProps) => JSX.Element;
+declare type PreviewProps = {
+    client: any;
+    src: string;
+    link?: string;
+    format: PreviewFormatType;
+    name: string;
+    icon: string;
+    width?: number;
+    height?: number;
+    mediaType?: string;
+    provider?: string;
+};
+export declare const Preview: ({ client, src, link, format, name, icon, width, height, mediaType, provider }: PreviewProps) => JSX.Element;
+export default Preview;

package/dist/esm/types/contexts/MessengerContext.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 export declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props) => JSX.Element;
 export default MessengerProvider;

package/dist/esm/types/contexts/PreviewContext.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 export declare const PreviewContext: React.Context<PreviewContextProps>;
 declare type Props = {
+    client: any;
     children: React.ReactNode;
 };
-declare const PreviewProvider: ({ children }: Props) => JSX.Element;
+declare const PreviewProvider: ({ client, children }: Props) => JSX.Element;
 export default PreviewProvider;

package/dist/esm/types/contexts/WeavyContext.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
-import WeavyClient from "../client/WeavyClient";
 export declare const WeavyContext: React.Context<WeavyContextProps>;
-declare type Props = {
+declare type WeavyProviderProperties = {
     children: React.ReactNode;
     client: WeavyClient;
     options?: WeavyContextOptions;
 };
-declare const WeavyProvider: ({ children, client, options }: Props) => JSX.Element;
+declare const WeavyProvider: ({ children, client, options }: WeavyProviderProperties) => JSX.Element;
 export default WeavyProvider;

package/dist/esm/types/types/Chat.d.ts

@@ -1,3 +1,3 @@
 export interface ChatProps {
-    id: string;
+    uid: string;
 }

package/dist/esm/types/types/Messenger.d.ts

@@ -1,3 +1,2 @@
 export interface Messenger {
-    options?: MessengerContextOptions;
 }

package/dist/esm/types/types/types.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 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>;
 }
 declare type WeavyClientOptions = {
     url: string;
-    tokenFactory: (() => string | Promise<string>);
+    tokenFactory: (refresh: boolean) => Promise<string>;
 };
 declare type WeavyContextProps = {
     client: WeavyClient | null;
@@ -17,19 +20,19 @@ declare type WeavyContextOptions = {
     zoomAuthenticationUrl?: string;
     teamsAuthenticationUrl?: string;
     enableCloudFiles?: boolean;
+    enableScrollbarDetection?: boolean;
     filebrowserUrl?: string;
+    pdfWorkerUrl?: string;
+    pdfCMapsUrl?: string;
+    reactions?: string[];
 };
 declare type MessengerContextProps = {
-    options?: MessengerContextOptions;
     selectedConversationId: null | number;
     setSelectedConversationId: Function;
 };
 declare type UserContextProps = {
     user: UserType;
 };
-declare type MessengerContextOptions = {
-    reactions?: string[];
-};
 declare type PreviewContextProps = {
     openPreview: Function;
     closePreview: Function;
@@ -116,10 +119,17 @@ declare type AttachmentType = {
     size: number;
     provider: string;
     download_url: string;
-    preview_url: string;
-    thumbnail_url: string;
+    embed_url: string;
     external_url: string;
+    thumbnail_url: string;
+    preview_format: PreviewFormatType;
+    application_url: string;
+    preview_url: string;
+    created_at: string;
+    created_by?: UserType;
+    createdById?: number;
 };
+declare type PreviewFormatType = "audio" | "code" | "embed" | "html" | "image" | "pdf" | "text" | "video" | "none";
 declare type ReactionType = {
     id: number;
     parent: MessageType;

package/dist/esm/types/ui/Spinner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type SpinnerProps = {
+    size?: number;
+    spin?: boolean;
+};
+declare const UISpinner: {
+    UI: ({ spin, size }: SpinnerProps) => JSX.Element;
+};
+export default UISpinner;

package/dist/esm/types/utils/fileUtilities.d.ts

@@ -1,5 +1,17 @@
 export declare const fileSizeAsString: (size: number) => string;
-export declare const getIcon: (name: string, mediaType?: string) => {
+export declare function getExtension(name: string): string;
+export declare function isAudio(ext: string): boolean;
+export declare function isImage(ext: string): boolean;
+export declare function isWebImage(path: string): boolean;
+export declare function isBitmap(path: string): boolean;
+export declare function isMetaFile(path: string): boolean;
+export declare function isVideo(ext: string): boolean;
+export declare function isMarkdown(ext: string): boolean;
+export declare function isMarkup(ext: string): boolean;
+export declare function isCode(ext: string): boolean;
+export declare function isText(ext: string): boolean;
+export declare function isOfficeDocument(path: string): boolean;
+export declare function getIcon(name: string, mediaType?: string): {
     icon: string;
     color?: string;
 };

package/dist/index.d.ts

@@ -3,37 +3,43 @@ import * as _microsoft_signalr from '@microsoft/signalr';
 import React, { FC } from 'react';
 import { Styles } from 'react-modal';
 
-declare class WeavyClient {
+declare class WeavyClient$1 {
     url: string;
-    tokenFactory: () => string | Promise<string>;
     connection: _microsoft_signalr.HubConnection;
+    tokenFactory: (refresh: boolean) => Promise<string>;
     groups: string[];
     connectionEvents: any[];
     isConnectionStarted: any;
+    token: string;
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE: string;
     EVENT_CLOSE: string;
     EVENT_RECONNECTING: string;
     EVENT_RECONNECTED: string;
     constructor(options: WeavyClientOptions);
+    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>;
+    getToken(refresh: boolean): Promise<string>;
+    tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
     unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    destroy(): void;
     triggerHandler(name: string, ...data: any): void;
 }
 
 declare const WeavyContext: React.Context<WeavyContextProps>;
-declare type Props$2 = {
+declare type WeavyProviderProperties = {
     children: React.ReactNode;
     client: WeavyClient;
     options?: WeavyContextOptions;
 };
-declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Element;
+declare const WeavyProvider: ({ children, client, options }: WeavyProviderProperties) => JSX.Element;
 
 declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props$1 = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props$1) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props$1) => JSX.Element;
 
 declare const Messenger: FC<Messenger>;
 
@@ -49,10 +55,10 @@ interface ConversationProps {
 declare const _default: React.MemoExoticComponent<({ id, showBackButton }: ConversationProps) => JSX.Element>;
 
 interface ChatProps {
-    id: string;
+    uid: string;
 }
 
-declare const Chat: ({ id }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid }: ChatProps) => JSX.Element;
 
 declare const UIButton: {
     UI: any;
@@ -95,4 +101,4 @@ declare const UIOverlay: {
     UI: ({ children, className, isOpen, style }: OverlayProps) => JSX.Element;
 };
 
-export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient, WeavyContext, WeavyProvider };
+export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient$1 as WeavyClient, WeavyContext, WeavyProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "11.1.0",
+  "version": "13.0.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
@@ -8,6 +8,7 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "./dist/cjs/types/index.d.ts",
+  "style": "dist/css/weavy-react.css",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -17,11 +18,13 @@
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/react-modal": "^3.13.1",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
     "rollup": "^2.72.0",
-    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.53.0",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4"
   },
@@ -30,10 +33,16 @@
     "react-dom": "^18.1.0"
   },
   "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c --watch"
+    "clean": "rimraf dist/*",
+    "build": "npm-run-all clean --parallel css js",
+    "css": "sass src/scss:dist/css --no-source-map",
+    "js": "rollup -c",
+    "watch": "npm-run-all clean --parallel watch-css watch-js",
+    "watch-css": "sass src/scss:dist/css --watch",
+    "watch-js": "rollup -c --watch"
   },
   "dependencies": {
+    "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.0",
     "@microsoft/signalr": "^6.0.3",
     "classnames": "^2.3.1",
@@ -41,6 +50,7 @@
     "emoji-toolkit": "^6.6.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "pdfjs-dist": "^2.15.349",
     "react-modal": "^3.14.4",
     "react-query": "^3.34.16"
   }

package/rollup.config.js

@@ -4,7 +4,6 @@ import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 import { terser } from "rollup-plugin-terser";
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import del from 'rollup-plugin-delete';
 
 const packageJson = require("./package.json");
 
@@ -24,9 +23,10 @@ export default [
             },
         ],
         plugins: [
-            del({ targets: 'dist/*' }),
             peerDepsExternal(),
-            resolve(),
+            resolve({ 
+                browser: true 
+            }),
             commonjs(),
             typescript({ tsconfig: "./tsconfig.json" }),
             terser(),

package/src/client/WeavyClient.ts

@@ -2,77 +2,158 @@ import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 export default class WeavyClient {
     url;
-    tokenFactory;
     connection;
-    groups: string[];
-    connectionEvents: any[];
+    tokenFactory;
+    groups: string[] = [];
+    connectionEvents: any[] = [];
     isConnectionStarted: any;
-
+    token: string = "";
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE = ".connection";
     EVENT_CLOSE = "close";
     EVENT_RECONNECTING = "reconnecting";
     EVENT_RECONNECTED = "reconnected";
 
+
     constructor(options: WeavyClientOptions) {
         this.url = options.url;
-        this.tokenFactory = options.tokenFactory
-        this.groups = [];
-        this.connectionEvents = [];
-         
+        this.tokenFactory = options.tokenFactory;
+        this.tokenPromise = null;        
         this.connection = new HubConnectionBuilder()
             .configureLogging(LogLevel.None)
             .withUrl(this.url + "/hubs/rtm", {
-                accessTokenFactory: this.tokenFactory
+                accessTokenFactory: () => { return this.tokenFactoryInternal.call(this, true, true) }
             })
             .withAutomaticReconnect()
             .build();
-        
-            this.isConnectionStarted = this.connection.start();           
+
+        this.isConnectionStarted = this.connection.start();
 
         this.connection.onclose(error => this.triggerHandler(this.EVENT_CLOSE, error));
         this.connection.onreconnecting(error => this.triggerHandler(this.EVENT_RECONNECTING, error));
         this.connection.onreconnected(connectionId => this.triggerHandler(this.EVENT_RECONNECTED, connectionId));
-        
+
+    }
+
+    async get(url: string, retry: boolean = true): Promise<Response> {
+        //const token = await this.tokenFactoryInternal();
+        //console.log("GET:", url, " - t:", token);
+        const response = await fetch(this.url + url, {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await this.tokenFactoryInternal()
+            }
+        });
+
+        if (!response.ok) {            
+            if ((response.status === 401 || response.status === 403) && retry) {
+                await this.tokenFactoryInternal(true);                
+                return await this.get(url, false);
+            }
+
+            console.error(`Error calling endpoint ${url}`, response)
+        }
+
+        return response;
     }
 
+    async post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType: string = "application/json", retry: boolean = true): Promise<Response> {
+        let headers: HeadersInit = {         
+            "Authorization": "Bearer " + await this.tokenFactoryInternal()
+        };
+
+        if(contentType !== ""){
+            headers["content-type"] = contentType
+        }
+        const response = await fetch(this.url + url, {
+            method: method,
+            body: body,
+            headers: headers
+        });
+
+        if (!response.ok) {
+            if ((response.status === 401 || response.status === 403) && retry) {
+                await this.tokenFactoryInternal(true);                
+                return await this.post(url, method, body, contentType, false);
+            }
 
-    async subscribe(group: string, event: string, callback: any) {        
+            console.error(`Error calling endpoint ${url}`, response)
+        }
+
+        return response;
+    }
+
+    async getToken(refresh: boolean) {
+        console.log("Refresh, ", refresh)
+        if (!this.token || refresh) {
+            console.log("Getting new token...")
+            this.token = await this.tokenFactory(true);
+            //return await this.tokenFactory(refresh);
+        }
+        //this.tokenPromise = null;
+        console.log("Resolve new token...")
+        return this.token;
+    }
+
+    async tokenFactoryInternal(refresh: boolean = false, fromSR: boolean = false): Promise<string> {
+        //console.log("Get token with refresh: ", refresh, fromSR)
+        if(this.token && !refresh) return this.token;
+
+        if(!this.tokenPromise){
+            //console.log("No ongoing promise, create new one. Refresh: ", refresh)
+            this.tokenPromise = this.tokenFactory(refresh);
+            let token = await this.tokenPromise;
+            //console.log("Got token: ", token)
+            this.tokenPromise = null;
+            this.token = token;
+            return this.token;
+        } else{
+            //console.log("Already a promise in action, wait for it to resolve...")
+            return this.tokenPromise;
+        }
+    }
+
+    async subscribe(group: string, event: string, callback: any) {
         await this.isConnectionStarted;
-        
+
         try {
             var name = group ? group + ":" + event : event;
             await this.connection.invoke("AddToGroup", name);
             this.groups.push(name);
             this.connection.on(name, callback);
-        } catch(err: any){
+        } catch (err: any) {
             console.warn("Error in AddToGroup:", err)
         }
-        
+
     }
 
     async unsubscribe(group: string, event: string, callback: any) {
         await this.isConnectionStarted;
         var name = group ? group + ":" + event : event;
-        
+
         // get first occurence of group name and remove it                        
         const index = this.groups.findIndex(e => e === name);
-        if(index !== -1){
+        if (index !== -1) {
             this.groups = this.groups.splice(index, 1);
 
-            try {                
+            try {
                 // if no more groups, remove from server
-                if(!this.groups.find(e => e === name)){
+                if (!this.groups.find(e => e === name)) {
                     await this.connection.invoke("RemoveFromGroup", name);
                 }
-                
-            } catch(err: any){
+
+            } catch (err: any) {
                 console.warn("Error in RemoveFromGroup:", err)
             }
         }
-            
+
         this.connection.off(name, callback);
     }
- 
+
+    destroy(){
+        this.connection.stop();        
+    }
+
     triggerHandler(name: string, ...data: any) {
         name = name.endsWith(this.EVENT_NAMESPACE) ? name : name + this.EVENT_NAMESPACE;
         let event = new CustomEvent(name, { cancelable: false });

package/src/components/Attachment.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Icon from "../ui/Icon";
 import { fileSizeAsString, getIcon } from "../utils/fileUtilities";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     previewFormat: string,
@@ -11,19 +10,20 @@ type Props = {
     name: string,
     kind: string,
     size: number,
-    provider: string
+    provider: string,
+    onClick?: (e: any) => void
 }
 
-const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: Props) => {
+const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => {
     let fileSize = size > 0 ? fileSizeAsString(size) : null;
     let { icon, color } = getIcon(name, mediaType)
     return (
-        <a href={previewUrl || url} className={wy('attachment')} target={"_blank"} title={name}>
-            <div className={wy('attachment-icon')} title={kind}><Icon.UI name={icon} color={color} size={2} /></div>
-            <div className={wy('attachment-content')}>
-                <div className={wy('attachment-title')}>{name}</div>
+        <a href={previewUrl || url} className="wy-attachment" target={"_blank"} title={name} onClick={onClick ? (e) => onClick(e) : undefined}>
+            <div className="wy-attachment-icon" title={kind}><Icon.UI name={icon} color={color} size={2} /></div>
+            <div className="wy-attachment-content">
+                <div className="wy-attachment-title">{name}</div>
                 {fileSize &&
-                    <div className={wy('attachment-meta')} title={fileSize}>{fileSize}</div>
+                    <div className="wy-attachment-meta" title={fileSize}>{fileSize}</div>
                 }
             </div>
         </a>

package/src/components/Avatar.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classNames from 'classnames';
 import Presence from "./Presence";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     id?: number,
@@ -14,8 +13,8 @@ type Props = {
 
 const Avatar = ({ id, src, name, presence, size = 48, className }: Props) => {
     return (
-        <div className={classNames(wy('avatar-presence'), className)}>
-            <img alt="" title={name} className={wy('avatar')} height={size} width={size} src={src} />
+        <div className={classNames('wy-avatar-presence', className)}>
+            <img alt="" title={name} className="wy-avatar" height={size} width={size} src={src} />
             {presence && id &&
                 <Presence id={id} status={presence} />
             }