diff --git a/package-lock.json b/package-lock.json
index e0649d8a168c0f3863e9c5a1240d7cab842d645b..7a264d8c698c36cff0f3e5b6d1cf13b0fb51f473 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
"@types/react": "^18.0.25",
"axios": "^1.3.1",
"node-sass": "^7.0.3",
- "rc-highlight": "^2.3.4",
+ "rc-highlight": "^2.3.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.4.3",
@@ -15537,9 +15537,9 @@
}
},
"node_modules/rc-highlight": {
- "version": "2.3.4",
- "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.4.tgz",
- "integrity": "sha512-LqljqG4ZHna2/9fkdXRGJ8c0slywuA0+taGzK4byU63MgW4SpMPYtKWs8kdyFN53Ai2uGWjKIlsbD5rtKk4bDg==",
+ "version": "2.3.6",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.6.tgz",
+ "integrity": "sha512-5TEqMz3IlqlMUEnIho+mfu9cyy30ACtnb/pR73TpYN1/16zF4vITiOcFwOQoUAUPEa00QwUBtjSvVnu/+z9CEw==",
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
@@ -30064,9 +30064,9 @@
}
},
"rc-highlight": {
- "version": "2.3.4",
- "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.4.tgz",
- "integrity": "sha512-LqljqG4ZHna2/9fkdXRGJ8c0slywuA0+taGzK4byU63MgW4SpMPYtKWs8kdyFN53Ai2uGWjKIlsbD5rtKk4bDg==",
+ "version": "2.3.6",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.6.tgz",
+ "integrity": "sha512-5TEqMz3IlqlMUEnIho+mfu9cyy30ACtnb/pR73TpYN1/16zF4vITiOcFwOQoUAUPEa00QwUBtjSvVnu/+z9CEw==",
"requires": {}
},
"react": {
diff --git a/package.json b/package.json
index 25d78a9a96a9b312bebcbf50bb33959ebe95e409..f7c2518132a97793313071e81be67189bfffbf94 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"@types/react": "^18.0.25",
"axios": "^1.3.1",
"node-sass": "^7.0.3",
- "rc-highlight": "^2.3.4",
+ "rc-highlight": "^2.3.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.4.3",
diff --git a/src/components/DropzoneMainPage.jsx b/src/components/DropzoneMainPage.jsx
index 575b3c1d2b2f32211a0beac0a9d6fecede1b5310..4e9c316e83dce927472c0afa9c3117ae3eb02efd 100644
--- a/src/components/DropzoneMainPage.jsx
+++ b/src/components/DropzoneMainPage.jsx
@@ -42,7 +42,7 @@ const DropzoneMainPage = ({ darkMode = false }) => {
onChange={updateFiles}
value={files}
maxFileSize={28*1024}
- maxFiles={4}
+ maxFiles={5}
accept=".jpg, .png, application/json, video/*"
fakeUpload
behaviour="add"
@@ -60,6 +60,7 @@ const DropzoneMainPage = ({ darkMode = false }) => {
alwaysActive
hd
onSee={handleSee}
+ resultOnTooltip
/>
))}
</Dropzone>
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 2bedf2fe267c2ab390fc8c71a0220f3a9ff88179..ba39bdd3bd85642c58def2c3ce91dc12b0171b65 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -8,6 +8,7 @@ import Collapse from "@mui/material/Collapse";
import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
import { useNavigate } from "react-router";
+import ElectricBoltIcon from '@mui/icons-material/ElectricBolt';
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
const { /* items, */ selectedIndex, setSelectedIndex } = props;
@@ -43,7 +44,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{
label: "FileCard",
index: 5,
- onClick: () => navigate("/components/file-card"),
+ onClick: () => navigate("/components/filecard"),
},
],
},
@@ -65,7 +66,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{
label: "FileCard",
index: 7,
- onClick: () => navigate("/api/file-card"),
+ onClick: () => navigate("/api/filecard"),
},
],
},
@@ -123,7 +124,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
- Quick Start
+ <ElectricBoltIcon/> Quick Start
</ListSubheader>
}
>
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
index 68bbff4883467d807b3d458b54b913775774af12..205ff469b900c125791d93714b173f68b298ae1d 100644
--- a/src/components/layout-pages/MainLayoutPage.jsx
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -8,11 +8,13 @@ const MainLayoutPage = ({ mainContent, rightMenu, children }) => {
<Stack direction={"row"} sx={{ position: "relative" }}>
<Box
sx={{
+ overflow:"hidden",
boxSizing: "border-box",
marginLeft: { xl: "240px", lg: "0px" },
marginRight: { lg: "240px" },
width: {
lg: `min(1000px, calc(100% - ${240}px))`,
+
},
}}
>
diff --git a/src/components/typeHighlight/TypeHighlight.scss b/src/components/typeHighlight/TypeHighlight.scss
index fec4e49ad1aeaf35dc999ce6de11a934436f5264..fbedd9c38bbdde86e5ea2967dbbcf935488e9c38 100644
--- a/src/components/typeHighlight/TypeHighlight.scss
+++ b/src/components/typeHighlight/TypeHighlight.scss
@@ -5,4 +5,7 @@
// word-break: break-all;
padding: 0px 5px;
display: inline-block;
+ &.np{
+ padding: 0;
+ }
}
diff --git a/src/components/typeHighlight/TypeHighlight.tsx b/src/components/typeHighlight/TypeHighlight.tsx
index 560e5a90b28607fad271d5b957c2df6ea832611b..032a4605192e293bd998c2ef8da14d281f26794d 100644
--- a/src/components/typeHighlight/TypeHighlight.tsx
+++ b/src/components/typeHighlight/TypeHighlight.tsx
@@ -3,11 +3,12 @@ import "./TypeHighlight.scss";
interface TypeHighlightProps {
children?: React.ReactNode;
+ np?:boolean;
}
const TypeHighlight: React.FC<TypeHighlightProps> = (
props: TypeHighlightProps
) => {
- const { children } = props;
- return <div className="type-highlight">{children}</div>;
+ const { children,np } = props;
+ return <div className={np?"type-highlight np":"type-highlight"}>{children}</div>;
};
export default TypeHighlight;
diff --git a/src/data/FileMosaicAPIPropsRows.tsx b/src/data/FileMosaicAPIPropsRows.tsx
index 78a744b7d30e836653463666a01bbbd3f21c6629..5d535ea1d859ec7f6c0039917f6013a9ed5cae99 100644
--- a/src/data/FileMosaicAPIPropsRows.tsx
+++ b/src/data/FileMosaicAPIPropsRows.tsx
@@ -4,12 +4,12 @@ export const FileMosaicAPIPropsRows = [
{
id: 0,
name: "alwaysActive",
- type: <TypeHighlight>boolean</TypeHighlight>,
- default: <TypeHighlight>false</TypeHighlight>,
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np>false</TypeHighlight>,
description: (
<>
Flag that makes all buttons visible. If{" "}
- <TypeHighlight>false</TypeHighlight>, the buttons and info will be
+ <TypeHighlight np>false</TypeHighlight>, the buttons and info will be
visible only when user triggers the hover event.
</>
),
@@ -18,18 +18,18 @@ export const FileMosaicAPIPropsRows = [
id: 1,
name: "elevation",
type: (
- <TypeHighlight>
+ <TypeHighlight np>
<span>"1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false</span>
</TypeHighlight>
),
- default: <TypeHighlight>undefined</TypeHighlight>,
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>Shadow depth for the FileItem container.</>,
}, */
{
id: 2,
name: "errors",
- type: <TypeHighlight>{"string[]"}</TypeHighlight>,
- default: <TypeHighlight>undefined</TypeHighlight>,
+ type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
The list of errors according to the validation criteria or the result of
@@ -40,32 +40,32 @@ export const FileMosaicAPIPropsRows = [
{
id: 3,
name: "file",
- type: <TypeHighlight>{"File"}</TypeHighlight>,
- default: <TypeHighlight>undefined</TypeHighlight>,
+ type: <TypeHighlight np>{"File"}</TypeHighlight>,
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The file object obtained from client drop or selection</>,
},
{
name: "name",
- type: <TypeHighlight>{"string"}</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: <>The name of the file</>,
},
{
name: "type",
- type: <TypeHighlight>{"string"}</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: <>The file mime type.</>,
},
{
name: "size",
- type: <TypeHighlight>{"number"}</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>{"number"}</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: <>The size of the file in bytes.</>,
},
{
name: "valid",
- type: <TypeHighlight>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight>undefined</TypeHighlight>,
+ type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
If present, it will show a valid or rejected message ("valid",
@@ -76,29 +76,35 @@ export const FileMosaicAPIPropsRows = [
/* {
id: 4,
name: "hd",
- type: <TypeHighlight>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight>undefined</TypeHighlight>,
+ type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The actual File object instance</>,
}, */
{
id: 5,
name: "id",
- type: <TypeHighlight>{"string | number"}</TypeHighlight>,
- default: <TypeHighlight>undefined</TypeHighlight>,
+ type: (
+ <>
+ {" "}
+ <TypeHighlight np>{"string"}</TypeHighlight> {" | "}
+ <TypeHighlight np>{"number"}</TypeHighlight>
+ </>
+ ),
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: <>The identifier of the file</>,
},
{
id: 6,
name: "info",
- type: <TypeHighlight>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight>false</TypeHighlight>,
+ 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>{"string"}</TypeHighlight>,
- default: <TypeHighlight>undefined</TypeHighlight>,
+ type: <TypeHighlight np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight np>undefined</TypeHighlight>,
description: (
<>
A string representation or web url of the image that will be set to the
@@ -111,33 +117,45 @@ export const FileMosaicAPIPropsRows = [
{
id: 7,
name: "backgroundBlurImage",
- type: <TypeHighlight>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ 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>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight>false</TypeHighlight>,
+ 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>
- {
- '"EN-en" | "ES-es" | "FR-fr" | "IT-it" | "PT-pt" | "RU-ru" | "ZH-cn" | "ZH-hk"'
- }
- </TypeHighlight>
+ <>
+ <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>{'"EN-en"'}</TypeHighlight>,
+ default: <TypeHighlight np>{'"EN-en"'}</TypeHighlight>,
description: <>If true, dark mode colors are used in the component.</>,
},
{
name: "progress",
- type: <TypeHighlight>number</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>number</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
The current percentage of upload progress. This value will have a higher
@@ -147,8 +165,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "xhr",
- type: <TypeHighlight>XMLHttpRequest</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>XMLHttpRequest</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
A reference to the XHR object that allows the upload, progress and abort
@@ -158,8 +176,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onSee",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
A function that return a file object when "see" button is pressed or
@@ -175,8 +193,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onWatch",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `delete` button is clicked or pressed. If
@@ -192,8 +210,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onDelete",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `delete` button is clicked or pressed. If
@@ -209,8 +227,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onAbort",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `abort` button is clicked or pressed during
@@ -227,8 +245,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onCancel",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `cancel` button is clicked or pressed
@@ -245,8 +263,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onDownload",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when `download` button is clicked or pressed. If
@@ -264,8 +282,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onClick",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when user clicks the component
@@ -278,8 +296,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onDoubleClick",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when user double clicks the component
@@ -292,8 +310,8 @@ export const FileMosaicAPIPropsRows = [
},
{
name: "onRightClick",
- type: <TypeHighlight>func</TypeHighlight>,
- default: <TypeHighlight></TypeHighlight>,
+ type: <TypeHighlight np>func</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
description: (
<>
Event that is triggered when user right clicks the component
diff --git a/src/index.js b/src/index.js
index 0c5d282ae6a644a275f16a510c6e5e17420e9ae9..970a84461f094ade71f2fbd911a81717202520e6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -42,7 +42,7 @@ const router = createBrowserRouter([
element: <FileMosaicDemoPage />,
},
{
- path: "/components/file-card",
+ path: "/components/filecard",
element: <FileCardDemoPage />,
},
{
@@ -54,7 +54,7 @@ const router = createBrowserRouter([
element: <FileMosaicApi />,
},
{
- path: "/api/file-card",
+ path: "/api/filecard",
element: <FileCardApi />,
},
{
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index 91bcadae08d4b405bd2bc92c3099dfa347e8e8eb..6c84ea135986028ace0a2de770d70de3c289316a 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -6,6 +6,7 @@ import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
+import TableTemplate from "../../templates/TableTemplate";
import PropsTableApi from "./PropsTableApi";
const rightMenuItems = [
@@ -22,33 +23,36 @@ const rightMenuItems = [
];
const FileMosaicApi = (props) => {
return (
- <MainLayoutPage
- rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
- >
- <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">
- {/* <AlertTitle> Demo </AlertTitle> */}
- For examples and details on the usage of this React component, visit
- the component demo pages:
- <ul>
- <li>
- <a href="/components/file-mosaic">FileMosaic. </a>
- </li>
- </ul>
- </Alert>
- </section>
- <section id="filemosaic-props">
- <SubTitle content="Props" />
+ <React.Fragment>
+ <MainLayoutPage
+ rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
+ >
+ <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>
+ </ul>
+ </Alert>
+ </section>
+ <section id="filemosaic-props">
+ <SubTitle content="Props" />
- <PropsTableApi rows={FileMosaicAPIPropsRows} />
- </section>
- </MainLayoutPage>
+ <PropsTableApi rows={FileMosaicAPIPropsRows} />
+ </section>
+ </MainLayoutPage>
+
+ </React.Fragment>
);
};
export default FileMosaicApi;
diff --git a/src/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
index 3f478268c5516cd38f7980114193718d17dde381..116e54529f8a107c2939af54c4d36050142e31a7 100644
--- a/src/pages/api/PropsTableApi.jsx
+++ b/src/pages/api/PropsTableApi.jsx
@@ -31,13 +31,15 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
export default function PropsTableApi({ rows = [] }) {
return (
<TableContainer component={Paper}>
- <Table sx={{ minWidth: 300 }} aria-label="customized table">
+ <Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
- <StyledTableCell width={"30%"}>Name</StyledTableCell>
- <StyledTableCell align="left" width={"30%"}>Type</StyledTableCell>
+ <StyledTableCell /* width={"30%"} */>Name</StyledTableCell>
+ <StyledTableCell align="left" /* width={"30%"} */>
+ Type
+ </StyledTableCell>
<StyledTableCell align="left">Default</StyledTableCell>
- <StyledTableCell align="left" width={"30%"}>
+ <StyledTableCell align="left" /* width={"30%"} */>
Description
</StyledTableCell>
</TableRow>
@@ -48,11 +50,13 @@ export default function PropsTableApi({ rows = [] }) {
<StyledTableCell
component="th"
scope="row"
- style={{ wordBreak: "break-all" }}
+ style={{
+ wordBreak: row.name.length > 12 ? "break-word" : "normal",
+ }}
>
{row.name}
</StyledTableCell>
- <StyledTableCell align="left" style={{ wordBreak: "break-all" }}>
+ <StyledTableCell align="left" style={{ wordBreak: "break-word" }}>
{row.type}
</StyledTableCell>
<StyledTableCell align="left">{row.default}</StyledTableCell>
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 74292194b85161802516374d11511d48dce11db8..659ff39845a7bbffa51976c61fdeb9fa2e535b88 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -212,7 +212,7 @@ const DropzoneDemoPage = (props) => {
</li>
<li>
<CodeHighlight>
- <a href="/api/file-mosaic">{"<FileMosaic />"}</a>
+ <a href="/api/filemosaic">{"<FileMosaic />"}</a>
</CodeHighlight>
</li>
</ul>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index b4d77a80adb508333d370c634036ecb3e4c662eb..cf31a2eb43fe7bed517bfa73efc15ff445a2f3fc 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -50,7 +50,7 @@ const FileMosaicDemoPage = (props) => {
demonstrated here is not shown in context.{" "}
</Alert>
- <section id="basic-file-mosaic">
+ <section id="basic-filemosaic">
<SubTitle content="Basic FileMosaic" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> supports
@@ -128,7 +128,7 @@ const rightMenuItems = [
{
id: 0,
label: "Basic file mosaic",
- referTo: "/components/file-mosaic/#basic-file-mosaic",
+ referTo: "/components/file-mosaic/#basic-filemosaic",
},
{
id: 1,
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
index cc3a8538a7673e9808310ee747bc1d804d975845..74128adba53a4604aadf8bd9502b1c7fb40171fe 100644
--- a/src/pages/getting-started/GettingStartedPage.jsx
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -74,7 +74,7 @@ const GettingStartedPage = ({ darkModeOn }) => {
The following code snippet demonstrates a simple app that uses
the Files UI <a href="/components/dropzone">
Dropzone
- </a> and <a href="/components/file-mosaic">FileMosaic</a>{" "}
+ </a> and <a href="/components/filemosaic">FileMosaic</a>{" "}
components:
<BasicDropzoneCodeJS />
</DescParagraph>
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
index aa2971a21cac51f28dda52802161a8c16b4d1f73..72c42666c89099c0560f92ee989788e80e7fb22d 100644
--- a/src/pages/usage/UsagePage.jsx
+++ b/src/pages/usage/UsagePage.jsx
@@ -38,7 +38,7 @@ const UsagePage = (props) => {
<SubTitle content="Quick start (Basic exaple)" />
The following code snippet demonstrates a simple app that uses the
Files UI <a href="/components/dropzone">Dropzone</a> and{" "}
- <a href="/components/file-mosaic">FileMosaic</a> components:
+ <a href="/components/filemosaic">FileMosaic</a> components:
</DescParagraph>
<DescParagraph>
In this demo we set dropzone with the minimun props that allows you to
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index c60067e327f70cb0e76661c8a509f1283680af79..05411571c66e80760b34090331ac808028e03874 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -88,7 +88,7 @@ function NavBarTemplate(props) {
window !== undefined ? () => window().document.body : undefined;
return (
- <Box sx={{ display: "flex" }}>
+ <Box sx={{ display: "flex", flexDirection: { xs: "column",sm:"row" } }}>
<CssBaseline />
<AppBar
position="fixed"
@@ -186,7 +186,7 @@ function NavBarTemplate(props) {
component="main"
sx={{
flexGrow: 1,
- p: {xs:1,sm:3},
+ p: { xs: 1, sm: 3 },
width: {
sm: `calc(100% - ${drawerWidth}px)`,
//md: `calc(100% - ${240}px)`,
diff --git a/src/templates/TableTemplate.jsx b/src/templates/TableTemplate.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c1cc183a6c061821c5564ab57dc47bb3be3dc7f6
--- /dev/null
+++ b/src/templates/TableTemplate.jsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+
+function createData(name, calories, fat, carbs, protein) {
+ return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+ createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
+ createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
+ createData("Eclair", 262, 16.0, 24, 6.0),
+ createData("Cupcake", 305, 3.7, 67, 4.3),
+ createData("Gingerbread", 356, 16.0, 49, 3.9)
+];
+
+export default function TableTemplate() {
+ return (
+ <div style={{ display: "flex", flexDirection: "column" }}>
+ <div style={{ display: "flex", flexDirection: "column" }}>
+ <TableContainer component={Paper}>
+ <Table sx={{ minWidth: 650 }} aria-label="simple table">
+ <TableHead>
+ <TableRow>
+ <TableCell>Dessert (100g serving)</TableCell>
+ <TableCell align="right">Calories</TableCell>
+ <TableCell align="right">Fat (g)</TableCell>
+ <TableCell align="right">Carbs (g)</TableCell>
+ <TableCell align="right">Protein (g)</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {rows.map((row) => (
+ <TableRow
+ key={row.name}
+ sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+ >
+ <TableCell component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell align="right">{row.calories}</TableCell>
+ <TableCell align="right">{row.fat}</TableCell>
+ <TableCell align="right">{row.carbs}</TableCell>
+ <TableCell align="right">{row.protein}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ </div>
+ </div>
+ );
+}