Skip to content
Snippets Groups Projects
Select Git revision
  • 73f1a84b8ada26566294279c093d575c49e3fe5b
  • main default protected
  • dev
  • f-spss-value-label-name
  • f-unmod
  • f-checkidentical
  • f-simple-breakpoint
  • f-new-debug-tree
  • f-existing-file-id
  • f-no-ident
  • f-collect-problems
  • f-refactor-debug-tree
  • v0.13.0
  • v0.12.0
  • v0.11.0
  • v0.10.1
  • v0.10.0
  • v0.9.1
  • v0.9.0
  • v0.8.0
  • v0.7.1
  • v0.7.0
  • v0.6.0
  • v0.5.0
  • v0.4.0
  • v0.3.0
  • v0.2.0
  • v0.1.0
28 results

test_issues.py

Blame
  • 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",
      },
    ];