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>
{/** files */}
</Dropzone>`;
const completeCodeJS = `import * as React from "react";
import { Dropzone, FileMosaic } from "@files-ui/react";
import { Dropzone } from "@files-ui/react";
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 (
<div
style={{
......@@ -60,6 +51,7 @@ export default function App() {
justifyContent: "space-evenly",
gap: "20px",
flexWrap: "wrap",
alignItems:"flex-start"
}}
>
<Dropzone
......@@ -68,34 +60,21 @@ export default function App() {
value={files}
color="#6200EE"
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/** Files*/}
</Dropzone>
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
minHeight="120px"
header={false}
footer={false}
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/** Files*/}
</Dropzone>
<Dropzone
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%);"
style={{ width: "300px" }}
background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/** Files*/}
</Dropzone>
</div>
);
......@@ -121,31 +100,22 @@ export default function App() {
justifyContent: "space-evenly",
gap: "20px",
flexWrap: "wrap",
alignItems:"flex-start"
}}
>
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
color="#6200EE"
style={{ width: "300px" }}
color="#6200EE"
>
{files.length > 0 &&
files.map((file: ExtFile) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/** Files*/}
</Dropzone>
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
minHeight="120px"
header={false}
footer={false}
>
{files.length > 0 &&
files.map((file: ExtFile) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/** Files*/}
</Dropzone>
<Dropzone
style={{ width: "300px" }}
......
src/components/demo-components/dropzone-demo/DemoDropzoneDisabled.jsx
+ 14
− 28
View file @ 15929b99
import * as React from "react";
import { Dropzone, FileMosaic } from "../../../files-ui";
import { Dropzone } from "../../../files-ui";
const DemoDropzoneDisabled = (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));
};
const DemoDropzoneDisabled = () => {
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 />
))}
<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>
);
......
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 { Dropzone, FileMosaic } from "../../../files-ui";
import { Dropzone } from "../../../files-ui";
const DemoDropzoneStyling = (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));
};
const DemoDropzoneStyling = () => {
return (
<div
style={{
......@@ -18,42 +9,25 @@ const DemoDropzoneStyling = (props) => {
justifyContent: "space-evenly",
gap: "20px",
flexWrap: "wrap",
alignItems: "flex-start",
}}
>
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
color="#6200EE"
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
<Dropzone style={{ width: "300px" }} color="#6200EE">
{/**Files */}
</Dropzone>
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
minHeight="120px"
header={false}
footer={false}
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/**Files */}
</Dropzone>
<Dropzone
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%);"
>
{files.length > 0 &&
files.map((file) => (
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
{/**Files */}
</Dropzone>
</div>
);
......
src/pages/demo/DropzoneDemoPage.jsx
+ 5
− 3
View file @ 15929b99
......@@ -32,6 +32,8 @@ import DemoDropzoneClickable from "../../components/demo-components/dropzone-dem
import DemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/DemoDropzoneDisabled";
import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/DemoDropzoneRipple";
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) => {
return (
......@@ -482,14 +484,14 @@ const DropzoneDemoPage = (props) => {
<li>Just after user dropped files.</li>
</ul>
For disabling the ripple effect you can set the{" "}
<TypeHighlight>disableRipple</TypeHighlight> prop to false.
<TypeHighlight>disableRipple</TypeHighlight> prop to true.
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
<DemoDropzoneRipple />
</Paper>
<CodeDemoDropzoneFooterConfig />
<CodeDemoDropzoneRipple />
</section>
<section id="disabled">
......@@ -508,7 +510,7 @@ const DropzoneDemoPage = (props) => {
<DemoDropzoneDisabled />
</Paper>
<CodeDemoDropzoneFooterConfig />
<CodeDemoDropzoneDisabled />
</section>
<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