From 600a8491a129ee419d67b72f9f2176ceb3cccd68 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 20 Mar 2023 00:42:07 -0500
Subject: [PATCH] [FEAT]: Add types API page
---
.../CodeDemoDropzoneActionButtons.jsx | 4 +-
.../DemoDropzoneActionButtons.jsx | 4 +-
.../show-demo-code/ShowDemoCode.tsx | 8 +-
src/data/ActionButtonItemAPIRows.tsx | 62 ++
src/data/ActionButtonsAPIRows.tsx | 138 +++--
src/data/DropzoneAPIPropsRows.tsx | 12 +-
src/data/ExtFileAPIRows.tsx | 2 +-
src/data/FileInputButtonPropsRows.tsx | 564 +++++++++---------
src/data/FooterConfigAPIRows.tsx | 95 ++-
src/data/HeaderConfigAPIRows.tsx | 94 ++-
src/data/ServerResponseAPIRows.tsx | 25 +-
src/pages/api/PropsTableApi.jsx | 4 +-
src/pages/demo/DropzoneDemoPage.jsx | 40 +-
src/pages/demo/FileCardDemoPage.jsx | 2 +-
src/pages/demo/FileInputButtonDemoPage.tsx | 2 +-
src/pages/demo/FileMosaicDemoPage.jsx | 2 +-
src/pages/types-page/TypesPage.jsx | 88 ++-
17 files changed, 757 insertions(+), 389 deletions(-)
create mode 100644 src/data/ActionButtonItemAPIRows.tsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
index b900bca..45f9af4 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/DemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
index 110716b..1820671 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/show-demo-code/ShowDemoCode.tsx b/src/components/show-demo-code/ShowDemoCode.tsx
index 64494d9..d79f7fe 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 0000000..384ad25
--- /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
index b79497d..7fce373 100644
--- a/src/data/ActionButtonsAPIRows.tsx
+++ b/src/data/ActionButtonsAPIRows.tsx
@@ -1,44 +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>{" | "}
+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: "uploadingMessage",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
- description: (
- <>
- A message to show in the footer when the uploading process takes place.
- </>
- ),
- },
-]
\ No newline at end of file
+ </>
+ ),
+ 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/DropzoneAPIPropsRows.tsx b/src/data/DropzoneAPIPropsRows.tsx
index 07fc6ea..cb69fff 100644
--- a/src/data/DropzoneAPIPropsRows.tsx
+++ b/src/data/DropzoneAPIPropsRows.tsx
@@ -76,7 +76,7 @@ export const DropzoneAPIPropsRows = [
<br />
<CodeHighlight>
{"(f: File) => "}{" "}
- <AnchorToTab href="/api/types#validatefileresponse">
+ <AnchorToTab href="/types#validatefileresponse">
ValidateFileResponse
</AnchorToTab>
</CodeHighlight>
@@ -123,7 +123,7 @@ export const DropzoneAPIPropsRows = [
name: "uploadConfig",
type: (
<TypeHighlight np>
- <AnchorToTab href="/api/types#uploadconfig">UploadConfig</AnchorToTab>
+ <AnchorToTab href="/types#uploadconfig">UploadConfig</AnchorToTab>
</TypeHighlight>
),
default: <TypeHighlight np></TypeHighlight>,
@@ -311,9 +311,7 @@ export const DropzoneAPIPropsRows = [
name: "actionButtons",
type: (
<TypeHighlight np>
- <AnchorToTab href="/api/types#actionbuttons">
- ActionButtons
- </AnchorToTab>
+ <AnchorToTab href="/types#actionbuttons">ActionButtons</AnchorToTab>
</TypeHighlight>
),
default: <TypeHighlight np></TypeHighlight>,
@@ -353,7 +351,7 @@ export const DropzoneAPIPropsRows = [
name: "headerConfig",
type: (
<TypeHighlight np>
- <AnchorToTab href="/api/types#headerconfig">HeaderConfig</AnchorToTab>
+ <AnchorToTab href="/types#headerconfig">HeaderConfig</AnchorToTab>
</TypeHighlight>
),
default: <TypeHighlight np></TypeHighlight>,
@@ -363,7 +361,7 @@ export const DropzoneAPIPropsRows = [
name: "footerConfig",
type: (
<TypeHighlight np>
- <AnchorToTab href="/api/types#footerconfig">FooterConfig</AnchorToTab>
+ <AnchorToTab href="/types#footerconfig">FooterConfig</AnchorToTab>
</TypeHighlight>
),
default: <TypeHighlight np></TypeHighlight>,
diff --git a/src/data/ExtFileAPIRows.tsx b/src/data/ExtFileAPIRows.tsx
index d4dfa1a..35b4cca 100644
--- a/src/data/ExtFileAPIRows.tsx
+++ b/src/data/ExtFileAPIRows.tsx
@@ -65,7 +65,7 @@ export const ExtFileAPIRows = [
name: "uploadStatus",
type: (
<TypeHighlight np>
- <AnchorToTab href="/api/dropzone#uploadstatus">
+ <AnchorToTab href="/types#uploadstatus">
{"UPLOADSTATUS"}
</AnchorToTab>
</TypeHighlight>
diff --git a/src/data/FileInputButtonPropsRows.tsx b/src/data/FileInputButtonPropsRows.tsx
index 92cb1a4..a8ca9de 100644
--- a/src/data/FileInputButtonPropsRows.tsx
+++ b/src/data/FileInputButtonPropsRows.tsx
@@ -2,290 +2,280 @@ 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.
- </>
- ),
- },
-]
\ No newline at end of file
+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/FooterConfigAPIRows.tsx b/src/data/FooterConfigAPIRows.tsx
index d0c0156..fb75138 100644
--- a/src/data/FooterConfigAPIRows.tsx
+++ b/src/data/FooterConfigAPIRows.tsx
@@ -1 +1,94 @@
-export const FooterConfigAPIRows =[];
\ No newline at end of file
+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
index c3b0fc6..7354914 100644
--- a/src/data/HeaderConfigAPIRows.tsx
+++ b/src/data/HeaderConfigAPIRows.tsx
@@ -1 +1,93 @@
-export const HeaderConfigAPIRows=[]
\ No newline at end of file
+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
index b5276a9..2ab4cbe 100644
--- a/src/data/ServerResponseAPIRows.tsx
+++ b/src/data/ServerResponseAPIRows.tsx
@@ -1,3 +1,22 @@
-export const ServerResponseAPIRows=[
-
-]
\ No newline at end of file
+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/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
index 5172338..1140eb3 100644
--- a/src/pages/api/PropsTableApi.jsx
+++ b/src/pages/api/PropsTableApi.jsx
@@ -44,7 +44,7 @@ function compareNames(a, b) {
export default function PropsTableApi({
rows = [],
title = "",
- desc = "",
+ desc=<></>,
omitDefault = false,
}) {
const [sorted, setSorted] = React.useState(false);
@@ -82,7 +82,7 @@ export default function PropsTableApi({
</IconButton>
</Tooltip>{" "}
</Stack>
- {desc.length > 0 && <DescParagraph>{desc}</DescParagraph>}
+ {desc!==undefined && <DescParagraph>{desc}</DescParagraph>}
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index e29558d..0a83f46 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>
@@ -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 setting 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 a287a51..beeb957 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 0557454..180eb68 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>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index cd0ab2f..2c5a4f7 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -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 da1583b..f2ace17 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -1,4 +1,6 @@
+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";
@@ -6,53 +8,58 @@ 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 { UPLOADSTATUSAPIRows } from "../../data/UploadStatusAPIRows";
import { ValidateFileResponseAPIrows } from "../../data/ValidateFileResponseAPIrows";
import PropsTableApi from "../api/PropsTableApi";
const rightMenuItems = [
{
- id: 1,
+ id: 0,
label: "ExtFile",
referTo: "/types#extfile",
},
{
- id: 7,
+ id: 1,
label: "ValidateFileResponse",
referTo: "/types#validatefileresponse",
},
{
- id: 5,
+ id: 2,
label: "UploadConfig",
referTo: "/types#uploadconfig",
},
{
- id: 2,
+ id: 3,
label: "ActionButtons",
referTo: "/types#actionbuttons",
},
{
- id: 3,
+ id: 4,
+ label: "ActionButtonItem",
+ referTo: "/types#actionbuttonitem",
+ },
+ {
+ id: 5,
label: "HeaderConfig",
referTo: "/types#headerconfig",
},
{
- id: 4,
+ id: 6,
label: "FooterConfig",
referTo: "/types#footerconfig",
},
{
- id: 6,
+ id: 7,
label: "ServerResonse",
referTo: "/types#uploadconfig",
},
-
{
id: 8,
label: "UPLOADSTATUS",
@@ -73,7 +80,16 @@ const TypesPage = (props) => {
<section id="extfile">
<PropsTableApi
title="ExtFile"
- desc={'This object "extends" the File Object'}
+ 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}
/>
@@ -83,29 +99,68 @@ const TypesPage = (props) => {
rows={ValidateFileResponseAPIrows}
title="ValidateFileResponse"
omitDefault
+ desc="Response convention for file validation"
/>
</section>
<section id="uploadconfig">
- <PropsTableApi rows={UploadConfigAPIRows} title="UploadConfig" />
+ <PropsTableApi
+ rows={UploadConfigAPIRows}
+ title="UploadConfig"
+ desc="Configuration needed for performing the upload process"
+ />
</section>
<section id="actionbuttons">
- <PropsTableApi rows={ActionButtonsAPIRows} title="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" />
+ <PropsTableApi
+ rows={HeaderConfigAPIRows}
+ title="HeaderConfig"
+ desc="Advanced configuration for dropzone header"
+ />
</section>
<section id="footerconfig">
- <PropsTableApi rows={FooterConfigAPIRows} title="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">
- <PropsTableApi rows={UPLOADSTATUSAPIRows} title="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>{" "}
@@ -116,3 +171,4 @@ const TypesPage = (props) => {
);
};
export default TypesPage;
+const UPLOADSTATUSCODE = `export type UPLOADSTATUS = "preparing" | "aborted" | "uploading" | "success" | "error";`;
--
GitLab