diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1ea224020aa2334ea18080f028a13c1b159ba1e4
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileCardActions = (props: { card?: boolean }) => {
+ const { card } = props;
+ return (
+ <ShowDemoCode
+ 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(card)}
+ codeSplittedTS={splittedCodeTS(card)}
+ />
+ );
+};
+export default CodeJSFileCardActions;
+
+const splittedCodeJS = (card?: boolean) => `<>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
+</>`;
+const splittedCodeTS = (card?: boolean) => `<>
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
+</>`;
+
+const completeCodeJS = (card?: boolean) => `import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+
+const sampleFileProps = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
+ const removeFile = (id) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ return (
+ <div style={{ display: "flex", flexWrap: "wrap" }}>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ backgroundColor: "white",
+ padding: "25px 0",
+ flexGrow:1
+ }}
+ >
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ backgroundColor: "#121212",
+ padding: "25px 0",
+ flexGrow:1
+ }}
+ >
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
+ </div>
+ </div>
+ );
+};
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
+
+const completeCodeTS = (card?: boolean) => `import * as React from "react";
+import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
+ const removeFile = (id: string | number | undefined) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ return (
+ <div style={{ display: "flex", flexWrap: "wrap" }}>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ backgroundColor: "white",
+ padding: "25px 0",
+ flexGrow:1
+ }}
+ >
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ backgroundColor: "white",
+ padding: "25px 0",
+ flexGrow:1
+ }}
+ >
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
+ </div>
+ </div>
+ );
+};
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx b/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50064d65405c6fb2e213380357922f622e3464c2
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+import {
+ ExtFile,
+ FileCard,
+ FileCardProps,
+ FileMosaic,
+} from "../../../files-ui";
+
+const sampleFileProps = {
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "sampleFile" + ".jsx",
+ valid: true,
+};
+
+const DemoFileCardActions = (props: { card?: boolean }) => {
+ const handleDelete = (id: string | number | undefined) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ const handleSee = (imageSource: string | undefined) => {
+ console.log("watch image:", imageSource);
+ };
+ const handleWatch = (videoSource: File | string | undefined) => {
+ console.log("watch video:", videoSource);
+ };
+ const handleDownload = (
+ fileId: string | number | undefined,
+ downloadUrl?: string | undefined
+ ) => {
+ console.log("download file id", fileId);
+ console.log("download url", downloadUrl);
+ };
+ if (props.card)
+ return (
+ <>
+ <FileCard id={0} {...sampleFileProps} onDelete={handleDelete} />
+ <FileCard id={1} {...sampleFileProps} info />
+ <FileCard id={2} {...sampleFileProps} onSee={handleSee} imageUrl="https://w0.peakpx.com/wallpaper/635/84/HD-wallpaper-thanos-and-iron-man-avengers-clouds-cloudy-face-to-face-her-iron-man-marvel-thanos-war.jpg" />
+ <FileCard
+ id={3}
+ {...sampleFileProps}
+ onWatch={handleWatch}
+ videoUrl="https://media.istockphoto.com/id/1198092809/es/v%C3%ADdeo/grupo-de-mujeres-sonriendo-despu%C3%A9s-de-la-sesi%C3%B3n-de-entrenamiento-en-la-ciudad.mp4?s=mp4-640x640-is&k=20&c=K65BpQSq2ez-nqdNI-zeXLzxuLnsev5_bRm5AGdlHHc="
+ />
+ <FileCard id={4} {...sampleFileProps} downloadUrl="https://media.istockphoto.com/id/1198092809/es/v%C3%ADdeo/grupo-de-mujeres-sonriendo-despu%C3%A9s-de-la-sesi%C3%B3n-de-entrenamiento-en-la-ciudad.mp4?s=mp4-640x640-is&k=20&c=K65BpQSq2ez-nqdNI-zeXLzxuLnsev5_bRm5AGdlHHc=" />
+ <FileCard
+ id={5}
+ {...sampleFileProps}
+ onDownload={handleDownload}
+ downloadUrl="https://media.istockphoto.com/id/1198092809/es/v%C3%ADdeo/grupo-de-mujeres-sonriendo-despu%C3%A9s-de-la-sesi%C3%B3n-de-entrenamiento-en-la-ciudad.mp4?s=mp4-640x640-is&k=20&c=K65BpQSq2ez-nqdNI-zeXLzxuLnsev5_bRm5AGdlHHc="
+ />
+ </>
+ );
+ return (
+ <>
+ <FileMosaic id={0} {...sampleFileProps} onDelete={handleDelete} />
+ <FileMosaic id={1} {...sampleFileProps} info />
+ <FileMosaic id={2} {...sampleFileProps} onSee={handleSee} imageUrl="" />
+ <FileMosaic
+ id={3}
+ {...sampleFileProps}
+ onWatch={handleWatch}
+ videoUrl=""
+ />
+ <FileMosaic id={4} {...sampleFileProps} downloadUrl="" />
+ <FileMosaic
+ id={5}
+ {...sampleFileProps}
+ onDownload={handleDownload}
+ downloadUrl=""
+ />
+ </>
+ );
+};
+export default DemoFileCardActions;
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 4164618983b572150cd7b45c24af17ebe78d0e83..ebb8a3d10deed580a88f6f7f91b383233c5b220c 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -24,6 +24,8 @@ import DemoFileMosaicValidation from "../../components/demo-components/filemosai
import CodeJSFileMosaicValidation from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation";
import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
+import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
+import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
const FileCardDemoPage = (props) => {
return (
@@ -233,15 +235,44 @@ const FileCardDemoPage = (props) => {
<CodeJSFileMosaicDarkMode card />
</section>
- {/* <section id="actions">
+
+ <section id="actions">
<SubTitle content="Actions: info, delete, see, watch, download" />
<DescParagraph>
- The <CodeHighlight>FileCard</CodeHighlight> component supports dark
- mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "}
- <TypeHighlight>true</TypeHighlight>. The elevation can be used to
- establish a hierarchy between other content. In practical terms, the
- elevation controls the size of the shadow applied to the surface. In
- dark mode, raising the elevation also makes the surface lighter.
+ You can use the following actions.
+ <ul>
+ <li>
+ FileCard with the <CodeHighlight>onDelete</CodeHighlight> prop
+ will display a delete icon
+ </li>
+ <li>
+ FileCard with the <CodeHighlight>info</CodeHighlight> prop will
+ display an "info" icon that will display an info layer.
+ </li>
+ <li>
+ FileCard with the <CodeHighlight>onSee</CodeHighlight> prop will
+ display the "see" button that can be used to retrieve an image
+ URI obtained from reading a <TypeHighlight>File</TypeHighlight>{" "}
+ object if given or just the{" "}
+ <TypeHighlight>imageUrl</TypeHighlight> prop if given. The file
+ must be an image.
+ </li>
+ <li>
+ FileCard with the <CodeHighlight>onWatch</CodeHighlight> prop
+ will display the "play" icon that can be used to retrieve the
+ video as a <TypeHighlight>File</TypeHighlight> object if given
+ or just the <TypeHighlight>videoUrl</TypeHighlight> prop if
+ given. The file must be an video.
+ </li>
+ <li>
+ FileCard with the <CodeHighlight>downloadUrl</CodeHighlight>{" "}
+ prop will display the "download" icon that can be used to start
+ the download. If the <CodeHighlight>onDownload</CodeHighlight>{" "}
+ prop is given, the "download" icon will also be visible, but it
+ will be taken as the user will perform their own download.
+ </li>
+ </ul>
+
</DescParagraph>
<div
@@ -250,13 +281,16 @@ const FileCardDemoPage = (props) => {
flexWrap: "wrap",
width: "100%",
padding: "25px 0",
+ flexDirection: "row",
+ alignItems:"center",
+ justifyContent:"center",
+ gap:"28px"
}}
>
- <DemoFileMosaicDarkMode card />
+ <DemoFileCardActions card />
</div>
-
- <CodeJSFileMosaicDarkMode card />
- </section> */}
+ <CodeJSFileCardActions card />
+ </section>
<section id="api">
<SubTitle content="API" />
<DescParagraph>