From 5c39492c2556fe567eefaa184f43f0fd0e14ff33 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sat, 25 Feb 2023 23:42:19 -0500
Subject: [PATCH] [REF]: Remove most of the unused code.
---
package-lock.json | 14 ++--
package.json | 2 +-
src/components/DropzoneDemoBasic.jsx | 10 ---
src/components/DropzoneDemoRiple.jsx | 10 ---
src/components/MainMenu/MainMenuSideBar.tsx | 21 +++---
src/components/MainPage/GettingStarted.jsx | 2 +-
src/components/MainPage/MainFooter.jsx | 18 +++--
src/components/MainPage/MainNavBar.jsx | 2 +-
.../FileMosaicImageVideoPreviews.tsx | 2 -
src/components/RightMenu/RightMenu.tsx | 2 +-
.../dropzone-demo/AdvancedDropzoneCodeJS.jsx | 4 +-
.../dropzone-demo/AdvancedDropzoneDemo.jsx | 50 +++++++++----
.../dropzone-demo/BasicDropzoneCodeJS.jsx | 13 +---
.../dropzone-demo/DemoDropzoneRiple.jsx | 10 +++
.../filemosaic-demo/BasicFileMosaicCodeJS.jsx | 71 -------------------
.../filemosaic-demo/CodeJSFileMosaicBasic.jsx | 60 ++++++++++++++++
...MosaicDemo.jsx => DemoFileMosaicBasic.jsx} | 18 ++---
.../DemoFileMosaicImgPreview.tsx | 43 +++++++++++
.../main-page}/DropzoneMainPage.jsx | 12 ++--
src/components/getting-started/Overview.tsx | 66 +++++++++--------
.../layout-pages/MainLayoutPage.jsx | 2 +-
.../ShowDemoCode.tsx} | 6 +-
.../util-components/AnchorToTab.tsx | 16 +++++
src/files-ui/components/avatar/Avatar.tsx | 8 +--
src/files-ui/components/avatar/AvatarProps.ts | 8 ++-
.../components/avatar/useAvatarClassName.ts | 2 +-
.../components/avatar/useAvatarStyle.ts | 6 +-
.../drop-layer/components/DropLayer.tsx | 4 +-
.../DropzoneButtons/DropzoneButtons.tsx | 2 +-
.../dropzone/components/dropzone/Dropzone.tsx | 5 +-
.../components/dropzone/DropzoneProps.ts | 17 +++--
.../dropzone/useDropzoneClassName.ts | 4 +-
.../FileInputButton.tsx} | 13 ++--
.../InputButtonProps.ts | 16 +++--
.../components/file-input-button/index.ts | 2 +
.../components/FileItem/FileItem.tsx | 6 +-
.../FileItemLoader/FileItemLoader.tsx | 15 +++-
.../FileMosaicUploadLayer.tsx | 1 +
.../components/file-mosaic/FileMosaicProps.ts | 12 ++--
.../file-mosaic/hooks/useIsUploading.ts | 1 +
src/files-ui/components/index.ts | 4 +-
src/files-ui/components/input-button/index.ts | 2 -
.../material-button/MaterialButton.scss | 4 +-
.../material-button/MaterialButtonProps.ts | 19 +++--
.../hooks/useMaterialButtonClassName.ts | 2 +-
.../previews/FullScreen/FullScreen.scss | 3 +-
.../previews/ImagePreview/ImagePreview.tsx | 1 +
.../core/file-manager/reconcilation.ts | 3 +-
src/files-ui/core/ripple/ripple.ts | 2 +-
src/files-ui/core/types/ExtFileManager.ts | 2 +-
.../core/upload/addExtraData.upload.ts | 2 +-
src/files-ui/core/upload/upload.ts | 4 +-
src/files-ui/core/upload/utils.upload.ts | 4 +-
src/files-ui/core/utils/fakeupload.utils.ts | 2 +-
src/files-ui/hooks/useDropzoneFileUpdater.ts | 2 +-
src/pages/MainPage.jsx | 34 ++-------
src/pages/api/DropzoneApi.jsx | 1 -
src/pages/api/FileInputButtonApi.jsx | 10 +++
src/pages/api/FileMosaicApi.jsx | 1 -
src/pages/api/InputButtonApi.jsx | 10 ---
src/pages/demo/AvatarDemoPage.tsx | 1 -
src/pages/demo/DropzoneDemoPage.jsx | 3 +-
src/pages/demo/FileCardDemoPage.jsx | 2 +-
src/pages/demo/FileInputButtonDemoPage.tsx | 10 +++
src/pages/demo/FileMosaicDemoPage.jsx | 57 +++++++++------
src/pages/demo/InputButtonDemoPage.tsx | 10 ---
src/pages/error-page/ErrorPage.tsx | 5 +-
.../getting-started/GettingStartedPage.jsx | 9 ++-
src/pages/usage/UsagePage.jsx | 10 +--
src/routes/MainRouter.jsx | 12 ++--
src/templates/NavBarTemplate.jsx | 15 +---
71 files changed, 443 insertions(+), 379 deletions(-)
delete mode 100644 src/components/DropzoneDemoBasic.jsx
delete mode 100644 src/components/DropzoneDemoRiple.jsx
create mode 100644 src/components/demo-components/dropzone-demo/DemoDropzoneRiple.jsx
delete mode 100644 src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx
create mode 100644 src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx
rename src/components/demo-components/filemosaic-demo/{BasicFileMosaicDemo.jsx => DemoFileMosaicBasic.jsx} (56%)
create mode 100644 src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
rename src/components/{ => demo-components/main-page}/DropzoneMainPage.jsx (85%)
rename src/components/{show-code/ShowCode.tsx => show-demo-code/ShowDemoCode.tsx} (95%)
create mode 100644 src/components/util-components/AnchorToTab.tsx
rename src/files-ui/components/{input-button/InputButton.tsx => file-input-button/FileInputButton.tsx} (97%)
rename src/files-ui/components/{input-button => file-input-button}/InputButtonProps.ts (90%)
create mode 100644 src/files-ui/components/file-input-button/index.ts
delete mode 100644 src/files-ui/components/input-button/index.ts
create mode 100644 src/pages/api/FileInputButtonApi.jsx
delete mode 100644 src/pages/api/InputButtonApi.jsx
create mode 100644 src/pages/demo/FileInputButtonDemoPage.tsx
delete mode 100644 src/pages/demo/InputButtonDemoPage.tsx
diff --git a/package-lock.json b/package-lock.json
index 7ac3bf3..948b323 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 cc49426..f445867 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 d5a7294..0000000
--- 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 4120250..0000000
--- 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 74e6a1e..ee53559 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 dde679e..f05ee7c 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 e91afb0..701ec8a 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 e7142fd..affa1ad 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 9cb19d3..b71ca0b 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 2538115..b3bb31a 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 39da2a6..28923eb 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 93eff5d..f4e7c34 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 2880aaf..0456312 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 0000000..a1fed07
--- /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 3407299..0000000
--- 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 0000000..0e787e9
--- /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 9be89be..74e1b70 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 0000000..b7b4cb3
--- /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 4e9c316..c09a7cd 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 2141b20..632adef 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 d40086d..fa6eb44 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 86bc8ed..6920473 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 0000000..a7847b3
--- /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 57dc598..c9ad7c9 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 55e484a..feb0478 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 c726a92..f6f4024 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 fd52492..c71f22c 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 2967d88..687c37d 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 4855ce6..600d0b3 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 ecdf8d3..5bdb8c5 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 86929c0..030c70a 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 9b77e90..9e1dad2 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 5f15a55..c97e2df 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 a7dd468..d56f018 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 0000000..38f9400
--- /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 fdc1172..a23de8e 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 2645bd8..590375f 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 e84a912..d67e0cf 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 cfe3fdc..899f9a6 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 ac3d956..39e3771 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 010e67f..d7c2c1b 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 da51a83..0000000
--- 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 e7ff8b8..78c6c8b 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 b544019..f75aa9a 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 7bf9aeb..9972a55 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 727ca50..981a93b 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 a7761da..cdf344a 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 f9d939b..a8ec2ec 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 8e76266..d0a24a2 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 eb69160..ca93798 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 40c5135..ca59249 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 8a3c743..2c4dfcd 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 b117684..00f45cd 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 61f4616..1131cd6 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 3c275a5..f571dae 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 7c8cd2e..5e82742 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 bddc013..d0e6a9b 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 0000000..54ffeda
--- /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 e625b43..1946f0d 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 2009b71..0000000
--- 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 10e2159..fd482d7 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 5fb0922..fac3534 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 ffa5c15..3309c7d 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 0000000..144f5d4
--- /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 51744c1..2ad4a6d 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 bf808d2..0000000
--- 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 7365d50..15b4ba5 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 6516893..6a545ba 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 ba05fd9..33ace5e 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 eaf9743..d5ee59b 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 6886ff9..5df2371 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);
--
GitLab