From 10a72b1054b783b76fce76d1cccd54ab3a852859 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 7 Mar 2023 10:58:48 -0500
Subject: [PATCH] [REF]: Change import from iles-ui/core to just files-ui
---
.../FileMosaicImageVideoPreviews.tsx | 11 +--
.../avatar-demo/BasicDemoAvatar.tsx | 4 +-
.../dropzone-demo/AdvancedDropzoneDemo.jsx | 19 +++--
.../DemoFileMosaicImagePreview.tsx | 8 +-
.../DemoFileMosaicImgPreview.tsx | 77 +++++++++----------
src/files-ui/index.ts | 9 ++-
src/pages/FileCardMock.tsx | 7 +-
src/pages/FileItemMock.tsx | 12 +--
src/tester/AvatarTester.tsx | 18 ++---
src/utils.ts | 2 +-
10 files changed, 87 insertions(+), 80 deletions(-)
diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index b71ca0b..cc82426 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -1,7 +1,6 @@
import * as React from "react";
import { Stack, Paper } from "@mui/material";
-import { FileMosaic } from "../../../files-ui/components/file-mosaic";
-import { ExtFile } from "../../../files-ui/core";
+import { FileMosaic, ExtFile } from "../../../files-ui";
import DescParagraph from "../../demo-components/desc-paragraph/DescParagraph";
import { FullScreen, ImagePreview, VideoPreview } from "../../../files-ui";
@@ -28,9 +27,11 @@ const FileMosaicImageVideoPreviews: React.FC<
"https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
);
//setVideoSrc(videoSource);
- //
- setVideoSrc("https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4");
- // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
+ //
+ setVideoSrc(
+ "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
+ );
+ // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
};
return (
diff --git a/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx b/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx
index b64cf95..2a25a63 100644
--- a/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx
+++ b/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
-import { Avatar } from "../../../files-ui";
-import { ServerResponse, uploadFile } from "../../../files-ui/core";
+import { Avatar,ServerResponse, uploadFile } from "../../../files-ui";
+
const REMOTE =
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
index 7fb9aea..b9e04b3 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -1,14 +1,15 @@
import * as React from "react";
import {
Dropzone,
- FileMosaic /* FullScreenPreview */,
+ ExtFileInstance,
+ FileMosaic,
FullScreen,
ImagePreview,
VideoPreview,
+
} from "../../../files-ui";
import { useEffect, useState } from "react";
import axios from "axios";
-import { ExtFileInstance } from "../../../files-ui/core";
const REMOTE =
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
//const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
@@ -20,14 +21,16 @@ export default function AdvancedDropzoneDemo() {
const updateFiles = (incommingFiles) => {
console.log("incomming extFiles", incommingFiles);
- const arrExtFIleInstances = incommingFiles.map(
+ const arrExtFIleInstances = incommingFiles.map(
(extFile) => new ExtFileInstance(extFile)
);
- const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
+
+ console.log("incomming arrExtFIleInstances", arrExtFIleInstances);
+ /* const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
extFileInstance.toExtFile()
);
- console.log("incomming arrExtFIleInstances", arrExtFIleInstances);
- console.log("incomming listExtFileObjects", listExtFileObjects);
+
+ console.log("incomming listExtFileObjects", listExtFileObjects); */
setExtFiles(incommingFiles);
};
@@ -37,9 +40,9 @@ export default function AdvancedDropzoneDemo() {
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
- const onClean = () => {
+/* const onClean = () => {
setExtFiles(extFiles.filter((ef) => ef.valid !== false));
- };
+ }; */
const handleFinish = (res) => {
console.log("finish", res);
};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
index 0a6f312..0185a47 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
@@ -1,6 +1,10 @@
import * as React from "react";
-import { FileCard, FileInputButton, FileMosaic } from "../../../files-ui";
-import { ExtFile } from "../../../files-ui/core";
+import {
+ FileCard,
+ FileInputButton,
+ FileMosaic,
+ ExtFile,
+} from "../../../files-ui";
interface DemoFileMosaicImagePreviewProps {
card?: boolean;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
index b7b4cb3..c65c711 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
@@ -1,43 +1,42 @@
import * as React from "react";
-import { FileMosaic, FileInputButton } from "../../../files-ui";
-import { ExtFile } from "../../../files-ui/core";
-interface DemoFileMosaicImgPreviewProps{
+import { FileMosaic, FileInputButton, ExtFile } from "../../../files-ui";
+interface DemoFileMosaicImgPreviewProps {}
+const sampleFileProps: ExtFile = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "Thor arrives Wakanda.png",
+ imageUrl:
+ "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.disneylatino.com%2Fnovedades%2Favengers-la-escena-postcredito-de-thor-que-fue-clave-en-infinity-war&psig=AOvVaw2wijpnp7AqNfVNPszdMkOw&ust=1677372146505000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj_pqy4r_0CFQAAAAAdAAAAABAQ",
+};
+const DemoFileMosaicImgPreview: React.FC<DemoFileMosaicImgPreviewProps> = (
+ props: DemoFileMosaicImgPreviewProps
+) => {
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
-}
-const sampleFileProps:ExtFile = {
- id: ":0:",
- size: 28 * 1024 * 1024,
- type: "image/png",
- name: "Thor arrives Wakanda.png",
- imageUrl:"https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.disneylatino.com%2Fnovedades%2Favengers-la-escena-postcredito-de-thor-que-fue-clave-en-infinity-war&psig=AOvVaw2wijpnp7AqNfVNPszdMkOw&ust=1677372146505000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj_pqy4r_0CFQAAAAAdAAAAABAQ"
+ const updateFiles = (incommingFiles: ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
};
-const DemoFileMosaicImgPreview:React.FC<DemoFileMosaicImgPreviewProps> = (props:DemoFileMosaicImgPreviewProps) =>{
-
- const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
- const updateFiles = (incommingFiles:ExtFile[]) => {
- console.log("incomming extFiles", incommingFiles);
-
- setValue(incommingFiles[0]);
- };
- const removeFile = () => {
- setValue(undefined);
- };
-
- return(
- <>
- {value ? (
- <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
- ) : (
- <FileInputButton
- label="Browse File..."
- onChange={updateFiles}
- textDecoration="uppercase"
- accept="image/*"
- />
- )}
- <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
- </>
- )
-}
-export default DemoFileMosaicImgPreview;
\ No newline at end of file
+ return (
+ <>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ ) : (
+ <FileInputButton
+ label="Browse File..."
+ onChange={updateFiles}
+ textDecoration="uppercase"
+ accept="image/*"
+ />
+ )}
+ <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
+ </>
+ );
+};
+export default DemoFileMosaicImgPreview;
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index 508fcc5..ed04b69 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -22,8 +22,13 @@ export * from "./components/previews/ImagePreview/ImagePreview";
export { default as VideoPreview } from "./components/previews/VideoPreview/VideoPreview";
export * from "./components/previews/VideoPreview/VideoPreview";
+export type { FileMosaicProps } from "./components/file-mosaic/components/file-mosaic/FileMosaicProps";
+export type { DropzoneProps } from "./components/dropzone/components/dropzone/DropzoneProps";
+export type { FileInputButtonProps } from "./components/file-input-button/InputButtonProps";
+export type { FileCardProps } from "./components/file-card/FileCardProps";
+
export { useFakeProgress } from "./hooks";
-export { createListOfMultiTypeFile } from "./core";
+export { createListOfMultiTypeFile, uploadFile, uploadFormData, uploadExtFile, ExtFileInstance, ExtFileManager } from "./core";
-export type { ExtFile, ExtFileInstance, ExtFileListMap, ExtFileManager, UPLOADSTATUS, Localization } from "./core";
\ No newline at end of file
+export type { ExtFile, ExtFileListMap, UPLOADSTATUS, Localization, ServerResponse, UploadResponse, UploadConfig } from "./core";
\ No newline at end of file
diff --git a/src/pages/FileCardMock.tsx b/src/pages/FileCardMock.tsx
index a265894..75299f2 100644
--- a/src/pages/FileCardMock.tsx
+++ b/src/pages/FileCardMock.tsx
@@ -1,6 +1,5 @@
import * as React from "react";
-import FileCard from "../files-ui/components/file-card/FileCard";
-import { ExtFile } from "../files-ui/core";
+import { FileCard, ExtFile } from "../files-ui";
const baseFiles: ExtFile[] = [
{
id: Math.random(),
@@ -15,7 +14,7 @@ const baseFiles: ExtFile[] = [
type: "image/png",
size: 280000,
valid: true,
- uploadStatus:"uploading",
+ uploadStatus: "uploading",
imageUrl:
"https://super-ficcion.com/wp-content/uploads/2022/10/como-podria-regresar-iron-man-1-780x470.webp",
},
@@ -40,7 +39,7 @@ const FileCardMock = ({ darkMode = false, elevation = 2 }) => {
//hd
elevation={2}
darkMode={darkMode}
- onCancel={()=>{}}
+ onCancel={() => {}}
progress={25}
/>
))}
diff --git a/src/pages/FileItemMock.tsx b/src/pages/FileItemMock.tsx
index d1dd261..d118bb0 100644
--- a/src/pages/FileItemMock.tsx
+++ b/src/pages/FileItemMock.tsx
@@ -1,10 +1,12 @@
import * as React from "react";
import { FileItem } from "../files-ui";
-import { FileMosaic, FileMosaicProps } from "../files-ui/components/file-mosaic";
-import { BasePreparingLoader } from "../files-ui/components/loader";
-import InfiniteLoader from "../files-ui/components/loader/InfiniteLoader/InfiniteLoader";
-import LoaderContainer from "../files-ui/components/loader/LoaderContainer/LoaderContainer";
-import { ExtFile, UPLOADSTATUS } from "../files-ui/core";
+import {
+ FileMosaic,
+ FileMosaicProps,
+ ExtFile,
+ UPLOADSTATUS,
+} from "../files-ui";
+
const baseFiles: ExtFile[] = [
{
id: Math.random(),
diff --git a/src/tester/AvatarTester.tsx b/src/tester/AvatarTester.tsx
index 9e691c9..fd8b8cd 100644
--- a/src/tester/AvatarTester.tsx
+++ b/src/tester/AvatarTester.tsx
@@ -1,12 +1,6 @@
import * as React from "react";
import { Avatar } from "../files-ui";
-import {
- ServerResponse,
- //UploadPromiseResponse,
- //uploadPromiseXHR,
-} from "../files-ui/core";
-
-import { uploadFile } from "../files-ui/core";
+import { ServerResponse, uploadFile } from "../files-ui";
export const resultURL: string =
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1YdE-2sQT4na6RwujeATyMBcCXqg0Gf76TYTplRkMkq0wIi_SewCDq6VeUGxPwpK_Qd8&usqp=CAU";
@@ -25,10 +19,10 @@ const rowStyle: React.CSSProperties = {
gap: "15px",
};
-
-const REMOTE = "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
-const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
-
+const REMOTE =
+ "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+const LOCAL =
+ "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
interface AvatarTesterProps {}
const AvatarTester: React.FC<AvatarTesterProps> = (
@@ -38,7 +32,7 @@ const AvatarTester: React.FC<AvatarTesterProps> = (
undefined
);
- /* const handleChange = async (file: File) => {
+ /* const handleChange = async (file: File) => {
const endpoint: string = "http://localhost:2800/upload-avatar";
const response: UploadPromiseResponse = await uploadPromiseXHR(
{ id: 0, file: file, xhr: new XMLHttpRequest() },
diff --git a/src/utils.ts b/src/utils.ts
index b174a3d..392989b 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-import { ExtFile, ExtFileInstance } from "./files-ui/core";
+import { ExtFile, ExtFileInstance } from "./files-ui";
export const print_manager = (extFileList: ExtFile[] | ExtFileInstance[] | undefined, message: string = ""): void => {
if (extFileList)
--
GitLab