diff --git a/package-lock.json b/package-lock.json
index 7ac3bf378302f7213dbff0483b7a2bd2976a2949..948b32348a8fbd8fe709461b786c71546bb17083 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.4.4",
+ "rc-highlight": "^2.5.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.4.4",
- "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.4.4.tgz",
- "integrity": "sha512-6+glGJRfsXPxK199qaVyNnT32IyblTBb9KEFJlYo6pt4+RSWntOn4cT/u0i74uN6uVHbvAqSryMJnZvyOMcCJg==",
+ "version": "2.5.6",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.5.6.tgz",
+ "integrity": "sha512-2ZniAUY00UxiofYp3kcRuafUMDDNQ7Gcmgv24kJpjyvnsezjaLh1lvrdwPx/sktCcp+Xqj2o6SvvhNzbuhu+QQ==",
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
@@ -30064,9 +30064,9 @@
}
},
"rc-highlight": {
- "version": "2.4.4",
- "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.4.4.tgz",
- "integrity": "sha512-6+glGJRfsXPxK199qaVyNnT32IyblTBb9KEFJlYo6pt4+RSWntOn4cT/u0i74uN6uVHbvAqSryMJnZvyOMcCJg==",
+ "version": "2.5.6",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.5.6.tgz",
+ "integrity": "sha512-2ZniAUY00UxiofYp3kcRuafUMDDNQ7Gcmgv24kJpjyvnsezjaLh1lvrdwPx/sktCcp+Xqj2o6SvvhNzbuhu+QQ==",
"requires": {}
},
"react": {
diff --git a/package.json b/package.json
index cc49426412cacc9ab074c692a0a5d130670482e5..f44586799cb2a18badaff5f799b556e4e155f2eb 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.4.4",
+ "rc-highlight": "^2.5.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.4.3",
diff --git a/src/components/DropzoneDemoBasic.jsx b/src/components/DropzoneDemoBasic.jsx
deleted file mode 100644
index d5a7294deebe7319521012dd495e12d48a7a77df..0000000000000000000000000000000000000000
--- a/src/components/DropzoneDemoBasic.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-
-const DropzoneDemoBasic = props =>{
- return(
- <div>
- DropzoneDemoBasic
- </div>
- )
-}
-export default DropzoneDemoBasic;
\ No newline at end of file
diff --git a/src/components/DropzoneDemoRiple.jsx b/src/components/DropzoneDemoRiple.jsx
deleted file mode 100644
index 4120250279351665e2cb8c955b2bf480b0290c1e..0000000000000000000000000000000000000000
--- a/src/components/DropzoneDemoRiple.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-
-const DropzoneDemoRiple = props =>{
- return(
- <div>
-
- </div>
- )
-}
-export default DropzoneDemoRiple;
\ No newline at end of file
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 74e6a1e27af2ed95d45d7c15e7a4686641b3ae12..ee53559ac5b6297f7cdefa5d2d125aeb90c0f978 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -7,12 +7,11 @@ import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
-import { useNavigate } from "react-router";
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
- const { /* items, */ selectedIndex, setSelectedIndex } = props;
+ const { /* items, */ selectedIndex, /* setSelectedIndex */ } = props;
const navigate = useNavigateToTop();
const quickStartItemsIni: MainMenuSideBarItems[] = [
@@ -46,9 +45,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
onClick: () => navigate("/components/filemosaic"),
},
{
- label: "InputButton",
+ label: "FileInputButton",
index: 23,
- onClick: () => navigate("/components/inputbutton"),
+ onClick: () => navigate("/components/fileinputbutton"),
},
{
label: "FileCard",
@@ -80,9 +79,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
onClick: () => navigate("/api/filemosaic"),
},
{
- label: "InputButton",
+ label: "FileInputButton",
index: 33,
- onClick: () => navigate("/api/inputbutton"),
+ onClick: () => navigate("/api/fileinputbutton"),
},
{
label: "FileCard",
@@ -145,7 +144,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
},
];
- const [quickStartItems, setQuickStartItems] =
+ const [quickStartItems, /* setQuickStartItems */] =
React.useState(quickStartItemsIni);
const [regularItems, setRegularItemsIni] = React.useState(
@@ -154,16 +153,16 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
})
);
- const handleClick = () => {
+/* const handleClick = () => {
//setOpen(!open);
- };
+ }; */
- const handleCLickItem = (
+/* const handleCLickItem = (
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
onClick: Function | undefined
): void => {
onClick?.();
- };
+ }; */
//const [selectedIndex, setSelectedIndex] = React.useState(1);
diff --git a/src/components/MainPage/GettingStarted.jsx b/src/components/MainPage/GettingStarted.jsx
index dde679e6d94ef4a250710843285897b8e68d799a..f05ee7ce342ea42b139f1a79f00179a4c71da6da 100644
--- a/src/components/MainPage/GettingStarted.jsx
+++ b/src/components/MainPage/GettingStarted.jsx
@@ -4,7 +4,7 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import CheckIcon from "@mui/icons-material/Check";
import "../../styles/GettingStarted.scss";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import { useNavigate } from "react-router";
+//import { useNavigate } from "react-router";
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
const CodeButton = styled(Button)({
display: "flex",
diff --git a/src/components/MainPage/MainFooter.jsx b/src/components/MainPage/MainFooter.jsx
index e91afb003980bfe0fdda759af31443a40a5261ed..701ec8a6117935232b8f6af95764a0dc35eb3859 100644
--- a/src/components/MainPage/MainFooter.jsx
+++ b/src/components/MainPage/MainFooter.jsx
@@ -1,15 +1,25 @@
import * as React from "react";
import logo_blue from "../../static/files-ui-logo-white.png";
-import logo_white_ext from "../../static/files-ui-logo-text-med-white.png"
+import logo_white_ext from "../../static/files-ui-logo-text-med-white.png";
const MainFooter = (props) => {
return (
<footer className="filesui-footer">
<div
className={"filesui-main-logo-container darkmode"}
- style={{ display:"flex", flexDirection:"row", alignItems:"center" }}
+ style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
>
- <img className="fui-logo-img" src={logo_blue} width="38px" />
- <img className="fui-logo-text-img" src={logo_white_ext} height="14px" />
+ <img
+ className="fui-logo-img"
+ src={logo_blue}
+ width="38px"
+ alt="fui-logo-blue"
+ />
+ <img
+ className="fui-logo-text-img"
+ src={logo_white_ext}
+ height="14px"
+ alt="fui-logo-text-white"
+ />
</div>
<p>{" | "}Copyright © 2023</p>
</footer>
diff --git a/src/components/MainPage/MainNavBar.jsx b/src/components/MainPage/MainNavBar.jsx
index e7142fd119e21d5c0a8765c2b9906ef48c2eb9e5..affa1adbcb748b40c0c04ce078de202cee660c39 100644
--- a/src/components/MainPage/MainNavBar.jsx
+++ b/src/components/MainPage/MainNavBar.jsx
@@ -1,7 +1,7 @@
import * as React from "react";
import DarkModeLightModeButton from "./DarkModeLightModeButton";
import GitHubIcon from "@mui/icons-material/GitHub";
-import { IconButton, Tooltip, Typography } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
//import { useNavigate } from "react-router";
import logo_text_blue from "../../static/files-ui-logo-text-med.png";
import logo_text_blue_dark from "../../static/files-ui-logo-text-med-dark.png";
diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index 9cb19d33eceeec31ad4c863805a031fb6459cc0e..b71ca0b5f38d16f6785cb35e2103bba425ddea5e 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -1,6 +1,4 @@
import * as React from "react";
-import SubTitle from "../../demo-components/sub-title/SubTitle";
-import MainParagraph from "../../paragraph-main/MainParagraph";
import { Stack, Paper } from "@mui/material";
import { FileMosaic } from "../../../files-ui/components/file-mosaic";
import { ExtFile } from "../../../files-ui/core";
diff --git a/src/components/RightMenu/RightMenu.tsx b/src/components/RightMenu/RightMenu.tsx
index 25381152070016ddf13ea9bf0a51f3e0fe150e5b..b3bb31ae0b9868cee7f5197029aa74b5ed7cf3fd 100644
--- a/src/components/RightMenu/RightMenu.tsx
+++ b/src/components/RightMenu/RightMenu.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
import { RightMenuProps } from "./RightMenuProps";
import "./RightMenu.scss";
const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
- const { items, width, baseUrl } = props;
+ const { items, width } = props;
const [selectedItem, setSelectedItem] = React.useState<number>(0);
const handleChangeSelectedItem = (newIndex: number) =>
setSelectedItem(newIndex);
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
index 39da2a60b7dbc7171cd5650bfa8e61a806c89f2a..28923eb0b5f47b14a845030b8394c4ea39006459 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
@@ -1,9 +1,9 @@
import * as React from "react";
-import ShowCode from "../../show-code/ShowCode";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
const AdvancedDropzoneCodeJS = (props) => {
return (
- <ShowCode
+ <ShowDemoCode
codeCompleteJS={completeCodeJS}
codeCompleteTS={completeCodeTS}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
index 93eff5d816c7e36331640e9552f4f4f24b1a7cfc..f4e7c34439fa21f54e00db03e4d1cb7919067a95 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -1,15 +1,23 @@
+import * as React from "react";
import {
Dropzone,
FileMosaic /* FullScreenPreview */,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
} from "../../../files-ui";
import { useEffect, useState } from "react";
import axios from "axios";
-const REMOTE = "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
-const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+const REMOTE =
+ "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+//const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
export default function AdvancedDropzoneDemo() {
const [extFiles, setExtFiles] = useState([]);
- const [imageSrc, setImageSrc] = useState(undefined);
+ const [imageSrc, setImageSrc] = React.useState(undefined);
+ const [videoSrc, setVideoSrc] = React.useState(
+ undefined
+ );
const updateFiles = (incommingFiles) => {
console.log("incomming extFiles", incommingFiles);
@@ -27,15 +35,23 @@ export default function AdvancedDropzoneDemo() {
const handleFinish = (res) => {
console.log("finish", res);
};
+ const handleWatch = (videoSource) => {
+ console.log(
+ "handleWatch videoSource",
+ "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
+ );
+ //setVideoSrc(videoSource);
+ //
+ setVideoSrc(videoSource);
+ // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
+ };
+
useEffect(() => {
checkFiles();
}, []);
async function checkFiles() {
try {
- const res = await axios.get(
- REMOTE +
- "/file"
- );
+ const res = await axios.get(REMOTE + "/file");
console.log("checkFiles", res);
} catch (error) {
console.log("checkFiles error", error);
@@ -49,7 +65,7 @@ export default function AdvancedDropzoneDemo() {
minHeight="195px"
value={extFiles}
maxFiles={3}
- maxFileSize={2998000*20}
+ maxFileSize={2998000 * 20}
label="Drag'n drop files here or click to browse"
accept=".png,image/*, video/*"
uploadConfig={{
@@ -81,6 +97,7 @@ export default function AdvancedDropzoneDemo() {
key={file.id}
onDelete={onDelete}
onSee={handleSee}
+ onWatch={handleWatch}
resultOnTooltip
alwaysActive
preview
@@ -89,11 +106,18 @@ export default function AdvancedDropzoneDemo() {
/>
))}
</Dropzone>
- {/* <FullScreenPreview
- imgSource={imageSrc}
- openImage={imageSrc}
- onClose={(e) => handleSee(undefined)}
- /> */}
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview videoSrc={videoSrc} autoPlay controls />
+ </FullScreen>
</>
);
}
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
index 2880aaf9065f3390e8badc4d39c1d461b61c24d2..045631246e12bc1f8fde1d505820be829ed98c7e 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
@@ -1,16 +1,7 @@
-import { ButtonGroup, Stack, Tooltip, IconButton } from "@mui/material";
-import Button from "@mui/material/Button";
-import CodeIcon from "@mui/icons-material/Code";
-import ViewInArIcon from "@mui/icons-material/ViewInAr";
-import { Highlighter } from "rc-highlight";
-//import { Highlighter as HL } from "../../../rc-highlight";
-import * as React from "react";
-import JSIcon from "../icons/JSIcon";
-import TSIcon from "../icons/TSIcon";
-import ShowCode from "../../show-code/ShowCode";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
const BasicDropzoneCode = ({ splittedOnly = false }) => {
return (
- <ShowCode
+ <ShowDemoCode
splittedOnly={splittedOnly}
codeCompleteJS={completeCodeJS}
codeCompleteTS={completeCodeTS}
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneRiple.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneRiple.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1fed07846fb87a96dacc3dc19b0fdd4e027c05c
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneRiple.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const DemoDropzoneRiple = props =>{
+ return(
+ <div>
+ DemoDropzoneRiple
+ </div>
+ )
+}
+export default DemoDropzoneRiple;
\ No newline at end of file
diff --git a/src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx b/src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx
deleted file mode 100644
index 3407299443cddf0abf93d8c330b9546a05067fe6..0000000000000000000000000000000000000000
--- a/src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from "react";
-import ShowCode from "../../show-code/ShowCode";
-
-const BasicFileMosaicCodeJS = props =>{
- return(
- <ShowCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
- codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
- />
- )
-}
-export default BasicFileMosaicCodeJS;
-
-
-const splittedCodeJS = `<>
- {value ? (
- <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
- ) : (
- <InputButton
- label="Browse File..."
- onChange={updateFiles}
- textDecoration="uppercase"
- />
- )}
- <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
-</>`;
-
-
-const completeCodeJS = `import * as React from "react";
-import { InputButton, FileMosaic } from "@files-ui/react";
-
-const sampleFileProps = {
- id: ":0:",
- size: 28 * 1024 * 1024,
- type: "plain/javascript",
- name: "fileeeeee.jsx",
-};
-
-export default function App() {
- const [value, setValue] = React.useState(undefined);
-
- const updateFiles = (incommingFiles) => {
- console.log("incomming extFiles", incommingFiles);
-
- setValue(incommingFiles[0]);
- };
- const removeFile = () => {
- setValue(undefined);
- };
- return (
- <div style={{display:"flex", gap:"10px"}}>
- {value ? (
- <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
- ) : (
- <InputButton
- label="Browse File..."
- onChange={updateFiles}
- textDecoration="uppercase"
- />
- )}
- <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
- </div>
- );
- };`;
-
-const completeCodeTS = completeCodeJS;
-const splittedCodeTS = splittedCodeJS;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..0e787e93faff0ecc049dcd1ea5907a02674cff9e
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicBasic = (props) => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeJSFileMosaicBasic;
+
+const splittedCodeJS = `<>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ ) : (
+ <FileInputButton onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+</>`;
+
+const completeCodeJS = `import * as React from "react";
+import { InputButton, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "fileeeeee.jsx",
+};
+
+export default function App() {
+ const [value, setValue] = React.useState(undefined);
+
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <div style={{display:"flex", gap:"10px"}}>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ ) : (
+ <FileInputButton onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+ </div>
+ );
+};`;
+
+const completeCodeTS = completeCodeJS;
+const splittedCodeTS = splittedCodeJS;
diff --git a/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx
similarity index 56%
rename from src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
rename to src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx
index 9be89be46f93a381073f9c1a65a6be87998bf447..74e1b70700ace3615e5562288c3214591ca37d21 100644
--- a/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { InputButton,FileMosaic } from "../../../files-ui";
+import { FileInputButton, FileMosaic } from "../../../files-ui";
const sampleFileProps = {
id: ":0:",
@@ -7,14 +7,14 @@ const sampleFileProps = {
type: "plain/javascript",
name: "fileeeeee.jsx",
};
-const BasicFileMosaicDemo = (props) => {
+const DemoFileMosaicBasic = (props) => {
const [value, setValue] = React.useState(undefined);
- const updateFiles = (incommingFiles) => {
+ const updateFile = (incommingFiles) => {
console.log("incomming extFiles", incommingFiles);
-
setValue(incommingFiles[0]);
};
+
const removeFile = () => {
setValue(undefined);
};
@@ -23,14 +23,10 @@ const BasicFileMosaicDemo = (props) => {
{value ? (
<FileMosaic {...value} onDelete={removeFile} alwaysActive info />
) : (
- <InputButton
- label="Browse File..."
- onChange={updateFiles}
- textDecoration="uppercase"
- />
+ <FileInputButton onChange={updateFile} />
)}
- <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
+ <FileMosaic {...sampleFileProps} alwaysActive info />
</>
);
};
-export default BasicFileMosaicDemo;
+export default DemoFileMosaicBasic;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7b4cb30ee65d95bbc25ecf78c37c5e76eed608b
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { FileMosaic, FileInputButton } from "../../../files-ui";
+import { ExtFile } from "../../../files-ui/core";
+interface DemoFileMosaicImgPreviewProps{
+
+}
+const sampleFileProps:ExtFile = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "Thor arrives Wakanda.png",
+ imageUrl:"https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.disneylatino.com%2Fnovedades%2Favengers-la-escena-postcredito-de-thor-que-fue-clave-en-infinity-war&psig=AOvVaw2wijpnp7AqNfVNPszdMkOw&ust=1677372146505000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj_pqy4r_0CFQAAAAAdAAAAABAQ"
+ };
+const DemoFileMosaicImgPreview:React.FC<DemoFileMosaicImgPreviewProps> = (props:DemoFileMosaicImgPreviewProps) =>{
+
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+ const updateFiles = (incommingFiles:ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
+ };
+
+ return(
+ <>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ ) : (
+ <FileInputButton
+ label="Browse File..."
+ onChange={updateFiles}
+ textDecoration="uppercase"
+ accept="image/*"
+ />
+ )}
+ <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
+ </>
+ )
+}
+export default DemoFileMosaicImgPreview;
\ No newline at end of file
diff --git a/src/components/DropzoneMainPage.jsx b/src/components/demo-components/main-page/DropzoneMainPage.jsx
similarity index 85%
rename from src/components/DropzoneMainPage.jsx
rename to src/components/demo-components/main-page/DropzoneMainPage.jsx
index 4e9c316e83dce927472c0afa9c3117ae3eb02efd..c09a7cd0d6f4fdb591a5461487660a55a263fd85 100644
--- a/src/components/DropzoneMainPage.jsx
+++ b/src/components/demo-components/main-page/DropzoneMainPage.jsx
@@ -1,13 +1,13 @@
import * as React from "react";
-import { Dropzone } from "../files-ui/components";
-import { FileMosaic } from "../files-ui/components/file-mosaic";
-import DescParagraph from "./demo-components/desc-paragraph/DescParagraph";
-import SubTitle from "./demo-components/sub-title/SubTitle";
+import { Dropzone } from "../../../files-ui/components";
+import { FileMosaic } from "../../../files-ui/components/file-mosaic";
+import DescParagraph from "../desc-paragraph/DescParagraph";
+import SubTitle from "../sub-title/SubTitle";
const reactFile = {
- id: "acsacasf",
- name: "A very very long title for files-ui.jsx",
+ id: "HCVUNULTVJTCRU",
+ name: "A very very long title for a JSX file.jsx",
type: "text/plain",
size: 280000,
};
diff --git a/src/components/getting-started/Overview.tsx b/src/components/getting-started/Overview.tsx
index 2141b2009133dcf4a7c16db053b35903e124499d..632adef375c895e0d90e88c15e75249a39ae7e97 100644
--- a/src/components/getting-started/Overview.tsx
+++ b/src/components/getting-started/Overview.tsx
@@ -1,44 +1,50 @@
-import { Typography } from "@mui/material";
import * as React from "react";
+import DescParagraph from "../demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../demo-components/sub-title/SubTitle";
import MainParagraph from "../paragraph-main/MainParagraph";
interface OverviewProps {}
const Overview: React.FC<OverviewProps> = (props: OverviewProps) => {
return (
<React.Fragment>
- <h2 style={{ margin: 0 }}>Overview</h2>
+ <SubTitle content="Overview" />
<MainParagraph>
Files UI is a library of UI components and utilities for making File
Uploads with React.
- <br />
- Key features:
</MainParagraph>
- <ul>
- <li>{"✅ File validation: Validate files before uploading."}</li>
- <li>{"🎨 File Image previews: See a thumbnail preview"}</li>
- <li>
- {
- "ðŸ–¼ï¸ Full screen image previews: Add more interacion with a full screen preview of images"
- }
- </li>
- <li>
- {"🎥 Full screen video previews. Play the video before uploading."}
- </li>
- <li>
- {
- "👀 status visualization: validation and upload status is shown on a Tooltip or on Info Layer"
- }
- </li>
- <li>
- {"âœˆï¸ File upload: Upload valid files to a server using Axios lib."}
- </li>
- <li>{"🎠Out of the box design and style."}</li>
- <li>
- {
- "🰠Easy to use. Probably, this is the killer feature you are looking for in a package."
- }
- </li>
- </ul>
+ <MainParagraph>
+ It includes a comprehensive collection of prebuilt components that are
+ ready for use in production right out of the box.
+ </MainParagraph>
+ <SubTitle content="Key features:" />
+ <DescParagraph>
+ <ul>
+ <li>{"✅ File validation: Validate files before uploading."}</li>
+ <li>{"🎨 File Image previews: See a thumbnail preview"}</li>
+ <li>
+ {
+ "ðŸ–¼ï¸ Full screen image previews: Add more interacion with a full screen preview of images"
+ }
+ </li>
+ <li>
+ {"🎥 Full screen video previews. Play the video before uploading."}
+ </li>
+ <li>
+ {
+ "👀 status visualization: validation and upload status is shown on a Tooltip or on Info Layer"
+ }
+ </li>
+ <li>
+ {"âœˆï¸ File upload: Upload valid files to a server using Axios lib."}
+ </li>
+ <li>{"🎠Out of the box design and style."}</li>
+ <li>
+ {
+ "🰠Easy to use. Probably, this is the killer feature you are looking for in a package."
+ }
+ </li>
+ </ul>
+ </DescParagraph>
</React.Fragment>
);
};
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
index d40086de720420efaf2eb3e2509c2c5672a25619..fa6eb44b072ba27e5bff57df09fdc8bbe8c569ce 100644
--- a/src/components/layout-pages/MainLayoutPage.jsx
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -1,4 +1,4 @@
-import { Stack, Box } from "@mui/material";
+import { Stack } from "@mui/material";
import * as React from "react";
import NavBarTemplate from "../../templates/NavBarTemplate";
diff --git a/src/components/show-code/ShowCode.tsx b/src/components/show-demo-code/ShowDemoCode.tsx
similarity index 95%
rename from src/components/show-code/ShowCode.tsx
rename to src/components/show-demo-code/ShowDemoCode.tsx
index 86bc8edc23adfd0785c91c86a9f72a0ec1cf161e..6920473eba486864aff560b7167a20d3ca56a060 100644
--- a/src/components/show-code/ShowCode.tsx
+++ b/src/components/show-demo-code/ShowDemoCode.tsx
@@ -6,7 +6,7 @@ import * as React from "react";
import JSIcon from "../demo-components/icons/JSIcon";
import TSIcon from "../demo-components/icons/TSIcon";
import { Highlighter } from "rc-highlight";
-interface ShowCodeProps {
+interface ShowDemoCodeProps {
codeSandboxJS?: string;
codeSandboxTS?: string;
codeSplittedJS?: string;
@@ -15,7 +15,7 @@ interface ShowCodeProps {
codeCompleteTS?: string;
splittedOnly?:boolean;
}
-const ShowCode: React.FC<ShowCodeProps> = (props: ShowCodeProps) => {
+const ShowDemoCode: React.FC<ShowDemoCodeProps> = (props: ShowDemoCodeProps) => {
const {
codeSandboxJS = "https://codesandbox.io/s/dropzone-ui-basic-3j01v",
codeSandboxTS = "https://codesandbox.io/s/dropzone-ui-basic-3j01v",
@@ -105,4 +105,4 @@ const ShowCode: React.FC<ShowCodeProps> = (props: ShowCodeProps) => {
</React.Fragment>
);
};
-export default ShowCode;
+export default ShowDemoCode;
diff --git a/src/components/util-components/AnchorToTab.tsx b/src/components/util-components/AnchorToTab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a7847b3be3f3b2d7a4f509700fcd1cc7b06e82c1
--- /dev/null
+++ b/src/components/util-components/AnchorToTab.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+type AnchorToTabProps = React.HTMLProps<HTMLAnchorElement>;
+const AnchorToTab: React.FC<AnchorToTabProps> = (props: AnchorToTabProps) => {
+ const { children, href, target, rel, ...rest } = props;
+ return (
+ <a
+ href={href}
+ target={target || "_blank"}
+ rel={rel || "noopener noreferrer"}
+ {...rest}
+ >
+ {children}
+ </a>
+ );
+};
+export default AnchorToTab;
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index 57dc59882e86275e390ee4a9754b7354b8b85127..c9ad7c96658a1b5e85c8de825576b69716f212a5 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -36,8 +36,8 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
//const [isUloading, setIsUploading] = React.useState<boolean>(false);
- const avatarClassNameContainer: string = setAvatarClassNameContainer(variant);
- const avatarClassNameLayerInfo: string = setAvatarClassNameLayerInfo(variant);
+ //const avatarClassNameContainer: string = setAvatarClassNameContainer(variant);
+ //const avatarClassNameLayerInfo: string = setAvatarClassNameLayerInfo(variant);
const handleClick = () => {
// alert("Agregar fotooooooo");
@@ -119,7 +119,7 @@ export default Avatar;
* @param borderRadius the border radius
* @returns a dynamic css sheet
*/
-const makeDynamicAvatarCSSRules = (
+/* const makeDynamicAvatarCSSRules = (
borderRadius: string | undefined
): DynamicSheet => {
const styleSheet: DynamicSheet = DynamiCSS.makeStyleSheet({
@@ -134,4 +134,4 @@ const makeDynamicAvatarCSSRules = (
],
});
return styleSheet;
-};
+}; */
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
index 55e484a54b1ed6a84375b1a6c7096f12d9b49b85..feb04786b1cbeee3e80f0b9346bc016d62ca5ed4 100644
--- a/src/files-ui/components/avatar/AvatarProps.ts
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -31,11 +31,15 @@ export interface AvatarFullProps extends OverridableComponentProps {
smart?: boolean;
}
-export declare type AvatarProps = {
+export declare type AvatarProps =
+ /* {
+ [D in keyof React.HTMLProps<HTMLDivElement>]: React.HTMLProps<HTMLDivElement>[D]
+ } & */
+{
[P in keyof AvatarFullProps]: AvatarFullProps[P];
}
-
+//React.HTMLProps<HTMLDivElement>
export const defaultAvatarProps: AvatarProps =
{
variant: "square",
diff --git a/src/files-ui/components/avatar/useAvatarClassName.ts b/src/files-ui/components/avatar/useAvatarClassName.ts
index c726a921d18833a179b16d7a99596675b5e0d67d..f6f402430dda2adb9fd483eb12fac71d630a5f2a 100644
--- a/src/files-ui/components/avatar/useAvatarClassName.ts
+++ b/src/files-ui/components/avatar/useAvatarClassName.ts
@@ -1,4 +1,4 @@
-import * as React from "react"
+
/* export const useAvatarClassName = (variant?: "square" | "circle"): [string, string] => {
diff --git a/src/files-ui/components/avatar/useAvatarStyle.ts b/src/files-ui/components/avatar/useAvatarStyle.ts
index fd52492a620425aabbcd978bbb37f52da3e35927..c71f22c115a14008b15926399c28c7eaebe624f9 100644
--- a/src/files-ui/components/avatar/useAvatarStyle.ts
+++ b/src/files-ui/components/avatar/useAvatarStyle.ts
@@ -36,8 +36,9 @@ export const useAvatarStyle = (borderRadius: string | undefined): boolean => {
setIdAvatarStyles("");
setStyleInjected(false);
}
+ // eslint-disable-next-line
}, []);
-
+
React.useEffect(() => {
/* if (!borderRadius) {
DynamiCSS.removeStyleSheet(idAvatarStyles);
@@ -62,8 +63,7 @@ export const useAvatarStyle = (borderRadius: string | undefined): boolean => {
console.log("avatar, catch css, modifiying", idAvatarStyles);
DynamiCSS.editStyleSheet(idAvatarStyles, styleSheet.sheetRules || []);
}
-
-
+ // eslint-disable-next-line
}, [borderRadius]);
diff --git a/src/files-ui/components/drop-layer/components/DropLayer.tsx b/src/files-ui/components/drop-layer/components/DropLayer.tsx
index 2967d8870db53cddfac0e4ab1f8249f08eac8f83..687c37d8c96e600312ceb702dd854ca4213e90a5 100644
--- a/src/files-ui/components/drop-layer/components/DropLayer.tsx
+++ b/src/files-ui/components/drop-layer/components/DropLayer.tsx
@@ -5,10 +5,10 @@ const DropLayer: React.FC<DropLayerProps> = (props: DropLayerProps) => {
const { onDrop, onDragLeave, className: classNameLayer, open, style } = props;
//console.log("DropLayer", classNameLayer);
- const onDragEnd = (evt: React.DragEvent<HTMLDivElement>) => {
+ /* const onDragEnd = (evt: React.DragEvent<HTMLDivElement>) => {
//console.log("Drag ended");
onDragLeave?.(evt);
- };
+ }; */
return (
<div
diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
index 4855ce6c80f5407dcf61151837509f16997d27ca..600d0b3fd28f0cfd07d0b0baca38a86c8ea828d0 100644
--- a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
@@ -24,7 +24,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
style: containerStyle,
deleteButton,
uploadButton,
- localization,
+ //localization,
onAbort,
onClean,
onDelete,
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index ecdf8d319deddfcdd262ae41f82adf4d806d7c30..5bdb8c5dd00c34ca3d80e09457f90e60bbeb13ee 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -28,7 +28,7 @@ import { mergeProps } from "../../../overridable";
import InputHidden from "../../../input-hidden/InputHidden";
import {
defaultDrozoneProps,
- DropzoneActionButton,
+ //DropzoneActionButton,
DropzoneActions,
DropzoneProps,
} from "./DropzoneProps";
@@ -45,7 +45,7 @@ import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
-import { print_manager } from "../../../../../utils";
+//import { print_manager } from "../../../../../utils";
const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
const {
@@ -467,6 +467,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
);
setLocalFiles(validatedFuiFileList);
+ // eslint-disable-next-line
}, [maxFileSize, accept, maxFiles, localization]);
/**
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index 86929c08dc421dba6e9ac1ba079bfccdab77d9b7..030c70a65a68f25d0aecdbc71d53da375e31d4a8 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -204,6 +204,8 @@ export interface DropzoneFullProps extends OverridableComponentProps {
footerConfg?: FooterConfig;
}
+
+
export type HeaderItems = {
deleteFiles?: boolean;
cleanFiles?: boolean;
@@ -212,21 +214,15 @@ export type HeaderItems = {
maxFileSize?: boolean;
validFilesCount?: boolean;
}
-
-
export interface HeaderConfigMap extends OverridableComponentProps {
customHeader?: JSX.Element;
}
-
export type HeaderConfig =
{
[P in keyof HeaderConfigMap]: HeaderConfigMap[P]
} & {
[H in keyof HeaderItems]: HeaderItems[H]
}
-
-
-
export interface FooterConfigMap extends OverridableComponentProps {
customFooter?: JSX.Element;
}
@@ -288,10 +284,13 @@ export type DropzoneAdvancedConfig = {
dropzoneLabel: any;
}
+
+
+type DefDivProps = React.HTMLProps<HTMLDivElement>;
+type DivPropsOmitInputButtonFullProps = Omit<DefDivProps, keyof DropzoneFullProps>;
+
export declare type DropzoneProps =
- /* {
- [D in keyof React.HTMLAttributes<HTMLDivElement>]: React.HTMLAttributes<HTMLDivElement>[D]
- } & */
+DivPropsOmitInputButtonFullProps &
{
[D in keyof DropzoneFullProps]: DropzoneFullProps[D]
}
diff --git a/src/files-ui/components/dropzone/useDropzoneClassName.ts b/src/files-ui/components/dropzone/useDropzoneClassName.ts
index 9b77e90d07b72d0090e65f8d0d8265e0b05789d0..9e1dad21605547605eba2dcb991f58d2598b9868 100644
--- a/src/files-ui/components/dropzone/useDropzoneClassName.ts
+++ b/src/files-ui/components/dropzone/useDropzoneClassName.ts
@@ -46,7 +46,7 @@ export default function useDropzoneClassName(
//already a stylesheet associated
DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
}
-
+
finalClassName += ` files-ui-dropzone-extra`;
if (className) {
finalClassName = `${finalClassName} ${className}`;
@@ -61,7 +61,7 @@ export default function useDropzoneClassName(
makeClassName(className, isDragging,
//offset,
color, backgroundColor, minHeight);
-
+ // eslint-disable-next-line
}, [className, isDragging,
// offset,
color, backgroundColor, minHeight]);
diff --git a/src/files-ui/components/input-button/InputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
similarity index 97%
rename from src/files-ui/components/input-button/InputButton.tsx
rename to src/files-ui/components/file-input-button/FileInputButton.tsx
index 5f15a55d1d692477c67dbe093a3c803a407e1908..c97e2df7b6a1c054e551d6c1d013528c4961dd67 100644
--- a/src/files-ui/components/input-button/InputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -26,9 +26,14 @@ import useDropzoneFileListUpdater from "../../hooks/useDropzoneFileUpdater";
import InputHidden from "../input-hidden/InputHidden";
import { MaterialButton } from "../material-button";
import { mergeProps } from "../overridable";
-import { defaultInputButtonProps, InputButtonProps } from "./InputButtonProps";
+import {
+ defaultFileInputButtonProps,
+ FileInputButtonProps,
+} from "./InputButtonProps";
-const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
+const FileInputButton: React.FC<FileInputButtonProps> = (
+ props: FileInputButtonProps
+) => {
const {
accept,
maxFileSize,
@@ -50,7 +55,7 @@ const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
variant,
textDecoration,
resetStyles,
- } = mergeProps(props, defaultInputButtonProps);
+ } = mergeProps(props, defaultFileInputButtonProps);
const {
url,
method,
@@ -354,4 +359,4 @@ const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
</>
);
};
-export default InputButton;
+export default FileInputButton;
diff --git a/src/files-ui/components/input-button/InputButtonProps.ts b/src/files-ui/components/file-input-button/InputButtonProps.ts
similarity index 90%
rename from src/files-ui/components/input-button/InputButtonProps.ts
rename to src/files-ui/components/file-input-button/InputButtonProps.ts
index a7dd4686abed16cc6d8bae4fcd7927575e436228..d56f018a12f9663eddbca1bb382b1326fc73f6d9 100644
--- a/src/files-ui/components/input-button/InputButtonProps.ts
+++ b/src/files-ui/components/file-input-button/InputButtonProps.ts
@@ -1,9 +1,9 @@
import { CustomValidateFileResponse, ExtFile, Localization, UploadConfig, UploadResponse } from "../../core";
import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
import { MaterialButtonProps } from "../material-button/MaterialButtonProps";
-import { OverridableComponentProps } from "../overridable";
+//import { OverridableComponentProps } from "../overridable";
-interface InputButtonFullProps extends OverridableComponentProps {
+interface InputButtonFullProps {
/**
* Probably one of the most important methods (callbacks).
* `onChange()` returns as first parameter an array of `ExtFile` objects,
@@ -126,19 +126,23 @@ interface InputButtonFullProps extends OverridableComponentProps {
actionButtons?: DropzoneActions;
}
+type MaterialButtonPropsOmitInputButtonFullProps = Omit<MaterialButtonProps, keyof InputButtonFullProps>;
-export declare type InputButtonProps =
+
+
+export declare type FileInputButtonProps =
{
[D in keyof InputButtonFullProps]: InputButtonFullProps[D]
} & {
- [D in keyof MaterialButtonProps]: MaterialButtonProps[D]
+ [D in keyof MaterialButtonPropsOmitInputButtonFullProps]: MaterialButtonProps[D]
}
-export const defaultInputButtonProps: InputButtonProps =
+export const defaultFileInputButtonProps: FileInputButtonProps =
{
-
+ textDecoration: "uppercase",
+ label:"browse...",
behaviour: "add",
disabled: false,
uploadConfig: {},
diff --git a/src/files-ui/components/file-input-button/index.ts b/src/files-ui/components/file-input-button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38f94009de3db160e010eb13151f614bca99304e
--- /dev/null
+++ b/src/files-ui/components/file-input-button/index.ts
@@ -0,0 +1,2 @@
+export { default as FileInputButton} from "./FileInputButton";
+export * from "./FileInputButton";
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
index fdc11721839d5576a48fa46e042766c96d0ec01e..a23de8e55543210458fe9a937734a485f5633023 100644
--- a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
+++ b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { fileSizeFormater, shrinkWord } from "../../../../core";
+import { fileSizeFormater } from "../../../../core";
import DownloadHidden from "../../../download-hidden/DownloadHidden";
import { mergeProps } from "../../../overridable";
import { Tooltip } from "../../../tooltip";
@@ -54,7 +54,7 @@ const FileItem: React.FC<FileItemProps> = (props: FileItemProps) => {
onlyImage,
- hd,
+ //hd,
downloadUrl,
@@ -214,7 +214,7 @@ const FileItem: React.FC<FileItemProps> = (props: FileItemProps) => {
//zindex
//create menu component
// evt.preventDefault();
- // onRightClick?.(evt);
+ onRightClick?.(evt);
}
//console.log("FileItem onCancel", onCancel);
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
index 2645bd89361afcd0555390488a4883626b27ffd2..590375f840c3a7667d1e8cc36bb5174d2ff45af1 100644
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
@@ -1,9 +1,13 @@
import * as React from "react";
-import { FileItemLocalizerSelector, Localization, LocalLabels, UPLOADSTATUS } from "../../../../../core";
+import {
+ FileItemLocalizerSelector,
+ Localization,
+ LocalLabels,
+ UPLOADSTATUS,
+} from "../../../../../core";
import { Clear } from "../../../../icons";
import { DynamicLoader, BasePreparingLoader } from "../../../../loader";
import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
import "./FileItemLoader.scss";
interface FileItemLoaderProps {
height?: number;
@@ -93,7 +97,12 @@ const FileItemLoader: React.FC<FileItemLoaderProps> = (
)}
<div className="dui-dynamic-preparing-loader-container">
- <BasePreparingLoader size={width || 60} x={50} y={50} radius={46} />
+ <BasePreparingLoader
+ size={width || 60}
+ x={50}
+ y={50}
+ radius={46}
+ />
</div>
</div>
</React.Fragment>
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
index e84a9125698f893ab222e8a41eab64c3e13c1ebf..d67e0cf95997c0bf1236521173d4bd19600ab1de 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
@@ -51,6 +51,7 @@ const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = (
if (statusHistory.length > 1) {
elevate();
}
+ // eslint-disable-next-line
}, [statusHistory.length]);
const PreparingStatus = () => {
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 cfe3fdc0ede2a9e9867e6c14794e3f1e66ee322f..899f9a6391eea5e8ed9966e5e7de4340744bc660 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
@@ -140,7 +140,11 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
*/
downloadUrl?: string;
}
-
-export type FileMosaicProps = {
- [F in keyof FileMosaicPropsMap]: FileMosaicPropsMap[F]
-}
+//React.HTMLProps<HTMLDivElement>
+export type FileMosaicProps =
+ /* {
+ [D in keyof React.HTMLProps<HTMLDivElement>]: React.HTMLProps<HTMLDivElement>[D]
+ } & */
+ {
+ [F in keyof FileMosaicPropsMap]: FileMosaicPropsMap[F]
+ }
diff --git a/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts b/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts
index ac3d956ff7faeaf9675192770645f5fdeeabc356..39e377167da5bfd8b75f526c19d14f80b1aa3bf6 100644
--- a/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts
+++ b/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts
@@ -25,6 +25,7 @@ export const useIsUploading = (uploadStatus: UPLOADSTATUS | undefined): boolean
uploadStatus === "preparing" || uploadStatus === "uploading"
);
}
+ // eslint-disable-next-line
}, [uploadStatus]);
diff --git a/src/files-ui/components/index.ts b/src/files-ui/components/index.ts
index 010e67fb2b887a5d7ee3998edb6ed181b2a742bb..d7c2c1b7497acd77030797dec177249b834fbea4 100644
--- a/src/files-ui/components/index.ts
+++ b/src/files-ui/components/index.ts
@@ -7,8 +7,8 @@ export * from "./dropzone";
export { FileItem } from "./file-item";
export * from "./file-item";
-export { InputButton } from "./input-button";
-export * from "./input-button";
+export { FileInputButton } from "./file-input-button";
+export * from "./file-input-button";
// internal components
diff --git a/src/files-ui/components/input-button/index.ts b/src/files-ui/components/input-button/index.ts
deleted file mode 100644
index da51a83f2100f45bc6d09c0734292ea5779570a2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/input-button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as InputButton} from "./InputButton";
-export * from "./InputButton";
\ No newline at end of file
diff --git a/src/files-ui/components/material-button/MaterialButton.scss b/src/files-ui/components/material-button/MaterialButton.scss
index e7ff8b85744477ce6b8d39af52743d4d8167dfd8..78c6c8b51d25e2903c494d0658d2ecc52a36b878 100644
--- a/src/files-ui/components/material-button/MaterialButton.scss
+++ b/src/files-ui/components/material-button/MaterialButton.scss
@@ -24,9 +24,9 @@
box-sizing: border-box;
border-radius: 4px;
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-family: inherit;
font-size: 0.875rem;
- font-weight: 500;
+ font-weight: 400;
line-height: 1.75;
letter-spacing: 0.02857em;
}
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
index b54401995e8de5a1e6e59e8e6dcbc6b35270cf82..f75aa9a83ad995a1bc62a65b0471a48e8d176099 100644
--- a/src/files-ui/components/material-button/MaterialButtonProps.ts
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -1,6 +1,6 @@
import { OverridableComponentProps } from "../overridable";
-interface MaterialButtonPropsInterface extends OverridableComponentProps {
+export interface MaterialButtonPropsInterface extends OverridableComponentProps {
/////// BUTTON props
/**
* The URL to link to when the button is clicked.
@@ -34,18 +34,25 @@ interface MaterialButtonPropsInterface extends OverridableComponentProps {
*/
disabled?: boolean;
- resetStyles?:boolean;
+ resetStyles?: boolean;
}
-type DefButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type DefButtonPropsMap = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type DefButtonProps= {
+ [F in keyof DefButtonPropsMap]:
+ DefButtonPropsMap[F]
+}
export type MaterialButtonProps =
{
[F in keyof MaterialButtonPropsInterface]:
MaterialButtonPropsInterface[F]
}
&
- { [K in keyof DefButtonProps]:
- DefButtonProps[K]
- }
+ DefButtonProps
+/* export type MaterialButtonPropsMap = MaterialButtonPropsInterface & DefButtonProps;
+ export type MaterialButtonProps = {
+ [F in keyof MaterialButtonPropsMap]:
+ MaterialButtonPropsMap[F]
+ } */
\ No newline at end of file
diff --git a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
index 7bf9aeb3debbc8053c6e63f862c0fcd8865cd009..9972a552413ef2b6edb1efca1a9f7da3d558d97a 100644
--- a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
+++ b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
@@ -95,7 +95,7 @@ const useMaterialButtonClassName = (
const removeStyle = (styleInjected: boolean, idStyles: string) => {
//console.log("DynamiCSS removing", styleInjected, idStyles);
if (styleInjected) {
- const res = DynamiCSS.removeStyleSheet(idStyles);
+ /* const res = */DynamiCSS.removeStyleSheet(idStyles);
//console.log("DynamiCSS removing res", res);
setStyleInjected(false);
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.scss b/src/files-ui/components/previews/FullScreen/FullScreen.scss
index 727ca5036bb2977b03f2dec504f932f022e0d8f1..981a93bca6c59d934bca08028bdc283736947458 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreen.scss
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.scss
@@ -11,10 +11,11 @@
transform: translate(100%);
transition: transform 0.2s ease-in-out;
margin: 0 !important;
+
&.show-fs {
transform: translate(0);
}
- z-index: 4;
+ z-index: 4000;
box-sizing: border-box;
//padding: 10px 50px;
}
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
index a7761daba907f00097540b43d06efdfeff55b7f7..cdf344a886937a02e3ab7e5f38a697b127e54bd7 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
@@ -59,6 +59,7 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
getSource(src);
}
}
+ // eslint-disable-next-line
}, [src]);
//console.log("ImagePreview", src, source);
diff --git a/src/files-ui/core/file-manager/reconcilation.ts b/src/files-ui/core/file-manager/reconcilation.ts
index f9d939b2ac0d04887f99a7bc17b721090350e867..a8ec2eca769dc5ee16089ffbb68af3e35564cb51 100644
--- a/src/files-ui/core/file-manager/reconcilation.ts
+++ b/src/files-ui/core/file-manager/reconcilation.ts
@@ -26,7 +26,8 @@ export const extFileReconcilation = (
(F) => arrOfExtFiles?.findIndex(I => I.id === F.id) === -1
);
-
+ console.log("reconciliation incommingTemp", incommingTemp);
+
//different sizes not allowed
if (arrOfExtFiles.length !== extFileIncomming.length || extFileIncomming.length === 0) {
diff --git a/src/files-ui/core/ripple/ripple.ts b/src/files-ui/core/ripple/ripple.ts
index 8e7626697b4dd67d8c789dabad0b692e5f053c78..d0a24a2787d55c1b952b53b00f43f84b2653f8c8 100644
--- a/src/files-ui/core/ripple/ripple.ts
+++ b/src/files-ui/core/ripple/ripple.ts
@@ -58,7 +58,7 @@ export function createRippleButton<
buttonAnchorDiv.clientWidth,
buttonAnchorDiv.clientHeight
);
- const radius = diameter / 2;
+ //const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
/* circle.style.left = `${event.clientX - radius
diff --git a/src/files-ui/core/types/ExtFileManager.ts b/src/files-ui/core/types/ExtFileManager.ts
index eb69160f7d48361e14e62450df53eaaed86f69df..ca93798f7ebcd5ef5c0df05f3a4fdb9d20aa9753 100644
--- a/src/files-ui/core/types/ExtFileManager.ts
+++ b/src/files-ui/core/types/ExtFileManager.ts
@@ -1,5 +1,4 @@
import { ExtFileInstance, ExtFile } from "./ExtFile";
-import { UPLOADSTATUS } from "./UploadStatus";
export class ExtFileManager {
private static nextId: number = 0;
@@ -158,6 +157,7 @@ export class ExtFileManager {
console.log("FileManagerLog RESULT resultExtList", resultExtList);
const resultSet = ExtFileManager.setFileList(dropzoneId, resultExtList);
+ console.log("FileManagerLog RESULT resultSet", resultSet);
return resultExtList;
// return ExtFileManager.fileLists[dropzoneId];
diff --git a/src/files-ui/core/upload/addExtraData.upload.ts b/src/files-ui/core/upload/addExtraData.upload.ts
index 40c5135e216abfc12a18dc2de4cba7ca36060da6..ca592499620232795f5c7a6d457579386d9a3eac 100644
--- a/src/files-ui/core/upload/addExtraData.upload.ts
+++ b/src/files-ui/core/upload/addExtraData.upload.ts
@@ -1,4 +1,4 @@
-export default function (
+export default function addExtraData(
formData: FormData,
extraData: Record<string, string> | undefined
) {
diff --git a/src/files-ui/core/upload/upload.ts b/src/files-ui/core/upload/upload.ts
index 8a3c7435ad1a700ebebac56178e762954b068d2b..2c4dfcdb6ea620de35e6ed60677bfd294f6c9949 100644
--- a/src/files-ui/core/upload/upload.ts
+++ b/src/files-ui/core/upload/upload.ts
@@ -1,9 +1,9 @@
-import { ExtFile, ExtFileInstance, Method, UPLOADSTATUS } from "../types";
+import { ExtFile, Method, UPLOADSTATUS } from "../types";
import { ServerResponse, UploadResponse } from "../types/uploadTypes";
import addExtraDataUpload from "./addExtraData.upload";
import addHeaders from "./addheaders.upload";
import { ABORTED_ERROR_RESPONSE, NO_XHR_PROVIDED_ERROR, TIMEOUT_ERROR_RESPONSE, UNEXPECTED_ERROR_RESPONSE } from "./errors.upload";
-import { JsonParseResponse, makeErrorUploadResponse, makeServerResponse, makeSuccessUploadResponse } from "./response.upload";
+import { JsonParseResponse, makeErrorUploadResponse, makeSuccessUploadResponse } from "./response.upload";
/**
diff --git a/src/files-ui/core/upload/utils.upload.ts b/src/files-ui/core/upload/utils.upload.ts
index b117684745a3f62151ad6b5a1005d16b2381a2b6..00f45cd67588c65c97a158749f5f076c4e2881b7 100644
--- a/src/files-ui/core/upload/utils.upload.ts
+++ b/src/files-ui/core/upload/utils.upload.ts
@@ -1,4 +1,4 @@
-import { ExtFile, ExtFileInstance, Method, ServerResponse, UploadResponse, UPLOADSTATUS } from "../types"
+import { ExtFile, ExtFileInstance, ServerResponse, UploadResponse, UPLOADSTATUS } from "../types"
export const unexpectedErrorUploadResult = (extFile: ExtFile): UploadResponse => {
return {
@@ -50,7 +50,7 @@ export const completeUploadResult = (
*/
export const toUploadableExtFileList = (
extFileList: ExtFile[] | ExtFileInstance[]
- ): ExtFile[] => {
+): ExtFile[] => {
if (!extFileList) return [];
return extFileList.map(extFile => {
return { ...extFile, xhr: new XMLHttpRequest() }
diff --git a/src/files-ui/core/utils/fakeupload.utils.ts b/src/files-ui/core/utils/fakeupload.utils.ts
index 61f4616b21727a2aa71e7eb18af6ee72b3e533bb..1131cd6158201cfa112a66ab2a92e82eb5e6f63f 100644
--- a/src/files-ui/core/utils/fakeupload.utils.ts
+++ b/src/files-ui/core/utils/fakeupload.utils.ts
@@ -1,5 +1,5 @@
import { DropzoneLocalizerSelector } from "../localization";
-import { ExtFile, ExtFileInstance, UploadResponse, UPLOADSTATUS } from "../types";
+import { ExtFile, ExtFileInstance, UploadResponse } from "../types";
/**
* Updates a extFile and sets its uploadStatus to "uploading"
diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts
index 3c275a5ceb3dc0add4d98a4cf698559f5498d007..f571daeaccf273cc08cba13b6a0935ccef044d64 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, UPLOADSTATUS, validateExtFileList } from "../core";
+import { CustomValidateFileResponse, ExtFile, ExtFileInstance, ExtFileManager, FileValidatorProps, Localization, validateExtFileList } from "../core";
/**
* Effect for keeping track of changes
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 7c8cd2e58553188c8ccf4e11c4bfe4884443f687..5e8274220a2a0167c24b3aa88c7c877ed7ea553c 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -1,9 +1,8 @@
import * as React from "react";
import "../styles/MainPage.scss";
-import logoLight from "../static/files-ui-logo-blue-wbg.png";
import logo_blue from "../static/files-ui-logo-blue.png";
import logo_blue_dark from "../static/files-ui-logo-blue-dark.png";
-import DropzoneMainPage from "../components/DropzoneMainPage";
+import DropzoneMainPage from "../components/demo-components/main-page/DropzoneMainPage";
import GettingStarted from "../components/MainPage/GettingStarted";
import MainNavBar from "../components/MainPage/MainNavBar";
@@ -31,9 +30,9 @@ const MainPage = ({ darkMode }) => {
<div className="fui-main-left">
<div className={"filesui-main-logo-container"}>
{!darkMode ? (
- <img className="fui-logo-img" src={logo_blue} />
+ <img className="fui-logo-img" src={logo_blue} alt={"files-ui-logo-blue"}/>
) : (
- <img className="fui-logo-img" src={logo_blue_dark} />
+ <img className="fui-logo-img" src={logo_blue_dark} alt={"files-ui-logo-dark"}/>
)}
</div>
@@ -64,29 +63,4 @@ const MainPage = ({ darkMode }) => {
</div>
);
};
-export default MainPage;
-
-{
- /* return (
- <div style={containerMainStyle}>
- <div style={contenedorMosaicStyle}>
- <FileItemMock mosaic />
- </div>
- <div style={{ ...contenedorMosaicStyle, backgroundColor: "#042354" }}>
- <FileItemMock mosaic darkMode={true} />
- </div>
- <div style={contenedorMosaicStyle}>
- <FileItemMock />
- </div>
- <div style={{ ...contenedorMosaicStyle, backgroundColor: "#042354" }}>
- <FileItemMock darkMode={true} />
- </div>
- <div style={contenedorCardStyle}>
- <FileCardMock />
- </div>
- <div style={{ ...contenedorCardStyle, backgroundColor: "#042354" }}>
- <FileCardMock darkMode={true} />
- </div>
- </div>
- );*/
-}
+export default MainPage;
\ No newline at end of file
diff --git a/src/pages/api/DropzoneApi.jsx b/src/pages/api/DropzoneApi.jsx
index bddc013b832098c2fad30717749bd1a963a8ec31..d0e6a9b0ea65fd84113e83a5f85538b8f743c570 100644
--- a/src/pages/api/DropzoneApi.jsx
+++ b/src/pages/api/DropzoneApi.jsx
@@ -1,6 +1,5 @@
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
-import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import MainTitle from "../../components/main-title/MainTitle";
const DropzoneApi = (props) => {
diff --git a/src/pages/api/FileInputButtonApi.jsx b/src/pages/api/FileInputButtonApi.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..54ffeda9a1fd6deae27bd0d5101d09b33d829711
--- /dev/null
+++ b/src/pages/api/FileInputButtonApi.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const FileInputButtonApi = props =>{
+ return(
+ <div>
+ FileInputButtonApi
+ </div>
+ )
+}
+export default FileInputButtonApi;
\ No newline at end of file
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index e625b43c4dd0a448c201f19c95e7f5a348d6613c..1946f0de9be2f2ebc03d0162b7b4120f9c4bfbd6 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -3,7 +3,6 @@ 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 MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
diff --git a/src/pages/api/InputButtonApi.jsx b/src/pages/api/InputButtonApi.jsx
deleted file mode 100644
index 2009b718a214f8e73f3156d405bd1cabf22bbac2..0000000000000000000000000000000000000000
--- a/src/pages/api/InputButtonApi.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-
-const InputButtonApi = props =>{
- return(
- <div>
- InputButtonApi
- </div>
- )
-}
-export default InputButtonApi;
\ No newline at end of file
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index 10e21596180303b3280c6e65dcc5f221c414b5ef..fd482d7c96ba6e80e8b49a4b03cda5bc127aad6c 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/src/pages/demo/AvatarDemoPage.tsx
@@ -9,7 +9,6 @@ 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 TypeHighlight from "../../components/typeHighlight/TypeHighlight";
const rightMenuItems = [
{
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 5fb092256a64ccd38cd88182774ada4d774134d3..fac35340e431cdf13123a0a4a954a0aafb63e561 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Paper, Alert, AlertTitle } from "@mui/material";
+import { Paper, Alert, AlertTitle } from "@mui/material";
import * as React from "react";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
@@ -6,7 +6,6 @@ import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/
import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
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";
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index ffa5c15ef7ab2573995b1180a6f5b8a55d2c0d63..3309c7d19fb3ee66af3018be17a76f895f19f327 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -7,7 +7,7 @@ import Stack from "@mui/material/Stack";
import Alert from "@mui/material/Alert";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
-import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/BasicFileMosaicDemo";
+import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/DemoFileMosaicBasic";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import MainTitle from "../../components/main-title/MainTitle";
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..144f5d4a4ac9a542583b82c3b69d702ace3a73e8
--- /dev/null
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+interface FileInputButtonDemoPageProps{}
+const FileInputButtonDemoPage:React.FC<FileInputButtonDemoPageProps> = (props:FileInputButtonDemoPageProps) =>{
+ return(
+ <div>
+ FileInputButtonDemoPage
+ </div>
+ )
+}
+export default FileInputButtonDemoPage;
\ No newline at end of file
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 51744c14d102ad26fba909cfcd4e54e4c2d9c510..2ad4a6da1256fd32dedd07b70297db1c48e2ef55 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -1,11 +1,10 @@
import Alert from "@mui/material/Alert";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
+import AlertTitle from "@mui/material/AlertTitle";
import * as React from "react";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
-import BasicFileMosaicCodeJS from "../../components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS";
-import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/BasicFileMosaicDemo";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
@@ -13,6 +12,10 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+
+import CodeJSFileMosaicBasic from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic";
+import DemoFileMosaicBasic from "../../components/demo-components/filemosaic-demo/DemoFileMosaicBasic";
const FileMosaicDemoPage = (props) => {
return (
@@ -38,8 +41,13 @@ const FileMosaicDemoPage = (props) => {
<SubTitle content="Basic FileMosaic" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
- information from a <TypeHighlight>File</TypeHighlight> object or from
- individual props.
+ information from a{" "}
+ <TypeHighlight>
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File">
+ File
+ </AnchorToTab>
+ </TypeHighlight>{" "}
+ object or from individual props.
</DescParagraph>
<Paper
@@ -52,27 +60,36 @@ const FileMosaicDemoPage = (props) => {
}}
>
<Stack spacing={10} direction="row" alignItems={"center"}>
- <BasicFileMosaicDemo />
+ <DemoFileMosaicBasic />
</Stack>
</Paper>
- <p></p>
- <BasicFileMosaicCodeJS/>
+
+ <CodeJSFileMosaicBasic />
</section>
+
<section id="image-preview">
<SubTitle content="Image preview" />
<DescParagraph>
By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
- <TypeHighlight>true</TypeHighlight> the component will show a image
- preview using the <CodeHighlight>imageUrl</CodeHighlight>
+ <TypeHighlight>true</TypeHighlight> the component will show an image
+ preview by taking the <CodeHighlight>imageUrl</CodeHighlight>
prop or by reading the <TypeHighlight>File</TypeHighlight> object if
- given (file prop).
+ given.
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
{/* <BasicDemoDropzone /> */}
</Paper>
- <p></p>
+
{/* <BasicDropzoneCodeJS /> */}
+ <Alert severity="info">
+ <AlertTitle> FileInputButton </AlertTitle>
+ For completeness, some of these examples include{" "}
+ <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
+ component for allowing the user to select files. For further
+ information of this component check out the{" "}
+ <a href="/components/fileinputbutton">FileInputButton</a> page.
+ </Alert>
</section>
<section id="validation">
<SubTitle content="Validation" />
@@ -101,46 +118,46 @@ const rightMenuItems = [
{
id: 0,
label: "Basic file mosaic",
- referTo: "/components/file-mosaic#basic-filemosaic",
+ referTo: "/components/filemosaic#basic-filemosaic",
},
{
id: 1,
label: "Image Preview",
- referTo: "/components/file-mosaic#file-mosaic-image-preview",
+ referTo: "/components/filemosaic#image-preview",
},
{
id: 2,
label: "Validation",
- referTo: "/components/file-mosaic#file-mosaic-validation",
+ referTo: "/components/filemosaic#validation",
},
{
id: 3,
label: "Uploading",
- referTo: "/components/file-mosaic#file-mosaic-uploading",
+ referTo: "/components/filemosaic#uploading",
},
{
id: 4,
label: "Localization",
- referTo: "/components/file-mosaic#file-mosaic-localization",
+ referTo: "/components/filemosaic#localization",
},
{
id: 5,
label: "Previews",
- referTo: "/components/file-mosaic#file-mosaic-previews",
+ referTo: "/components/filemosaic#previews",
},
{
id: 6,
label: "Actions",
- referTo: "/components/file-mosaic#actions",
+ referTo: "/components/filemosaic#actions",
},
{
id: 7,
label: "Default previews",
- referTo: "/components/file-mosaic#default-previews",
+ referTo: "/components/filemosaic#default-previews",
},
{
id: 8,
label: "Dark mode",
- referTo: "/components/file-mosaic#dark-mode",
+ referTo: "/components/filemosaic#dark-mode",
},
];
diff --git a/src/pages/demo/InputButtonDemoPage.tsx b/src/pages/demo/InputButtonDemoPage.tsx
deleted file mode 100644
index bf808d2d07f806874d0fb1172ae7e457e3cdbb81..0000000000000000000000000000000000000000
--- a/src/pages/demo/InputButtonDemoPage.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-interface InputButtonDemoPageProps{}
-const InputButtonDemoPage:React.FC<InputButtonDemoPageProps> = (props:InputButtonDemoPageProps) =>{
- return(
- <div>
- InputButtonDemoPage
- </div>
- )
-}
-export default InputButtonDemoPage;
\ No newline at end of file
diff --git a/src/pages/error-page/ErrorPage.tsx b/src/pages/error-page/ErrorPage.tsx
index 7365d50240dbabe0a61c4c2593aebc0335b56b2b..15b4ba5d0c19fdbf9d3592641ef0b4fbd45bb9a8 100644
--- a/src/pages/error-page/ErrorPage.tsx
+++ b/src/pages/error-page/ErrorPage.tsx
@@ -1,13 +1,10 @@
import * as React from "react";
import { ErrorPageProps } from "./ErrorPageProps";
import "./ErrorPage.scss";
-import { Box, Button, Stack } from "@mui/material";
-//import { useNavigateToTop } from "../../hooks/useNavigateToTop";
+import { Box, Button } from "@mui/material";
import MainTitle from "../../components/main-title/MainTitle";
-import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
-import { useNavigateGoBack } from "../../hooks/useNavigateGoBack";
import { useNavigate } from "react-router-dom";
const ErrorPage: React.FC<ErrorPageProps> = (props: ErrorPageProps) => {
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
index 65168938558a1f9e149fdb84016d5e0a70df5199..6a545ba15cf9e6d53f0e965dca981224b8a6454a 100644
--- a/src/pages/getting-started/GettingStartedPage.jsx
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -1,18 +1,16 @@
-import { Box, Stack, Typography } from "@mui/material";
import * as React from "react";
+
+import { Stack } from "@mui/material";
import Overview from "../../components/getting-started/Overview";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
-import NavBarTemplate from "../../templates/NavBarTemplate";
import logoLight from "../../static/files-ui-logo-blue-wbg.png";
import logo_blue from "../../static/files-ui-logo-blue.png";
import "../../styles/GettingStartedPage.scss";
import InstallationNPM from "../../components/getting-started/InstallationNPM";
import InstallationYarn from "../../components/getting-started/InstallationYarn";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
-import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
-import Paper from "@mui/material/Paper";
-import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -26,6 +24,7 @@ const GettingStartedPage = ({ darkModeOn }) => {
<img
className="fui-logo-img-getting-started"
src={!darkModeOn ? logo_blue : logoLight}
+ alt="files-ui-logo"
/>
<MainTitle>Files UI - Getting started!</MainTitle>
</Stack>
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
index ba05fd94df48edba13293bcb787659bc9a6dbf8b..33ace5eeef67d58c1792373ca2cfbeb59c6a775b 100644
--- a/src/pages/usage/UsagePage.jsx
+++ b/src/pages/usage/UsagePage.jsx
@@ -1,19 +1,13 @@
-import Box from "@mui/material/Box";
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
-import NavBarTemplate from "../../templates/NavBarTemplate";
-import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
import Paper from "@mui/material/Paper";
import AdvancedDropzoneDemo from "../../components/demo-components/dropzone-demo/AdvancedDropzoneDemo";
-import { Alert, AlertTitle } from "@mui/material";
-//import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
-import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -57,8 +51,8 @@ const UsagePage = (props) => {
</Paper>{" "} */}
<DescParagraph>
You can play around with this code in the interactive Code Sandbox
- demo below. Try adding the <CodeHighlight>accept</CodeHighlight> prop to
- the Dropzone to see the changes:
+ demo below. Try adding the <CodeHighlight>accept</CodeHighlight>{" "}
+ prop to the Dropzone to see the changes:
</DescParagraph>
{/* <iframe
title="codesandbox"
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index eaf9743be190805a534e597fa50cebcd328234e8..d5ee59b3c25d5022600756a9d4c4e8bde7d61118 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -16,10 +16,10 @@ import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import MainLayoutPage from "../components/layout-pages/MainLayoutPage";
import FileReaderPage from "../pages/utilities/FileReaderPage";
import FileUploaderPage from "../pages/utilities/FileUploaderPage";
-import InputButtonDemoPage from "../pages/demo/InputButtonDemoPage";
import AvatarDemoPage from "../pages/demo/AvatarDemoPage";
-import InputButtonApi from "../pages/api/InputButtonApi";
+import FileInputButtonApi from "../pages/api/FileInputButtonApi";
import AvatarApi from "../pages/api/AvatarApi";
+import FileInputButtonDemoPage from "../pages/demo/FileInputButtonDemoPage";
const router = createBrowserRouter([
{
@@ -56,8 +56,8 @@ const router = createBrowserRouter([
element: <DropzoneDemoPage />,
},
{
- path: "/components/inputbutton",
- element: <InputButtonDemoPage />,
+ path: "/components/fileinputbutton",
+ element: <FileInputButtonDemoPage />,
},
{
path: "/components/filemosaic",
@@ -82,8 +82,8 @@ const router = createBrowserRouter([
element: <AvatarApi />,
},
{
- path: "/api/inputbutton",
- element: <InputButtonApi />,
+ path: "/api/fileinputbutton",
+ element: <FileInputButtonApi />,
},
{
path: "/api/dropzone",
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index 6886ff93d4d37190da6c1d5c86ea39d2419848ad..5df2371bbd567958ff1c7d577982fcf5e175fc70 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -1,17 +1,9 @@
import * as React from "react";
-import PropTypes from "prop-types";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
@@ -21,11 +13,6 @@ import { IconButton, Stack, styled, Tooltip } from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
import DarkModeLightModeButton from "../components/MainPage/DarkModeLightModeButton";
import MainMenuSideBar from "../components/MainMenu/MainMenuSideBar";
-import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
-import InputIcon from "@mui/icons-material/Input";
-import FileOpenIcon from "@mui/icons-material/FileOpen";
-import { useNavigate } from "react-router";
-import { useNavigateToTop } from "../hooks/useNavigateToTop";
import logo_text_blue from "../static/files-ui-logo-text-med.png";
import logo_text_blue_dark from "../static/files-ui-logo-text-med-dark.png";
@@ -40,7 +27,7 @@ const StyledImage = styled("img")(({ theme }) => ({
},
}));
function NavBarTemplate(props) {
- const navigate = useNavigateToTop();
+ //const navigate = useNavigateToTop();
const { window, children, darkModeOn, handleDarkMode, selectedIndex } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);