Select Git revision
FileCardDemoPage.jsx
-
Jose Manuel Serrano Amaut authoredJose Manuel Serrano Amaut authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
FileCardDemoPage.jsx 14.31 KiB
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
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 DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
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";
import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
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";
const FileCardDemoPage = (props) => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>FileCard</MainTitle>
<MainParagraph>
File cards are compact elements that represent a file in the UI. They
can be used for just showing general info of the file, or either to
allow the user to interact with them.
</MainParagraph>
<DescParagraph>
This widget allow users to see information of{" "}
<TypeHighlight> Files</TypeHighlight> and / or trigger actions.
</DescParagraph>
<Alert severity="info">
While included here as a standalone component, the most common use
will be to display the result of the "onChange" event of{" "}
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
<CodeHighlight>{"<InputButton/>"}</CodeHighlight> components, so some
of the behavior demonstrated here is not totally shown in context.{" "}
</Alert>
<section id="basic-filecard">
<SubTitle content="Basic FileCard" />
<DescParagraph>
The <CodeHighlight>FileCard</CodeHighlight> component supports
displaying information from a{" "}
<TypeHighlight>
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File">
File
</AnchorToTab>
</TypeHighlight>{" "}
object or from given props.
<br />
Also, the <TypeHighlight>onDelete</TypeHighlight> prop is used to
remove the file selection.
</DescParagraph>
<DemoContainerFileMosaic>
<DemoFileCardBasic />
</DemoContainerFileMosaic>
<CodeJSFileCardBasic card />
<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 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>
<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>
{/** VALIDATION UPLOAD AND MORE */}
<section id="validation">
<SubTitle content="Validation" />
<DescParagraph>
The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
<TypeHighlight>true</TypeHighlight>,{" "}
<TypeHighlight>false</TypeHighlight> or{" "}
<TypeHighlight>undefined</TypeHighlight>.
</DescParagraph>
<DemoContainerFileMosaic card>
<DemoFileMosaicValidation card />
</DemoContainerFileMosaic>
<CodeJSFileMosaicValidation card />
<Alert severity="info">
Typically, <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components set
this prop when validating the input from a given criteria. You can
see the behaviour mentioned in the following demos:
<ul>
<li>
<AnchorToTab href="/components/dropzone#validation">
Dropzone validation
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton#validation">
FileInputButton validation
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="uploading">
<SubTitle content="Uploading status" />
<DescParagraph>
The <CodeHighlight>uploadStatus</CodeHighlight> prop can be set to{" "}
<TypeHighlight>"preparing"</TypeHighlight>,{" "}
<TypeHighlight>"uploading"</TypeHighlight>,{" "}
<TypeHighlight>"aborted"</TypeHighlight>,{" "}
<TypeHighlight>"error"</TypeHighlight> or{" "}
<TypeHighlight>"success"</TypeHighlight>. Also the{" "}
<CodeHighlight>uploadMessage</CodeHighlight> prop is used for
displaying the error or success message. Finally, the{" "}
<CodeHighlight>progress</CodeHighlight> prop can be used to show the
current progress of the upload process.
<br />
Each of the following examples demonstrates one state combination of
the FileMosaic component.
</DescParagraph>
<DemoContainerFileMosaic card>
<DemoFileMosaicUploadStatus card />
</DemoContainerFileMosaic>
<CodeJSFileMosaicUploadStatus card />
<Alert severity="info">
As you can see, you have full control of the FileCard upload props.
You can take advantage of them to ake your own upload function and
show the user the progress.
<br /> On the other hand, you can also leverage the capability of{" "}
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> and{" "}
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components
since they also manage the{" "}
<TypeHighlight>{"uploadStatus"}</TypeHighlight>
prop for you when upload is enabled. You can see the behaviour
mentioned in the following demos:
<ul>
<li>
<AnchorToTab href="/components/dropzone#uploading">
Dropzone upload
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton#uploading">
FileInputButton upload
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="dark-mode">
<SubTitle content="Dark mode" />
<DescParagraph>
The <CodeHighlight>FileCard</CodeHighlight> component supports dark
mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "}
<TypeHighlight>true</TypeHighlight>.
</DescParagraph>
<div style={{ display: "flex", flexWrap: "wrap" }}>
<DemoFileMosaicDarkMode card />
</div>
<CodeJSFileMosaicDarkMode card />
</section>
{/* <section id="localization">
<SubTitle content="Localization" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> component has
multilanguage support. You can change the language in wich labels
are displayed by setting the{" "}
<CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
the following languages are supported:
<ul>
{[
"English",
"Spanish",
"French",
"Italian",
"Portuguese",
"Russian",
"Chinnese (simplified)",
"Chinnese (traditional)",
].map((x) => (
<li>
<TypeHighlight>{x}</TypeHighlight>
</li>
))}
</ul>
</DescParagraph>
<Paper
variant="outlined"
style={{
padding: "25px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
gap: "20px",
}}
>
<DemoFileMosaicLocalization />
</Paper>
<CodeJSFileMosaicLocalization />
</section>
<section id="file-icon">
<SubTitle content="File Icons (extensive list)" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> component supports
several file types to properly set a file icon. The complete list of
file icons is the following:
</DescParagraph>
<Paper
variant="outlined"
style={{
padding: "25px 0",
display: "flex",
alignItems: "center",
justifyContent: "center",
//flexDirection: "column",
gap: "10px",
flexWrap: "wrap",
}}
>
<DemoFileMosaicFileIcons />
</Paper>
</section> */}
<section id="api">
<SubTitle content="API" />
<DescParagraph>
See the documentation below for a complete reference to all of the
props available to the components mentioned here.
</DescParagraph>
<ul>
<li>
<AnchorToTab href="/api/filecard">{"<FileMosaic/>"}</AnchorToTab>
</li>
<li>
<AnchorToTab href="/api/fileinputbuttom">
{"<FileInputButton/>"}
</AnchorToTab>
</li>
</ul>
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default FileCardDemoPage;
const rightMenuItems = [
{
id: 0,
label: "Basic file mosaic",
referTo: "/components/file-mosaic#basic-filecard",
},
{
id: 1,
label: "Image Preview",
referTo: "/components/file-mosaic#file-mosaic-image-preview",
},
{
id: 2,
label: "Validation",
referTo: "/components/file-mosaic#file-mosaic-validation",
},
{
id: 3,
label: "Uploading",
referTo: "/components/file-mosaic#file-mosaic-uploading",
},
{
id: 4,
label: "Localization",
referTo: "/components/file-mosaic#file-mosaic-localization",
},
{
id: 5,
label: "Previews",
referTo: "/components/file-mosaic#file-mosaic-previews",
},
{
id: 6,
label: "Actions",
referTo: "/components/file-mosaic#actions",
},
{
id: 7,
label: "Default previews",
referTo: "/components/file-mosaic#default-previews",
},
{
id: 8,
label: "Dark mode",
referTo: "/components/file-mosaic#dark-mode",
},
];