From e5db74bf178f6d657bb05fad30e8235b569195ce Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 7 Mar 2023 01:42:53 -0500
Subject: [PATCH] [WIP]: Add FIle Card Demo Page and also make the FileCard
component
---
.../file-card-demo/CodeJSFileCardBasic.jsx | 113 ++++++++++
.../file-card-demo/DemoFileCardBasic.jsx | 32 +++
.../DemoFileMosaicImagePreview.tsx | 25 ++-
.../FileCard => file-card}/FileCard.scss | 0
.../FileCard => file-card}/FileCard.tsx | 209 +++++++++---------
.../FileCard => file-card}/FileCardPaper.scss | 0
.../components/file-card/FileCardProps.ts | 39 ++++
.../components/FileCard/FileCardProps.ts | 198 -----------------
.../components/file-mosaic/FileMosaic.tsx | 4 +-
src/files-ui/index.ts | 5 +-
src/pages/FileCardMock.tsx | 4 +-
src/pages/demo/FileCardDemoPage.jsx | 82 +++++--
12 files changed, 380 insertions(+), 331 deletions(-)
create mode 100644 src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
create mode 100644 src/components/demo-components/file-card-demo/DemoFileCardBasic.jsx
rename src/files-ui/components/{file-item/components/FileCard => file-card}/FileCard.scss (100%)
rename src/files-ui/components/{file-item/components/FileCard => file-card}/FileCard.tsx (67%)
rename src/files-ui/components/{file-item/components/FileCard => file-card}/FileCardPaper.scss (100%)
create mode 100644 src/files-ui/components/file-card/FileCardProps.ts
delete mode 100644 src/files-ui/components/file-item/components/FileCard/FileCardProps.ts
diff --git a/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx b/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
new file mode 100644
index 0000000..06d41c4
--- /dev/null
+++ b/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
@@ -0,0 +1,113 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileCardBasic = (props) => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeJSFileCardBasic;
+
+const splittedCodeJS = `<>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} />
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} />
+</>
+
+// file props
+const sampleFileProps = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};`;
+
+const completeCodeJS = `import * as React from "react";
+import { InputButton, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+
+export default function App() {
+ const [value, setValue] = React.useState(undefined);
+
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <div style={{display:"flex", gap:"10px"}}>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} info/>
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} info/>
+ </div>
+ );
+};`;
+
+const splittedCodeTS = `<>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} info/>
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} info/>
+</>
+
+// file props
+const sampleFileProps: ExtFile = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};`;
+const completeCodeTS = `import * as React from "react";
+import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+
+const sampleFileProps:ExtFile = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+
+export default function App() {
+ 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 (
+ <div style={{display:"flex", gap:"10px"}}>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} info/>
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} info/>
+ </div>
+ );
+};`;
diff --git a/src/components/demo-components/file-card-demo/DemoFileCardBasic.jsx b/src/components/demo-components/file-card-demo/DemoFileCardBasic.jsx
new file mode 100644
index 0000000..88b6d77
--- /dev/null
+++ b/src/components/demo-components/file-card-demo/DemoFileCardBasic.jsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { FileCard, FileInputButton, FileMosaic } from "../../../files-ui";
+
+const sampleFileProps = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+const DemoFileCardBasic = (props) => {
+ const [value, setValue] = React.useState(undefined);
+
+ const updateFile = (incommingFiles) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <>
+ {value ? (
+ <FileCard {...value} onDelete={removeFile} info/>
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileCard {...sampleFileProps} info/>
+ </>
+ );
+};
+export default DemoFileCardBasic;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
index f59b070..0a6f312 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
@@ -1,8 +1,10 @@
import * as React from "react";
-import { FileInputButton, FileMosaic } from "../../../files-ui";
+import { FileCard, FileInputButton, FileMosaic } from "../../../files-ui";
import { ExtFile } from "../../../files-ui/core";
-interface DemoFileMosaicImagePreviewProps {}
+interface DemoFileMosaicImagePreviewProps {
+ card?: boolean;
+}
const sampleFileProps: ExtFile = {
id: "fileId",
@@ -24,10 +26,25 @@ const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = (
const removeFile = () => {
setValue(undefined);
};
+ if (props.card)
+ return (
+ <>
+ {value ? (
+ <FileCard {...value} onDelete={removeFile} info preview />
+ ) : (
+ <FileInputButton
+ value={value ? [value] : []}
+ onChange={updateFile}
+ accept="image/*"
+ />
+ )}
+ <FileCard {...sampleFileProps} info />
+ </>
+ );
return (
<>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info preview/>
+ <FileMosaic {...value} onDelete={removeFile} info preview />
) : (
<FileInputButton
value={value ? [value] : []}
@@ -35,7 +52,7 @@ const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = (
accept="image/*"
/>
)}
- <FileMosaic {...sampleFileProps} info/>
+ <FileMosaic {...sampleFileProps} info />
</>
);
};
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
similarity index 100%
rename from src/files-ui/components/file-item/components/FileCard/FileCard.scss
rename to src/files-ui/components/file-card/FileCard.scss
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
similarity index 67%
rename from src/files-ui/components/file-item/components/FileCard/FileCard.tsx
rename to src/files-ui/components/file-card/FileCard.tsx
index 8765dea..4b6a2c4 100644
--- a/src/files-ui/components/file-item/components/FileCard/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -2,15 +2,18 @@ import * as React from "react";
import { FileCardProps, FileCardPropsDefault } from "./FileCardProps";
import "./FileCard.scss";
import "./FileCardPaper.scss";
-import FileItemImage from "../FileItemImage/FileItemImage";
-import useFileItemInitializer from "../../hooks/useFileItemInitializer";
-import { getLocalFileItemData } from "../../utils/getLocalFileItemData";
-import { Clear } from "../../../icons";
-import { fileSizeFormater, shrinkWord } from "../../../../core";
-import { mergeProps } from "../../../overridable";
-import { showFileItemComponent } from "../../utils/showFileItemComponent";
-import useFileItemProgress from "../../hooks/useFileItemProgress";
-import MainLayerBodyNeo from "../FileItemMainLayer/MainLayerBody/MainLayerBodyNeo";
+import FileItemImage from "../file-item/components/FileItemImage/FileItemImage";
+import useFileItemInitializer from "../file-item/hooks/useFileItemInitializer";
+import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
+import { Clear } from "../icons";
+import { fileSizeFormater, shrinkWord } from "../../core";
+import { mergeProps } from "../overridable";
+import { showFileItemComponent } from "../file-item/utils/showFileItemComponent";
+import useFileItemProgress from "../file-item/hooks/useFileItemProgress";
+import MainLayerBodyNeo from "../file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo";
+import useProgress from "../file-mosaic/hooks/useProgress";
+import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
+import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
const setFinalElevation = (elevation: string | number): number => {
// let finalElevation: number = "";
@@ -30,7 +33,7 @@ const setFinalElevation = (elevation: string | number): number => {
};
const makeFileCardClassName = (
elevation: FileCardProps["elevation"],
- darkMode: boolean,
+ darkMode: boolean | undefined,
className: string | undefined
): string => {
console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
@@ -51,43 +54,56 @@ const makeFileCardClassName = (
const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const {
+ style,
+ className,
+
file,
name: propName,
size: propSize,
type: propType,
- onDelete,
- onSee,
- onWatch,
- style,
- preview,
- //onlyImage,
- info,
+
id,
valid,
+ errors,
uploadStatus,
uploadMessage,
- hd,
+ progress,
+
+ xhr,
+
localization,
- errors,
+ preview,
imageUrl,
- elevation,
- alwaysActive,
- resultOnTooltip,
+ info,
+ backgroundBlurImage = true,
+ darkMode,
+
+ alwaysActive = true,
+
+ resultOnTooltip = true,
+
downloadUrl,
- onDownload,
- progress,
- onAbort,
- xhr,
+
+ onDelete,
onCancel,
- showProgress,
- className,
+ onAbort,
+
+ onDownload,
+ onSee,
+ onWatch,
+
onDoubleClick,
+ onClick,
onRightClick,
- backgroundBlurImage,
- darkMode,
- } = mergeProps(props, FileCardPropsDefault);
+
+ elevation=2,
+
+ //} = mergeProps(props, FileCardPropsDefault);
+ } = props;
//ref for anchor element
+ const downloadRef = React.useRef<HTMLAnchorElement>(null);
+
const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
//className created
@@ -97,12 +113,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
className
);
- const showFileItem: boolean = showFileItemComponent(
- file,
- propName
- // Boolean(rootClassNameCreated)
- );
-
// local properties from file
const [localName, localType, localSize]: [
string,
@@ -111,15 +121,16 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
] = getLocalFileItemData(file, propName, propType, propSize);
// handle progress
- const localProgress = useFileItemProgress(progress, showProgress, xhr);
+ const localProgress: number | undefined = useProgress(progress, xhr);
//Initialize File Item
- const [isImage, isVideo, url, imageSource]: [
+ const [isReady, isImage, isVideo, url, imageSource]: [
+ boolean,
boolean,
boolean,
string,
string | undefined
- ] = useFileItemInitializer(
+ ] = useFileMosaicInitializer(
file,
propName,
propType,
@@ -133,7 +144,43 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
? fileSizeFormater(localSize)
: "0 KB";
+ //alwaysActive
+ const [showInfo, setShowInfo] = React.useState<boolean>(false);
+
+ /********* ALWAYS ACTIVE LOGIC ***************/
+ //state for actionOnHover
+ const [hovering, setHovering] = React.useState<boolean>(false);
+ const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
+ if (alwaysActive) return;
+ setHovering(true);
+ };
+ const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
+ if (alwaysActive) return;
+ setHovering(false);
+ };
+
+ /***************** HANDLERS **********/
+ //delete file item
+ const handleDelete = (): void => onDelete?.(id);
+
+ //open info layer
+ const handleOpenInfo = (): void => setShowInfo(true);
+
+ //close info layer
+ const handleCloseInfo = (): void => setShowInfo(false);
+
+ const isUploading: boolean = useIsUploading(uploadStatus);
+
+ React.useEffect(() => {
+ //console.log("Change isUploading", isUploading);
+ if (isUploading && showInfo) {
+ handleCloseInfo();
+ }
+ // eslint-disable-next-line
+ }, [isUploading]);
+
/*************** Click ***************/
+ /*************** CLICK ***************/
/**
* TO-DO: Add functionallity on click event
* @param e event object
@@ -143,44 +190,32 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
): void {
//avoid children to trigger onClick ripple from parent
e.stopPropagation();
+ onClick?.(e);
}
+ const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
+ evt: React.MouseEvent
+ ): void => {
+ alert("double click on file");
+ evt.preventDefault();
- /***************** HANDLERS **********/
- //delete file item
- const handleDelete = (): void => {
- onDelete?.(id);
- };
- //open info layer
- /* const handleOpenInfo = () => {
- setShowInfo(true);
- }; */
- //close info layer
- /* const handleCloseInfo = () => {
- setShowInfo(false);
- }; */
- //handle watch video
- const handleOpenVideo = async () => {
- if (file) onWatch?.(file);
- };
- //open image
- const handleOpenImage = async () => {
- if (imageSource) {
- // if (hd) {
- // const response = await readImagePromise(file);
- // onSee?.(response || "");
- // } else {
- onSee?.(imageSource);
- //}
- }
+ onDoubleClick?.(evt);
};
+ function handleRightClick(evt: React.MouseEvent) {
+ // alert("right click!!!!");
+ //get coordinates
+ //zindex
+ //create menu component
+ // evt.preventDefault();
+ onRightClick?.(evt);
+ }
- /********** DOWNLOAD HANDLERS **********/
+ // DOWNLOAD FILE
/**
* onDownload, form 1
* Trigger dowload directly performing a click on anchor element
*/
const innerDownload = () => {
- const anchorElement = downloadAnchorRef.current;
+ const anchorElement = downloadRef.current;
if (anchorElement) {
anchorElement.click();
}
@@ -196,42 +231,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
innerDownload();
}
};
- /**
- * Perform abort event when xhr is given
- */
- const handleAbort = (): void => {
- //trigger abort event
- xhr?.abort();
- // handle externally the abort event
- onAbort?.(id);
- };
- /**
- * Handle onCancel event
- */
- const handleCancel = (): void => {
- // handle externally the cancel event
- onCancel?.(id);
- };
-
- const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
- evt: React.MouseEvent
- ): void => {
- alert("double click on file");
- evt.preventDefault();
-
- onDoubleClick?.(evt);
- };
- function handleRightClick(evt: React.MouseEvent) {
- // alert("right click!!!!");
- //get coordinates
- //zindex
- //create menu component
- // evt.preventDefault();
- // onRightClick?.(evt);
- }
- //console.log("FileItem onCancel", onCancel);
- if (showFileItem) {
+ if (isReady) {
return (
<div
className={finalClassName}
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCardPaper.scss b/src/files-ui/components/file-card/FileCardPaper.scss
similarity index 100%
rename from src/files-ui/components/file-item/components/FileCard/FileCardPaper.scss
rename to src/files-ui/components/file-card/FileCardPaper.scss
diff --git a/src/files-ui/components/file-card/FileCardProps.ts b/src/files-ui/components/file-card/FileCardProps.ts
new file mode 100644
index 0000000..ca30123
--- /dev/null
+++ b/src/files-ui/components/file-card/FileCardProps.ts
@@ -0,0 +1,39 @@
+import { FileMosaicPropsMap } from "../file-mosaic/components/file-mosaic/FileMosaicProps";
+
+
+export interface FileCardPropsMap extends FileMosaicPropsMap {
+ elevation?: false | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24
+ | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24";
+}
+
+
+export type FileCardProps = {
+ [F in keyof FileCardPropsMap]: FileCardPropsMap[F]
+}
+
+/**
+ * Base default props
+ */
+export const FileCardPropsDefault: FileCardProps = {
+ onDelete: undefined,
+ file: undefined,
+ color: "#071e25",
+ // validator: undefined,
+ id: undefined,
+ style: {},
+ preview: false,
+ valid: undefined,
+ info: false,
+ //hd: undefined,
+ localization: "EN-en",
+ //onlyImage: false,
+ imageUrl: undefined,
+ errors: undefined,
+ elevation: 2,
+ alwaysActive: undefined,
+ progress: undefined,
+ resultOnTooltip: true,
+ backgroundBlurImage: true,
+ darkMode: false,
+ //fileName: "bottom"
+}
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCardProps.ts b/src/files-ui/components/file-item/components/FileCard/FileCardProps.ts
deleted file mode 100644
index 2dbc354..0000000
--- a/src/files-ui/components/file-item/components/FileCard/FileCardProps.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-import { OverridableComponentProps } from "../../../overridable";
-
-export interface FileCardPropsMap extends OverridableComponentProps {
- /**
- * The file object obtained from client drop or selection
- */
- file?: File;
- /**
- * The name of the file
- */
- name?: string;
- /**
- * The file mime type
- */
- type?: string;
- /**
- * the size of the file in bytes
- */
- size?: number;
- /**
- * A function of what to do when close button is pressed or clicked
- */
- onDelete?: (fileId: number | string | undefined) => void;
- /**
- * A function that return a file object when "see" button is pressed or clicked
- */
- onSee?: (imageUrl: string) => void;
- /**
- * A function that return a file object when "play" button is presssed or clicked
- */
- onWatch?: (videoUrl: File) => void;
- /**
- * Whether to see as grid or inline (horizontal list)
- */
- errors?: string[];
- /**
- * individual validator for each file
- */
- //validator?: FileItemValidator;
- /**
- * identifier for the file
- */
- id?: string | number;
- /**
- * if true, and if the file is an image,
- * makes visible the "view" button that will get the image url
- * Also, it will be visible only when file is valid
- */
- preview?: boolean;
- /**
- * whether to show a valid or rejected message ("ok", "rejected")
- * by def. valid is false (if not present, it's false too)
- * This value wil affect preview behaviour,
- * If not valid, the preview will not be shown, nor the view button
- */
- valid?: boolean | null;
- /**
- * This feature is hidden, it is not present on the documentation
- * because it's experimental. If you found this prop, you can test it
- * and comment us if any issue is found. Thanks in advance.
- *
- * Make file name, info layer, size and "valid message"
- * not visible
- */
- //onlyImage?: boolean;
- /**
- * whether to show the info layer or not
- * also whether to make visible the info button or not ,
- * Only works when given a image file
- */
- info?: boolean;
- /**
- * A string representation or web url of the image
- * that will be set to the "src" prop of an <img/> tag
- * <img src={`${url}`} />
- */
- imageUrl?: string;
-
-
- elevation: false | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24
- | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24";
-
- /**
- * The message from server
- */
- uploadMessage?: string;
- /**
- * where to place the file name
- * [in construction]
- */
- //fileName?: "bottom" | "inside";
- /**
- * The current upload status of the file
- */
- uploadStatus?: UPLOADSTATUS;
- /**
- * If present, preview on full screen will
- * be presented in the real image resolution
- */
- hd?: boolean | undefined;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- /**
- * Flag that determines whether actions are visible always, or only on hover event
- */
- alwaysActive?: boolean;
- /**
- * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
- */
- resultOnTooltip?: boolean;
- /**
- * Url to perform a GET request in order to download the file.
- * This action is triggered when download button is clicked or pressed.
- * In case onDownload prop is given
- */
- downloadUrl?: string;
- /**
- * Event that is triggered when download button is clicked or pressed
- */
- onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * Whether to show progress or not.
- * @default true if xhr is initialized
- * @default false if xhr is not given
- */
- showProgress?: boolean;
- /**
- * abort event
- */
- onAbort?: Function;
- /**
- * cancel when preparing event
- */
- onCancel?: Function;
- /**
- * A reference to the XHR object that allows the upload and abort event.
- * and progress
- */
- xhr?: XMLHttpRequest;
- /**
- * Event that is triggered when user duble clicks the component
- */
- onDoubleClick?: (evt: React.MouseEvent) => void;
- /**
- * Event that is triggered when user duble clicks the component
- */
- onRightClick?: (evt: React.MouseEvent) => void;
- /**
- * Flag that indicates whether to show a background blur image or not
- */
- backgroundBlurImage?: boolean;
- /**
- * Flag that indicates whether to activates dark mode for component or not
- */
- darkMode: boolean;
-}
-
-
-export type FileCardProps = {
- [F in keyof FileCardPropsMap]: FileCardPropsMap[F]
-}
-
-/**
- * Base default props
- */
-export const FileCardPropsDefault: FileCardProps = {
- onDelete: undefined,
- file: undefined,
- color: "#071e25",
- // validator: undefined,
- id: undefined,
- style: {},
- preview: false,
- valid: undefined,
- info: false,
- hd: undefined,
- localization: "EN-en",
- //onlyImage: false,
- imageUrl: undefined,
- errors: undefined,
- elevation: 2,
- alwaysActive: undefined,
- progress: undefined,
- resultOnTooltip: true,
- backgroundBlurImage: true,
- darkMode: false,
- //fileName: "bottom"
-}
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 0ce3160..696d21d 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -60,7 +60,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onRightClick,
} = props;
- console.log("FileMosaic progress " + id, progress);
+ // console.log("FileMosaic progress " + id, progress);
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
@@ -87,7 +87,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
); */
const localProgress: number | undefined = useProgress(progress, xhr);
- console.log("FileMosaic progress localProgress " + localProgress);
+ //console.log("FileMosaic progress localProgress " + localProgress);
//Initialize File Item
const [isReady, isImage, isVideo, url, imageSource]: [
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index 2fa22c1..508fcc5 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -7,6 +7,9 @@ export * from "./components/avatar/Avatar";
export { FileItem } from "./components";
export * from "./components";
+export { default as FileCard } from "./components/file-card/FileCard";
+export * from "./components/file-card/FileCard";
+
export { default as FileMosaic } from "./components/file-mosaic/components/file-mosaic/FileMosaic";
export * from "./components/file-mosaic/components/file-mosaic/FileMosaic";
@@ -21,6 +24,6 @@ export * from "./components/previews/VideoPreview/VideoPreview";
export { useFakeProgress } from "./hooks";
-export {createListOfMultiTypeFile} from "./core";
+export { createListOfMultiTypeFile } from "./core";
export type { ExtFile, ExtFileInstance, ExtFileListMap, ExtFileManager, UPLOADSTATUS, Localization } from "./core";
\ No newline at end of file
diff --git a/src/pages/FileCardMock.tsx b/src/pages/FileCardMock.tsx
index b8b353a..a265894 100644
--- a/src/pages/FileCardMock.tsx
+++ b/src/pages/FileCardMock.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
+import FileCard from "../files-ui/components/file-card/FileCard";
import { ExtFile } from "../files-ui/core";
const baseFiles: ExtFile[] = [
{
@@ -37,7 +37,7 @@ const FileCardMock = ({ darkMode = false, elevation = 2 }) => {
onSee={handleSee}
info
alwaysActive
- hd
+ //hd
elevation={2}
darkMode={darkMode}
onCancel={()=>{}}
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 3309c7d..74f2126 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -12,7 +12,12 @@ import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
-
+import DemoFileCardBasic from "../../components/demo-components/file-card-demo/DemoFileCardBasic";
+import CodeJSFileCardBasic from "../../components/demo-components/file-card-demo/CodeJSFileCardBasic";
+import { AlertTitle } from "@mui/material";
+import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
+import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
+import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
const FileCardDemoPage = (props) => {
return (
@@ -20,9 +25,9 @@ const FileCardDemoPage = (props) => {
<MainContentContainer>
<MainTitle>FileCard</MainTitle>
<MainParagraph>
- File mosaics are compact elements that represent a file in the UI.
- They can be used for just showing general info of the file, or either
- allow the user to interact with them.
+ File cards, as well as file mosaics, are compact elements that
+ represent a file in the UI. They can be used for just showing general
+ info of the file, or either allow the user to interact with them.
</MainParagraph>
<DescParagraph>
This widget allow users to see information of Files and / or trigger
@@ -34,10 +39,10 @@ const FileCardDemoPage = (props) => {
{"<InputButton/>"} components, so some of the behavior demonstrated
here is not shown in context.{" "}
</Alert>
- <section id="basic-filemosaic">
- <SubTitle content="Basic FileMosaic" />
+ <section id="basic-filecard">
+ <SubTitle content="Basic FileCard" />
<DescParagraph>
- The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
+ The <CodeHighlight>FileCard</CodeHighlight> supports displaying
information from <TypeHighlight>File</TypeHighlight> object or
individual props.
</DescParagraph>
@@ -52,27 +57,64 @@ const FileCardDemoPage = (props) => {
}}
>
<Stack spacing={2} direction="row" alignItems={"center"}>
- <BasicFileMosaicDemo />
+ <DemoFileCardBasic />
</Stack>
</Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
+ <CodeJSFileCardBasic />
+ <Alert severity="info">
+ <AlertTitle> FileInputButton </AlertTitle>
+ For completeness, some of these examples include{" "}
+ <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
+ component for allowing the user to select files. For further
+ information of this component check out the{" "}
+ <a href="/components/fileinputbutton">FileInputButton</a> page.
+ </Alert>
+ <br />
+ <Alert severity="info">
+ <AlertTitle> ExtFile </AlertTitle>
+ {/* This is an info alert — <strong>check it out!</strong>
+ */}
+ <strong>ExtFile type </strong>
+ is explicity used in the
+ <strong> Typescript</strong> example and is implicity used in the{" "}
+ <strong>Javascript</strong> example for handling the metadata that
+ makes possible the information exchange between components. For
+ further information about this data type check out the{" "}
+ <a href="/types#ext-file">ExtFile-API. </a>
+ </Alert>
</section>
<section id="image-preview">
<SubTitle content="Image preview" />
<DescParagraph>
By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
- <TypeHighlight>true</TypeHighlight> the component will show a image
- preview using the <CodeHighlight>imageUrl</CodeHighlight>
- prop or by reading the <TypeHighlight>File</TypeHighlight> object if
- given (file prop).
+ <TypeHighlight>true</TypeHighlight> the component will show an image
+ preview instead of a file icon.
+ <br />
+ To acomplish this task this component will take the{" "}
+ <CodeHighlight>imageUrl</CodeHighlight>
+ prop or will read the <TypeHighlight>File</TypeHighlight> object if
+ given and if it is an image.
+ <br />
+ Finally, the <TypeHighlight>info</TypeHighlight> prop is used to
+ show the complete information of the file.
</DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- {/* <BasicDemoDropzone /> */}
- </Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicImagePreview card />
+ </DemoContainerFileMosaic>
+
+ <CodeJSFileMosaicImagePreview card/>
+ <Alert severity="info">
+ As you can notice, when
+ <CodeHighlight>{`imageUrl`}</CodeHighlight> prop is present, the{" "}
+ <CodeHighlight>{`preview`}</CodeHighlight> prop is not needed since
+ it has more priority.
+ <br />
+ On the other side, for displaying an image preview as a result of
+ reading an image File it is necesary to set the{" "}
+ <CodeHighlight>{`preview`}</CodeHighlight> prop, otherwise a default
+ image preview will be shown in order to save memory.
+ </Alert>
</section>
<section id="validation">
<SubTitle content="Validation" />
@@ -101,7 +143,7 @@ const rightMenuItems = [
{
id: 0,
label: "Basic file mosaic",
- referTo: "/components/file-mosaic#basic-filemosaic",
+ referTo: "/components/file-mosaic#basic-filecard",
},
{
id: 1,
--
GitLab