diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 1545db25cd2d757e49501c3c8a1ccf7607fd951d..83fc511765aa8e3ea99b1f8671bef0c12375d448 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -68,16 +68,16 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
subMenu: [
{
- label: "Dropzone",
+ label: "Avatar",
index: 31,
- onClick: () => navigate("/api/dropzone"),
+ onClick: () => navigate("/api/avatar"),
},
-
{
- label: "FileMosaic",
+ label: "Dropzone",
index: 32,
- onClick: () => navigate("/api/filemosaic"),
+ onClick: () => navigate("/api/dropzone"),
},
+
{
label: "FileInputButton",
index: 33,
@@ -89,25 +89,25 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
onClick: () => navigate("/api/filecard"),
},
{
- label: "FullScreenPreview",
- index: 34,
- onClick: () => navigate("/api/fullscreenpreview"),
+ label: "FileMosaic",
+ index: 35,
+ onClick: () => navigate("/api/filemosaic"),
+ },
+ {
+ label: "FullScreen",
+ index: 36,
+ onClick: () => navigate("/api/fullscreen"),
},
{
label: "ImagePreview",
- index: 34,
+ index: 37,
onClick: () => navigate("/api/imagepreview"),
},
{
label: "VideoPreview",
- index: 34,
+ index: 38,
onClick: () => navigate("/api/videopreview"),
},
- {
- label: "Avatar",
- index: 35,
- onClick: () => navigate("/api/avatar"),
- },
],
},
{
diff --git a/src/components/RightMenu/RightMenu.scss b/src/components/RightMenu/RightMenu.scss
index 47293a472260913ead6b954f8fc60e335519d785..a0e02196a2ec076b0a86bd6b30e47f7c9e62dc8a 100644
--- a/src/components/RightMenu/RightMenu.scss
+++ b/src/components/RightMenu/RightMenu.scss
@@ -3,6 +3,7 @@
text-decoration: none;
padding-left: 5px;
width: 100%;
+ //word-break: break-all;
&.selected,
&:hover {
border-left: 2px #b2bac2 solid;
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
index b900bcac2f4e20a9fa5b1c53a922b95597a37ac3..45f9af40ecde09007338bb281b6bf9b6ee6012a3 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
@@ -1,5 +1,5 @@
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeDemoDropzoneActionButtons = ({ splittedOnly = false, button }) => {
+const CodeDemoActionButtons = ({ splittedOnly = false, button }) => {
if (button)
return (
<ShowDemoCode
@@ -24,7 +24,7 @@ const CodeDemoDropzoneActionButtons = ({ splittedOnly = false, button }) => {
/>
);
};
-export default CodeDemoDropzoneActionButtons;
+export default CodeDemoActionButtons;
const splittedCodeJSButton = `<FileInputButton
onChange={updateFiles}
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
index a0524c7b0f96e03ae1cca235adf17215cafd8427..ab48180f46f119f4efff6d6a2d22bbe66d08a337 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
@@ -31,7 +31,7 @@ export default CodeDemoDropzoneCustomValidation;
const splittedCodeJSButton = ``;
const splittedCodeTSButton = ``;
-const completeCodeJSButton =`import { FileInputButton, FileCard } from "@files-ui/react";
+const completeCodeJSButton = `import { FileInputButton, FileCard } from "@files-ui/react";
import * as React from "react";
//validate files
@@ -94,16 +94,19 @@ export default function App() {
</div>
);
}`;
-const completeCodeTSButton = `import { FileInputButton, FileCard, ExtFile } from "@files-ui/react";
+const completeCodeTSButton =
+ `import { FileInputButton, FileCard, ExtFile } from "@files-ui/react";
import * as React from "react";
//validate files
// file name must start with the following prefix: "test_file"
// (e.g. a valid file name could be "test_file_photo.png")
-const myOwnValidation = (file: File): CustomValidateFileResponse => {
+const myOwnValidation = (file: File): ValidateFileResponse => {
let errorList: string[] = [];
let validResult: boolean = true;
- const regExPrefix: RegExp = /\btest_file\w+/;
+ ` +
+ // eslint-disable-next-line
+ `const regExPrefix: RegExp = /\btest_file\w+/;
if (!file.name.match(regExPrefix)) {
validResult = false;
errorList.push('Prefix "test_file" was not present in the file name');
@@ -161,11 +164,11 @@ export default function App() {
/////
-
const splittedCodeJS = ``;
const splittedCodeTS = ``;
const completeCodeJS = `import { Dropzone, FileMosaic } from "@files-ui/react";
import * as React from "react";
+
//validate files
// file name must start with the following prefix: "test_file"
// (e.g. a valid file name could be "test_file_photo.png")
@@ -179,6 +182,7 @@ const myOwnValidation = (file) => {
}
return { valid: validResult, errors: errorList };
};
+
export default function App() {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
@@ -204,16 +208,16 @@ export default function App() {
);
}`;
-const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile, CustomValidateFileResponse } from "@files-ui/react";
+const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile, ValidateFileResponse } from "@files-ui/react";
import * as React from "react";
//validate files
// file name must start with the following prefix: "test_file"
// (e.g. a valid file name could be "test_file_photo.png")
-const myOwnValidation = (file: File): CustomValidateFileResponse => {
+const myOwnValidation = (file: File): ValidateFileResponse => {
let errorList: string[] = [];
let validResult: boolean = true;
- const regExPrefix: RegExp = /\btest_file\w+/;
+ const regExPrefix: RegExp = /\\btest_file\\w+/;
if (!file.name.match(regExPrefix)) {
validResult = false;
errorList.push('Prefix "test_file" was not present in the file name');
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
index 110716bf8e6aa504fb664d4daa8e33e2c28ab1ed..1820671cfb17b5b340dfcb06308572a9daa28a32 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { Dropzone, FileCard, FileInputButton, FileMosaic } from "../../../files-ui";
-const DemoDropzoneActionButtons = ({ button }) => {
+const DemoActionButtons = ({ button }) => {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
@@ -83,4 +83,4 @@ const DemoDropzoneActionButtons = ({ button }) => {
</Dropzone>
);
};
-export default DemoDropzoneActionButtons;
+export default DemoActionButtons;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx b/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
index cc76731fad5711250674c03342a4763e8a2b5e0a..16ee4a6c1793f60dc12c0f23035bd1ee3428350f 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
@@ -4,7 +4,7 @@ import {
ExtFile,
FileMosaic,
FileMosaicProps,
- CustomValidateFileResponse,
+ ValidateFileResponse,
FileInputButton,
FileCard,
} from "../../../files-ui";
@@ -12,7 +12,7 @@ import {
//validate files
// file name must start with the following prefix: "test_file"
// (e.g. a valid file name could be "test_file_photo.png")
-const myOwnValidation = (file: File): CustomValidateFileResponse => {
+const myOwnValidation = (file: File): ValidateFileResponse => {
let errorList: string[] = [];
let validResult: boolean = true;
const regExPrefix: RegExp = /\btest_file\w+/;
diff --git a/src/components/show-demo-code/ShowDemoCode.tsx b/src/components/show-demo-code/ShowDemoCode.tsx
index 64494d98bc7968bb5b242ef32c69fd8fde90f32d..d79f7fe4a0aa906a73c778f0dec0b3bc05651e4d 100644
--- a/src/components/show-demo-code/ShowDemoCode.tsx
+++ b/src/components/show-demo-code/ShowDemoCode.tsx
@@ -112,11 +112,11 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
console.log("code copied to clipboard: ");
console.log(code_);
}}
- style={{
+ style={{
margin: "20px 0",
- fontSize:"15px",
- lineHeight:"",
- }}
+ fontSize: "15px",
+ lineHeight: "",
+ }}
>
{code}
</Highlighter>
diff --git a/src/data/ActionButtonItemAPIRows.tsx b/src/data/ActionButtonItemAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..384ad25b5844771dffcfbbe75e14f8fbaf531566
--- /dev/null
+++ b/src/data/ActionButtonItemAPIRows.tsx
@@ -0,0 +1,62 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const ActionButtonItemAPIRows = [
+ {
+ name: "children",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The content of the button.</>,
+ },
+ {
+ name: "label",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The label of the button.</>,
+ },
+
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object applied to the main container.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles. Classname is applied to the main container.
+ </>
+ ),
+ },
+ {
+ name: "resetStyles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, the given class name and style properties will replace the
+ default ones instead of overriding them.
+ </>
+ ),
+ },
+ {
+ name: "onClick",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when the button is clicked. If given, will replace the
+ default behaviour.{" "}
+ </>
+ ),
+ },
+ {
+ name: "disabled",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>false</TypeHighlight>,
+ description: <>If true, the component is disabled.</>,
+ },
+];
diff --git a/src/data/ActionButtonsAPIRows.tsx b/src/data/ActionButtonsAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7fce373a1423b40a9ddd50100c44142700c0f174
--- /dev/null
+++ b/src/data/ActionButtonsAPIRows.tsx
@@ -0,0 +1,100 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../components/util-components/AnchorToTab";
+
+export const ActionButtonsAPIRows = [
+ {
+ name: "position",
+ type: (
+ <>
+ <TypeHighlight np>{'"before"'}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{'"after"'}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>The position of the action buttons. Before or after the component.</>
+ ),
+ },
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object applied to the main container.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles. Classname is applied to the main container.
+ </>
+ ),
+ },
+ {
+ name: "uploadButton",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, the upload button will be shown. Specific props applied to the upload button.
+ Type definition can be found{" "}
+ <AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
+ </>
+ ),
+ },
+ {
+ name: "abortButton",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, the abort button will be shown. Specific props applied to the abort button.
+ Type definition can be found{" "}
+ <AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
+ </>
+ ),
+ },
+ {
+ name: "deleteButton",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, the delete button will be shown. Specific props applied to the delete button.
+ Type definition can be found{" "}
+ <AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
+ </>
+ ),
+ },
+ {
+ name: "cleanButton",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, the clean button will be shown. Specific props applied to the clean button.
+ Type definition can be found{" "}
+ <AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
+ </>
+ ),
+ },
+];
diff --git a/src/data/AvatarAPIPropsRows.tsx b/src/data/AvatarAPIPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4dbf77758fc4fe35d541986292e296a00764f19d
--- /dev/null
+++ b/src/data/AvatarAPIPropsRows.tsx
@@ -0,0 +1,157 @@
+import CodeHighlight from "../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../components/util-components/AnchorToTab";
+
+export const AvatarAPIPropsRows = [
+ {
+ name: "readOnly",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true and if a src is given, then avatar will show the image and will
+ not allow the user to change the picture. Also, layer on hover will not
+ be shown
+ </>
+ ),
+ },
+ {
+ name: "src",
+ type: (
+ <>
+ <TypeHighlight np>{"string"}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{"File"}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Image source in string format (URL) or File Object (Will be read as
+ URL).
+ </>
+ ),
+ },
+ {
+ name: "alt",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>Alternative label when an error occurs on loading the image</>
+ ),
+ },
+ {
+ name: "onChange",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when an image file is selected.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(selectedFile: File) => void"}</CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "accept",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np>{"image/*"}</TypeHighlight>,
+ description: (
+ <>
+ A comma-separated list of one or more file types, or{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers">
+ unique file type specifiers
+ </AnchorToTab>
+ , describing which file types to allow. The default implementation of
+ accept checks the file's mime type or extension against this list. More
+ information can be found{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">
+ here
+ </AnchorToTab>
+ .
+ </>
+ ),
+ },
+
+ {
+ name: "emptyLabel",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>Label to be displayed when image source is not set.</>,
+ },
+ {
+ name: "changeLabel",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>Label to be displayed when there is a valid source set.</>,
+ },
+ {
+ name: "loadingLabel",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Label to be displayed when "isLoading" prop is set set. This will cover
+ the current image.
+ </>
+ ),
+ },
+ {
+ name: "isLoading",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>false</TypeHighlight>,
+ description: <>If true, loadingLabel will be shown.</>,
+ },
+ {
+ name: "onError",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>Callback fired when an error occured on loading the image.</>
+ ),
+ },
+ {
+ name: "smartImgFit",
+ type: (
+ <>
+ <TypeHighlight np>false</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{'"orientation"'}</TypeHighlight>
+ {" | "}
+ <TypeHighlight>{'"center"'}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np>{'"center"'}</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 "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>
+ <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>
+ </ul>
+ </>
+ ),
+ },
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object.</>,
+ },
+];
diff --git a/src/data/DropzoneAPIPropsRows.tsx b/src/data/DropzoneAPIPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cb69fff46ac3149fd2dd12016cc60154eaa19b87
--- /dev/null
+++ b/src/data/DropzoneAPIPropsRows.tsx
@@ -0,0 +1,410 @@
+import CodeHighlight from "../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../components/util-components/AnchorToTab";
+
+export const DropzoneAPIPropsRows = [
+ {
+ name: "value",
+ type: <TypeHighlight np>{"ExtFile"}</TypeHighlight>,
+ default: <TypeHighlight np>{"[]"}</TypeHighlight>,
+ description: (
+ <>
+ Just like any other input component. The value of the input element,
+ required for a controlled component.
+ </>
+ ),
+ },
+ {
+ name: "onChange",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Probably one of the most important methods (callbacks). Returns as first
+ parameter an array of `ExtFile` objects. This callback is fired when the
+ delete icon is clicked. If set, the delete icon will be shown.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(files: ExtFile[]) => void"}</CodeHighlight>
+ </>
+ ),
+ },
+ // Validation stage
+ {
+ name: "accept",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ A comma-separated list of one or more file types, or{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers">
+ unique file type specifiers
+ </AnchorToTab>
+ , describing which file types to allow. The default implementation of
+ accept checks the file's mime type or extension against this list. More
+ information can be found{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">
+ here
+ </AnchorToTab>
+ .
+ </>
+ ),
+ },
+ {
+ name: "maxFiles",
+ type: <TypeHighlight np>number</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The max number of files to be accepted.</>,
+ },
+ {
+ name: "maxFileSize",
+ type: <TypeHighlight np>number</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The max file size allowed in bytes.</>,
+ },
+ {
+ name: "validator",
+ 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>
+ {"(f: File) => "}{" "}
+ <AnchorToTab href="/types#validatefileresponse">
+ ValidateFileResponse
+ </AnchorToTab>
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onClean",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when the clean icon is clicked. If set and if validation
+ is active, the clean icon will be shown.
+ </>
+ ),
+ },
+ {
+ name: "autoClean",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, the component will automatically remove non valid files when
+ user drops files or selects them from file dialog. This flag will only
+ work if validation is active.
+ </>
+ ),
+ },
+ {
+ name: "cleanFiles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, "clean" button will be shown and every time user clicks the
+ buttom it will trigger the default "clean operation": Remove non valid
+ files. This flag will only work if validation is active.
+ </>
+ ),
+ },
+ /////////////// UPLOAD STAGE ///////////////
+ {
+ name: "uploadConfig",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#uploadconfig">UploadConfig</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The configuration needed for uploading the files. If not set or or
+ uploadConfig.url is undefined the upload button will not be visible and
+ uploadOnDrop prop flag will not work.
+ </>
+ ),
+ },
+ {
+ name: "fakeUpload",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, the component will simulate the upload operation by randomly
+ setting the upload status and message on each uploadable{" "}
+ <TypeHighlight>ExtFile</TypeHighlight>. It will also set a fake
+ progress. Will also ignore the uploadConfig prop and will show the
+ upload button
+ </>
+ ),
+ },
+ {
+ name: "onUploadStart",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when the upload process starts.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(uploadAbleFiles: ExtFile[]) => void"}</CodeHighlight>
+ <ul>
+ <li>uploadAbleFiles: The list of files to be uploaded.</li>
+ </ul>
+ </>
+ ),
+ },
+ {
+ name: "onUploadFinish",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when the upload process ends.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(uploadedFiles: ExtFile[]) => void"}</CodeHighlight>
+ <ul>
+ <li>uploadAbleFiles: The list of uploaded files.</li>
+ </ul>
+ </>
+ ),
+ },
+ /////////////// STYLING ///////////
+
+ {
+ name: "background",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np>{'"transparent'}</TypeHighlight>,
+ description: <>The background color for dropzone container.</>,
+ },
+ {
+ name: "color",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np>{'"#646c7f"'}</TypeHighlight>,
+ description: <>The main color for dropzone labels and borders.</>,
+ },
+ {
+ name: "minHeight",
+ type: (
+ <>
+ <TypeHighlight np>string</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>number</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np>{'"180px"'}</TypeHighlight>,
+ description: (
+ <>
+ The min height of the component. If the value is given in number format,
+ "px" will be assumed
+ </>
+ ),
+ },
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object applied to the main container.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles. Classname is applied to the main container.
+ </>
+ ),
+ },
+
+ {
+ name: "label",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The label to place when no files were selected.</>,
+ },
+ {
+ 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: "disableRipple",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, will not show a ripple effect everytime the user drops files or
+ clicks the dropzone for selecting files.
+ </>
+ ),
+ },
+ /// DRAG OPERATIONS
+ {
+ name: "onDragEnter",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Method for performing specific tasks on drag enter operations.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {"(evt: React.DragEvent<HTMLDivElement>) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onDragLeave",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Method for performing specific tasks on drag leave operations.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {"(evt: React.DragEvent<HTMLDivElement>) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ //ACTION BUTTONS
+ {
+ name: "actionButtons",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#actionbuttons">ActionButtons</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, buttons will be added before or after of the component. This
+ buttons triggresthe common opertions of the component such as clean,
+ upload, abort and delete all.
+ </>
+ ),
+ },
+ {
+ name: "dropOnLayer",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, the drop operation will be performed in a layer that covers the
+ complete component container.
+ </>
+ ),
+ },
+ {
+ name: "footer",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If false, hides the dropzone footer.</>,
+ },
+ {
+ name: "header",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If false, hides the dropzone header.</>,
+ },
+
+ {
+ name: "headerConfig",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#headerconfig">HeaderConfig</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>Configuration related to the dropzone header.</>,
+ },
+ {
+ name: "footerConfig",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#footerconfig">FooterConfig</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>Configuration related to the dropzone footer.</>,
+ },
+ {
+ name: "disabled",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>false</TypeHighlight>,
+ description: <>If true, the component is disabled.</>,
+ },
+ {
+ name: "clickable",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>false</TypeHighlight>,
+ description: (
+ <>
+ If false, the component will not be clickable. So, file dialog will not
+ be opened.
+ </>
+ ),
+ },
+ {
+ name: "behaviour",
+ type: (
+ <>
+ <TypeHighlight np>{'"add"'}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{'"replace"'}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np>{'"add"'}</TypeHighlight>,
+ description: <>The behaviour when new files are selected or dropped</>,
+ },
+ {
+ name: "children",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The content of the dropozone. Tipically it is an array of{" "}
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> components.
+ </>
+ ),
+ },
+];
diff --git a/src/data/ExtFileAPIRows.tsx b/src/data/ExtFileAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..35b4ccae1551cef747bfd7fa045e6269956e0449
--- /dev/null
+++ b/src/data/ExtFileAPIRows.tsx
@@ -0,0 +1,157 @@
+import CodeHighlight from "../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../components/util-components/AnchorToTab";
+export const ExtFileAPIRows = [
+ {
+ name: "id",
+ type: (
+ <>
+ {" "}
+ <TypeHighlight np>{"string"}</TypeHighlight> {" | "}
+ <TypeHighlight np>{"number"}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The identifier of the file</>,
+ },
+ {
+ name: "file",
+ type: <TypeHighlight np>{"File"}</TypeHighlight>,
+ default: <TypeHighlight np></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></TypeHighlight>,
+ description: (
+ <>
+ If present, it will show a valid or rejected message ("valid",
+ "denied"). By default valid is <CodeHighlight>undefined</CodeHighlight>.
+ </>
+ ),
+ },
+ {
+ name: "errors",
+ type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The list of errors according to the validation criteria or the result of
+ the given custom validation function.
+ </>
+ ),
+ },
+ {
+ name: "uploadStatus",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/types#uploadstatus">
+ {"UPLOADSTATUS"}
+ </AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The current upload status. (e.g. "uploading").</>,
+ },
+ {
+ name: "uploadMessage",
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>A message that shows the result of the upload process.</>,
+ },
+ {
+ name: "imageUrl",
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np></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.
+ </>
+ ),
+ },
+ {
+ name: "downloadUrl",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></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: "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: "extraUploadData",
+ type: <TypeHighlight np>{"Record<string, any>"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The additional data that will be sent to the server when files are
+ uploaded individually
+ </>
+ ),
+ },
+ {
+ name: "extraData",
+ type: <TypeHighlight np>Object</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>Any kind of extra data that could be needed.</>,
+ },
+ {
+ name: "serverResponse",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/api/dropzone#serverresponse">
+ ServerResponse
+ </AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The upload response from server.</>,
+ },
+ {
+ name: "xhr",
+ type: <TypeHighlight np>XMLHttpRequest</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ A reference to the XHR object that allows the upload, progress and abort
+ events.
+ </>
+ ),
+ },
+];
diff --git a/src/data/FileCardAPIPropsRows.tsx b/src/data/FileCardAPIPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..94cd2d4f05a96e0d0d6a33315e123ff4b08eadfa
--- /dev/null
+++ b/src/data/FileCardAPIPropsRows.tsx
@@ -0,0 +1,409 @@
+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></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></TypeHighlight>,
+ description: <>The identifier of the file</>,
+ },
+ {
+ id: 3,
+ name: "file",
+ type: <TypeHighlight np>{"File"}</TypeHighlight>,
+ default: <TypeHighlight np></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></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></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></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></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></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></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></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>
+ </>
+ ),
+ },
+];
diff --git a/src/data/FileInputButtonPropsRows.tsx b/src/data/FileInputButtonPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8ca9de1080bf42125c7b27f44c4f2328fd1c08f
--- /dev/null
+++ b/src/data/FileInputButtonPropsRows.tsx
@@ -0,0 +1,281 @@
+import CodeHighlight from "../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../components/util-components/AnchorToTab";
+
+export const FileInputButtonPropsRows = [
+ {
+ name: "value",
+ type: <TypeHighlight np>{"ExtFile"}</TypeHighlight>,
+ default: <TypeHighlight np>{"[]"}</TypeHighlight>,
+ description: (
+ <>
+ Just like any other input component. The value of the input element,
+ required for a controlled component.
+ </>
+ ),
+ },
+ {
+ name: "onChange",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Probably one of the most important methods (callbacks). Returns as first
+ parameter an array of `ExtFile` objects. This callback is fired when the
+ delete icon is clicked. If set, the delete icon will be shown.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(files: ExtFile[]) => void"}</CodeHighlight>
+ </>
+ ),
+ },
+ // Validation stage
+ {
+ name: "accept",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ A comma-separated list of one or more file types, or{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers">
+ unique file type specifiers
+ </AnchorToTab>
+ , describing which file types to allow. The default implementation of
+ accept checks the file's mime type or extension against this list. More
+ information can be found{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">
+ here
+ </AnchorToTab>
+ .
+ </>
+ ),
+ },
+ {
+ name: "maxFiles",
+ type: <TypeHighlight np>number</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The max number of files to be accepted.</>,
+ },
+ {
+ name: "maxFileSize",
+ type: <TypeHighlight np>number</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The max file size allowed in bytes.</>,
+ },
+ {
+ name: "validator",
+ 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>
+ {"(f: File) => "}{" "}
+ <AnchorToTab href="/api/types#validatefileresponse">
+ ValidateFileResponse
+ </AnchorToTab>
+ </CodeHighlight>
+ </>
+ ),
+ },
+
+ {
+ name: "autoClean",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, the component will automatically remove non valid files when
+ user drops files or selects them from file dialog. This flag will only
+ work if validation is active.
+ </>
+ ),
+ },
+
+ /////////////// UPLOAD STAGE ///////////////
+ {
+ name: "uploadConfig",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/api/types#uploadconfig">UploadConfig</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The configuration needed for uploading the files. If not set or or
+ uploadConfig.url is undefined the upload button will not be visible and
+ uploadOnDrop prop flag will not work.
+ </>
+ ),
+ },
+ {
+ name: "fakeUpload",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, the component will simulate the upload operation by randomly
+ setting the upload status and message on each uploadable{" "}
+ <TypeHighlight>ExtFile</TypeHighlight>. It will also set a fake
+ progress. Will also ignore the uploadConfig prop and will show the
+ upload button
+ </>
+ ),
+ },
+ {
+ name: "onUploadStart",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when the upload process starts.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(uploadAbleFiles: ExtFile[]) => void"}</CodeHighlight>
+ <ul>
+ <li>uploadAbleFiles: The list of files to be uploaded.</li>
+ </ul>
+ </>
+ ),
+ },
+ {
+ name: "onUploadFinish",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Callback fired when the upload process ends.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(uploadedFiles: ExtFile[]) => void"}</CodeHighlight>
+ <ul>
+ <li>uploadAbleFiles: The list of uploaded files.</li>
+ </ul>
+ </>
+ ),
+ },
+ /////////////// STYLING ///////////
+
+ {
+ name: "color",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np>{'"#646c7f"'}</TypeHighlight>,
+ description: <>The main color for background, hover and borders.</>,
+ },
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object.</>,
+ },
+ {
+ name: "textColor",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np>{'"transparent'}</TypeHighlight>,
+ description: <>The color of the text.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles.
+ </>
+ ),
+ },
+
+ {
+ name: "label",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The text label for the button.</>,
+ },
+ {
+ 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: "disableRipple",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, will not show a ripple effect everytime the user clicks the
+ components for selecting files.
+ </>
+ ),
+ },
+
+ //ACTION BUTTONS
+ {
+ name: "actionButtons",
+ type: (
+ <TypeHighlight np>
+ <AnchorToTab href="/api/types#actionbuttons">ActionButtons</AnchorToTab>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If set, buttons will be added before or after of the component. This
+ buttons triggresthe common opertions of the component such as clean,
+ upload, abort and delete all.
+ </>
+ ),
+ },
+
+ {
+ name: "disabled",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>false</TypeHighlight>,
+ description: <>If true, the component is disabled.</>,
+ },
+ {
+ name: "behaviour",
+ type: (
+ <>
+ <TypeHighlight np>{'"add"'}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{'"replace"'}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np>{'"add"'}</TypeHighlight>,
+ description: <>The behaviour when new files are selected or dropped</>,
+ },
+ {
+ name: "children",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The content of the component.</>,
+ },
+];
diff --git a/src/data/FileMosaicAPIPropsRows.tsx b/src/data/FileMosaicAPIPropsRows.tsx
index 5d535ea1d859ec7f6c0039917f6013a9ed5cae99..5fd7513da530e5c9b1b5ed7cbc54d383ff70a831 100644
--- a/src/data/FileMosaicAPIPropsRows.tsx
+++ b/src/data/FileMosaicAPIPropsRows.tsx
@@ -14,34 +14,70 @@ 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,
- name: "errors",
- type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
- default: <TypeHighlight np>undefined</TypeHighlight>,
- description: (
+ id: 5,
+ name: "id",
+ type: (
<>
- The list of errors according to the validation criteria or the result of
- the given custom validation function.
+ {" "}
+ <TypeHighlight np>{"string"}</TypeHighlight> {" | "}
+ <TypeHighlight np>{"number"}</TypeHighlight>
</>
),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The identifier of the file</>,
},
{
id: 3,
name: "file",
type: <TypeHighlight np>{"File"}</TypeHighlight>,
- default: <TypeHighlight np>undefined</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: <>The file object obtained from client drop or selection</>,
},
{
@@ -65,7 +101,7 @@ export const FileMosaicAPIPropsRows = [
{
name: "valid",
type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight np>undefined</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
If present, it will show a valid or rejected message ("valid",
@@ -73,25 +109,17 @@ 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: (
+ id: 2,
+ name: "errors",
+ type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
<>
- {" "}
- <TypeHighlight np>{"string"}</TypeHighlight> {" | "}
- <TypeHighlight np>{"number"}</TypeHighlight>
+ The list of errors according to the validation criteria or the result of
+ the given custom validation function.
</>
),
- default: <TypeHighlight np>undefined</TypeHighlight>,
- description: <>The identifier of the file</>,
},
{
id: 6,
@@ -104,13 +132,13 @@ export const FileMosaicAPIPropsRows = [
id: 7,
name: "imageUrl",
type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np>undefined</TypeHighlight>,
+ default: <TypeHighlight np></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, 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,7 +178,7 @@ 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",
@@ -170,7 +198,7 @@ export const FileMosaicAPIPropsRows = [
description: (
<>
A reference to the XHR object that allows the upload, progress and abort
- events
+ events.
</>
),
},
@@ -180,8 +208,8 @@ export const FileMosaicAPIPropsRows = [
default: <TypeHighlight np></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 +225,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 +242,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 +259,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 +276,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 +294,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 +313,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 +327,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 +341,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 +349,62 @@ export const FileMosaicAPIPropsRows = [
</>
),
},
+ {
+ name: "resultOnTooltip",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></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></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>
+ </>
+ ),
+ },
];
diff --git a/src/data/FooterConfigAPIRows.tsx b/src/data/FooterConfigAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb75138072fa02182b1d982ef273d05d7fa3982d
--- /dev/null
+++ b/src/data/FooterConfigAPIRows.tsx
@@ -0,0 +1,94 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const FooterConfigAPIRows = [
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object applied to the main container.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles. Classname is applied to the main container.
+ </>
+ ),
+ },
+ {
+ name: "resetStyles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, the given class name and style properties will replace the
+ default ones instead of overriding them.
+ </>
+ ),
+ },
+
+ {
+ name: "allowedTypesLabel",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If false, the label that indicates the allowed files types will not be
+ shown.
+ </>
+ ),
+ },
+ {
+ name: "uploadProgressMessage",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If false, the label that indicates the current upload progress will not
+ be shown.
+ </>
+ ),
+ },
+ {
+ name: "uploadResultMessage",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If false, the label that indicates the final result of the upload
+ progress will not be shown.
+ </>
+ ),
+ },
+ {
+ name: "noMissingFilesLabel",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If false, the label that indicates that there are not files missing to
+ upload will not be shown.
+ </>
+ ),
+ },
+ {
+ name: "customMessage",
+ type: <TypeHighlight np>JSX.Element</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>A custom message to display in the footer.</>,
+ },
+ {
+ name: "customFooter",
+ type: <TypeHighlight np>JSX.Element</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ A custom header to replace the default one. If given, the rest of the
+ props are ignored
+ </>
+ ),
+ },
+];
diff --git a/src/data/HeaderConfigAPIRows.tsx b/src/data/HeaderConfigAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..73549142752f1f50f3c001bf84f563d022131839
--- /dev/null
+++ b/src/data/HeaderConfigAPIRows.tsx
@@ -0,0 +1,93 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const HeaderConfigAPIRows = [
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object applied to the main container.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles. Classname is applied to the main container.
+ </>
+ ),
+ },
+ {
+ name: "resetStyles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, the given class name and style properties will replace the
+ default ones instead of overriding them.
+ </>
+ ),
+ },
+ {
+ name: "deleteFiles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: <>If true, the delete icon will be shown.</>,
+ },
+ {
+ name: "cleanFiles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: <>If true, the clean icon will be shown.</>,
+ },
+ {
+ name: "uploadFiles",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: <>If true, the upload icon will be shown.</>,
+ },
+ {
+ name: "uploadingIcon",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If true, the upload in progress icon will be shown during the upload
+ process.
+ </>
+ ),
+ },
+ {
+ name: "maxFileSize",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If true, the upload in progress icon will be shown during the upload
+ process.
+ </>
+ ),
+ },
+ {
+ name: "validFilesCount",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>true</TypeHighlight>,
+ description: (
+ <>
+ If true, the current count of alid files will be shown.
+ </>
+ ),
+ },
+ {
+ name: "customHeader",
+ type: <TypeHighlight np>JSX.Element</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ A custom header to replace the default one. If given, the rest of the
+ props are ignored
+ </>
+ ),
+ },
+];
diff --git a/src/data/ServerResponseAPIRows.tsx b/src/data/ServerResponseAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2ab4cbeec27e804eebb2850810173b8c5c3607f9
--- /dev/null
+++ b/src/data/ServerResponseAPIRows.tsx
@@ -0,0 +1,22 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const ServerResponseAPIRows = [
+ {
+ name: "success",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If true, it means that the request was successful.</>,
+ },
+ {
+ name: "message",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>A message that describes the result of the request.</>,
+ },
+ {
+ name: "payload",
+ type: <TypeHighlight np>Object</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The response of the server.</>,
+ },
+];
diff --git a/src/data/UploadConfigAPIRows.tsx b/src/data/UploadConfigAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..96605b68ba34e19aa42a28261048de171053e38e
--- /dev/null
+++ b/src/data/UploadConfigAPIRows.tsx
@@ -0,0 +1,84 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const UploadConfigAPIRows = [
+ {
+ name: "url",
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The url endpoint to upload the file. e.g.
+ "https://www.myasomwbackend/uploads/file".
+ </>
+ ),
+ },
+ {
+ name: "method",
+ type: (
+ <>
+ <TypeHighlight np>{'"POST"'}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{'"PUT"'}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{'"PATCH"'}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np>{'"POST"'}</TypeHighlight>,
+ description: <>Request headers for http request.</>,
+ },
+ {
+ name: "uploadLabel",
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np>{'"file"'}</TypeHighlight>,
+ description: (
+ <>
+ The label to use in the request. On the server this must be the label to
+ get the file.
+ </>
+ ),
+ },
+ {
+ name: "cleanOnUpload",
+ type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Flag for indicating whther to remove the non-valid files before starting
+ the upload process. This flag is valid only if validation is enable.
+ </>
+ ),
+ },
+ {
+ name: "autoUpload",
+ type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ If true, onDrop event or file selection not only will make Dropzone to
+ return the list of files, but also it will start the upload stage for
+ the files if at least url was set By default is false
+ </>
+ ),
+ },
+ {
+ name: "preparingTime",
+ type: <TypeHighlight np>{"number"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The time that will last the "preparing" stage By default is 1500
+ miliseconds = 1.5 seconds.
+ </>
+ ),
+ },
+ {
+ name: "uploadingMessage",
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ A message to show in the footer when the uploading process takes place.
+ </>
+ ),
+ },
+];
diff --git a/src/data/UploadStatusAPIRows.tsx b/src/data/UploadStatusAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..be9d103aabf146f10c01be9845431199b08164fb
--- /dev/null
+++ b/src/data/UploadStatusAPIRows.tsx
@@ -0,0 +1,3 @@
+export const UPLOADSTATUSAPIRows=[
+
+]
\ No newline at end of file
diff --git a/src/data/ValidateFileResponseAPIrows.tsx b/src/data/ValidateFileResponseAPIrows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..33407bcccb12123d7453f1c299f7b80d6c656072
--- /dev/null
+++ b/src/data/ValidateFileResponseAPIrows.tsx
@@ -0,0 +1,18 @@
+import CodeHighlight from "../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const ValidateFileResponseAPIrows = [
+ {
+ name: "valid",
+ type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If true, that means that the File is valid</>,
+ },
+ {
+ id: 2,
+ name: "errors",
+ type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The list of errors associated with an specific file.</>,
+ },
+];
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index 1bd4de47a27249f8a300e0561efee05829aa5d0c..3367810aa2a9d2414c59bca32c278039a2f71f3d 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -15,6 +15,7 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
accept,
onChange,
+
emptyLabel,
changeLabel,
@@ -36,11 +37,11 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
const avatarId = React.useId();
const finalClassNameBorder: string | undefined = useAvatarStyle(
- avatarId.replaceAll(":",""),
+ avatarId.replaceAll(":", ""),
borderRadius
);
- console.log("finalClassNameBorder",finalClassNameBorder);
+ console.log("finalClassNameBorder", finalClassNameBorder);
const handleClick = () => {
// alert("Agregar fotooooooo");
@@ -71,11 +72,9 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
return (
<React.Fragment>
<div
- className={
- `fui-avatar-main-container${
- variant === "circle" ? " circle" : ""
- }` + " "+finalClassNameBorder
- }
+ className={`fui-avatar-main-container${
+ variant === "circle" ? " circle" : ""
+ } ${finalClassNameBorder}`}
style={style}
{...rest}
>
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
index 05695069e416674a59de424e10806b07402cd8c0..2736887b01f60d036a7608315f1efe0c2c594287 100644
--- a/src/files-ui/components/avatar/AvatarProps.ts
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -3,27 +3,47 @@ export interface AvatarFullProps extends OverridableComponentProps {
accept?: string;
variant?: "square" | "circle";
borderRadius?: string;
+ /**
+ * Just like any other input component. The value of the input element,
+ required for a controlled component.
+ */
src?: string | File;
+ /**
+ * Callback fired when an image file is selected.
+ * @param selectedFile The new file selected
+ */
onChange?: (selectedFile: File) => void,
/**
* Alternative label when an error occurs
* on loading the image
*/
alt?: string,
-
+ /**
+ * Label to be displayed when image source is not set.
+ */
emptyLabel?: React.ReactNode;
+ /**
+ * Label to be displayed when "isLoading" prop is set set. This will cover
+ the current image.
+ */
loadingLabel?: React.ReactNode;
+ /**
+ * Label to be displayed when there is a valid source set.
+ */
changeLabel?: React.ReactNode;
/**
- * if a src is given, then avatar will show the image
- * or a file error message and will not allow
+ * If true and if a src is given, then avatar will show the image and will not allow
* the user to change the picture. Also, layer on hover will not be shown
*/
readOnly?: boolean;
-
+ /**
+ * If true, loadingLabel will be shown.
+ */
isLoading?: boolean;
-
- onError?: React.ReactEventHandler<HTMLImageElement>;
+ /**
+ * Callback fired when an error occured on loading the image.
+ */
+ onError?: Function;
/**
* If not present, image width will be set to 100%.
@@ -38,7 +58,7 @@ export interface AvatarFullProps extends OverridableComponentProps {
* - 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%.
- * @default orientation
+ * @default center
*/
smartImgFit?: false | "orientation" | "center";
}
diff --git a/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx
index f9fbe0f7891443ca751f9f5ae897acb6290a340a..4612283596fb7c251e19b46cd61778bed288fbe7 100644
--- a/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx
@@ -1,8 +1,8 @@
import * as React from "react";
-interface DropzoneActionButtonsProps {}
-const DropzoneActionButtons: React.FC<DropzoneActionButtonsProps> = (
- props: DropzoneActionButtonsProps
+interface ActionButtonsProps {}
+const ActionButtons: React.FC<ActionButtonsProps> = (
+ props: ActionButtonsProps
) => {
- return <div>DropzoneActionButtons</div>;
+ return <div>ActionButtons</div>;
};
-export default DropzoneActionButtons;
+export default ActionButtons;
diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
index 9215d1d78cc4d809e1eec02b08138a313a4e8915..fffb951611ac5255e250a09bbf039aa8039e0491 100644
--- a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
@@ -1,10 +1,7 @@
import * as React from "react";
import { addClassName, Localization } from "../../../../core";
import { MaterialButton } from "../../../material-button";
-import {
- DropzoneActionButton,
- DropzoneActions,
-} from "../dropzone/DropzoneProps";
+import { ActionButtonItem, DropzoneActions } from "../dropzone/DropzoneProps";
import "./DropzoneButtons.scss";
interface DropzoneButtonsProps extends DropzoneActions {
@@ -36,24 +33,40 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
disabled,
} = props;
- const actionButtonsList: DropzoneActionButton[] = [
+ const actionButtonsList: ActionButtonItem[] = [
cleanButton
- ? { ...cleanButton, label: "Clean", onClick: onClean }
+ ? {
+ ...cleanButton,
+ label: "Clean",
+ onClick: cleanButton.onClick || onClean,
+ }
: undefined,
deleteButton
- ? { ...deleteButton, label: "Delete", onClick: onDelete }
+ ? {
+ ...deleteButton,
+ label: "Delete",
+ onClick: deleteButton.onClick || onDelete,
+ }
: undefined,
uploadButton
- ? { ...uploadButton, label: "Upload", onClick: onUpload }
+ ? {
+ ...uploadButton,
+ label: "Upload",
+ onClick: uploadButton.onClick || onUpload,
+ }
: undefined,
abortButton
- ? { ...abortButton, label: "Abort", onClick: onAbort }
+ ? {
+ ...abortButton,
+ label: "Abort",
+ onClick: abortButton.onClick || onAbort,
+ }
: undefined,
].filter(
- (ab: DropzoneActionButton | undefined) => ab !== undefined
- ) as DropzoneActionButton[];
+ (ab: ActionButtonItem | undefined) => ab !== undefined
+ ) as ActionButtonItem[];
- const tailClassName:string = `${top ? " top" : " bottom"}`;
+ const tailClassName: string = `${top ? " top" : " bottom"}`;
const finalClassName = addClassName(
"files-ui-buttons-container" + tailClassName,
containerClassName
@@ -62,7 +75,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
return (
<div className={finalClassName} style={containerStyle}>
{actionButtonsList.map(
- (actionButtonProps: DropzoneActionButton, index: number) => {
+ (actionButtonProps: ActionButtonItem, index: number) => {
const { children, label, resetStyles, className, style, onClick } =
actionButtonProps;
return (
@@ -71,7 +84,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
className={className}
style={style}
resetStyles={resetStyles}
- onClick={() => onClick?.()}
+ onClick={(evt) => onClick?.(evt)}
disabled={disabled}
>
{children || label}
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 7390524bf5f1a97b061cf1b3057bdd8ed8cc9cbd..7ceae5afffd8eb8f12cfc63eae6a4cc897d0fd01 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -32,10 +32,11 @@ import {
import { mergeProps } from "../../../overridable";
import InputHidden from "../../../input-hidden/InputHidden";
import {
+ ActionButtons,
defaultDrozoneProps,
// DEFAULT_BORDER_RADIUS,
- //DropzoneActionButton,
- DropzoneActions,
+ //ActionButton,
+ //DropzoneActions,
DropzoneProps,
FooterConfig,
HeaderConfig,
@@ -76,10 +77,10 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
onUploadFinish,
//styling
background,
- minHeight,
color,
+ minHeight,
style,
- textColor,
+ //textColor,
className,
//label
label,
@@ -129,7 +130,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
cleanButton,
style: containerStyle,
className: containerClassName,
- } = actionButtons as DropzoneActions;
+ } = actionButtons as ActionButtons;
const styleBorderRadius: string | number | undefined = style?.borderRadius;
@@ -689,7 +690,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
return (
<React.Fragment>
- {actionButtonsPosition === "top" && (
+ {actionButtonsPosition === "before" && (
<DropzoneButtons
disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
@@ -827,7 +828,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
/>
</div>
- {actionButtonsPosition === "bottom" && (
+ {actionButtonsPosition === "after" && (
<DropzoneButtons
disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index 2bdd281a0585a1525543555c0b7cd5c28c5dde1a..352a2b266cb9f471266fc4e1dfa21969361a4550 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -1,4 +1,4 @@
-import { ExtFile, CustomValidateFileResponse, Localization, UploadConfig } from "../../../../core";
+import { ExtFile, ValidateFileResponse, Localization, UploadConfig } from "../../../../core";
import * as React from "react";
import { OverridableComponentProps } from "../../../overridable";
@@ -32,47 +32,46 @@ export interface DropzoneFullProps extends OverridableComponentProps {
value?: ExtFile[];
/////////////// VALIDATION STAGE ///////////////
- /**
- * The max file size allowed in bytes
- */
- maxFileSize?: number;
- /**
- * The max number of files to be accepted.
- */
- maxFiles?: number;
/**
* The default implementation of accept
* checks the file's mime type or extension
- * against this list. This is a comma
- * separated list of mime types or file extensions.
+ * against this list. This is a comma-separated
+ * list of one or more file types, or unique file type specifiers,
+ * describing which file types to allow.
* E.g.:
* ```js
* acccept="image/*, application/pdf, .psd"
* ```
*/
accept?: string;
+ /**
+ * The max number of files to be accepted.
+ */
+ maxFiles?: number;
+ /**
+ * The max file size allowed in bytes.
+ */
+ maxFileSize?: number;
/**
* The custom validator to validate files that are selected or dropped in dropzone compoent.
* Must be a function that recieves as first parameter a File Object
* and must return a boolean value
* ```jsx
- * export type CustomValidateFileResponse = {
+ * export type ValidateFileResponse = {
* valid: boolean;
* errors?: string[] | undefined;
* }
* ```
*/
- validator?: (f: File) => CustomValidateFileResponse;
+ validator?: (f: File) => ValidateFileResponse;
/**
* When given, "clean" button will be visible if validation is active.
* This event is triggered when "clean button is clicked"
- * Returns as first parameter the list of files without not valid files
*/
onClean?: Function;
/**
- * Flag that indicates that dropzone will automatically remove non valid files.
- * This will happen every time user drops files or selects files from file dialog.
- * This flag will only work if validation is active.
+ * If true, the component will automatically remove non valid files when user
+ * drops files or selects them from file dialog. This flag will only work if validation is active.
*/
autoClean?: boolean;
/**
@@ -88,42 +87,37 @@ export interface DropzoneFullProps extends OverridableComponentProps {
* The configuration needed for uploading the files.
* When "uploadConfig" is not given or uploadConfig.url is undefined
* the upload button will not be visible
- * and uploadOnDrop flag will not work
+ * and uploadOnDrop prop flag will not work.
*/
uploadConfig?: UploadConfig;
/**
- * Flag that indicates Dropzone to perform a fake upload process.
- * If given or true, will ignore `uploadConfig` prop, will show
+ * If set, the component will simulate the upload operation by randomly
+ setting the upload status and message on each uploadable{" "}
+ <TypeHighlight>ExtFile</TypeHighlight>. It will also set a fake
+ progress. Also the `uploadConfig` prop will be ignored and will show
* the upload button
- * Will respond with random upload status on every uploadable file
*/
fakeUpload?: boolean;
/**
- * This event is triggered when upload process starts
- * also returns the list of files that will be uploaded,
- * Unlike Onchange, onUploadStart will only return a list of files thta are candidates to be uploaded,
- * in case they are valid or upload status is "error"
+ * Callback fired when the upload process starts.
*/
- onUploadStart?: (extFiles: ExtFile[]) => void;
+ onUploadStart?: (uploadAbleFiles: ExtFile[]) => void;
/**
- * This event returns as first aparameter the list of responses for each file following the structure:
- * responses = [
- * {id: <the file id>, serverResponse: the server response}
- * ]
+ * Callback fired when the upload process ends.
*/
- onUploadFinish?: (extFiles: ExtFile[]) => void;
+ onUploadFinish?: (uploadedFiles: ExtFile[]) => void;
/////////////// STYLING ///////////
//borderRadius?: string | number;
/**
- * The background color for dropzone container,
+ * The background color for dropzone container.
* @default 'transparent'
*/
background?: string;
/**
- * The min height of the container in string format
- * If the value is given un number format "px" will be assumed
+ * The min height of the component.
+ * If the value is given in number format, "px" will be assumed
* @default "180px"
*
* examples:
@@ -166,11 +160,9 @@ export interface DropzoneFullProps extends OverridableComponentProps {
onDragLeave?: (evt: React.DragEvent<HTMLDivElement>) => void;
//ACTION BUTTONS
- /**
- * The configuration needed for uploading the files.
- * When "uploadConfig" is not given or uploadConfig.url is undefined
- * the upload button will not be visible
- * and uploadOnDrop flag will not work
+ /** If set, buttons will be added before or after of the component.
+ This buttons triggresthe common opertions of the component such as
+ clean, upload, abort and delete all.
*/
actionButtons?: DropzoneActions;
@@ -183,21 +175,21 @@ export interface DropzoneFullProps extends OverridableComponentProps {
// HEADER AND FOOTER
/**
- * If false, hides the dropzone footer
+ * If false, hides the dropzone footer.
* @default true
*/
footer?: boolean;
/**
- * If false, hides the dropzone header
+ * If false, hides the dropzone header.
* @default true
*/
header?: boolean;
/**
- * Configuration related to the dropzone header
+ * Configuration related to the dropzone header.
*/
headerConfig?: HeaderConfig;
/**
- * Configuration related to the dropzone footer
+ * Configuration related to the dropzone footer.
*/
footerConfig?: FooterConfig;
@@ -209,8 +201,7 @@ export interface DropzoneFullProps extends OverridableComponentProps {
disabled?: boolean;
//CLICKABLE
/**
- * If true, the dropzone component itself will be clickable
- * If false, the file dialog will not be opened
+ * If false, the component will not be clickable. So, file dialog will not be opened.
* @default true
*/
clickable?: boolean;
@@ -256,29 +247,36 @@ export type FooterConfig = {
noMissingFilesLabel?: boolean;
customMessage?: JSX.Element;
-
+
customFooter?: JSX.Element;
+
+ style?: React.CSSProperties;
+ className?: string;
+ resetStyles?: boolean;
}
-export type DropzoneActionButton = {
+export type ActionButtonItem = {
children?: JSX.Element;
label?: string;
style?: React.CSSProperties;
className?: string;
resetStyles?: boolean;
onClick?: Function;
- disabled?:boolean;
+ disabled?: boolean;
}
export interface DropzoneActions {
- position?: "top" | "bottom";
+ position?: "before" | "after";
style?: React.CSSProperties;
className?: string;
- uploadButton?: DropzoneActionButton;
- abortButton?: DropzoneActionButton;
- deleteButton?: DropzoneActionButton;
- cleanButton?: DropzoneActionButton;
+ uploadButton?: ActionButtonItem;
+ abortButton?: ActionButtonItem;
+ deleteButton?: ActionButtonItem;
+ cleanButton?: ActionButtonItem;
+}
+export type ActionButtons = {
+ [P in keyof DropzoneActions]: DropzoneActions[P]
}
diff --git a/src/files-ui/components/dropzone/makeListOfActionButtons.ts b/src/files-ui/components/dropzone/makeListOfActionButtons.ts
index bb53906aab9eee7abdb2efd3a8318c101abe2d0a..b26efc228d6ae5acb97ad47dca48de615a7ce03f 100644
--- a/src/files-ui/components/dropzone/makeListOfActionButtons.ts
+++ b/src/files-ui/components/dropzone/makeListOfActionButtons.ts
@@ -1,4 +1,4 @@
-import { DropzoneActionButton } from "./components/dropzone/DropzoneProps";
+import { ActionButtonItem } from "./components/dropzone/DropzoneProps";
/**
*
@@ -8,14 +8,14 @@ import { DropzoneActionButton } from "./components/dropzone/DropzoneProps";
* @param other array of other custom action buttons props
* @returns
*/
-export const makeListOfActionButtons = (
- uploadButton: DropzoneActionButton | undefined,
- abortButton: DropzoneActionButton | undefined,
- deleteButton: DropzoneActionButton | undefined,
- cleanButton: DropzoneActionButton | undefined
-): [DropzoneActionButton[], DropzoneActionButton[]] => {
- let listOfTopButtons: DropzoneActionButton[] = [];
- let listOfBottomButtons: DropzoneActionButton[] = [];
+export const makeListOfActionButtonItems = (
+ uploadButton: ActionButtonItem | undefined,
+ abortButton: ActionButtonItem | undefined,
+ deleteButton: ActionButtonItem | undefined,
+ cleanButton: ActionButtonItem | undefined
+): [ActionButtonItem[], ActionButtonItem[]] => {
+ let listOfTopButtons: ActionButtonItem[] = [];
+ let listOfBottomButtons: ActionButtonItem[] = [];
/* if (uploadButton) {
uploadButton.position === "top"
? listOfTopButtons.push(uploadButton)
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index cfcd697ddade5e6d926635ee3d9d9b88df2f50d9..41ab7e89715e1bdcb9bb02cec2196bd1481159fd 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -41,8 +41,8 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
) => {
const {
//basic
- onChange,
value = [],
+ onChange,
//validation
accept,
maxFileSize,
@@ -486,9 +486,9 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
return (
<React.Fragment>
- {actionButtonsPosition === "top" && (
+ {actionButtonsPosition === "before" && (
<DropzoneButtons
- disabled={disabled}
+ disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
onAbort={handleAbortUpload}
deleteButton={deleteButton}
@@ -527,9 +527,9 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
onChange={handleChangeInput}
/>
- {actionButtonsPosition === "bottom" && (
+ {actionButtonsPosition === "after" && (
<DropzoneButtons
- disabled={disabled}
+ disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
onAbort={handleAbortUpload}
deleteButton={deleteButton}
diff --git a/src/files-ui/components/file-input-button/InputButtonProps.ts b/src/files-ui/components/file-input-button/InputButtonProps.ts
index 4e05985ecf9915ae46d85fbcdbb5d5047108da2d..8011f4d002369e509a1ee4d54b98cceae9958d58 100644
--- a/src/files-ui/components/file-input-button/InputButtonProps.ts
+++ b/src/files-ui/components/file-input-button/InputButtonProps.ts
@@ -1,7 +1,6 @@
-import { CustomValidateFileResponse, ExtFile, Localization, UploadConfig, UploadResponse } from "../../core";
+import { ValidateFileResponse, ExtFile, Localization, UploadConfig } from "../../core";
import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
import { MaterialButtonProps } from "../material-button/MaterialButtonProps";
-//import { OverridableComponentProps } from "../overridable";
interface InputButtonFullProps {
/**
@@ -37,9 +36,9 @@ interface InputButtonFullProps {
*/
localization?: Localization;
/**
- * If true, will show a ripple everytime
- * the user drops files or selects files
- */
+ * If true, will not show a ripple effect everytime the user
+ * clicks the components for selecting files.
+ */
disableRipple?: boolean;
/////////////// VALIDATION STAGE ///////////////
@@ -67,13 +66,13 @@ interface InputButtonFullProps {
* Must be a function that recieves as first parameter a File Object
* and must return a boolean value
* ```jsx
- * export type CustomValidateFileResponse = {
+ * export type ValidateFileResponse = {
* valid: boolean;
* errors?: string[] | undefined;
* }
* ```
*/
- validator?: (f: File) => CustomValidateFileResponse;
+ validator?: (f: File) => ValidateFileResponse;
/**
* Flag that indicates that dropzone will automatically remove non valid files.
@@ -112,20 +111,18 @@ interface InputButtonFullProps {
*/
onUploadFinish?: (extFiles: ExtFile[]) => void;
- //ACTION BUTTONS
- /**
- * The configuration needed for uploading the files.
- * When "uploadConfig" is not given or uploadConfig.url is undefined
- * the upload button will not be visible
- * and uploadOnDrop flag will not work
- */
- actionButtons?: DropzoneActions;
- // ADD OR REPLACE
- /**
- * The behaviour when new files are selected or dropped
- * @default 'add'
- */
- behaviour?: 'add' | 'replace';
+ //ACTION BUTTONS
+ /** If set, buttons will be added before or after of the component.
+ This buttons triggresthe common opertions of the component such as
+ clean, upload, abort and delete all.
+ */
+ actionButtons?: DropzoneActions;
+ // ADD OR REPLACE
+ /**
+ * The behaviour when new files are selected or dropped
+ * @default 'add'
+ */
+ behaviour?: 'add' | 'replace';
}
type MaterialButtonPropsOmitInputButtonFullProps = Omit<MaterialButtonProps, keyof InputButtonFullProps>;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
index 1f091d41f5b775c1663210575a70aebfe092cc7a..2d78610d3f72a1e18ee3428aec6fcab9db5f2fd5 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
@@ -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
*/
diff --git a/src/files-ui/components/material-button/MaterialButton.tsx b/src/files-ui/components/material-button/MaterialButton.tsx
index be11fe2c9f7adf0d13ee515a00c1c5631effa613..222912c7f2203478989fb9ec5d21c4243aa3f05d 100644
--- a/src/files-ui/components/material-button/MaterialButton.tsx
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -4,22 +4,22 @@ import { MaterialButtonProps } from "./MaterialButtonProps";
import "./MaterialButton.scss";
import { createRippleButton } from "../../core";
-
const MaterialButton: React.FC<MaterialButtonProps> = (
props: MaterialButtonProps
) => {
const {
disabled,
href,
- textTransform:textDecoration,
+ textTransform: textDecoration,
variant = "contained",
color = "#1976d2",
- textColor ="white",
+ textColor = "white",
children,
className,
style,
onClick,
resetStyles,
+ disableRipple,
} = props;
const idClassName = React.useId();
@@ -32,7 +32,7 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
textColor,
textDecoration,
className,
- idClassName.replaceAll(":",""),
+ idClassName.replaceAll(":", ""),
resetStyles
);
@@ -40,15 +40,15 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
e: React.MouseEvent<T, MouseEvent>
): void {
e.preventDefault();
-
//ripple
- createRippleButton(e, variant as string, color as string);
+ if (!disableRipple)
+ createRippleButton(e, variant as string, color as string);
onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);
}
- if (materialButtonClassName!==undefined || resetStyles)
+ if (materialButtonClassName !== undefined || resetStyles)
return React.createElement(href ? "a" : "button", {
className: resetStyles && className ? className : materialButtonClassName,
"data-testid": href ? "dui-anchor" : "dui-button",
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
index 7ca40ede3895a505b6af4ee335cff486bdfa003a..72225f121de7b2eb8355b8f8a697843174c31c1b 100644
--- a/src/files-ui/components/material-button/MaterialButtonProps.ts
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -25,7 +25,7 @@ export interface MaterialButtonPropsInterface extends OverridableComponentProps
*/
variant?: "text" | "outlined" | "contained";
/**
- * The label to place when no files are selected
+ * The text label for the button
*/
label?: string;
/**
@@ -36,6 +36,14 @@ export interface MaterialButtonPropsInterface extends OverridableComponentProps
resetStyles?: boolean;
+
+ /**
+ * If true, will not show a ripple effect everytime
+ * the user drops files or clicks the dropzone for selecting files
+ * @default false
+ */
+ disableRipple?: boolean;
+
}
type DefButtonPropsMap = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
diff --git a/src/files-ui/components/overridable/OverridableComponentsProps.ts b/src/files-ui/components/overridable/OverridableComponentsProps.ts
index 78149fe6e47d5d75e28bc5d0c0e9f7f61aefdca0..b43c39e791d5fdc7b560454fd3c3337455724c7d 100644
--- a/src/files-ui/components/overridable/OverridableComponentsProps.ts
+++ b/src/files-ui/components/overridable/OverridableComponentsProps.ts
@@ -5,7 +5,7 @@
*/
export declare type OverridableComponentProps = {
/**
- * The react node children
+ * The content of the component.
*/
children?: React.ReactNode | string;
/**
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.tsx b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
index f30d5ff9f4960134f0fc4e9446ddd6efec2447db..64882e7106bba060c0788a830ee0f667cd3dc777 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreen.tsx
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
@@ -16,10 +16,10 @@ const FullScreen: React.FC<FullScreenProps> = (props: FullScreenProps) => {
const handleCloseEsc = (evt: KeyboardEvent) => {
if (evt.key === "Escape") onClose?.();
};
- console.log("adding listener");
+ //console.log("adding listener");
document.addEventListener("keydown", handleCloseEsc);
return () => {
- console.log("removing listener");
+ //console.log("removing listener");
document.removeEventListener("keydown", handleCloseEsc);
};
// eslint-disable-next-line
diff --git a/src/files-ui/components/previews/FullScreen/FullScreenProps.ts b/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
index 76712241f2713cc90bfaffd2e2a94d8e23136f61..502fb8f126be890621eeb67a1811aaf685281722 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
+++ b/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
@@ -7,12 +7,17 @@ export interface FullScreenPropsMap extends OverridableComponentProps {
*/
open?: boolean;
/**
- * handler for on Close operation
+ * Callback fired when the component requests to be closed.
*/
onClose?: Function;
}
+type DefDivProps = React.HTMLProps<HTMLDivElement>;
+type DivPropsOmitFullScreenPropsMap = Omit<DefDivProps, keyof FullScreenPropsMap>;
+
+
export type FullScreenProps =
+ DivPropsOmitFullScreenPropsMap &
{
[F in keyof FullScreenPropsMap]: FullScreenPropsMap[F]
}
\ No newline at end of file
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
index b5d1b16a43fbdd416b16701225845ea1f925862f..55b83f15c493c62c0ee5b56e806387cf2ad88bcd 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
@@ -14,13 +14,13 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
const {
src,
alt,
- className,
- style,
width,
height,
onError,
//smart,
smartImgFit,
+ style,
+ className,
} = mergeProps(props, ImagePreviewDefaultProps);
console.log("ImagePreview smartImgFit",smartImgFit);
const [[finalHeight, finalWidth], setfinalDimensions] = React.useState<
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
index 3cfe978e3d08e4e6e2a18713fe1a9b1c91b7899e..aa82a06c55d7c262a950a14cf60fc8bffba6a172 100644
--- a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
@@ -6,7 +6,8 @@ const VideoPreview: React.FC<VideoPreviewProps> = (
) => {
const {
src: videoSrc,
- /* autoPlay, controls, */ style,
+ /* autoPlay, controls, */
+ style,
className,
...others
} = props;
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts b/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
index 95d7159c5bde3da6d2c1528a1f55f795700e2afb..810fec3b12ec7f99d889a37a5797245852abadbb 100644
--- a/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
@@ -3,8 +3,7 @@ import { OverridableComponentProps } from "../../overridable";
export interface VideoPreviewPropsMap extends OverridableComponentProps {
/**
- * video source in string format or File object
- * FileItemComponent returns this value in onWatch handler
+ * The video source in string format or File object.
*/
src?: File | string;
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
index 32369769054827152abe0cb596200a6893c46d51..e01e5a3825ad26b5a33a257a3a3614eeaa2ce6e1 100644
--- a/src/files-ui/core/index.ts
+++ b/src/files-ui/core/index.ts
@@ -74,7 +74,7 @@ export {
export type {
ExtFile,
Behaviour,
- CustomValidateFileResponse,
+ ValidateFileResponse,
ComponentLocalizer,
ExtFileListMap,
FileValidatorProps,
@@ -92,7 +92,7 @@ export type {
export {
//UPLOADSTATUS,
- ExtFileInstance, ExtFileManager, extFileMock
+ ExtFileInstance, ExtFileManager, extFileMock, createUploadConfig
} from "./types"
export {
diff --git a/src/files-ui/core/types/ExtFile.ts b/src/files-ui/core/types/ExtFile.ts
index 73a4cf44b5a80a8be253e0ef345254004d4bbb86..5d54eb33ff8bad8d155c5a58f65b7deb4d6369a8 100644
--- a/src/files-ui/core/types/ExtFile.ts
+++ b/src/files-ui/core/types/ExtFile.ts
@@ -29,10 +29,6 @@ export declare type ExtFile = {
* The size of the file. Used mostly for displaying file data from server.
*/
size?: number;
- /**
- * Link, URI or string representation of an image
- */
- imageUrl?: string;
/**
* a flag that determines whether the file is valid, not valid or it is not validated.
*/
@@ -41,14 +37,18 @@ export declare type ExtFile = {
* The list of errors when the file was validated
*/
errors?: string[];
+ /**
+ * The current upload status. (e.g. "uploading")
+ */
+ uploadStatus?: UPLOADSTATUS | undefined;
/**
* A message that shows the result of the upload process
*/
uploadMessage?: string;
/**
- * The current upload status. (e.g. "uploading")
+ * Link, URI or string representation of an image
*/
- uploadStatus?: UPLOADSTATUS | undefined;
+ imageUrl?: string;
/**
* The XMLHttpRequest object for performing uploads to a server
*/
@@ -61,12 +61,11 @@ export declare type ExtFile = {
progress?: number;
/**
* The additional data that will be sent to the server
- * when filesare uploaded individually
+ * when files are uploaded individually
*/
extraUploadData?: Record<string, any>;
/**
- * Any kind of extra data that could be needed
- *
+ * Any kind of extra data that could be needed.
*/
extraData?: Object;
/**
@@ -74,9 +73,8 @@ export declare type ExtFile = {
*/
serverResponse?: ServerResponse;
/**
- * Url 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
+ * The url to be used to perform a GET request in order to download the
+ file. If defined, the download icon will be shown.
*/
downloadUrl?: string;
}
diff --git a/src/files-ui/core/types/UploadConfig.ts b/src/files-ui/core/types/UploadConfig.ts
index 52953c2b2cc643c1095064ea013ec0aa04eab8fc..e832d0043e18fb9ac20bf81ddde6957d3c0ab6ab 100644
--- a/src/files-ui/core/types/UploadConfig.ts
+++ b/src/files-ui/core/types/UploadConfig.ts
@@ -2,7 +2,7 @@ import { Method } from "./method"
export type UploadConfig = {
/**
- * The url endpoint to upload the file
+ * The url endpoint to upload the file.
* e.g. https://www.myasomwbackend/uploads/file
*/
url?: string;
@@ -12,7 +12,7 @@ export type UploadConfig = {
*/
method?: Method;
/**
- * request headers for http request
+ * Request headers for http request.
* e.g.
* ```jsx
* headers = {
@@ -24,7 +24,7 @@ export type UploadConfig = {
headers?: Record<string, string>;
/**
* the label to use in request
- * On server this must be the label to get the file
+ * On server this must be the label to get the file.
* @default "file"
*/
uploadLabel?: string;
@@ -34,24 +34,24 @@ export type UploadConfig = {
* This flag is valid only if validation is enable
*/
cleanOnUpload?: boolean;
+ /**
+ * If true, onDrop event or file selection not only will make Dropzone to return the list of files, but also
+ * it will start the upload stage for the files if at least url was set
+ * By default is false
+ */
+ autoUpload?: boolean;
/**
* The time that will last the "preparing" stage
* By default is 1500 miliseconds = 1.5 seconds
*/
preparingTime?: number;
/**
- * A message to show in the footer when the uploading process happens
+ * A message to show in the footer when the uploading process takes place.
*/
uploadingMessage?: string;
- /**
- * If true, onDrop event or file selection not only will make Dropzone to return the list of files, but also
- * it will start the upload stage for the files if at least url was set
- * By default is false
- */
- autoUpload?: boolean;
}
-export const createDuiUploadConfig = (
+export const createUploadConfig = (
url?: string,
method?: Method,
headers?: Record<string, string>,
diff --git a/src/files-ui/core/types/index.ts b/src/files-ui/core/types/index.ts
index 7d33e781ebaef4aba95210936e127aec55e5d0c2..ede58789ad8bff145c0a905e19ae1cb28f0d1a7e 100644
--- a/src/files-ui/core/types/index.ts
+++ b/src/files-ui/core/types/index.ts
@@ -18,6 +18,7 @@ export type { UPLOADSTATUS } from "./UploadStatus";
export type { ServerResponse, UploadPromiseResponse, UploadResponse } from "./uploadTypes";
-export type { CustomValidateFileResponse, FileValidatorProps } from "./validation";
+export type { ValidateFileResponse, FileValidatorProps } from "./validation";
-export type { UploadConfig } from "./UploadConfig";
\ No newline at end of file
+export type { UploadConfig } from "./UploadConfig";
+export { createUploadConfig } from "./UploadConfig";
\ No newline at end of file
diff --git a/src/files-ui/core/types/uploadTypes.ts b/src/files-ui/core/types/uploadTypes.ts
index 4c5f4b2482d015e187d630e9c62dc572ebcadf49..f2f145ca59f860f0c186b6c1644a0db10e0e9073 100644
--- a/src/files-ui/core/types/uploadTypes.ts
+++ b/src/files-ui/core/types/uploadTypes.ts
@@ -16,9 +16,19 @@ export declare type UploadResponse = {
serverResponse: ServerResponse | {};
uploadedFile: ExtFile;
}
+
export type ServerResponse = {
+ /**
+ * If true, it means that the request was successful.
+ */
success: boolean;
+ /**
+ * A message that describes the result of the request.
+ */
message?: string;
+ /**
+ * The response of the server.
+ */
payload?: any;
}
diff --git a/src/files-ui/core/types/validation.ts b/src/files-ui/core/types/validation.ts
index aff255726cc1cdbe7c43a81e2be3e2cd8fabc86a..453a5cc4919623134eaa53dfefa0e39194ed85ab 100644
--- a/src/files-ui/core/types/validation.ts
+++ b/src/files-ui/core/types/validation.ts
@@ -10,7 +10,7 @@ export declare type FileValidatorProps = {
accept?: string;
}
-export declare type CustomValidateFileResponse = {
+export declare type ValidateFileResponse = {
/**
* if true, that means the file is valid
*/
diff --git a/src/files-ui/core/validation/fileValidator.ts b/src/files-ui/core/validation/fileValidator.ts
index 1fe580c4f5b03cc474786d51a5b7e67fb9021002..23188d47f9ee06cde82b97de9f2ebded0a18b4f0 100644
--- a/src/files-ui/core/validation/fileValidator.ts
+++ b/src/files-ui/core/validation/fileValidator.ts
@@ -1,6 +1,6 @@
import { ValidateErrorLocalizerSelector } from "../localization";
import { ExtFile, FunctionLabel, Localization, LocalLabels } from "../types";
-import { CustomValidateFileResponse, FileValidatorProps } from "../types/validation";
+import { ValidateFileResponse, FileValidatorProps } from "../types/validation";
import { FileIdGenerator } from "../utils/IdGenerator";
import { separateAccept } from "./separateAccept";
import { validateAccept } from "./validateAccept";
@@ -19,7 +19,7 @@ export const fileListvalidator = (
preValidatedFiles: FileList,
remainingValids: number,
localValidator: FileValidatorProps,
- validator: ((f: File) => CustomValidateFileResponse) | undefined,
+ validator: ((f: File) => ValidateFileResponse) | undefined,
maxFiles?: number,
localization?: Localization
): ExtFile[] => {
@@ -68,7 +68,7 @@ export const validateExtFileList = (
extFileList: ExtFile[],
remainingValids: number,
localValidatorProps: FileValidatorProps,
- validator: ((f: File) => CustomValidateFileResponse) | undefined,
+ validator: ((f: File) => ValidateFileResponse) | undefined,
maxFiles: number | undefined,
localization?: Localization
): ExtFile[] => {
@@ -113,7 +113,7 @@ export const validateExtFileList = (
*/
export const validateExtFile = (
extFile: ExtFile,
- validator: undefined | ((f: File) => CustomValidateFileResponse),
+ validator: undefined | ((f: File) => ValidateFileResponse),
validatorProps: FileValidatorProps,
localErrors: LocalLabels
): ExtFile => {
@@ -126,7 +126,7 @@ export const validateExtFile = (
//TO-DO: add "overrideValidation" prop to ignore the rest of validators like accept and maxFileSize
if (validator) {
- const resultCustomValidation: CustomValidateFileResponse = validator(extFileResult.file as File);
+ const resultCustomValidation: ValidateFileResponse = validator(extFileResult.file as File);
const { errors: errorsResult } = resultCustomValidation;
if (errorsResult)
errors.push(...errorsResult)
@@ -168,7 +168,7 @@ export const validateExtFile = (
*/
export const validateFile = (
file: File,
- validator: undefined | ((f: File) => CustomValidateFileResponse),
+ validator: undefined | ((f: File) => ValidateFileResponse),
validatorProps: FileValidatorProps,
localErrors: LocalLabels
): ExtFile => {
diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts
index 267cbd301079d933653d1544da7464a3c238f4c8..78620e8c85f9ba64e558e73fa5ede8ba9b61e7b1 100644
--- a/src/files-ui/hooks/useDropzoneFileUpdater.ts
+++ b/src/files-ui/hooks/useDropzoneFileUpdater.ts
@@ -1,5 +1,5 @@
import * as React from "react";
-import { CustomValidateFileResponse, ExtFile, ExtFileInstance, ExtFileManager, FileValidatorProps, Localization, setNextUploadStatus, validateExtFileList } from "../core";
+import { ValidateFileResponse, ExtFile, ExtFileInstance, ExtFileManager, FileValidatorProps, Localization, setNextUploadStatus, validateExtFileList } from "../core";
/**
* Effect for keeping track of changes
@@ -21,7 +21,7 @@ const useDropzoneFileListUpdater = (
maxFileSize?: number,
accept?: string,
maxFiles?: number,
- validator?: ((f: File) => CustomValidateFileResponse),
+ validator?: ((f: File) => ValidateFileResponse),
localization?: Localization,
validateFilesFlag?: boolean
): [ExtFile[], number, React.Dispatch<React.SetStateAction<ExtFile[]>>] => {
diff --git a/src/files-ui/hooks/useDropzoneValidation.ts b/src/files-ui/hooks/useDropzoneValidation.ts
index 3117a3a0900ab6e7bf682aa9789536d0238e7eb3..fae00ea290823637f1b63e04b2fbd5fe291f4276 100644
--- a/src/files-ui/hooks/useDropzoneValidation.ts
+++ b/src/files-ui/hooks/useDropzoneValidation.ts
@@ -1,11 +1,11 @@
import * as React from "react"
-import { CustomValidateFileResponse } from "../core";
+import { ValidateFileResponse } from "../core";
export const useDropzoneValidation = (
accept: string | undefined,
maxFileSize: number | undefined,
maxFiles: number | undefined,
- validator: ((f: File) => CustomValidateFileResponse) | undefined
+ validator: ((f: File) => ValidateFileResponse) | undefined
) => {
const [validateFlag, setValidateFlag] = React.useState<boolean>(false);
React.useEffect(() => {
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index 8d465f4dc600bc917074d28dee92b1f197e04fc9..abe520fd0db876004fd8ebb95c2a1a0ba8b5e25c 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -30,6 +30,23 @@ export type { AvatarProps } from "./components/avatar/AvatarProps";
export { useFakeProgress } from "./hooks";
-export { createListOfMultiTypeFile, uploadFile, uploadFormData, uploadExtFile, ExtFileInstance, ExtFileManager } from "./core";
-
-export type { ExtFile, ExtFileListMap, UPLOADSTATUS, Localization, ServerResponse, UploadResponse, UploadConfig, CustomValidateFileResponse } from "./core";
\ No newline at end of file
+export {
+ createListOfMultiTypeFile,
+ uploadFile,
+ uploadFormData,
+ uploadExtFile,
+ ExtFileInstance,
+ ExtFileManager,
+ createUploadConfig
+} from "./core";
+
+export type {
+ ExtFile,
+ ExtFileListMap,
+ UPLOADSTATUS,
+ Localization,
+ ServerResponse,
+ UploadResponse,
+ UploadConfig,
+ ValidateFileResponse
+} from "./core";
\ No newline at end of file
diff --git a/src/pages/api/AvatarApi.jsx b/src/pages/api/AvatarApi.jsx
index ab2e3674029b192068f132917cb8a6e14a2b9b97..2a7be2b834fcacbeb21d6cba653bc471cb777844 100644
--- a/src/pages/api/AvatarApi.jsx
+++ b/src/pages/api/AvatarApi.jsx
@@ -1,10 +1,57 @@
import * as React from "react";
+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";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
-const AvatarApi = props =>{
- return(
- <div>
- AvatarApi
- </div>
- )
-}
-export default AvatarApi;
\ No newline at end of file
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Demos",
+ referTo: "/api/avatar#demo",
+ },
+ {
+ id: 1,
+ label: "Props",
+ referTo: "/api/avatar#props",
+ },
+];
+
+const AvatarApi = (props) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>Avatar API</MainTitle>
+ <MainParagraph>
+ API reference docs for the React Avatar component. Learn about the
+ props and other APIs of this exported module.
+ </MainParagraph>
+ <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/avatar">Avatar</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;
diff --git a/src/pages/api/DropzoneApi.jsx b/src/pages/api/DropzoneApi.jsx
deleted file mode 100644
index d0e6a9b0ea65fd84113e83a5f85538b8f743c570..0000000000000000000000000000000000000000
--- a/src/pages/api/DropzoneApi.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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;
diff --git a/src/pages/api/DropzoneApi.tsx b/src/pages/api/DropzoneApi.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..25f25b57be1291acc77fa4cb70371db2f5c1b2b5
--- /dev/null
+++ b/src/pages/api/DropzoneApi.tsx
@@ -0,0 +1,61 @@
+import * as React from "react";
+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";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+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>
+ <MainParagraph>
+ API reference docs for the React Dropzone component. Learn about the
+ props and other APIs of this exported module.
+ </MainParagraph>
+ <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;
diff --git a/src/pages/api/FileCardApi.jsx b/src/pages/api/FileCardApi.jsx
deleted file mode 100644
index ce8d8f0e68c24d309144b8a001593c2514689b3a..0000000000000000000000000000000000000000
--- a/src/pages/api/FileCardApi.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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;
diff --git a/src/pages/api/FileCardApi.tsx b/src/pages/api/FileCardApi.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..eb80d007cbc47ef4eea6799e36087a3560ed62c4
--- /dev/null
+++ b/src/pages/api/FileCardApi.tsx
@@ -0,0 +1,60 @@
+import { Alert } from "@mui/material";
+import * as React from "react";
+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 MainParagraph from "../../components/paragraph-main/MainParagraph";
+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>
+ <MainParagraph>
+ API reference docs for the React Filecard component. Learn about the
+ props and other APIs of this exported module.
+ </MainParagraph>
+ <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;
diff --git a/src/pages/api/FileInputButtonApi.jsx b/src/pages/api/FileInputButtonApi.jsx
index 54ffeda9a1fd6deae27bd0d5101d09b33d829711..4cc5a8d2c71f89b916db9a4237ce97f32e840873 100644
--- a/src/pages/api/FileInputButtonApi.jsx
+++ b/src/pages/api/FileInputButtonApi.jsx
@@ -1,10 +1,63 @@
import * as React from "react";
+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";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
-const FileInputButtonApi = props =>{
- return(
- <div>
- FileInputButtonApi
- </div>
- )
-}
-export default FileInputButtonApi;
\ No newline at end of file
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Demos",
+ referTo: "/api/fileinputbutton#demo",
+ },
+ {
+ id: 1,
+ label: "Props",
+ referTo: "/api/fileinputbutton#props",
+ },
+];
+const FileInputButtonApi = (props) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileInputButton API</MainTitle>
+ <MainParagraph>
+ API reference docs for the React FileInputButton component. Learn
+ about the props and other APIs of this exported module.
+ </MainParagraph>
+ <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;
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index 7e2324e8ddd44cb2e4106b5deefd8286119c7c44..20d1ac3a52facfb185c08b143374dd5596c90de7 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -1,61 +1,61 @@
-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";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
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.
- </DescParagraph>
- <section id="filemosaic-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>
- <a href="/components/filemosaic">FileMosaic</a>
- </li>
- <li>
- <a href="/components/dropzone">Dropzone</a>
- </li>
- </ul>
- </Alert>
- </section>
- <section id="filemosaic-props">
- <PropsTableApi rows={FileMosaicAPIPropsRows} />
- </section>
- </MainContentContainer>
- <RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
- </RightMenuContainer>
- </React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileMosaic API</MainTitle>
+ <MainParagraph>
+ API reference docs for the React Filemosaic component. Learn about the
+ props and other APIs of this exported module.
+ </MainParagraph>
+ <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={FileMosaicAPIPropsRows} />
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
</React.Fragment>
);
};
-export default FileMosaicApi;
\ No newline at end of file
+export default FileMosaicApi;
diff --git a/src/pages/api/FullScreenAPIPropRows.tsx b/src/pages/api/FullScreenAPIPropRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c95a66a5ae46a4e4c320368f00979e29cbbe5a3
--- /dev/null
+++ b/src/pages/api/FullScreenAPIPropRows.tsx
@@ -0,0 +1,28 @@
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+
+export const FullScreenAPIPropRows = [
+ {
+ name: "open",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If true, the component is shown.</>,
+ },
+ {
+ name: "onClose",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>Callback fired when the component requests to be closed.</>,
+ },
+ {
+ name: "children",
+ type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The content of the dropozone. Tipically it is an array of{" "}
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> components.
+ </>
+ ),
+ },
+];
diff --git a/src/pages/api/FullScreenApi.tsx b/src/pages/api/FullScreenApi.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d0f661b0ac388435a2e0efbb5a5507deac498037
--- /dev/null
+++ b/src/pages/api/FullScreenApi.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+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";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+
+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>
+ <MainParagraph>
+ API reference docs for the React FullScreen component. Learn about the
+ props and other APIs of this exported module.
+ </MainParagraph>
+ <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/filecard">FileCard</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;
diff --git a/src/pages/api/ImagePreviewAPIPropsRows.tsx b/src/pages/api/ImagePreviewAPIPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fbf971b36440ce270356d2d886928aef1e9acb82
--- /dev/null
+++ b/src/pages/api/ImagePreviewAPIPropsRows.tsx
@@ -0,0 +1,102 @@
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+
+export const ImagePreviewAPIPropsRows = [
+ {
+ name: "src",
+ type: (
+ <>
+ <TypeHighlight np>{"string"}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{"File"}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ Image source in string format (URL) or File Object (Will be read as
+ URL).
+ </>
+ ),
+ },
+ {
+ name: "width",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The width of the image.</>,
+ },
+ {
+ name: "height",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The height of the image.</>,
+ },
+ {
+ name: "alt",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>Alternative label when an error occurs on loading the image</>
+ ),
+ },
+ {
+ name: "onError",
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>Callback fired when an error occured on loading the image.</>
+ ),
+ },
+ {
+ 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 "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>
+ <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>
+ </ul>
+ </>
+ ),
+ },
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles.
+ </>
+ ),
+ },
+];
diff --git a/src/pages/api/ImagePreviewApi.tsx b/src/pages/api/ImagePreviewApi.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f9fefef48ead2540f4d074a7cc0fcff52e37bbfe
--- /dev/null
+++ b/src/pages/api/ImagePreviewApi.tsx
@@ -0,0 +1,74 @@
+import * as React from "react";
+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";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+
+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>
+ <MainParagraph>
+ API reference docs for the React ImagePreview component. Learn about
+ the props and other APIs of this exported module.
+ </MainParagraph>
+ <DescParagraph>
+ Apart from the props described bellow, the{" "}
+ <CodeHighlight>ImagePreview</CodeHighlight> component accepts all the
+ HTML <CodeHighlight>{"<img/>"}</CodeHighlight> default props. You can
+ check them out{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes">
+ here
+ </AnchorToTab>
+ .
+ </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/filecard">FileCard</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;
diff --git a/src/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
index 3df8e662738356427d98d0133e0bc9942c50b7e2..1140eb3019ec12f6b1c7569b4b181abc03ac349b 100644
--- a/src/pages/api/PropsTableApi.jsx
+++ b/src/pages/api/PropsTableApi.jsx
@@ -11,6 +11,7 @@ import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";
import LowPriorityIcon from "@mui/icons-material/LowPriority";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import { Tooltip, IconButton, Stack } from "@mui/material";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
@@ -31,6 +32,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
border: 0,
},
}));
+
function compareNames(a, b) {
if (a?.name < b?.name) {
return -1;
@@ -39,7 +41,12 @@ function compareNames(a, b) {
}
}
-export default function PropsTableApi({ rows = [] }) {
+export default function PropsTableApi({
+ rows = [],
+ title = "",
+ desc=<></>,
+ omitDefault = false,
+}) {
const [sorted, setSorted] = React.useState(false);
const [localRows, setLocalRows] = React.useState(rows);
@@ -63,7 +70,7 @@ export default function PropsTableApi({ rows = [] }) {
alignItems={"center"}
spacing={2}
>
- <SubTitle content="Props" />{" "}
+ <SubTitle content={title.length === 0 ? "Props" : title} />{" "}
<Tooltip title={sorted ? "Sort by importance" : "Sort alphabetically"}>
<IconButton
style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
@@ -75,6 +82,7 @@ export default function PropsTableApi({ rows = [] }) {
</IconButton>
</Tooltip>{" "}
</Stack>
+ {desc!==undefined && <DescParagraph>{desc}</DescParagraph>}
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
@@ -83,8 +91,13 @@ export default function PropsTableApi({ rows = [] }) {
<StyledTableCell align="left" /* width={"30%"} */>
Type
</StyledTableCell>
- <StyledTableCell align="left">Default</StyledTableCell>
- <StyledTableCell align="left" /* width={"30%"} */>
+ {!omitDefault && (
+ <StyledTableCell align="left">Default</StyledTableCell>
+ )}
+ <StyledTableCell
+ align="left"
+ /* width={"30%"} */
+ >
Description
</StyledTableCell>
</TableRow>
@@ -96,19 +109,25 @@ export default function PropsTableApi({ rows = [] }) {
component="th"
scope="row"
style={{
- wordBreak: row.name.length > 12 ? "break-word" : "normal",
+ wordBreak: row.name.length > 20 ? "break-word" : "normal",
}}
>
{row.name}
</StyledTableCell>
<StyledTableCell
align="left"
- style={{ wordBreak: "break-word" }}
+ style={{
+ wordBreak: row.name.length > 10 ? "break-word" : "normal",
+ }}
>
{row.type}
</StyledTableCell>
- <StyledTableCell align="left">{row.default}</StyledTableCell>
- <StyledTableCell align="left">
+
+ {!omitDefault && (
+ <StyledTableCell align="left">{row.default}</StyledTableCell>
+ )}
+
+ <StyledTableCell align="left" style={{ maxWidth: "50%" }}>
{row.description}
</StyledTableCell>
</StyledTableRow>
diff --git a/src/pages/api/VideoPreviewAPIPropsRows.tsx b/src/pages/api/VideoPreviewAPIPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8defeb9ebac9ca2b9c60f9be4ef3d5799a1fb40f
--- /dev/null
+++ b/src/pages/api/VideoPreviewAPIPropsRows.tsx
@@ -0,0 +1,33 @@
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+
+export const VideoPreviewAPIPropsRows = [
+ {
+ name: "src",
+ type: (
+ <>
+ <TypeHighlight np>{"string"}</TypeHighlight>
+ {" | "}
+ <TypeHighlight np>{"File"}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The video source in string format or File object.</>,
+ },
+ {
+ name: "style",
+ type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The in-line style object.</>,
+ },
+ {
+ name: "className",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: (
+ <>
+ The classname to override the css styles in .css or .sass file instead
+ of using in-line styles.
+ </>
+ ),
+ },
+];
diff --git a/src/pages/api/VideoPreviewApi.tsx b/src/pages/api/VideoPreviewApi.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3c6af3ec6ebb474f1e21b572124ea80d47e865da
--- /dev/null
+++ b/src/pages/api/VideoPreviewApi.tsx
@@ -0,0 +1,74 @@
+import * as React from "react";
+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";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+
+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>
+ <MainParagraph>
+ API reference docs for the React VideoPreview component. Learn about
+ the props and other APIs of this exported module.
+ </MainParagraph>
+ <DescParagraph>
+ Apart from the props described bellow, the{" "}
+ <CodeHighlight>VideoPreview</CodeHighlight> component accepts all the
+ HTML <CodeHighlight>{"<video/>"}</CodeHighlight> default props. You
+ can check them out{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes">
+ here
+ </AnchorToTab>
+ .
+ </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/filecard">FileCard</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;
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index ac80ab4f78d2eaa1fb08ff9ee1674231b90c79ea..edc71e4c42769f52c0334f3de7a5388935ab3255 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/src/pages/demo/AvatarDemoPage.tsx
@@ -221,11 +221,11 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
not set.
</li>
<li>
- <CodeHighlight>changeLabel</CodeHighlight>: when there i a valid
+ <CodeHighlight>changeLabel</CodeHighlight>: when there is a valid
source set.
</li>
<li>
- <CodeHighlight>uploadingLabel</CodeHighlight>: when you want to
+ <CodeHighlight>loadingLabel</CodeHighlight>: when you want to
communicate that something is loading.
</li>
</ul>
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 6f9c94dbf13bf6974ba73547bf09d5f362f0fd7a..0a83f4620f98af2de705d9fdf5db91d0318e85bb 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -117,7 +117,7 @@ const DropzoneDemoPage = (props) => {
<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{" "}
- <AnchorToTab href="/types#ext-file">ExtFile-API. </AnchorToTab>
+ <AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
</Alert>
</section>
@@ -176,7 +176,7 @@ const DropzoneDemoPage = (props) => {
</AnchorToTab>
{") => "}
<AnchorToTab href="/types#custom-validate-file-response">
- CustomValidateFileResponse
+ ValidateFileResponse
</AnchorToTab>
</CodeHighlight>
. Custom validator can work together with{" "}
@@ -222,9 +222,9 @@ const DropzoneDemoPage = (props) => {
<Alert severity="info">
<AlertTitle> "fakeUpload" </AlertTitle>
By giving this prop, the {"<Dropzone/>"} component will simulate the
- upload operation by randomly set the upload status and message on
- each uploadable <TypeHighlight>ExtFile</TypeHighlight>. It will also
- set a fake progress.
+ upload operation by randomly setting the upload status and message
+ on each uploadable <TypeHighlight>ExtFile</TypeHighlight>. It will
+ also set a fake progress.
</Alert>
<br />
<Alert severity="info">
@@ -405,8 +405,9 @@ const DropzoneDemoPage = (props) => {
Dropzone with the{" "}
<TypeHighlight>footerConfig.allowedTypesLabel</TypeHighlight>{" "}
prop set to <TypeHighlight>false</TypeHighlight> will hide the
- label that indicates the files types allowed. This label will be
- hidden <strong>when the "upload" process is active</strong>.
+ label that indicates the allowed file types. This label is
+ normally hidden{" "}
+ <strong>when the "upload" process is active</strong>.
</li>
<li>
Dropzone with the{" "}
@@ -414,28 +415,30 @@ const DropzoneDemoPage = (props) => {
footerConfig.uploadProgressMessage
</TypeHighlight>{" "}
prop set to <TypeHighlight>false</TypeHighlight> will not
- display the label with the upload progress. This label will be
- visible<strong> only during the "upload" process</strong>.
+ display the that indicates the current upload progress. This
+ label is normally visible
+ <strong> only during the "upload" process</strong>.
</li>
<li>
Dropzone with the{" "}
<TypeHighlight>footerConfig.uploadResultMessage</TypeHighlight>{" "}
prop set to <TypeHighlight>false</TypeHighlight> will not
- display a label at the end of the upload process. This label can{" "}
- be visible for 2 seconds just{" "}
+ display a label that indicates the final result of the upload
+ progress will not be shown. This label is normally visible for 2
+ seconds just{" "}
<strong>after the "upload" process finishes</strong>.
</li>
<li>
Dropzone with the{" "}
<TypeHighlight>footerConfig.noMissingFilesLabel</TypeHighlight>{" "}
prop set to <TypeHighlight>false</TypeHighlight> will not
- display a label when upload starts with no uploadable files.
+ display a label that indicates that there are not files missing
+ to upload.
</li>
<li>
Dropzone with the{" "}
- <TypeHighlight>footerConfig.style</TypeHighlight> prop set to{" "}
- <TypeHighlight>false</TypeHighlight>defined will override the
- styles associated to the footer component.
+ <TypeHighlight>footerConfig.style</TypeHighlight> prop defined
+ will override the styles associated to the footer component.
</li>
</ul>
By default all of these values are set to
@@ -605,11 +608,10 @@ const DropzoneDemoPage = (props) => {
<DescParagraph>
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component uses the{" "}
<TypeHighlight>localization</TypeHighlight> prop in the validation
- and the upload process for setting status and messages according to the language that
- this prop refers to.
- <br/>
- The localization demo for this component can be found in
- the{" "}
+ and the upload process for setting status and messages according to
+ the language that this prop refers to.
+ <br />
+ The localization demo for this component can be found in the{" "}
<AnchorToTab href="/localization">localization page</AnchorToTab>.
</DescParagraph>
</section>
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index a287a5115625cd3cf6c1120b0c9fe6008dd153aa..beeb9576cd703f6c4d9e7f848134bc56f8aaa23e 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -87,7 +87,7 @@ const FileCardDemoPage = (props) => {
<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>
+ <a href="/types#extfile">ExtFile-API. </a>
</Alert>
</section>
<section id="image-preview">
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 9e55f22ca6a708fa031039c4066dcd269e3102c9..180eb68c666fc9b26c85dbd9ffe5691a0158b890 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -113,7 +113,7 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<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{" "}
- <AnchorToTab href="/types#ext-file">ExtFile-API. </AnchorToTab>
+ <AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
</Alert>
</section>
@@ -168,7 +168,7 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
</AnchorToTab>
{") => "}
<AnchorToTab href="/types#custom-validate-file-response">
- CustomValidateFileResponse
+ ValidateFileResponse
</AnchorToTab>
</CodeHighlight>
. Custom validator can work together with{" "}
@@ -213,7 +213,7 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<Alert severity="info">
<AlertTitle> "fakeUpload" </AlertTitle>
By giving this prop, the {"<FileInputButton/>"} component will
- simulate the upload operation by randomly set the upload status and
+ simulate the upload operation by randomly setting the upload status and
message on each uploadable <TypeHighlight>ExtFile</TypeHighlight>.
It will also set a fake progress.
</Alert>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index a407976ca3641b93f9e37d2413baec60fc06f218..2c5a4f738bc29757980985ab400d8cd63e18c912 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -20,11 +20,11 @@ import CodeJSFileMosaicValidation from "../../components/demo-components/filemos
import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
-import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
-import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
+//import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
+//import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
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";
import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
@@ -92,7 +92,7 @@ const FileMosaicDemoPage = (props) => {
<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>
+ <a href="/types#extfile">ExtFile-API. </a>
</Alert>
</section>
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index 90b03be7aaf0dd6a3bcf67eced550d5365812889..f2ace171a1085dd7b886be7c3ca817d82e0615a7 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -1,9 +1,71 @@
+import { Highlighter } from "rc-highlight";
import * as React from "react";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+//import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import { ActionButtonItemAPIRows } from "../../data/ActionButtonItemAPIRows";
+import { ActionButtonsAPIRows } from "../../data/ActionButtonsAPIRows";
+import { ExtFileAPIRows } from "../../data/ExtFileAPIRows";
+import { FooterConfigAPIRows } from "../../data/FooterConfigAPIRows";
+import { HeaderConfigAPIRows } from "../../data/HeaderConfigAPIRows";
+import { ServerResponseAPIRows } from "../../data/ServerResponseAPIRows";
+import { UploadConfigAPIRows } from "../../data/UploadConfigAPIRows";
+import { ValidateFileResponseAPIrows } from "../../data/ValidateFileResponseAPIrows";
+import PropsTableApi from "../api/PropsTableApi";
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "ExtFile",
+ referTo: "/types#extfile",
+ },
+ {
+ id: 1,
+ label: "ValidateFileResponse",
+ referTo: "/types#validatefileresponse",
+ },
+ {
+ id: 2,
+ label: "UploadConfig",
+ referTo: "/types#uploadconfig",
+ },
+ {
+ id: 3,
+ label: "ActionButtons",
+ referTo: "/types#actionbuttons",
+ },
+ {
+ id: 4,
+ label: "ActionButtonItem",
+ referTo: "/types#actionbuttonitem",
+ },
+ {
+ id: 5,
+ label: "HeaderConfig",
+ referTo: "/types#headerconfig",
+ },
+ {
+ id: 6,
+ label: "FooterConfig",
+ referTo: "/types#footerconfig",
+ },
+ {
+ id: 7,
+ label: "ServerResonse",
+ referTo: "/types#uploadconfig",
+ },
+ {
+ id: 8,
+ label: "UPLOADSTATUS",
+ referTo: "/types#uploadstatus",
+ },
+];
const TypesPage = (props) => {
return (
@@ -11,12 +73,102 @@ const TypesPage = (props) => {
<MainLayoutPage selectedIndex={6}>
<MainContentContainer>
<MainTitle>Types</MainTitle>
+ <MainParagraph>
+ API reference docs for all the important types related to files UI
+ components.
+ </MainParagraph>
+ <section id="extfile">
+ <PropsTableApi
+ title="ExtFile"
+ desc={
+ <>
+ Data estructure that "extends" the{" "}
+ <AnchorToTab href="https://developer.mozilla.org/es/docs/Web/API/File">
+ File
+ </AnchorToTab>{" "}
+ Object. This object is designed to allow the information
+ exchange between components.
+ </>
+ }
+ omitDefault
+ rows={ExtFileAPIRows}
+ />
+ </section>
+ <section id="validatefileresponse">
+ <PropsTableApi
+ rows={ValidateFileResponseAPIrows}
+ title="ValidateFileResponse"
+ omitDefault
+ desc="Response convention for file validation"
+ />
+ </section>
+ <section id="uploadconfig">
+ <PropsTableApi
+ rows={UploadConfigAPIRows}
+ title="UploadConfig"
+ desc="Configuration needed for performing the upload process"
+ />
+ </section>
+ <section id="actionbuttons">
+ <PropsTableApi
+ rows={ActionButtonsAPIRows}
+ title="ActionButtons"
+ omitDefault
+ desc="Advanced configuration for buttons after or before the component. (Dropzone and FileInputButton)"
+ />
+ </section>
+ <section id="actionbuttonitem">
+ <PropsTableApi
+ rows={ActionButtonItemAPIRows}
+ title="ActionButtonItem"
+ desc="Advanced configuration for each action button"
+ />
+ </section>
+ <section id="headerconfig">
+ <PropsTableApi
+ rows={HeaderConfigAPIRows}
+ title="HeaderConfig"
+ desc="Advanced configuration for dropzone header"
+ />
+ </section>
+ <section id="footerconfig">
+ <PropsTableApi
+ rows={FooterConfigAPIRows}
+ title="FooterConfig"
+ desc="Advanced configuration for dropzone footer"
+ />
+ </section>
+ <section id="serverresponse">
+ <PropsTableApi
+ rows={ServerResponseAPIRows}
+ title="ServerResponse"
+ omitDefault
+ desc="Convention for server response"
+ />
+ </section>
+ <section id="uploadstatus">
+ <SubTitle content={"UPLOADSTATUS"} />{" "}
+ <Highlighter
+ style={{
+ margin: "20px 0",
+ fontSize: "15px",
+ lineHeight: "",
+ }}
+ onCopyToClipboard={(code_) => {
+ console.log("code copied to clipboard: ");
+ console.log(code_);
+ }}
+ >
+ {UPLOADSTATUSCODE}
+ </Highlighter>
+ </section>
</MainContentContainer>
</MainLayoutPage>{" "}
<RightMenuContainer>
- <RightMenu width="240px" items={[]} />
+ <RightMenu width="240px" items={rightMenuItems} />
</RightMenuContainer>
</React.Fragment>
);
};
export default TypesPage;
+const UPLOADSTATUSCODE = `export type UPLOADSTATUS = "preparing" | "aborted" | "uploading" | "success" | "error";`;
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index aa8639240b50e3ab77d8ee47e9b6813ceee003f5..442b6102b0cfc983a67e4f1063128f1c59146409 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -23,6 +23,9 @@ import FileInputButtonDemoPage from "../pages/demo/FileInputButtonDemoPage";
import FileDownloadPage from "../pages/download-page/FileDownloadPage";
import FileIconsPage from "../pages/file-icons/FileIconsPage";
import LocalizationPage from "../pages/localization/LocalizationPage";
+import VideoPreviewApi from "../pages/api/VideoPreviewApi";
+import ImagePreviewApi from "../pages/api/ImagePreviewApi";
+import FullScreenApi from "../pages/api/FullScreenApi";
const router = createBrowserRouter([
{
@@ -100,6 +103,18 @@ const router = createBrowserRouter([
path: "/api/filecard",
element: <FileCardApi />,
},
+ {
+ path: "/api/fullscreen",
+ element: <FullScreenApi />,
+ },
+ {
+ path: "/api/imagepreview",
+ element: <ImagePreviewApi />,
+ },
+ {
+ path: "/api/videopreview",
+ element: <VideoPreviewApi />,
+ },
],
},
{