From a2f00c3a7143108c52970e77e6b16057a05ad9d9 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 8 Mar 2023 19:56:12 -0500
Subject: [PATCH] [FEAT]: Add FileCardComponent MVP
---
.../file-card-demo/CodeJSFileCardBasic.jsx | 38 +++++++------
.../CodeJSFileMosaicImagePreview.tsx | 35 ++++++------
.../DemoContainerFileMosaic.jsx | 24 +++++---
.../components/file-card/FileCard.scss | 35 +++++-------
.../components/file-card/FileCard.tsx | 55 ++++++++++---------
.../components/FileCardRightActions.scss | 27 +++++++++
...ightLayer.tsx => FileCardRightActions.tsx} | 18 +++---
.../components/FileMosaicRightLayer.scss | 16 ------
src/pages/demo/FileCardDemoPage.jsx | 6 +-
9 files changed, 137 insertions(+), 117 deletions(-)
create mode 100644 src/files-ui/components/file-card/components/FileCardRightActions.scss
rename src/files-ui/components/file-card/components/{FileCardRightLayer.tsx => FileCardRightActions.tsx} (91%)
delete mode 100644 src/files-ui/components/file-card/components/FileMosaicRightLayer.scss
diff --git a/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx b/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
index 06d41c4..d945844 100644
--- a/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
+++ b/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
@@ -1,27 +1,27 @@
import * as React from "react";
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeJSFileCardBasic = (props) => {
+const CodeJSFileCardBasic = ({ card }) => {
return (
<ShowDemoCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
/>
);
};
export default CodeJSFileCardBasic;
-const splittedCodeJS = `<>
+const splittedCodeJS = (card) => `<>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} />
+ <${!card ? "FileMosaic" : "FileCard"} {...value} onDelete={removeFile} />
) : (
<FileInputButton value={value ? [value] : []} onChange={updateFile} />
)}
- <FileMosaic {...sampleFileProps} />
+ <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} />
</>
// file props
@@ -32,7 +32,7 @@ const sampleFileProps = {
name: "file created from props.jsx",
};`;
-const completeCodeJS = `import * as React from "react";
+const completeCodeJS = (card) => `import * as React from "react";
import { InputButton, FileMosaic } from "@files-ui/react";
const sampleFileProps = {
@@ -55,22 +55,24 @@ export default function App() {
return (
<div style={{display:"flex", gap:"10px"}}>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info/>
+ <${
+ !card ? "FileMosaic" : "FileCard"
+ } {...value} onDelete={removeFile} info/>
) : (
<FileInputButton value={value ? [value] : []} onChange={updateFile} />
)}
- <FileMosaic {...sampleFileProps} info/>
+ <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} info/>
</div>
);
};`;
-const splittedCodeTS = `<>
+const splittedCodeTS = (card) => `<>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info/>
+ <${!card ? "FileMosaic" : "FileCard"} {...value} onDelete={removeFile} info/>
) : (
<FileInputButton value={value ? [value] : []} onChange={updateFile} />
)}
- <FileMosaic {...sampleFileProps} info/>
+ <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} info/>
</>
// file props
@@ -80,7 +82,7 @@ const sampleFileProps: ExtFile = {
type: "text/plain",
name: "file created from props.jsx",
};`;
-const completeCodeTS = `import * as React from "react";
+const completeCodeTS = (card) => `import * as React from "react";
import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
const sampleFileProps:ExtFile = {
@@ -103,11 +105,13 @@ export default function App() {
return (
<div style={{display:"flex", gap:"10px"}}>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info/>
+ <${
+ !card ? "FileMosaic" : "FileCard"
+ } {...value} onDelete={removeFile} info/>
) : (
<FileInputButton value={value ? [value] : []} onChange={updateFile} />
)}
- <FileMosaic {...sampleFileProps} info/>
+ <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} info/>
</div>
);
};`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
index 63d00ec..3af3061 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
@@ -1,27 +1,28 @@
import * as React from "react";
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeJSFileMosaicImagePreview = () => {
+const CodeJSFileMosaicImagePreview = (props:{card:boolean}) => {
+ const {card}=props;
return (
<ShowDemoCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
/>
);
};
export default CodeJSFileMosaicImagePreview;
-const splittedCodeJS = `<>
+const splittedCodeJS = (card:boolean)=>`<>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info preview/>
+ <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
) : (
<FileInputButton onChange={updateFile} accept="image/*"/>
)}
- <FileMosaic {...sampleFileProps} info/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
</>
// file props
@@ -33,7 +34,7 @@ const sampleFileProps = {
imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
};`;
-const completeCodeJS = `import * as React from "react";
+const completeCodeJS = (card:boolean)=>`import * as React from "react";
import { InputButton, FileMosaic } from "@files-ui/react";
const sampleFileProps = {
@@ -57,22 +58,22 @@ export default function App() {
return (
<div style={{display:"flex", gap:"10px"}}>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info preview/>
+ <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
) : (
<FileInputButton onChange={updateFile} accept="image/*"/>
)}
- <FileMosaic {...sampleFileProps} info/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
</div>
);
};`;
-const splittedCodeTS = `<>
+const splittedCodeTS = (card:boolean)=>`<>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info preview/>
+ <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
) : (
<FileInputButton onChange={updateFile} accept="image/*"/>
)}
-<FileMosaic {...sampleFileProps} info/>
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
</>
// file props
@@ -83,7 +84,7 @@ const sampleFileProps: ExtFile = {
name: "Thor arrives wakanda.jpg",
imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
};`;
-const completeCodeTS = `import * as React from "react";
+const completeCodeTS = (card:boolean)=>`import * as React from "react";
import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
const sampleFileProps: ExtFile = {
@@ -107,11 +108,11 @@ export default function App() {
return (
<div style={{display:"flex", gap:"10px"}}>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} info preview/>
+ <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
) : (
<FileInputButton onChange={updateFile} accept="image/*"/>
)}
- <FileMosaic {...sampleFileProps} info/>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
</div>
);
};`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx b/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx
index 623359b..9e63d14 100644
--- a/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx
@@ -1,7 +1,7 @@
-import { Paper, Stack } from "@mui/material";
+import { Paper, Stack, Box } from "@mui/material";
import * as React from "react";
-const DemoContainerFileMosaic = ({ children }) => {
+const DemoContainerFileMosaic = ({ children, card }) => {
return (
<Paper
variant="outlined"
@@ -12,15 +12,21 @@ const DemoContainerFileMosaic = ({ children }) => {
justifyContent: "center",
}}
>
- <Stack
- spacing={4}
- direction="row"
- alignItems={"center"}
- flexWrap="wrap"
- justifyContent={"space-evenly"}
+ <Box
+ sx={{
+ display: "flex",
+ gap: "20px",
+ flexWrap: "wrap",
+ flexDirection: { xs: card ? "column" : undefined, md: "row" },
+ justifyContent: {
+ xs: "center",
+ md: "space-evenly",
+ },
+ alignItems: { xs: "center" },
+ }}
>
{children}
- </Stack>
+ </Box>
</Paper>
);
};
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index 0475dca..f5a67aa 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -6,17 +6,17 @@
display: flex;
flex-direction: row;
align-items: center;
- margin: 10px;
+ //margin: 10px;
min-height: 100px;
box-sizing: border-box;
position: relative;
font-size: 15px;
font-weight: 400;
- width: 350px;
+ width: 320px;
.files-ui-file-card-main-layer-container {
border-radius: 8px;
overflow: hidden;
- width: 380px;
+ width: 320px;
box-sizing: border-box;
height: 100px;
box-sizing: border-box;
@@ -85,9 +85,12 @@
}
}
.file-card-data {
- line-height: 18px;
+ padding-right: 10px;
+ box-sizing: border-box;
+ line-height: 19px;
font-weight: 500;
- width: 250px;
+ //width: 250px;
+ width: calc(100% - 100px);
//flex-grow: 1;
word-break: break-all;
color: black;
@@ -101,12 +104,12 @@
}
.file-card-size {
font-weight: 400;
- font-size: 0.95rem;
+ font-size: 0.9rem;
}
.file-card-name {
//letter-spacing: 0.09em;
font-size: 1rem;
- text-align: center;
+ //text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
@@ -121,18 +124,6 @@
}
}
- .files-ui-file-card-right-layer {
- right: 0;
- left: unset;
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-direction: column;
- padding: 3px;
- width: 36px;
- //background-color: aquamarine;
- height: 100%;
- }
.file-card-upload-layer-container {
display: flex;
box-sizing: border-box;
@@ -182,13 +173,13 @@
align-items: center;
justify-content: flex-end;
.file-card-file-info {
- width: 250px;
+ width: calc(100% - 100px);
height: 100px;
text-align: left;
scrollbar-width: thin;
overflow: auto;
scrollbar-color: #646c7fa9 transparent;
- // position: relative;
+ // position: relative;
&::-webkit-scrollbar {
width: 9px;
@@ -207,7 +198,7 @@
flex-direction: row;
align-items: center;
justify-content: flex-end;
- /* position: absolute;
+ /* position: absolute;
top: 5;
right: 5; */
}
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index bb64438..985d7a9 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -10,7 +10,7 @@ import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
import LayerContainer from "../file-mosaic/components/file-mosaic-layer/LayerContainer";
import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
import FileMosaicImageLayer from "../file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer";
-import FileCardRightLayer from "./components/FileCardRightLayer";
+import FileCardRightActions from "./components/FileCardRightActions";
import FileCardInfoLayer from "./components/FileCardInfoLayer";
import FileMosaicStatus from "../file-mosaic/components/FileMosaicStatus/FileMosaicStatus";
import FileCardUploadLayer from "./components/FileCardUploadLayer";
@@ -38,7 +38,8 @@ const makeFileCardClassName = (
className: string | undefined
): string => {
console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
- let finalClassName: string = "files-ui-file-card-main-container files-ui-tooltip card";
+ let finalClassName: string =
+ "files-ui-file-card-main-container files-ui-tooltip card";
if (elevation) {
finalClassName += " elevation-" + setFinalElevation(elevation);
@@ -296,31 +297,13 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
</div>
</div>
</Layer>
- <Layer
+
+ {/* <Layer
className="files-ui-file-card-right-layer"
visible={!isUploading}
- >
- <FileCardRightLayer
- deleteIcon={onDelete !== undefined}
- onDelete={handleDelete}
- darkMode={darkMode}
- valid={valid}
- uploadStatus={uploadStatus}
- localization={localization}
- sizeFormatted={sizeFormatted}
- imageIcon={isImage && onSee !== undefined}
- onSee={() => onSee?.(imageSource)}
- videoIcon={isVideo && onWatch !== undefined}
- onWatch={() => onWatch?.(file)}
- downloadIcon={
- onDownload !== undefined || downloadUrl !== undefined
- }
- onDownload={handleDownload}
- infoIcon={info !== undefined}
- onOpenInfo={handleOpenInfo}
- isActive={alwaysActive || hovering}
- />
- </Layer>
+ > */}
+
+ {/* </Layer> */}
<Layer className="file-card-info-layer-container" visible={showInfo}>
<FileCardInfoLayer
@@ -356,7 +339,27 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
</div>
</Layer>
</LayerContainer>
-
+
+ <FileCardRightActions
+ deleteIcon={onDelete !== undefined}
+ onDelete={handleDelete}
+ darkMode={darkMode}
+ valid={valid}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ sizeFormatted={sizeFormatted}
+ imageIcon={isImage && onSee !== undefined}
+ onSee={() => onSee?.(imageSource)}
+ videoIcon={isVideo && onWatch !== undefined}
+ onWatch={() => onWatch?.(file)}
+ downloadIcon={onDownload !== undefined || downloadUrl !== undefined}
+ onDownload={handleDownload}
+ infoIcon={info !== undefined}
+ onOpenInfo={handleOpenInfo}
+ isActive={alwaysActive || hovering}
+ visible={!isUploading && !showInfo}
+ />
+
<Tooltip
open={resultOnTooltip}
uploadStatus={uploadStatus}
diff --git a/src/files-ui/components/file-card/components/FileCardRightActions.scss b/src/files-ui/components/file-card/components/FileCardRightActions.scss
new file mode 100644
index 0000000..54531d6
--- /dev/null
+++ b/src/files-ui/components/file-card/components/FileCardRightActions.scss
@@ -0,0 +1,27 @@
+.file-card-right-layer-header {
+ margin-top: 3px;
+ margin-right: 3px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: unset;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 2px;
+}
+.file-card-right-layer-footer {
+ margin-bottom: 3px;
+ margin-right: 3px;
+ left: unset;
+ position: absolute;
+
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 2px;
+ //height: 20px;
+ //width: 100%;
+ bottom: 0;
+ right: 0;
+}
diff --git a/src/files-ui/components/file-card/components/FileCardRightLayer.tsx b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
similarity index 91%
rename from src/files-ui/components/file-card/components/FileCardRightLayer.tsx
rename to src/files-ui/components/file-card/components/FileCardRightActions.tsx
index 0ef7bc9..dbba7d5 100644
--- a/src/files-ui/components/file-card/components/FileCardRightLayer.tsx
+++ b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
@@ -7,8 +7,9 @@ import {
PlayIcon,
Visibility,
} from "../../icons";
-import "./FileMosaicRightLayer.scss";
-declare type FileCardRightLayerProps = {
+import "./FileCardRightActions.scss";
+
+declare type FileCardRightActionsProps = {
darkMode?: boolean;
deleteIcon?: boolean;
onDelete?: Function;
@@ -32,9 +33,10 @@ declare type FileCardRightLayerProps = {
onOpenInfo: Function | undefined;
isActive?: boolean;
+ visible?: boolean;
};
-const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
- props: FileCardRightLayerProps
+const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
+ props: FileCardRightActionsProps
) => {
const {
darkMode,
@@ -53,8 +55,9 @@ const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
localization,
uploadStatus,
isActive,
+ visible
} = props;
-
+if(visible)
return (
<>
<div className="file-card-right-layer-header">
@@ -126,6 +129,7 @@ const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
)}
</div>
</>
- );
+ )
+ return <></>
};
-export default FileCardRightLayer;
+export default FileCardRightActions;
diff --git a/src/files-ui/components/file-card/components/FileMosaicRightLayer.scss b/src/files-ui/components/file-card/components/FileMosaicRightLayer.scss
deleted file mode 100644
index ccb4ecc..0000000
--- a/src/files-ui/components/file-card/components/FileMosaicRightLayer.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.file-card-right-layer-header {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- height: 20px;
- width: 100%;
-
-}
-.file-card-right-layer-footer {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: 2px;
- height: 20px;
- width: 100%;
-}
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index ad715dc..1e21a89 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -65,7 +65,7 @@ const FileCardDemoPage = (props) => {
<DemoContainerFileMosaic>
<DemoFileCardBasic />
</DemoContainerFileMosaic>
- <CodeJSFileCardBasic />
+ <CodeJSFileCardBasic card/>
<Alert severity="info">
<AlertTitle> FileInputButton </AlertTitle>
@@ -133,11 +133,11 @@ const FileCardDemoPage = (props) => {
<TypeHighlight>undefined</TypeHighlight>.
</DescParagraph>
- <DemoContainerFileMosaic>
+ <DemoContainerFileMosaic card>
<DemoFileMosaicValidation card />
</DemoContainerFileMosaic>
- <CodeJSFileMosaicValidation />
+ <CodeJSFileMosaicValidation card/>
<Alert severity="info">
Typically, <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components set
--
GitLab