diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx index 99f8aedb72b86463e1898e8134624f2ad9136e1d..eaeaa2b32e65a5e295f12968b7c454a5d621c572 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { FileMosaic } from "../../../files-ui"; -import { ExtFile } from "../../../files-ui/core"; +import { ExtFile, getRandomInt } from "../../../files-ui/core"; const preparingFiles: ExtFile[] = [ { id: "fileId-1", @@ -73,6 +73,7 @@ const uploadResulFiles: ExtFile[] = [ uploadMessage: "File was uploaded correctly to Files-ui earthquakes", }, ]; + const FlexRowContainer = (props: { children: React.ReactNode }) => { return ( <div @@ -88,6 +89,41 @@ const FlexRowContainer = (props: { children: React.ReactNode }) => { ); }; const DemoFileMosaicUploadStatus = () => { + const [progress, setProgress] = React.useState(28); + const [progress2, setProgress2] = React.useState(28); + React.useEffect(() => { + const _myInterval = setInterval(() => { + setProgress((_progress) => { + if (_progress === 100) { + return 0; + } + const offset = getRandomInt(5, 14); + const newProgress = _progress + offset; + if (newProgress > 100) { + return 100; + } else { + return newProgress; + } + }); + setProgress2((_progress) => { + if (_progress === 100) { + return 0; + } + const offset = getRandomInt(10, 24); + const newProgress = _progress + offset; + if (newProgress > 100) { + return 100; + } else { + return newProgress; + } + }); + }, 2000); + + return () => { + console.log("clear interval", _myInterval); + clearInterval(_myInterval as NodeJS.Timer); + }; + }, []); return ( <> <FlexRowContainer> @@ -97,16 +133,20 @@ const DemoFileMosaicUploadStatus = () => { <FlexRowContainer> <FileMosaic {...uploadingFiles[0]} /> - <FileMosaic {...uploadingFiles[0]} progress={70} /> + <FileMosaic {...uploadingFiles[0]} progress={progress} /> <FileMosaic {...uploadingFiles[2]} onAbort={() => {}} /> - <FileMosaic {...uploadingFiles[3]} onAbort={()=>{}}/> + <FileMosaic + {...uploadingFiles[3]} + onAbort={() => {}} + progress={progress2} + /> </FlexRowContainer> <FlexRowContainer> - <FileMosaic {...uploadResulFiles[0]} resultOnTooltip/> - <FileMosaic {...uploadResulFiles[1]} resultOnTooltip/> - <FileMosaic {...uploadResulFiles[2]} resultOnTooltip/> - <FileMosaic {...uploadResulFiles[3]} resultOnTooltip/> + <FileMosaic {...uploadResulFiles[0]} resultOnTooltip /> + <FileMosaic {...uploadResulFiles[1]} resultOnTooltip /> + <FileMosaic {...uploadResulFiles[2]} resultOnTooltip /> + <FileMosaic {...uploadResulFiles[3]} resultOnTooltip /> </FlexRowContainer> </> ); diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx index d67e0cf95997c0bf1236521173d4bd19600ab1de..96ee3f9874108392958d4a0f208112f3aab7ab73 100644 --- a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx +++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx @@ -51,17 +51,19 @@ const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = ( if (statusHistory.length > 1) { elevate(); } - // eslint-disable-next-line + // eslint-disable-next-line }, [statusHistory.length]); - const PreparingStatus = () => { - return ( - <React.Fragment> - <InfiniteLoader onClick={onCancel} size={65} /> - <span>{FileItemStatusLocalizer.preparing as string}</span> - </React.Fragment> - ); - }; + const PreparingStatus = React.useMemo( + () => () => + ( + <React.Fragment> + <InfiniteLoader onClick={onCancel} size={65} /> + <span>{FileItemStatusLocalizer.preparing as string}</span> + </React.Fragment> + ), + [] + ); const UploadingStatus = React.useMemo( () => () => ( diff --git a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx index a5ab43714d833f2c224d0ad6476caa2808b9bbf2..3a3d2109e55d2714c656bd89549c08ec1151e6d9 100644 --- a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx +++ b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { Clear } from "../../icons"; import { parseSize } from "../../icons/utils/utils"; -//import BasePreparingLoader from "../BasePreparingLoader/BasePreparingLoader"; import LoaderContainer from "../LoaderContainer/LoaderContainer"; import { DynamicLoaderProps } from "./DynamicLoaderProps"; @@ -24,7 +23,8 @@ const DynamicLoader: React.FC<DynamicLoaderProps> = ( onClick, } = props; - console.log("percentage", percentage); + console.table(props); + //console.log("percentage", percentage); const finalRadius = radius || 28; const finalX = x || 30;