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

[WIP]: Add all API pages. Ready File card and file mosaic API.

parent 7a7a8c80
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 1049 additions and 156 deletions
src/components/MainMenu/MainMenuSideBar.tsx
+ 1
− 1
View file @ f1b0772b
......@@ -91,7 +91,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{
label: "FullScreenPreview",
index: 34,
onClick: () => navigate("/api/fullscreenpreview"),
onClick: () => navigate("/api/fullscreen"),
},
{
label: "ImagePreview",
......
src/data/AvatarAPIPropsRows.tsx 0 → 100644
+ 1
− 0
View file @ f1b0772b
export const AvatarAPIPropsRows = [];
\ No newline at end of file
src/data/DropzoneAPIPropsRows.tsx 0 → 100644
+ 6
− 0
View file @ f1b0772b
import CodeHighlight from "../components/codeHighlight/CodeHighlight";
import TypeHighlight from "../components/typeHighlight/TypeHighlight";
export const DropzoneAPIPropsRows=[
]
\ No newline at end of file
src/data/FileCardAPIPropsRows.tsx 0 → 100644
+ 409
− 0
View file @ f1b0772b
import CodeHighlight from "../components/codeHighlight/CodeHighlight";
import TypeHighlight from "../components/typeHighlight/TypeHighlight";
export const FileCardAPIPropsRows = [
{
id: 0,
name: "alwaysActive",
type: <TypeHighlight np>boolean</TypeHighlight>,
default: <TypeHighlight np>false</TypeHighlight>,
description: (
<>
Flag that makes all buttons visible. If{" "}
<TypeHighlight np>false</TypeHighlight>, the buttons and info will be
visible only when user triggers the hover event.
</>
),
},
{
id: 1,
name: "elevation",
type: (
<>
<TypeHighlight np>false</TypeHighlight>
{" | "}
<TypeHighlight np>0</TypeHighlight>
{" | "}
<TypeHighlight np>1</TypeHighlight>
{" | "}
<TypeHighlight np>2</TypeHighlight>
{" | "}
<TypeHighlight np>3</TypeHighlight>
{" | "}
<TypeHighlight np>4</TypeHighlight>
{" | "}
<TypeHighlight np>5</TypeHighlight>
{" | ..."}
<TypeHighlight np>24</TypeHighlight>
{" | "}
<TypeHighlight np>{"'0'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'1'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'2'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'3'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'4'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'5'"}</TypeHighlight>
{" | "}
{"..."}
<TypeHighlight np>{"'24'"}</TypeHighlight>
</>
),
default: <TypeHighlight np>4</TypeHighlight>,
description: (
<>
Shadow depth for the FileItem container. It accepts values between 0 and
24 inclusive.
</>
),
},
{
id: 2,
name: "errors",
type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
The list of errors according to the validation criteria or the result of
the given custom validation function.
</>
),
},
{
id: 5,
name: "id",
type: (
<>
{" "}
<TypeHighlight np>{"string"}</TypeHighlight> {" | "}
<TypeHighlight np>{"number"}</TypeHighlight>
</>
),
default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The identifier of the file</>,
},
{
id: 3,
name: "file",
type: <TypeHighlight np>{"File"}</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The file object obtained from client drop or selection</>,
},
{
name: "name",
type: <TypeHighlight np>{"string"}</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: <>The name of the file</>,
},
{
name: "type",
type: <TypeHighlight np>{"string"}</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: <>The file mime type.</>,
},
{
name: "size",
type: <TypeHighlight np>{"number"}</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: <>The size of the file in bytes.</>,
},
{
name: "valid",
type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
If present, it will show a valid or rejected message ("valid",
"denied"). By default valid is <CodeHighlight>undefined</CodeHighlight>.
</>
),
},
{
id: 6,
name: "info",
type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
default: <TypeHighlight np>false</TypeHighlight>,
description: <>If true, the info button will be visible</>,
},
{
id: 7,
name: "imageUrl",
type: <TypeHighlight np>{"string"}</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
A string representation or web url of the image that will be set to the
"src" prop of an <CodeHighlight>{"<img/>"}</CodeHighlight> tag. If
given, the component will use this image source instead of reading the
image file.
</>
),
},
{
id: 7,
name: "backgroundBlurImage",
type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: <>If true, a background blur image will be shown</>,
},
{
id: 7,
name: "darkMode",
type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
default: <TypeHighlight np>false</TypeHighlight>,
description: <>If true, dark mode colors are used in the component.</>,
},
{
name: "localization",
type: (
<>
<TypeHighlight np>{'"EN-en"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"ES-es"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"FR-fr"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"IT-it"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"PT-pt"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"RU-ru"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"ZH-cn"'}</TypeHighlight>
{" | "}
<TypeHighlight np>{'"ZH-hk"'}</TypeHighlight>
</>
),
default: <TypeHighlight np>{'"EN-en"'}</TypeHighlight>,
description: <>The language in which text labels are shown.</>,
},
{
name: "progress",
type: <TypeHighlight np>number</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
The current percentage of upload progress. This value will have a higher
priority over the upload progress value calculated inside the component.
</>
),
},
{
name: "xhr",
type: <TypeHighlight np>XMLHttpRequest</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
A reference to the XHR object that allows the upload, progress and abort
events.
</>
),
},
{
name: "onSee",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
Callback fired when the see icon is clicked. If set, the see icon will
be shown.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{" (imageSource: string | undefined) => void"}
</CodeHighlight>
</>
),
},
{
name: "onWatch",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the play icon is clicked. If set, the play icon will
be shown.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{"(videoSource: File | string | undefined) => void"}
</CodeHighlight>
</>
),
},
{
name: "onDelete",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the delete icon is clicked. If set, the delete icon
will be shown.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{"(fileId: number | string | undefined) => void"}
</CodeHighlight>
</>
),
},
{
name: "onAbort",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the abort icon is clicked. If set, the abort icon
will be shown during the upload stage.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{"(fileId: number | string | undefined) => void"}
</CodeHighlight>
</>
),
},
{
name: "onCancel",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the cancel icon is clicked. If set, the cancel icon
will be shown only before the upload stage has started during the
preparing phase.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{"(fileId: number | string | undefined) => void"}
</CodeHighlight>
</>
),
},
{
name: "onDownload",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the download icon is clicked. If set, the download
icon will be shown.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{
"(fileId: number | string | undefined, downloadUrl?: string) => void"
}
</CodeHighlight>
</>
),
},
{
name: "onClick",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the component is clicked if set.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>{"(evt: React.MouseEvent) => void"}</CodeHighlight>
</>
),
},
{
name: "onDoubleClick",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the component is double clicked if set.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>{"(evt: React.MouseEvent) => void"}</CodeHighlight>
</>
),
},
{
name: "onRightClick",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Callback fired when the component is right clicked if set.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>{" (evt: React.MouseEvent) => void"}</CodeHighlight>
</>
),
},
{
name: "resultOnTooltip",
type: <TypeHighlight np>boolean</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
If present a tooltip that contains the upload message will be diplayed
on hover.
</>
),
},
{
name: "downloadUrl",
type: <TypeHighlight np>string</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
The url to be used to perform a GET request in order to download the
file. If defined, the download icon will be shown.
</>
),
},
{
name: "smartImgFit",
type: (
<>
<TypeHighlight np>false</TypeHighlight>
{" | "}
<TypeHighlight np>{'"orientation"'}</TypeHighlight>
{" | "}
<TypeHighlight>{'"center"'}</TypeHighlight>
</>
),
default: <TypeHighlight np>{'"orientation"'}</TypeHighlight>,
description: (
<>
If false, image width will be set to 100%.
<br />
If present, image will be analized and displayed according to its heigh
and width. Image with height greater than its width has a "portrait"
orientation. Otherwise it has a "landscape" orientation. .
<ul>
<li>
If value is "orientation", image will be displayed complete by
giving 100% to width prop if the orientation is "landscape". When
orientation is "portrait", height prop will be set to 100%. Some
images will show an empty space.
</li>
<li>
If value is "center", image will be centered and will not be
displayed complete. This the empty space is avoided. This is achived
by giving 100% to width prop if the orientation is "portrait". When
orientation is "landscape", height prop will be set to 100%.
</li>
</ul>
</>
),
},
];
src/data/FileInputButtonPropsRows.tsx 0 → 100644
+ 1
− 0
View file @ f1b0772b
export const FileInputButtonPropsRows=[]
\ No newline at end of file
src/data/FileMosaicAPIPropsRows.tsx
+ 135
− 51
View file @ f1b0772b
......@@ -18,12 +18,46 @@ export const FileMosaicAPIPropsRows = [
id: 1,
name: "elevation",
type: (
<TypeHighlight np>
<span>"1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false</span>
</TypeHighlight>
<>
<TypeHighlight np>false</TypeHighlight>
{" | "}
<TypeHighlight np>0</TypeHighlight>
{" | "}
<TypeHighlight np>1</TypeHighlight>
{" | "}
<TypeHighlight np>2</TypeHighlight>
{" | "}
<TypeHighlight np>3</TypeHighlight>
{" | "}
<TypeHighlight np>4</TypeHighlight>
{" | "}
<TypeHighlight np>5</TypeHighlight>
{" | ..."}
<TypeHighlight np>24</TypeHighlight>
{" | "}
<TypeHighlight np>{"'0'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'1'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'2'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'3'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'4'"}</TypeHighlight>
{" | "}
<TypeHighlight np>{"'5'"}</TypeHighlight>
{" | "}
{"..."}
<TypeHighlight np>{"'24'"}</TypeHighlight>
</>
),
default: <TypeHighlight np>4</TypeHighlight>,
description: (
<>
Shadow depth for the FileItem container. It accepts values between 0 and
24 inclusive.
</>
),
default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>Shadow depth for the FileItem container.</>,
}, */
{
id: 2,
......@@ -37,6 +71,19 @@ export const FileMosaicAPIPropsRows = [
</>
),
},
{
id: 5,
name: "id",
type: (
<>
{" "}
<TypeHighlight np>{"string"}</TypeHighlight> {" | "}
<TypeHighlight np>{"number"}</TypeHighlight>
</>
),
default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The identifier of the file</>,
},
{
id: 3,
name: "file",
......@@ -73,26 +120,6 @@ export const FileMosaicAPIPropsRows = [
</>
),
},
/* {
id: 4,
name: "hd",
type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The actual File object instance</>,
}, */
{
id: 5,
name: "id",
type: (
<>
{" "}
<TypeHighlight np>{"string"}</TypeHighlight> {" | "}
<TypeHighlight np>{"number"}</TypeHighlight>
</>
),
default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The identifier of the file</>,
},
{
id: 6,
name: "info",
......@@ -109,8 +136,8 @@ export const FileMosaicAPIPropsRows = [
<>
A string representation or web url of the image that will be set to the
"src" prop of an <CodeHighlight>{"<img/>"}</CodeHighlight> tag. If
given, FileMosaic component will use this image source instead of
reading the image file.
given, the component will use this image source instead of reading the
image file.
</>
),
},
......@@ -150,12 +177,12 @@ export const FileMosaicAPIPropsRows = [
</>
),
default: <TypeHighlight np>{'"EN-en"'}</TypeHighlight>,
description: <>If true, dark mode colors are used in the component.</>,
description: <>The language in which text labels are shown.</>,
},
{
name: "progress",
type: <TypeHighlight np>number</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
The current percentage of upload progress. This value will have a higher
......@@ -166,22 +193,22 @@ export const FileMosaicAPIPropsRows = [
{
name: "xhr",
type: <TypeHighlight np>XMLHttpRequest</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
A reference to the XHR object that allows the upload, progress and abort
events
events.
</>
),
},
{
name: "onSee",
type: <TypeHighlight np>func</TypeHighlight>,
default: <TypeHighlight np></TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
A function that return a file object when "see" button is pressed or
clicked.
Callback fired when the see icon is clicked. If set, the see icon will
be shown.
<br />
<strong>Signature:</strong>
<br />
......@@ -197,13 +224,13 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `delete` button is clicked or pressed. If
present, `delete` button will be visible.
Callback fired when the play icon is clicked. If set, the play icon will
be shown.
<br />
<strong>Signature:</strong>
<br />
<CodeHighlight>
{"(videoSource: File | undefined) => void"}
{"(videoSource: File | string | undefined) => void"}
</CodeHighlight>
</>
),
......@@ -214,8 +241,8 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `delete` button is clicked or pressed. If
present, `delete` button will be visible.
Callback fired when the delete icon is clicked. If set, the delete icon
will be shown.
<br />
<strong>Signature:</strong>
<br />
......@@ -231,9 +258,8 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `abort` button is clicked or pressed during
`uploading` event. If present, `abort` button in `uploading` phase will
be visible.
Callback fired when the abort icon is clicked. If set, the abort icon
will be shown during the upload stage.
<br />
<strong>Signature:</strong>
<br />
......@@ -249,9 +275,9 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `cancel` button is clicked or pressed
during `preparing` event. If present, `cancel` button in `preparing`
phase will be visible.
Callback fired when the cancel icon is clicked. If set, the cancel icon
will be shown only before the upload stage has started during the
preparing phase.
<br />
<strong>Signature:</strong>
<br />
......@@ -267,8 +293,8 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `download` button is clicked or pressed. If
present, `download` button will be visible.
Callback fired when the download icon is clicked. If set, the download
icon will be shown.
<br />
<strong>Signature:</strong>
<br />
......@@ -286,7 +312,7 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when user clicks the component
Callback fired when the component is clicked if set.
<br />
<strong>Signature:</strong>
<br />
......@@ -300,7 +326,7 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when user double clicks the component
Callback fired when the component is double clicked if set.
<br />
<strong>Signature:</strong>
<br />
......@@ -314,7 +340,7 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when user right clicks the component
Callback fired when the component is right clicked if set.
<br />
<strong>Signature:</strong>
<br />
......@@ -322,4 +348,62 @@ export const FileMosaicAPIPropsRows = [
</>
),
},
{
name: "resultOnTooltip",
type: <TypeHighlight np>boolean</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
If present a tooltip that contains the upload message will be diplayed
on hover.
</>
),
},
{
name: "downloadUrl",
type: <TypeHighlight np>string</TypeHighlight>,
default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
The url to be used to perform a GET request in order to download the
file. If defined, the download icon will be shown.
</>
),
},
{
name: "smartImgFit",
type: (
<>
<TypeHighlight np>false</TypeHighlight>
{" | "}
<TypeHighlight np>{'"orientation"'}</TypeHighlight>
{" | "}
<TypeHighlight>{'"center"'}</TypeHighlight>
</>
),
default: <TypeHighlight np>{'"orientation"'}</TypeHighlight>,
description: (
<>
If false, image width will be set to 100%.
<br />
If present, image will be analized and displayed according to its heigh
and width. Image with height greater than its width has a "portrait"
orientation. Otherwise it has a "landscape" orientation. .
<ul>
<li>
If value is "orientation", image will be displayed complete by
giving 100% to width prop if the orientation is "landscape". When
orientation is "portrait", height prop will be set to 100%. Some
images will show an empty space.
</li>
<li>
If value is "center", image will be centered and will not be
displayed complete. This the empty space is avoided. This is achived
by giving 100% to width prop if the orientation is "portrait". When
orientation is "landscape", height prop will be set to 100%.
</li>
</ul>
</>
),
},
];
src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
+ 22
− 25
View file @ f1b0772b
......@@ -48,15 +48,15 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
*/
preview?: boolean;
/**
* whether to show the info layer or not
* also whether to make visible the info button or not ,
* Only works when given a image file
* If true, the info button will be visible
* @default false
*/
info?: boolean;
/**
* A string representation or web url of the image
* that will be set to the "src" prop of an <img/> tag
* <img src={`${imageUrl}`} />
* that will be set to the "src" prop of an <img/> If
* given, the component will use this image source instead of
* reading the image file.
*/
imageUrl?: string;
/**
......@@ -74,9 +74,8 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
*/
darkMode?: boolean;
/**
* language to be used
* for now
* only English and Spanish is supported
* The language in which text labels are shown.
* @default "EN-en"
*/
localization?: Localization;
/**
......@@ -86,48 +85,46 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
*/
progress?: number;
/**
* A reference to the XHR object that allows the upload and abort event.
* and progress
* A reference to the XHR object that allows the upload, progress and abort events.
*/
xhr?: XMLHttpRequest;
/**
* A function that return a file object when "see" button is pressed or clicked
* Callback fired when the see icon is clicked. If set, the see icon will be shown.
*/
onSee?: (imageSource: string | undefined) => void;
/**
* A function that return a file object when "play" button is presssed or clicked
* Callback fired when the play icon is clicked. If set, the play icon will be shown.
*/
onWatch?: (videoSource: File | string | undefined) => void;
/**
* Event that is triggered when `delete` button is clicked or pressed.
* If present, `delete` button will be visible.
* Callback fired when the delete icon is clicked. If set, the delete icon will be shown.
*/
onDelete?: (fileId: number | string | undefined) => void;
/**
* Event that is triggered when `abort` button is clicked or pressed during `uploading` event
* If present, `abort` button in `uploading` phase will be visible.
* Callback fired when the abort icon is clicked. If set, the abort icon
will be shown during the upload stage.
*/
onAbort?: (fileId: number | string | undefined) => void;
/**
* Event that is triggered when `cancel` button is clicked or pressed during `preparing` event
* If present, `cancel` button in `preparing` phase will be visible.
* Callback fired when the cancel icon is clicked. If set, the cancel icon
will be shown only before the upload stage has started during the preparing phase.
*/
onCancel?: (fileId: number | string | undefined) => void;
/**
* Event that is triggered when `download` button is clicked or pressed.
* If present, `download` button will be visible.
* Callback fired when the cancel icon is clicked. If set, the cancel icon
will be shown only before the upload stage has started.
*/
onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
/**
* Event that is triggered when user clicks the component
* Callback fired when the component is clicked if set.
*/
onClick?: (evt: React.MouseEvent) => void;
/**
* Event that is triggered when user double clicks the component
* Callback fired when the component is double clicked if set.
*/
onDoubleClick?: (evt: React.MouseEvent) => void;
/**
* Event that is triggered when user right clicks the component
* Callback fired when the component is right clicked if set.
*/
onRightClick?: (evt: React.MouseEvent) => void;
......@@ -136,11 +133,11 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
*/
alwaysActive?: boolean;
/**
* Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
* If present a tooltip that contains the upload message will be diplayed on hover
*/
resultOnTooltip?: boolean;
/**
* Url to perform a GET request in order to download the file.
* The url to be used to perform a GET request in order to download the file.
* This action is triggered when download button is clicked or pressed.
* In case onDownload prop is given
*/
......
src/pages/api/AvatarApi.jsx
+ 62
− 8
View file @ f1b0772b
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { AvatarAPIPropsRows } from "../../data/AvatarAPIPropsRows";
const AvatarApi = props =>{
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/fileinputbutton#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/fileinputbutton#props",
},
];
const AvatarApi = (props) => {
return (
<div>
AvatarApi
</div>
)
}
<React.Fragment>
<MainContentContainer>
<MainTitle>Avatar API</MainTitle>
<DescParagraph>
API reference docs for the React Avatar component. Learn
about the props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton">
FileInputButton
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={AvatarAPIPropsRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default AvatarApi;
src/pages/api/DropzoneApi.jsx deleted 100644 → 0
+ 0
− 14
View file @ 7a7a8c80
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainTitle from "../../components/main-title/MainTitle";
const DropzoneApi = (props) => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>Dropzone API</MainTitle>
</MainContentContainer>
</React.Fragment>
);
};
export default DropzoneApi;
src/pages/api/DropzoneApi.tsx 0 → 100644
+ 61
− 0
View file @ f1b0772b
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { DropzoneAPIPropsRows } from "../../data/DropzoneAPIPropsRows";
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/dropzone#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/dropzone#props",
},
];
const DropzoneApi = () => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>Dropzone API</MainTitle>
<DescParagraph>
API reference docs for the React Dropzone component. Learn about the
props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/dropzone">Dropzone</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={DropzoneAPIPropsRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default DropzoneApi;
src/pages/api/FileCardApi.jsx deleted 100644 → 0
+ 0
− 14
View file @ 7a7a8c80
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainTitle from "../../components/main-title/MainTitle";
const FileCardApi = (props) => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>FileCard API</MainTitle>
</MainContentContainer>
</React.Fragment>
);
};
export default FileCardApi;
src/pages/api/FileCardApi.tsx 0 → 100644
+ 60
− 0
View file @ f1b0772b
import { Alert } from "@mui/material";
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import { FileCardAPIPropsRows } from "../../data/FileCardAPIPropsRows";
import PropsTableApi from "./PropsTableApi";
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/filecard#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/filecard#props",
},
];
const FileCardApi = () => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>FileCard API</MainTitle>
<DescParagraph>
API reference docs for the React Filecard component. Learn about the
props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filecard">FileCard</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/dropzone">Dropzone</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={FileCardAPIPropsRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default FileCardApi;
src/pages/api/FileInputButtonApi.jsx
+ 61
− 8
View file @ f1b0772b
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { FileInputButtonPropsRows } from "../../data/FileInputButtonPropsRows";
const FileInputButtonApi = props =>{
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/fileinputbutton#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/fileinputbutton#props",
},
];
const FileInputButtonApi = (props) => {
return (
<div>
FileInputButtonApi
</div>
)
}
<React.Fragment>
<MainContentContainer>
<MainTitle>FileInputButton API</MainTitle>
<DescParagraph>
API reference docs for the React FileInputButton component. Learn
about the props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton">
FileInputButton
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={FileInputButtonPropsRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default FileInputButtonApi;
src/pages/api/FileMosaicApi.jsx
+ 35
− 35
View file @ f1b0772b
import { Alert, IconButton, Tooltip } from "@mui/material";
import { Alert } from "@mui/material";
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
......@@ -6,48 +6,49 @@ import MainContentContainer from "../../components/layout-pages/MainContentConta
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
import FilterListIcon from "@mui/icons-material/FilterList";
import PropsTableApi from "./PropsTableApi";
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/file-mosaic#filemosaic-demo",
referTo: "/api/filemosaic#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/file-mosaic#filemosaic-props",
referTo: "/api/filemosaic#props",
},
];
const FileMosaicApi = (props) => {
return (
<React.Fragment>
<React.Fragment>
<MainContentContainer>
<MainTitle>FileMosaic API</MainTitle>
<DescParagraph>
API reference docs for the React Filemosaic component. Learn about
the props and other APIs of this exported module.
API reference docs for the React Filemosaic component. Learn about the
props and other APIs of this exported module.
</DescParagraph>
<section id="filemosaic-demo">
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component,
visit the component demo pages:
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<a href="/components/filemosaic">FileMosaic</a>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<a href="/components/dropzone">Dropzone</a>
<AnchorToTab href="/components/dropzone">Dropzone</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="filemosaic-props">
<section id="props">
<PropsTableApi rows={FileMosaicAPIPropsRows} />
</section>
</MainContentContainer>
......@@ -55,7 +56,6 @@ const FileMosaicApi = (props) => {
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
</React.Fragment>
);
};
export default FileMosaicApi;
src/pages/api/FullScreenAPIPropRows.tsx 0 → 100644
+ 1
− 0
View file @ f1b0772b
export const FullScreenAPIPropRows=[];
\ No newline at end of file
src/pages/api/FullScreenApi.tsx 0 → 100644
+ 64
− 0
View file @ f1b0772b
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { FullScreenAPIPropRows } from "./FullScreenAPIPropRows";
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/fileinputbutton#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/fileinputbutton#props",
},
];
const FullScreenApi = () => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>FullScreen API</MainTitle>
<DescParagraph>
API reference docs for the React FullScreen component. Learn
about the props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton">
FileInputButton
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={FullScreenAPIPropRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default FullScreenApi;
src/pages/api/ImagePreviewAPIPropsRows.tsx 0 → 100644
+ 1
− 0
View file @ f1b0772b
export const ImagePreviewAPIPropsRows =[]
\ No newline at end of file
src/pages/api/ImagePreviewApi.tsx 0 → 100644
+ 64
− 0
View file @ f1b0772b
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { ImagePreviewAPIPropsRows } from "./ImagePreviewAPIPropsRows";
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/fileinputbutton#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/fileinputbutton#props",
},
];
const ImagePreviewApi = () => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>ImagePreview API</MainTitle>
<DescParagraph>
API reference docs for the React ImagePreview component. Learn
about the props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton">
FileInputButton
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={ImagePreviewAPIPropsRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default ImagePreviewApi;
src/pages/api/VideoPreviewAPIPropsRows.tsx 0 → 100644
+ 1
− 0
View file @ f1b0772b
export const VideoPreviewAPIPropsRows=[]
\ No newline at end of file
src/pages/api/VideoPreviewApi.tsx 0 → 100644
+ 64
− 0
View file @ f1b0772b
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { VideoPreviewAPIPropsRows } from "./VideoPreviewAPIPropsRows";
const rightMenuItems = [
{
id: 0,
label: "Demos",
referTo: "/api/fileinputbutton#demo",
},
{
id: 1,
label: "Props",
referTo: "/api/fileinputbutton#props",
},
];
const VideoPreviewApi = () => {
return (
<React.Fragment>
<MainContentContainer>
<MainTitle>VideoPreview API</MainTitle>
<DescParagraph>
API reference docs for the React VideoPreview component. Learn
about the props and other APIs of this exported module.
</DescParagraph>
<section id="demo">
<SubTitle content="Demo" />
<Alert severity="info">
For examples and details on the usage of this React component, visit
the component demo pages:
<ul>
<li>
<AnchorToTab href="/components/filemosaic">
FileMosaic
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/components/fileinputbutton">
FileInputButton
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
<section id="props">
<PropsTableApi rows={VideoPreviewAPIPropsRows} />
</section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default VideoPreviewApi;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment