Skip to content
Snippets Groups Projects
Commit 3ef31e8d authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[FEAT]: Add and refactor File card and mosaic demo pages

parent b2c35861
Branches
No related tags found
No related merge requests found
import * as React from "react"; import * as React from "react";
import { Stack, Paper } from "@mui/material"; import { Stack, Paper } from "@mui/material";
import { FileMosaic, ExtFile } from "../../../files-ui"; import { FileMosaic, ExtFile, FileMosaicProps } from "../../../files-ui";
import DescParagraph from "../../demo-components/desc-paragraph/DescParagraph"; import DescParagraph from "../../demo-components/desc-paragraph/DescParagraph";
import { FullScreen, ImagePreview, VideoPreview } from "../../../files-ui"; import { FullScreen, ImagePreview, VideoPreview } from "../../../files-ui";
import {
NarutoAndSasukeVsMomoshikiEN,
NarutoAndSasukeVsMomoshikiES,
ThorArrivesWakandaEN,
ThorArrivesWakandaES,
} from "../../../data/videoLinks";
const VIDEO_URL =
"https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
interface FileMosaicImageVideoPreviewsProps { interface FileMosaicImageVideoPreviewsProps {
darkMode?: boolean; darkMode?: boolean;
} }
...@@ -22,18 +30,88 @@ const FileMosaicImageVideoPreviews: React.FC< ...@@ -22,18 +30,88 @@ const FileMosaicImageVideoPreviews: React.FC<
}; };
const handleWatch = (videoSource: File | string | undefined) => { const handleWatch = (videoSource: File | string | undefined) => {
console.log( console.log("handleWatch videoSource", videoSource);
"handleWatch videoSource",
"https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
);
//setVideoSrc(videoSource); //setVideoSrc(videoSource);
// //
setVideoSrc( setVideoSrc(videoSource);
"https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
);
// setVideoSrc("https://www.w3schools.com/tags/movie.mp4"); // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
}; };
const handleDownload = async (
fileId: FileMosaicProps["id"],
downloadUrl?: string
) => {
console.log("Download fileId", fileId);
console.log("Download fileName", files.filter(x=>x.id===fileId)[0]);
console.log("Download downloadUrl", downloadUrl);
if (!downloadUrl) return;
try {
const image = await fetch(downloadUrl);
const imageBlob = await image.blob();
const imageURL = URL.createObjectURL(imageBlob);
const anchor = document.createElement("a");
anchor.href = imageURL;
anchor.download = "fileName.jpg";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(imageURL);
/* const resJson = await response.json();
console.log("Download", resJson); */
} catch (error) {
console.log("Download error", error);
console.error( error);
}
};
const handleDownloadXHR = async (
fileId: FileMosaicProps["id"],
downloadUrl?: string
) => {
console.log("Download fileId", fileId);
console.log("Download fileName", files.filter(x=>x.id===fileId)[0].name);
console.log("Download downloadUrl", downloadUrl);
if (!downloadUrl) return;
try {
const request = new XMLHttpRequest();
request.responseType="blob";
request.open("get", downloadUrl, true);
request.send();
request.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
const imageURL = window.URL.createObjectURL(this.response);
const anchor = document.createElement("a");
anchor.href = imageURL;
anchor.download = "fileNamess.jpg";
document.body.appendChild(anchor);
anchor.click();
}else{
console.log("not yet");
}
}
const image = await fetch(downloadUrl);
const imageBlob = await image.blob();
const imageURL = URL.createObjectURL(imageBlob);
const anchor = document.createElement("a");
anchor.href = imageURL;
anchor.download = "fileName.jpg";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(imageURL);
/* const resJson = await response.json();
console.log("Download", resJson); */
} catch (error) {
console.log("Download error", error);
}
};
return ( return (
<div style={{ width: "100%" }}> <div style={{ width: "100%" }}>
<h3>Or check the previews!</h3> <h3>Or check the previews!</h3>
...@@ -67,6 +145,7 @@ const FileMosaicImageVideoPreviews: React.FC< ...@@ -67,6 +145,7 @@ const FileMosaicImageVideoPreviews: React.FC<
onWatch={handleWatch} onWatch={handleWatch}
{...f.extraData} {...f.extraData}
alwaysActive alwaysActive
onDownload={f.downloadUrl ? handleDownload : undefined}
/> />
))} ))}
<FullScreen <FullScreen
...@@ -79,7 +158,7 @@ const FileMosaicImageVideoPreviews: React.FC< ...@@ -79,7 +158,7 @@ const FileMosaicImageVideoPreviews: React.FC<
open={videoSrc !== undefined} open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)} onClose={() => setVideoSrc(undefined)}
> >
<VideoPreview videoSrc={videoSrc} autoPlay controls /> <VideoPreview src={videoSrc} autoPlay controls />
</FullScreen> </FullScreen>
</Stack> </Stack>
</Paper> </Paper>
...@@ -91,10 +170,12 @@ export default FileMosaicImageVideoPreviews; ...@@ -91,10 +170,12 @@ export default FileMosaicImageVideoPreviews;
const files: ExtFile[] = [ const files: ExtFile[] = [
{ {
id: 0, id: 0,
name: "image-preview.png", name: "mark45.jpg",
type: "image/png", type: "image/jpeg",
size: 282000, size: 282000,
imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg", imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
downloadUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
}, },
{ {
...@@ -102,8 +183,8 @@ const files: ExtFile[] = [ ...@@ -102,8 +183,8 @@ const files: ExtFile[] = [
name: "video-preview.mp4", name: "video-preview.mp4",
type: "video/mp4", type: "video/mp4",
size: 282000, size: 282000,
downloadUrl: downloadUrl: VIDEO_URL,
"https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4", extraData: { videoUrl: VIDEO_URL },
}, },
{ {
id: 3, id: 3,
...@@ -122,9 +203,46 @@ const files: ExtFile[] = [ ...@@ -122,9 +203,46 @@ const files: ExtFile[] = [
type: "image/png", type: "image/png",
size: 282000, size: 282000,
downloadUrl: downloadUrl:
"https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
imageUrl: imageUrl:
"https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
},
];
const videos: ExtFile[] = [
{
id: 0,
name: "ThorArrivesWakandaEN.mp4",
type: "video/mp4",
size: 282000,
downloadUrl: ThorArrivesWakandaEN,
extraData: { videoUrl: ThorArrivesWakandaEN },
},
{
id: 1,
name: "ThorArrivesWakandaES.mp4",
type: "video/mp4",
size: 282000,
downloadUrl: ThorArrivesWakandaES,
extraData: { videoUrl: ThorArrivesWakandaES },
},
{
id: 1,
name: "NarutoAndSasukeVsMomoshikiEN.mp4",
type: "video/mp4",
size: 282000,
downloadUrl: NarutoAndSasukeVsMomoshikiEN,
extraData: { videoUrl: NarutoAndSasukeVsMomoshikiEN },
},
{
id: 1,
name: "NarutoAndSasukeVsMomoshikiES.mp4",
type: "video/mp4",
size: 282000,
downloadUrl: NarutoAndSasukeVsMomoshikiES,
extraData: { videoUrl: NarutoAndSasukeVsMomoshikiES },
}, },
]; ];
...@@ -16,95 +16,155 @@ const CodeJSFileCardActions = (props: { card?: boolean }) => { ...@@ -16,95 +16,155 @@ const CodeJSFileCardActions = (props: { card?: boolean }) => {
}; };
export default CodeJSFileCardActions; export default CodeJSFileCardActions;
const splittedCodeJS = (card?: boolean) => `<> const splittedCodeJS = (card?: boolean) => ``;
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> const splittedCodeTS = (card?: boolean) => ``;
<${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"; const completeCodeJS = (card?: boolean) => `import * as React from "react";
import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react"; import {
${card?"FileCard":"FileMosaic"},
FullScreen,
ImagePreview,
VideoPreview,
} from "@files-ui/react";
const sampleFileProps = { const sampleFile = {
id: "fileId",
size: 28 * 1024 * 1024, size: 28 * 1024 * 1024,
type: "text/plain", type: "text/plain",
name: "file created from props.jsx", name: "actions sampleFile.jsx",
valid: true,
}; };
const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => { const IMG_URL =
const removeFile = (id) => { "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";
const VIDEO_URL =
"https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
const Demo${card?"FileCard":"FileMosaic"}Actions = ({ card }) => {
const [imgSrc, setImgSrc] = React.useState(undefined);
const [videoSrc, setVideoSrc] = React.useState(undefined);
const handleDelete = (id) => {
console.log("delete button clicked on file: " + id); console.log("delete button clicked on file: " + id);
}; };
const handleSee = (imageSource) => {
console.log("watch image:", imageSource);
setImgSrc(imageSource);
};
const handleWatch = (videoSource) => {
console.log("watch video:", videoSource);
setVideoSrc(videoSource);
};
const handleDownload = (fileId, downloadUrl) => {
console.log("download file id", fileId);
console.log("download url", downloadUrl);
};
return ( return (
<div style={{ display: "flex", flexWrap: "wrap" }}> <>
<div <${card?"FileCard":"FileMosaic"} id={0} {...sampleFile} onDelete={handleDelete} />
style={{ <${card?"FileCard":"FileMosaic"} id={1} {...sampleFile} info />
display: "flex", <${card?"FileCard":"FileMosaic"} id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
justifyContent: "center", <${card?"FileCard":"FileMosaic"}
backgroundColor: "white", id={3}
padding: "25px 0", {...sampleFile}
flexGrow:1 onWatch={handleWatch}
}} videoUrl={VIDEO_URL}
/>
<${card?"FileCard":"FileMosaic"} id={4} {...sampleFile} downloadUrl={IMG_URL} />
<${card?"FileCard":"FileMosaic"}
id={5}
{...sampleFile}
onDownload={handleDownload}
downloadUrl={VIDEO_URL}
/>
<FullScreen
open={imgSrc !== undefined}
onClose={() => setImgSrc(undefined)}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> <ImagePreview src={imgSrc} />
</div> </FullScreen>
<div <FullScreen
style={{ open={videoSrc !== undefined}
display: "flex", onClose={() => setVideoSrc(undefined)}
justifyContent: "center",
backgroundColor: "#121212",
padding: "25px 0",
flexGrow:1
}}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} /> <VideoPreview src={videoSrc} autoPlay controls />
</div> </FullScreen>
</div> </>
); );
}; };
export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`; export default Demo${card?"FileCard":"FileMosaic"}Actions;`;
const completeCodeTS = (card?: boolean) => `import * as React from "react"; const completeCodeTS = (card?: boolean) => `import * as React from "react";
import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react"; import {
${card?"FileCard":"FileMosaic"},
FullScreen,
ImagePreview,
VideoPreview,
ExtFile,
} from "@files-ui/react";
const sampleFileProps: ExtFile = { const sampleFile: ExtFile = {
id: "fileId",
size: 28 * 1024 * 1024, size: 28 * 1024 * 1024,
type: "text/plain", type: "text/plain",
name: "file created from props.jsx", name: "actions sampleFile.jsx",
valid: true,
}; };
const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => { const IMG_URL =
const removeFile = (id: string | number | undefined) => { "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";
const VIDEO_URL =
"https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
const Demo${card?"FileCard":"FileMosaic"}Actions = (props: { card?: boolean }) => {
const [imgSrc, setImgSrc] = React.useState<string | undefined>(undefined);
const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
undefined
);
const handleDelete = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id); console.log("delete button clicked on file: " + id);
}; };
const handleSee = (imageSource: string | undefined) => {
console.log("watch image:", imageSource);
setImgSrc(imageSource);
};
const handleWatch = (videoSource: File | string | undefined) => {
console.log("watch video:", videoSource);
setVideoSrc(videoSource);
};
const handleDownload = (
fileId: string | number | undefined,
downloadUrl?: string | undefined
) => {
console.log("download file id", fileId);
console.log("download url", downloadUrl);
};
return ( return (
<div style={{ display: "flex", flexWrap: "wrap" }}> <>
<div <${card?"FileCard":"FileMosaic"} id={0} {...sampleFile} onDelete={handleDelete} />
style={{ <${card?"FileCard":"FileMosaic"} id={1} {...sampleFile} info />
display: "flex", <${card?"FileCard":"FileMosaic"} id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
justifyContent: "center", <${card?"FileCard":"FileMosaic"}
backgroundColor: "white", id={3}
padding: "25px 0", {...sampleFile}
flexGrow:1 onWatch={handleWatch}
}} videoUrl={VIDEO_URL}
/>
<${card?"FileCard":"FileMosaic"} id={4} {...sampleFile} downloadUrl={IMG_URL} />
<${card?"FileCard":"FileMosaic"}
id={5}
{...sampleFile}
onDownload={handleDownload}
downloadUrl={VIDEO_URL}
/>
<FullScreen
open={imgSrc !== undefined}
onClose={() => setImgSrc(undefined)}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> <ImagePreview src={imgSrc} />
</div> </FullScreen>
<div <FullScreen
style={{ open={videoSrc !== undefined}
display: "flex", onClose={() => setVideoSrc(undefined)}
justifyContent: "center",
backgroundColor: "white",
padding: "25px 0",
flexGrow:1
}}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} /> <VideoPreview src={videoSrc} autoPlay controls />
</div> </FullScreen>
</div> </>
); );
}; };
export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`; export default Demo${card?"FileCard":"FileMosaic"}Actions;`;
...@@ -16,16 +16,96 @@ const CodeJSFileMosaicDarkMode = (props: { card?: boolean }) => { ...@@ -16,16 +16,96 @@ const CodeJSFileMosaicDarkMode = (props: { card?: boolean }) => {
}; };
export default CodeJSFileMosaicDarkMode; export default CodeJSFileMosaicDarkMode;
const splittedCodeJS = (card?: boolean) => `<> const splittedCodeJS = (card?: boolean) =>
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> card
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/> ? ""
: `<>
<${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info onDelete={removeFile} />
<${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info onDelete={removeFile} darkMode/>
</>`; </>`;
const splittedCodeTS = (card?: boolean) => `<> const splittedCodeTS = (card?: boolean) =>
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> card
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/> ? ""
: `<>
<${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info onDelete={removeFile} />
<${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info onDelete={removeFile} darkMode/>
</>`; </>`;
const completeCodeJS = (card?: boolean) => `import * as React from "react"; const completeCodeJS = (card?: boolean) =>
card
? `import { ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react";
const sampleFilePropsCard = (elevationNumber) => {
return {
id: "fileId",
size: 28 * 1024 * 1024,
type: "text/plain",
name: "elevation=" + elevationNumber + ".jsx",
valid: true,
};
};
const Demo${card ? "FileCard" : "FileMosaic"}DarkMode = () => {
const removeFile = (id) => {
console.log("delete button clicked on file: " + id);
};
return (
<>
<div
style={{
display: "flex",
justifyContent: "center",
flexDirection: "column",
backgroundColor: "white",
alignItems: "center",
padding: "25px 0",
flexGrow: 1,
gap: "7px",
}}
>
{[0, 4, 16, 24].map((elevation) => (
<FileCard
key={elevation}
{...sampleFilePropsCard(elevation)}
onDelete={removeFile}
info
elevation={elevation}
/>
))}
</div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
backgroundColor: "#121212",
alignItems: "center",
padding: "25px 0",
flexGrow: 1,
gap: "7px",
}}
>
{[0, 4, 16, 24].map((elevation) => (
<FileCard
key={elevation}
{...sampleFilePropsCard(elevation)}
onDelete={removeFile}
darkMode
info
elevation={elevation}
/>
))}
</div>
</>
);
export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;`
: `import * as React from "react";
import { ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react"; import { ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react";
const sampleFileProps = { const sampleFileProps = {
...@@ -49,7 +129,9 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => { ...@@ -49,7 +129,9 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
flexGrow:1 flexGrow:1
}} }}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> <${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info onDelete={removeFile} />
</div> </div>
<div <div
style={{ style={{
...@@ -60,14 +142,85 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => { ...@@ -60,14 +142,85 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
flexGrow:1 flexGrow:1
}} }}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} /> <${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info darkMode onDelete={removeFile} />
</div> </div>
</div> </div>
); );
}; };
export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;`; export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;`;
const completeCodeTS = (card?: boolean) => `import * as React from "react"; const completeCodeTS = (card?: boolean) =>
card
? `import { ${
card ? "FileCard" : "FileMosaic"
}, ExtFile, FileCardProps } from "@files-ui/react";
const sampleFilePropsCard = (elevationNumber: number): ExtFile => {
return {
id: "fileId",
size: 28 * 1024 * 1024,
type: "text/plain",
name: "elevation=" + elevationNumber + ".jsx",
valid: true,
};
};
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",
justifyContent: "center",
flexDirection: "column",
backgroundColor: "white",
alignItems: "center",
padding: "25px 0",
flexGrow: 1,
gap: "7px",
}}
>
{[0, 4, 16, 24].map((elevation) => (
<FileCard
key={elevation}
{...sampleFilePropsCard(elevation)}
onDelete={removeFile}
info
elevation={elevation as FileCardProps["elevation"]}
/>
))}
</div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
backgroundColor: "#121212",
alignItems: "center",
padding: "25px 0",
flexGrow: 1,
gap: "7px",
}}
>
{[0, 4, 16, 24].map((elevation) => (
<FileCard
key={elevation}
{...sampleFilePropsCard(elevation)}
onDelete={removeFile}
darkMode
info
elevation={elevation as FileCardProps["elevation"]}
/>
))}
</div>
</>
);
export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;
`
: `import * as React from "react";
import { ExtFile, ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react"; import { ExtFile, ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react";
const sampleFileProps: ExtFile = { const sampleFileProps: ExtFile = {
...@@ -91,18 +244,22 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => { ...@@ -91,18 +244,22 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
flexGrow:1 flexGrow:1
}} }}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} /> <${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info onDelete={removeFile} />
</div> </div>
<div <div
style={{ style={{
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
backgroundColor: "white", backgroundColor: "#121212",
padding: "25px 0", padding: "25px 0",
flexGrow:1 flexGrow:1
}} }}
> >
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} /> <${
card ? "FileCard" : "FileMosaic"
} {...sampleFileProps} info darkMode onDelete={removeFile} />
</div> </div>
</div> </div>
); );
......
import * as React from "react"; import * as React from "react";
import { import {
ExtFile,
FileCard, FileCard,
FileCardProps,
FileMosaic, FileMosaic,
FullScreen,
ImagePreview,
VideoPreview,
ExtFile,
} from "../../../files-ui"; } from "../../../files-ui";
const sampleFileProps = { const sampleFile: ExtFile = {
size: 28 * 1024 * 1024, size: 28 * 1024 * 1024,
type: "text/plain", type: "text/plain",
name: "sampleFile" + ".jsx", name: "actions sampleFile.jsx",
valid: true, valid: true,
}; };
const IMG_URL =
"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";
const VIDEO_URL =
"https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
const DemoFileCardActions = (props: { card?: boolean }) => { const DemoFileCardActions = (props: { card?: boolean }) => {
const [imgSrc, setImgSrc] = React.useState<string | undefined>(undefined);
const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
undefined
);
const handleDelete = (id: string | number | undefined) => { const handleDelete = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id); console.log("delete button clicked on file: " + id);
}; };
const handleSee = (imageSource: string | undefined) => { const handleSee = (imageSource: string | undefined) => {
console.log("watch image:", imageSource); console.log("watch image:", imageSource);
setImgSrc(imageSource);
}; };
const handleWatch = (videoSource: File | string | undefined) => { const handleWatch = (videoSource: File | string | undefined) => {
console.log("watch video:", videoSource); console.log("watch video:", videoSource);
setVideoSrc(videoSource);
}; };
const handleDownload = ( const handleDownload = (
fileId: string | number | undefined, fileId: string | number | undefined,
...@@ -33,42 +45,66 @@ const DemoFileCardActions = (props: { card?: boolean }) => { ...@@ -33,42 +45,66 @@ const DemoFileCardActions = (props: { card?: boolean }) => {
if (props.card) if (props.card)
return ( return (
<> <>
<FileCard id={0} {...sampleFileProps} onDelete={handleDelete} /> <FileCard id={0} {...sampleFile} onDelete={handleDelete} />
<FileCard id={1} {...sampleFileProps} info /> <FileCard id={1} {...sampleFile} 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={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
<FileCard <FileCard
id={3} id={3}
{...sampleFileProps} {...sampleFile}
onWatch={handleWatch} 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=" videoUrl={VIDEO_URL}
/> />
<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={4} {...sampleFile} downloadUrl={IMG_URL} />
<FileCard <FileCard
id={5} id={5}
{...sampleFileProps} {...sampleFile}
onDownload={handleDownload} 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=" downloadUrl={VIDEO_URL}
/> />
<FullScreen
open={imgSrc !== undefined}
onClose={() => setImgSrc(undefined)}
>
<ImagePreview src={imgSrc} />
</FullScreen>
<FullScreen
open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)}
>
<VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>
</> </>
); );
return ( return (
<> <>
<FileMosaic id={0} {...sampleFileProps} onDelete={handleDelete} /> <FileMosaic id={0} {...sampleFile} onDelete={handleDelete} />
<FileMosaic id={1} {...sampleFileProps} info /> <FileMosaic id={1} {...sampleFile} info />
<FileMosaic id={2} {...sampleFileProps} onSee={handleSee} imageUrl="" /> <FileMosaic id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
<FileMosaic <FileMosaic
id={3} id={3}
{...sampleFileProps} {...sampleFile}
onWatch={handleWatch} onWatch={handleWatch}
videoUrl="" videoUrl={VIDEO_URL}
/> />
<FileMosaic id={4} {...sampleFileProps} downloadUrl="" /> <FileMosaic id={4} {...sampleFile} downloadUrl={IMG_URL} />
<FileMosaic <FileMosaic
id={5} id={5}
{...sampleFileProps} {...sampleFile}
onDownload={handleDownload} onDownload={handleDownload}
downloadUrl="" downloadUrl={VIDEO_URL}
/> />
<FullScreen
open={imgSrc !== undefined}
onClose={() => setImgSrc(undefined)}
>
<ImagePreview src={imgSrc} />
</FullScreen>
<FullScreen
open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)}
>
<VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>
</> </>
); );
}; };
......
const BASE_URL =
"http://10.100.179.201:2800/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503/static";
export const ThorArrivesWakandaEN = BASE_URL+"/ThorEN.mp4";
export const ThorArrivesWakandaES = BASE_URL+"/ThorEN.mp4";
export const NarutoAndSasukeVsMomoshikiEN = BASE_URL+"/NarutoEN.mp4";
export const NarutoAndSasukeVsMomoshikiES = BASE_URL+"/NarutoES.mp4";
...@@ -2,9 +2,6 @@ import * as React from "react"; ...@@ -2,9 +2,6 @@ import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer"; import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer"; import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import RightMenu from "../../components/RightMenu/RightMenu"; import RightMenu from "../../components/RightMenu/RightMenu";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import Alert from "@mui/material/Alert";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight"; import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph"; import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle"; import SubTitle from "../../components/demo-components/sub-title/SubTitle";
...@@ -13,7 +10,7 @@ import MainTitle from "../../components/main-title/MainTitle"; ...@@ -13,7 +10,7 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph"; import MainParagraph from "../../components/paragraph-main/MainParagraph";
import DemoFileCardBasic from "../../components/demo-components/file-card-demo/DemoFileCardBasic"; import DemoFileCardBasic from "../../components/demo-components/file-card-demo/DemoFileCardBasic";
import CodeJSFileCardBasic from "../../components/demo-components/file-card-demo/CodeJSFileCardBasic"; import CodeJSFileCardBasic from "../../components/demo-components/file-card-demo/CodeJSFileCardBasic";
import { AlertTitle } from "@mui/material"; import { AlertTitle, Alert, Paper } from "@mui/material";
import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview"; import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview"; import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic"; import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
...@@ -176,7 +173,7 @@ const FileCardDemoPage = (props) => { ...@@ -176,7 +173,7 @@ const FileCardDemoPage = (props) => {
current progress of the upload process. current progress of the upload process.
<br /> <br />
Each of the following examples demonstrates one state combination of Each of the following examples demonstrates one state combination of
the FileMosaic component. the FileCard component.
</DescParagraph> </DescParagraph>
<DemoContainerFileMosaic card> <DemoContainerFileMosaic card>
...@@ -210,32 +207,6 @@ const FileCardDemoPage = (props) => { ...@@ -210,32 +207,6 @@ const FileCardDemoPage = (props) => {
</ul> </ul>
</Alert> </Alert>
</section> </section>
<section id="dark-mode">
<SubTitle content="Dark mode and Elevation" />
<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.
</DescParagraph>
<div
style={{
display: "flex",
flexWrap: "wrap",
width: "100%",
padding: "25px 0",
}}
>
<DemoFileMosaicDarkMode card />
</div>
<CodeJSFileMosaicDarkMode card />
</section>
<section id="actions"> <section id="actions">
<SubTitle content="Actions: info, delete, see, watch, download" /> <SubTitle content="Actions: info, delete, see, watch, download" />
<DescParagraph> <DescParagraph>
...@@ -243,7 +214,7 @@ const FileCardDemoPage = (props) => { ...@@ -243,7 +214,7 @@ const FileCardDemoPage = (props) => {
<ul> <ul>
<li> <li>
FileCard with the <CodeHighlight>onDelete</CodeHighlight> prop FileCard with the <CodeHighlight>onDelete</CodeHighlight> prop
will display a delete icon will display a delete icon.
</li> </li>
<li> <li>
FileCard with the <CodeHighlight>info</CodeHighlight> prop will FileCard with the <CodeHighlight>info</CodeHighlight> prop will
...@@ -252,10 +223,10 @@ const FileCardDemoPage = (props) => { ...@@ -252,10 +223,10 @@ const FileCardDemoPage = (props) => {
<li> <li>
FileCard with the <CodeHighlight>onSee</CodeHighlight> prop will FileCard with the <CodeHighlight>onSee</CodeHighlight> prop will
display the "see" button that can be used to retrieve an image display the "see" button that can be used to retrieve an image
URI obtained from reading a <TypeHighlight>File</TypeHighlight>{" "} <TypeHighlight>URI</TypeHighlight> obtained by reading a{" "}
object if given or just the{" "} <TypeHighlight>File</TypeHighlight> object if given or just the{" "}
<TypeHighlight>imageUrl</TypeHighlight> prop if given. The file <TypeHighlight>imageUrl</TypeHighlight> prop if given. In the
must be an image. first case, the file must be an image.
</li> </li>
<li> <li>
FileCard with the <CodeHighlight>onWatch</CodeHighlight> prop FileCard with the <CodeHighlight>onWatch</CodeHighlight> prop
...@@ -272,7 +243,69 @@ const FileCardDemoPage = (props) => { ...@@ -272,7 +243,69 @@ const FileCardDemoPage = (props) => {
will be taken as the user will perform their own download. will be taken as the user will perform their own download.
</li> </li>
</ul> </ul>
</DescParagraph>
<Paper
variant="outlined"
style={{
padding: "25px",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "7px",
flexWrap: "wrap",
width: "100%",
//padding: "25px 0",
flexDirection: "row",
}}
>
<DemoFileCardActions card />
</Paper>
<CodeJSFileCardActions card />
<Alert severity="info">
<AlertTitle>
{" "}
<strong>downloadUrl</strong> and <strong>onDownload</strong> props
</AlertTitle>
{/* This is an info alert — <strong>check it out!</strong>
*/}
When only <CodeHighlight>downloadUrl</CodeHighlight> is specifyed,
FileCard will perform the download only for{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
same-origin URLs
</AnchorToTab>{" "}
since it uses the{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
anchor
</AnchorToTab>{" "}
tag under the hood.
<br />
If the resource is located in any other host, it will open a new tab
and display the content.
<br />
For avoiding that behaviour you can do you own download
implementation by overriding the download function by setting the{" "}
<CodeHighlight>onDownload</CodeHighlight> prop.
<br />
You can check an example here:
<ul>
<li>
<AnchorToTab href="/utilities-methods/file-downloader">
{"Download a File"}
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="dark-mode">
<SubTitle content="Dark mode and Elevation" />
<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.
</DescParagraph> </DescParagraph>
<div <div
...@@ -281,16 +314,14 @@ const FileCardDemoPage = (props) => { ...@@ -281,16 +314,14 @@ const FileCardDemoPage = (props) => {
flexWrap: "wrap", flexWrap: "wrap",
width: "100%", width: "100%",
padding: "25px 0", padding: "25px 0",
flexDirection: "row",
alignItems:"center",
justifyContent:"center",
gap:"28px"
}} }}
> >
<DemoFileCardActions card /> <DemoFileMosaicDarkMode card />
</div> </div>
<CodeJSFileCardActions card />
<CodeJSFileMosaicDarkMode card />
</section> </section>
<section id="api"> <section id="api">
<SubTitle content="API" /> <SubTitle content="API" />
<DescParagraph> <DescParagraph>
...@@ -299,9 +330,9 @@ const FileCardDemoPage = (props) => { ...@@ -299,9 +330,9 @@ const FileCardDemoPage = (props) => {
</DescParagraph> </DescParagraph>
<ul> <ul>
<li> <li>
<AnchorToTab href="/api/filecard">{"<FileMosaic/>"}</AnchorToTab> <AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
</li> </li>
<li> <li>|
<AnchorToTab href="/api/fileinputbuttom"> <AnchorToTab href="/api/fileinputbuttom">
{"<FileInputButton/>"} {"<FileInputButton/>"}
</AnchorToTab> </AnchorToTab>
...@@ -319,47 +350,37 @@ export default FileCardDemoPage; ...@@ -319,47 +350,37 @@ export default FileCardDemoPage;
const rightMenuItems = [ const rightMenuItems = [
{ {
id: 0, id: 0,
label: "Basic file mosaic", label: "Basic file card",
referTo: "/components/file-mosaic#basic-filecard", referTo: "/components/filecard#basic-filecard",
}, },
{ {
id: 1, id: 1,
label: "Image Preview", label: "Image Preview",
referTo: "/components/file-mosaic#file-mosaic-image-preview", referTo: "/components/filecard#image-preview",
}, },
{ {
id: 2, id: 2,
label: "Validation", label: "Validation",
referTo: "/components/file-mosaic#file-mosaic-validation", referTo: "/components/filecard#validation",
}, },
{ {
id: 3, id: 3,
label: "Uploading", label: "Uploading",
referTo: "/components/file-mosaic#file-mosaic-uploading", referTo: "/components/filecard#uploading",
}, },
{ {
id: 4, id: 4,
label: "Localization", label: "Actions",
referTo: "/components/file-mosaic#file-mosaic-localization", referTo: "/components/filecard#actions",
}, },
{ {
id: 5, id: 5,
label: "Previews", label: "Dark mode",
referTo: "/components/file-mosaic#file-mosaic-previews", referTo: "/components/filecard#dark-mode",
}, },
{ {
id: 6, id: 6,
label: "Actions", label: "API",
referTo: "/components/file-mosaic#actions", referTo: "/components/filecard#api",
},
{
id: 7,
label: "Default previews",
referTo: "/components/file-mosaic#default-previews",
},
{
id: 8,
label: "Dark mode & elevation",
referTo: "/components/file-mosaic#dark-mode",
}, },
]; ];
import Alert from "@mui/material/Alert"; import { Alert, AlertTitle, Paper } from "@mui/material";
import Paper from "@mui/material/Paper";
import AlertTitle from "@mui/material/AlertTitle";
import * as React from "react"; import * as React from "react";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight"; import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph"; import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
...@@ -27,6 +25,8 @@ import CodeJSFileMosaicLocalization from "../../components/demo-components/filem ...@@ -27,6 +25,8 @@ import CodeJSFileMosaicLocalization from "../../components/demo-components/filem
import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode"; import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode"; import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons"; import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
const FileMosaicDemoPage = (props) => { const FileMosaicDemoPage = (props) => {
return ( return (
...@@ -221,6 +221,96 @@ const FileMosaicDemoPage = (props) => { ...@@ -221,6 +221,96 @@ const FileMosaicDemoPage = (props) => {
</ul> </ul>
</Alert> </Alert>
</section> </section>
<section id="actions">
<SubTitle content="Actions: info, delete, see, watch, download" />
<DescParagraph>
You can use the following actions.
<ul>
<li>
FileMosaic with the <CodeHighlight>onDelete</CodeHighlight> prop
will display a delete icon.
</li>
<li>
FileMosaic with the <CodeHighlight>info</CodeHighlight> prop
will display an "info" icon that will display an info layer.
</li>
<li>
FileMosaic with the <CodeHighlight>onSee</CodeHighlight> prop
will display the "see" button that can be used to retrieve an
image <TypeHighlight>URI</TypeHighlight> obtained by reading a{" "}
<TypeHighlight>File</TypeHighlight> object if given or just the{" "}
<TypeHighlight>imageUrl</TypeHighlight> prop if given. In the
first case, the file must be an image.
</li>
<li>
FileMosaic 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>
FileMosaic 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>
<Paper
variant="outlined"
style={{
padding: "25px",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "7px",
flexWrap: "wrap",
width: "100%",
//padding: "25px 0",
flexDirection: "row",
}}
>
<DemoFileCardActions />
</Paper>
<CodeJSFileCardActions />
<Alert severity="info">
<AlertTitle>
{" "}
<strong>downloadUrl</strong> and <strong>onDownload</strong> props
</AlertTitle>
{/* This is an info alert — <strong>check it out!</strong>
*/}
When only <CodeHighlight>downloadUrl</CodeHighlight> is specifyed,
FileMosaic will perform the download only for{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
same-origin URLs
</AnchorToTab>{" "}
since it uses the{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
anchor
</AnchorToTab>{" "}
tag under the hood.
<br />
If the resource is located in any other host, it will open a new tab
and display the content.
<br />
For avoiding that behaviour you can do you own download
implementation by overriding the download function by setting the{" "}
<CodeHighlight>onDownload</CodeHighlight> prop.
<br />
You can check an example here:
<ul>
<li>
<AnchorToTab href="/utilities-methods/file-downloader">
{"Download a File"}
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="dark-mode"> <section id="dark-mode">
<SubTitle content="Dark mode" /> <SubTitle content="Dark mode" />
<DescParagraph> <DescParagraph>
...@@ -245,7 +335,8 @@ const FileMosaicDemoPage = (props) => { ...@@ -245,7 +335,8 @@ const FileMosaicDemoPage = (props) => {
<CodeJSFileMosaicDarkMode /> <CodeJSFileMosaicDarkMode />
</section> </section>
<section id="localization">
{/* <section id="localization">
<SubTitle content="Localization" /> <SubTitle content="Localization" />
<DescParagraph> <DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> component has The <CodeHighlight>FileMosaic</CodeHighlight> component has
...@@ -285,9 +376,9 @@ const FileMosaicDemoPage = (props) => { ...@@ -285,9 +376,9 @@ const FileMosaicDemoPage = (props) => {
<DemoFileMosaicLocalization /> <DemoFileMosaicLocalization />
</Paper> </Paper>
<CodeJSFileMosaicLocalization /> <CodeJSFileMosaicLocalization />
</section> </section> */}
<section id="file-icon"> {/* <section id="file-icon">
<SubTitle content="File Icons (extensive list)" /> <SubTitle content="File Icons (extensive list)" />
<DescParagraph> <DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> component supports The <CodeHighlight>FileMosaic</CodeHighlight> component supports
...@@ -308,7 +399,7 @@ const FileMosaicDemoPage = (props) => { ...@@ -308,7 +399,7 @@ const FileMosaicDemoPage = (props) => {
> >
<DemoFileMosaicFileIcons /> <DemoFileMosaicFileIcons />
</Paper> </Paper>
</section> </section> */}
<section id="api"> <section id="api">
<SubTitle content="API" /> <SubTitle content="API" />
...@@ -359,18 +450,18 @@ const rightMenuItems = [ ...@@ -359,18 +450,18 @@ const rightMenuItems = [
referTo: "/components/filemosaic#uploading", referTo: "/components/filemosaic#uploading",
}, },
{ {
id: 8, id: 4,
label: "Dark mode", label: "Actions",
referTo: "/components/filemosaic#dark-mode", referTo: "/components/filemosaic#actions",
}, },
{ {
id: 4, id: 5,
label: "Localization", label: "Dark mode",
referTo: "/components/filemosaic#localization", referTo: "/components/filemosaic#dark-mode",
}, },
{ {
id: 9, id: 6,
label: "File Icons", label: "API",
referTo: "/components/filemosaic#file-icon", referTo: "/components/filemosaic#api",
}, },
]; ];
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment