Skip to content
Snippets Groups Projects
Commit 15929b99 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[FEAT]: Add Demo components and code for ripple and disabled sections

parent 1921d926
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 151 additions and 142 deletions
src/components/demo-components/dropzone-demo/CodeDemoDropzoneDisabled.tsx 0 → 100644
+ 47
− 0
View file @ 15929b99
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
const CodeDemoDropzoneDisabled = ({ splittedOnly = false }) => {
return (
<ShowDemoCode
splittedOnly={splittedOnly}
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 CodeDemoDropzoneDisabled;
const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
<Dropzone style={{ width: "300px" }} disabled>
{"Dropzone is disabled"}
{/**Files */}
</Dropzone>`;
const splittedCodeTS = splittedCodeJS;
const completeCodeJS = `import * as React from "react";
import { Dropzone } from "@files-ui/react";
const DemoDropzoneDisabled = () => {
return (
<div
style={{
display: "flex",
justifyContent: "space-evenly",
gap: "40px",
flexWrap: "wrap",
}}
>
<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
<Dropzone style={{ width: "300px" }} disabled>
{"Dropzone is disabled"}
{/**Files */}
</Dropzone>
</div>
);
};
export default DemoDropzoneDisabled;`;
const completeCodeTS = completeCodeJS;
src/components/demo-components/dropzone-demo/CodeDemoDropzoneRipple.jsx 0 → 100644
+ 45
− 0
View file @ 15929b99
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
const CodeDemoDropzoneRipple = ({ splittedOnly = false }) => {
return (
<ShowDemoCode
splittedOnly={splittedOnly}
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 CodeDemoDropzoneRipple;
const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{"ripple enabled"}</Dropzone>
<Dropzone style={{ width: "300px" }} disableRipple>
{"ripple disabled"}
</Dropzone>`;
const splittedCodeTS = splittedCodeJS;
const completeCodeJS = `import * as React from "react";
import { Dropzone } from "@files-ui/react";
const DemoDropzoneRipple = () => {
return (
<div
style={{
display: "flex",
justifyContent: "space-evenly",
gap: "40px",
flexWrap: "wrap",
}}
>
<Dropzone style={{ width: "300px" }}>{"ripple enabled"}</Dropzone>
<Dropzone style={{ width: "300px" }} disableRipple>
{"ripple disabled"}
</Dropzone>
</div>
);
};
export default DemoDropzoneRipple;`;
const completeCodeTS = completeCodeJS;
src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
+ 12
− 42
View file @ 15929b99
...@@ -41,18 +41,9 @@ const splittedCodeTS = `<Dropzone color="#6200EE">{/** files */}</Dropzone> ...@@ -41,18 +41,9 @@ const splittedCodeTS = `<Dropzone color="#6200EE">{/** files */}</Dropzone>
{/** files */} {/** files */}
</Dropzone>`; </Dropzone>`;
const completeCodeJS = `import * as React from "react"; const completeCodeJS = `import * as React from "react";
import { Dropzone, FileMosaic } from "@files-ui/react"; import { Dropzone } from "@files-ui/react";
export default function App() { export default function App() {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
setFiles(incommingFiles);
//even your own upload implementation
};
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
return ( return (
<div <div
style={{ style={{
...@@ -60,6 +51,7 @@ export default function App() { ...@@ -60,6 +51,7 @@ export default function App() {
justifyContent: "space-evenly", justifyContent: "space-evenly",
gap: "20px", gap: "20px",
flexWrap: "wrap", flexWrap: "wrap",
alignItems:"flex-start"
}} }}
> >
<Dropzone <Dropzone
...@@ -68,34 +60,21 @@ export default function App() { ...@@ -68,34 +60,21 @@ export default function App() {
value={files} value={files}
color="#6200EE" color="#6200EE"
> >
{files.length > 0 && {/** Files*/}
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
onChange={updateFiles}
value={files}
minHeight="120px" minHeight="120px"
header={false} header={false}
footer={false} footer={false}
> >
{files.length > 0 && {/** Files*/}
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
onChange={updateFiles} background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
value={files}
background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
> >
{files.length > 0 && {/** Files*/}
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
</div> </div>
); );
...@@ -121,31 +100,22 @@ export default function App() { ...@@ -121,31 +100,22 @@ export default function App() {
justifyContent: "space-evenly", justifyContent: "space-evenly",
gap: "20px", gap: "20px",
flexWrap: "wrap", flexWrap: "wrap",
alignItems:"flex-start"
}} }}
> >
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
onChange={updateFiles} color="#6200EE"
value={files}
color="#6200EE"
> >
{files.length > 0 && {/** Files*/}
files.map((file: ExtFile) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
onChange={updateFiles}
value={files}
minHeight="120px" minHeight="120px"
header={false} header={false}
footer={false} footer={false}
> >
{files.length > 0 && {/** Files*/}
files.map((file: ExtFile) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
......
src/components/demo-components/dropzone-demo/DemoDropzoneDisabled.jsx
+ 14
− 28
View file @ 15929b99
import * as React from "react"; import * as React from "react";
import { Dropzone, FileMosaic } from "../../../files-ui"; import { Dropzone } from "../../../files-ui";
const DemoDropzoneDisabled = (props) => { const DemoDropzoneDisabled = () => {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
setFiles(incommingFiles);
//even your own upload implementation
};
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
return ( return (
<div style={{ display: "flex" }}> <div
<Dropzone style={{ width: "300px" }} onChange={updateFiles} value={files}> style={{
{files.length > 0 && display: "flex",
files.map((file) => ( justifyContent: "space-evenly",
<FileMosaic key={file.id} {...file} onDelete={removeFile} info /> gap: "40px",
))} flexWrap: "wrap",
</Dropzone> }}
<Dropzone >
style={{ width: "300px" }} <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
onChange={updateFiles} <Dropzone style={{ width: "300px" }} disabled>
value={files} {"Dropzone is disabled"}
disableRipple {/**Files */}
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
</div> </div>
); );
......
src/components/demo-components/dropzone-demo/DemoDropzoneRipple.jsx deleted 100644 → 0
+ 0
− 36
View file @ 1921d926
import * as React from "react";
import { Dropzone, FileMosaic } from "../../../files-ui";
const DemoDropzoneRipple = (props) => {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
setFiles(incommingFiles);
//even your own upload implementation
};
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
return (
<div style={{ display: "flex" }}>
<Dropzone style={{ width: "300px" }} onChange={updateFiles} value={files}>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone>
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
disableRipple
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone>
</div>
);
};
export default DemoDropzoneRipple;
src/components/demo-components/dropzone-demo/DemoDropzoneRipple.tsx 0 → 100644
+ 21
− 0
View file @ 15929b99
import * as React from "react";
import { Dropzone } from "../../../files-ui";
const DemoDropzoneRipple = () => {
return (
<div
style={{
display: "flex",
justifyContent: "space-evenly",
gap: "40px",
flexWrap: "wrap",
}}
>
<Dropzone style={{ width: "300px" }}>ripple enabled </Dropzone>
<Dropzone style={{ width: "300px" }} disableRipple>
ripple disabled
</Dropzone>
</div>
);
};
export default DemoDropzoneRipple;
src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
+ 7
− 33
View file @ 15929b99
import * as React from "react"; import * as React from "react";
import { Dropzone, FileMosaic } from "../../../files-ui"; import { Dropzone } from "../../../files-ui";
const DemoDropzoneStyling = (props) => { const DemoDropzoneStyling = () => {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
setFiles(incommingFiles);
//even your own upload implementation
};
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
return ( return (
<div <div
style={{ style={{
...@@ -18,42 +9,25 @@ const DemoDropzoneStyling = (props) => { ...@@ -18,42 +9,25 @@ const DemoDropzoneStyling = (props) => {
justifyContent: "space-evenly", justifyContent: "space-evenly",
gap: "20px", gap: "20px",
flexWrap: "wrap", flexWrap: "wrap",
alignItems: "flex-start",
}} }}
> >
<Dropzone <Dropzone style={{ width: "300px" }} color="#6200EE">
style={{ width: "300px" }} {/**Files */}
onChange={updateFiles}
value={files}
color="#6200EE"
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
onChange={updateFiles}
value={files}
minHeight="120px" minHeight="120px"
header={false} header={false}
footer={false} footer={false}
> >
{files.length > 0 && {/**Files */}
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
<Dropzone <Dropzone
style={{ width: "300px" }} style={{ width: "300px" }}
onChange={updateFiles}
value={files}
background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);" background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
> >
{files.length > 0 && {/**Files */}
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone> </Dropzone>
</div> </div>
); );
......
src/pages/demo/DropzoneDemoPage.jsx
+ 5
− 3
View file @ 15929b99
...@@ -32,6 +32,8 @@ import DemoDropzoneClickable from "../../components/demo-components/dropzone-dem ...@@ -32,6 +32,8 @@ import DemoDropzoneClickable from "../../components/demo-components/dropzone-dem
import DemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/DemoDropzoneDisabled"; import DemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/DemoDropzoneDisabled";
import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/DemoDropzoneRipple"; import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/DemoDropzoneRipple";
import CodeDemoDropzoneStyling from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoStyling"; import CodeDemoDropzoneStyling from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoStyling";
import CodeDemoDropzoneRipple from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneRipple";
import CodeDemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDisabled";
const DropzoneDemoPage = (props) => { const DropzoneDemoPage = (props) => {
return ( return (
...@@ -482,14 +484,14 @@ const DropzoneDemoPage = (props) => { ...@@ -482,14 +484,14 @@ const DropzoneDemoPage = (props) => {
<li>Just after user dropped files.</li> <li>Just after user dropped files.</li>
</ul> </ul>
For disabling the ripple effect you can set the{" "} For disabling the ripple effect you can set the{" "}
<TypeHighlight>disableRipple</TypeHighlight> prop to false. <TypeHighlight>disableRipple</TypeHighlight> prop to true.
</DescParagraph> </DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}> <Paper variant="outlined" style={{ padding: "25px" }}>
<DemoDropzoneRipple /> <DemoDropzoneRipple />
</Paper> </Paper>
<CodeDemoDropzoneFooterConfig /> <CodeDemoDropzoneRipple />
</section> </section>
<section id="disabled"> <section id="disabled">
...@@ -508,7 +510,7 @@ const DropzoneDemoPage = (props) => { ...@@ -508,7 +510,7 @@ const DropzoneDemoPage = (props) => {
<DemoDropzoneDisabled /> <DemoDropzoneDisabled />
</Paper> </Paper>
<CodeDemoDropzoneFooterConfig /> <CodeDemoDropzoneDisabled />
</section> </section>
<section id="clickable"> <section id="clickable">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment