diff --git a/package-lock.json b/package-lock.json
index 7a264d8c698c36cff0f3e5b6d1cf13b0fb51f473..7ac3bf378302f7213dbff0483b7a2bd2976a2949 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
"@types/react": "^18.0.25",
"axios": "^1.3.1",
"node-sass": "^7.0.3",
- "rc-highlight": "^2.3.6",
+ "rc-highlight": "^2.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.4.3",
@@ -15537,9 +15537,9 @@
}
},
"node_modules/rc-highlight": {
- "version": "2.3.6",
- "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.6.tgz",
- "integrity": "sha512-5TEqMz3IlqlMUEnIho+mfu9cyy30ACtnb/pR73TpYN1/16zF4vITiOcFwOQoUAUPEa00QwUBtjSvVnu/+z9CEw==",
+ "version": "2.4.4",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.4.4.tgz",
+ "integrity": "sha512-6+glGJRfsXPxK199qaVyNnT32IyblTBb9KEFJlYo6pt4+RSWntOn4cT/u0i74uN6uVHbvAqSryMJnZvyOMcCJg==",
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
@@ -30064,9 +30064,9 @@
}
},
"rc-highlight": {
- "version": "2.3.6",
- "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.6.tgz",
- "integrity": "sha512-5TEqMz3IlqlMUEnIho+mfu9cyy30ACtnb/pR73TpYN1/16zF4vITiOcFwOQoUAUPEa00QwUBtjSvVnu/+z9CEw==",
+ "version": "2.4.4",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.4.4.tgz",
+ "integrity": "sha512-6+glGJRfsXPxK199qaVyNnT32IyblTBb9KEFJlYo6pt4+RSWntOn4cT/u0i74uN6uVHbvAqSryMJnZvyOMcCJg==",
"requires": {}
},
"react": {
diff --git a/package.json b/package.json
index f7c2518132a97793313071e81be67189bfffbf94..cc49426412cacc9ab074c692a0a5d130670482e5 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"@types/react": "^18.0.25",
"axios": "^1.3.1",
"node-sass": "^7.0.3",
- "rc-highlight": "^2.3.6",
+ "rc-highlight": "^2.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.4.3",
diff --git a/src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx b/src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3407299443cddf0abf93d8c330b9546a05067fe6
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS.jsx
@@ -0,0 +1,71 @@
+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/BasicFileMosaicDemo.jsx b/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
index 4c9f7adaa3ede79c349cad7dd81ee46d1efc7bb8..9be89be46f93a381073f9c1a65a6be87998bf447 100644
--- a/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
+++ b/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
@@ -1,49 +1,35 @@
import * as React from "react";
-import { InputButton } from "../../../files-ui";
-import { FileMosaic } from "../../../files-ui/components/file-mosaic";
-const sampleFile = {
+import { InputButton,FileMosaic } from "../../../files-ui";
+
+const sampleFileProps = {
id: ":0:",
- name: "",
size: 28 * 1024 * 1024,
type: "plain/javascript",
name: "fileeeeee.jsx",
};
const BasicFileMosaicDemo = (props) => {
- const [value, setValue] = React.useState([]);
+ const [value, setValue] = React.useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming extFiles", incommingFiles);
- setValue(incommingFiles);
+
+ setValue(incommingFiles[0]);
};
const removeFile = () => {
- setValue([]);
+ setValue(undefined);
};
return (
<>
- {value.length > 0 ? (
- <FileMosaic
- key={sampleFile.id + ":"}
- {...value[0]}
- onDelete={removeFile}
- info
- alwaysActive
- />
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
) : (
- <>
- <InputButton
- label="Browse Files..."
- onChange={updateFiles}
- textDecoration="uppercase"
- />
- </>
+ <InputButton
+ label="Browse File..."
+ onChange={updateFiles}
+ textDecoration="uppercase"
+ />
)}
- <FileMosaic
- key={sampleFile.id}
- {...sampleFile}
- onDelete={() => {}}
- info
- alwaysActive
- />
+ <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
</>
);
};
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index cff97b584dd152da03654955e246d154ed5fbf3c..51744c14d102ad26fba909cfcd4e54e4c2d9c510 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -4,6 +4,7 @@ import Stack from "@mui/material/Stack";
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";
@@ -37,7 +38,7 @@ const FileMosaicDemoPage = (props) => {
<SubTitle content="Basic FileMosaic" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
- information from <TypeHighlight>File</TypeHighlight> object or
+ information from a <TypeHighlight>File</TypeHighlight> object or from
individual props.
</DescParagraph>
@@ -50,12 +51,12 @@ const FileMosaicDemoPage = (props) => {
justifyContent: "center",
}}
>
- <Stack spacing={2} direction="row" alignItems={"center"}>
+ <Stack spacing={10} direction="row" alignItems={"center"}>
<BasicFileMosaicDemo />
</Stack>
</Paper>
<p></p>
- {/* <BasicDropzoneCodeJS /> */}
+ <BasicFileMosaicCodeJS/>
</section>
<section id="image-preview">
<SubTitle content="Image preview" />