Skip to content

Commit 9f81752

Browse files
JinSSJ3JinSSJ3
committed
[WIP][REF]: Add disableRipple and disabled demos. Bug in disabled, it disabled buttons in all page. Saving changes and creating a branch for this bug
1 parent b583816 commit 9f81752

File tree

8 files changed

+193
-39
lines changed

8 files changed

+193
-39
lines changed

‎src/components/demo-components/dropzone-demo/CodeDemoDropzoneDisabled.tsx‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
2-
const CodeDemoDropzoneDisabled = ({ splittedOnly = false }) => {
2+
const CodeDemoDropzoneDisabled = ({ splittedOnly = false, button = false }) => {
3+
if (button)
4+
return (
5+
<ShowDemoCode
6+
splittedOnly={splittedOnly}
7+
codeCompleteJS={completeCodeJSButton}
8+
codeCompleteTS={completeCodeTSButton}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJSButton}
12+
codeSplittedTS={splittedCodeTSButton}
13+
/>
14+
);
315
return (
416
<ShowDemoCode
517
splittedOnly={splittedOnly}
@@ -14,6 +26,34 @@ const CodeDemoDropzoneDisabled = ({ splittedOnly = false }) => {
1426
};
1527
export default CodeDemoDropzoneDisabled;
1628

29+
30+
31+
const splittedCodeJSButton = `<FileInputButton>{"input enabled"}</FileInputButton>
32+
<FileInputButton disabled>{"input disabled"}</FileInputButton>`;
33+
const splittedCodeTSButton = splittedCodeJSButton;
34+
const completeCodeJSButton = `import { FileInputButton } from "@files-ui/react";
35+
import * as React from "react";
36+
37+
export default function App() {
38+
return (
39+
<div
40+
style={{
41+
display: "flex",
42+
justifyContent: "space-evenly",
43+
gap: "40px",
44+
flexWrap: "wrap",
45+
}}
46+
>
47+
<FileInputButton>{"input enabled"}</FileInputButton>
48+
<FileInputButton disabled>{"input disabled"}</FileInputButton>
49+
</div>
50+
);
51+
}`;
52+
const completeCodeTSButton = completeCodeJSButton;
53+
54+
/////
55+
56+
1757
const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
1858
<Dropzone style={{ width: "300px" }} disabled>
1959
{"Dropzone is disabled"}

‎src/components/demo-components/dropzone-demo/CodeDemoDropzoneRipple.jsx‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
2-
const CodeDemoDropzoneRipple = ({ splittedOnly = false }) => {
2+
const CodeDemoDropzoneRipple = ({ splittedOnly = false, button = false }) => {
3+
if (button)
4+
return (
5+
<ShowDemoCode
6+
splittedOnly={splittedOnly}
7+
codeCompleteJS={completeCodeJSButton}
8+
codeCompleteTS={completeCodeTSButton}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJSButton}
12+
codeSplittedTS={splittedCodeTSButton}
13+
/>
14+
);
315
return (
416
<ShowDemoCode
517
splittedOnly={splittedOnly}
@@ -14,6 +26,30 @@ const CodeDemoDropzoneRipple = ({ splittedOnly = false }) => {
1426
};
1527
export default CodeDemoDropzoneRipple;
1628

29+
const splittedCodeJSButton = `<FileInputButton>{"ripple enabled"}</FileInputButton>
30+
<FileInputButton disableRipple>{"ripple disabled"}</FileInputButton>`;
31+
const splittedCodeTSButton = splittedCodeJSButton;
32+
const completeCodeJSButton = `import { FileInputButton } from "@files-ui/react";
33+
import * as React from "react";
34+
35+
export default function App() {
36+
return (
37+
<div
38+
style={{
39+
display: "flex",
40+
justifyContent: "space-evenly",
41+
gap: "40px",
42+
flexWrap: "wrap",
43+
}}
44+
>
45+
<FileInputButton>{"ripple enabled"}</FileInputButton>
46+
<FileInputButton disableRipple>{"ripple disabled"}</FileInputButton>
47+
</div>
48+
);
49+
}`;
50+
const completeCodeTSButton = completeCodeJSButton;
51+
52+
/////
1753
const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{"ripple enabled"}</Dropzone>
1854
<Dropzone style={{ width: "300px" }} disableRipple>
1955
{"ripple disabled"}

‎src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
2-
const CodeDemoDropzoneLabel = ({ splittedOnly = false }) => {
2+
const CodeDemoDropzoneLabel = ({ splittedOnly = false, button = false }) => {
3+
if (button)
4+
return (
5+
<ShowDemoCode
6+
splittedOnly={splittedOnly}
7+
codeCompleteJS={completeCodeJSButton}
8+
codeCompleteTS={completeCodeTSButton}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJSButton}
12+
codeSplittedTS={splittedCodeTSButton}
13+
/>
14+
);
315
return (
416
<ShowDemoCode
517
splittedOnly={splittedOnly}
@@ -14,6 +26,32 @@ const CodeDemoDropzoneLabel = ({ splittedOnly = false }) => {
1426
};
1527
export default CodeDemoDropzoneLabel;
1628

29+
const splittedCodeJSButton = `<FileInputButton/>
30+
<FileInputButton>{"Label as children"}</FileInputButton>
31+
<FileInputButton label={"Files ui ❤️"}/>`;
32+
const splittedCodeTSButton = splittedCodeJSButton;
33+
const completeCodeJSButton = `import { FileInputButton } from "@files-ui/react";
34+
import * as React from "react";
35+
36+
export default function App() {
37+
return (
38+
<div
39+
style={{
40+
display: "flex",
41+
justifyContent: "space-evenly",
42+
gap: "40px",
43+
flexWrap: "wrap",
44+
}}
45+
>
46+
<FileInputButton/>
47+
<FileInputButton>{"Label as children"}</FileInputButton>
48+
<FileInputButton label={"Files ui ❤️"}/>
49+
</div>
50+
);
51+
}`;
52+
const completeCodeTSButton = completeCodeJSButton;
53+
54+
/////
1755

1856
const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
1957
<Dropzone
@@ -49,4 +87,3 @@ const DemoDropzoneLabel = () => {
4987
export default DemoDropzoneLabel;`;
5088

5189
const completeCodeTS = completeCodeJS;
52-

‎src/components/demo-components/dropzone-demo/DemoDropzoneDisabled.jsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
import * as React from "react";
2-
import { Dropzone } from "../../../files-ui";
2+
import { Dropzone, FileInputButton } from "../../../files-ui";
33

4-
const DemoDropzoneDisabled = () => {
4+
const DemoDropzoneDisabled = ({ button }) => {
5+
if (button)
6+
return (
7+
<div
8+
style={{
9+
display: "flex",
10+
justifyContent: "space-evenly",
11+
gap: "40px",
12+
flexWrap: "wrap",
13+
}}
14+
>
15+
<FileInputButton>{"input enabled"}</FileInputButton>
16+
<FileInputButton disabled>{"input disabled"}</FileInputButton>
17+
</div>
18+
);
519
return (
620
<div
721
style={{

‎src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
11
import * as React from "react";
2-
import { Dropzone } from "../../../files-ui";
2+
import { Dropzone, FileInputButton } from "../../../files-ui";
33

4-
const DemoDropzoneLabel = () => {
4+
const DemoDropzoneLabel = ({ button }) => {
5+
if (button)
6+
return (
7+
<div
8+
style={{
9+
display: "flex",
10+
justifyContent: "space-evenly",
11+
gap: "40px",
12+
flexWrap: "wrap",
13+
}}
14+
>
15+
<FileInputButton/>
16+
<FileInputButton>{"Label as children"}</FileInputButton>
17+
<FileInputButton label={"Files ui ❤️"}/>
18+
</div>
19+
);
520
return (
621
<div
722
style={{
@@ -12,10 +27,7 @@ const DemoDropzoneLabel = () => {
1227
}}
1328
>
1429
<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
15-
<Dropzone
16-
style={{ width: "300px" }}
17-
label={"Files ui ❤️"}
18-
>
30+
<Dropzone style={{ width: "300px" }} label={"Files ui ❤️"}>
1931
{/**Files */}
2032
</Dropzone>
2133
</div>

‎src/components/demo-components/dropzone-demo/DemoDropzoneRipple.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
import * as React from "react";
2-
import { Dropzone } from "../../../files-ui";
2+
import { Dropzone, FileInputButton } from "../../../files-ui";
33

4-
const DemoDropzoneRipple = () => {
4+
const DemoDropzoneRipple = ({ button = false }) => {
5+
if (button)
6+
return (
7+
<div
8+
style={{
9+
display: "flex",
10+
justifyContent: "space-evenly",
11+
gap: "40px",
12+
flexWrap: "wrap",
13+
}}
14+
>
15+
<FileInputButton>{"ripple enabled"}</FileInputButton>
16+
<FileInputButton disableRipple>{"ripple disabled"}</FileInputButton>
17+
</div>
18+
);
519
return (
620
<div
721
style={{

‎src/pages/demo/DropzoneDemoPage.jsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ const DropzoneDemoPage = (props) => {
4848

4949
<MainParagraph>
5050
The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
51-
just a quite boring button. That's why we present the"dropzone"
51+
just a quite boring button. That's why we present the{" "}
52+
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight>
5253
component is an special <CodeHighlight>input</CodeHighlight> enhanced
5354
by the ability to allow users to drag and drop files there or choose
5455
files from a file dialog and also to validate an upload them.
@@ -84,8 +85,9 @@ const DropzoneDemoPage = (props) => {
8485
<section id="basic-dropzone">
8586
<SubTitle content="Basic Dropzone" />
8687
<DescParagraph>
87-
In this demo we set the <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> with the minimum props that allows you
88-
to get your task done fast. These props are{" "}
88+
In this demo we set the{" "}
89+
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> with the minimum
90+
props that allows you to get your task done fast. These props are{" "}
8991
<CodeHighlight>onChange</CodeHighlight> and{" "}
9092
<CodeHighlight>value</CodeHighlight>.
9193
</DescParagraph>
@@ -199,10 +201,10 @@ const DropzoneDemoPage = (props) => {
199201
</DescParagraph>
200202

201203
<Paper variant="outlined" style={{ padding: "25px" }}>
202-
<DemoDropzoneUploading button/>
204+
<DemoDropzoneUploading button />
203205
</Paper>
204206

205-
<CodeDemoDropzoneUploading button/>
207+
<CodeDemoDropzoneUploading button />
206208

207209
<Alert severity="info">
208210
<AlertTitle> Server response </AlertTitle>

‎src/pages/demo/FileInputButtonDemoPage.tsx‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
5454
<MainParagraph>
5555
The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
5656
just a quite boring button. That's why we present the
57-
"fileinputbutton" component which is an special{" "}
58-
<CodeHighlight>input</CodeHighlight> enhanced by the ability to allow
59-
users to choose files from a file dialog and also to validate an
60-
upload them.
57+
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> component which
58+
is an special <CodeHighlight>input</CodeHighlight> enhanced by the
59+
ability to allow users to choose files from a file dialog and also to
60+
validate an upload them.
6161
</MainParagraph>
6262

6363
<DescParagraph>
@@ -319,8 +319,9 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
319319
contained(default), outlined and text.
320320
</li>
321321
<li>
322-
FileInputButton with the <TypeHighlight>textTransform</TypeHighlight>{" "}
323-
prop defined can display the text with a text transform style (e.g. "uppercase").
322+
FileInputButton with the{" "}
323+
<TypeHighlight>textTransform</TypeHighlight> prop defined can
324+
display the text with a text transform style (e.g. "uppercase").
324325
</li>
325326
</ul>
326327
</DescParagraph>
@@ -336,15 +337,16 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
336337
<SubTitle content="Label" />
337338
<DescParagraph>
338339
You can specify a fixed label for{" "}
339-
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component to display
340-
when there isn't any files.
340+
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> component.
341+
<br />
342+
If not given, the default label is "Browse...".
341343
</DescParagraph>
342344

343345
<Paper variant="outlined" style={{ padding: "25px" }}>
344-
<DemoDropzoneLabel />
346+
<DemoDropzoneLabel button />
345347
</Paper>
346348

347-
<CodeDemoDropzoneLabel />
349+
<CodeDemoDropzoneLabel button />
348350
</section>
349351

350352
<section id="ripple">
@@ -358,24 +360,21 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
358360
visual ripple expanding outward from the user's touch. Ripple is a
359361
visual form of feedback for touch events providing users a clear
360362
signal that an element is being touched. In this component, a ripple
361-
is displayed after 2 user actions:
362-
<ul>
363-
<li>When user clicks or touches the component.</li>
364-
<li>Just after user dropped files.</li>
365-
</ul>
363+
is displayed When user clicks or touches the component.
364+
<br />
366365
For disabling the ripple effect you can set the{" "}
367366
<TypeHighlight>disableRipple</TypeHighlight> prop to true.
368367
</DescParagraph>
369368

370369
<Paper variant="outlined" style={{ padding: "25px" }}>
371-
<DemoDropzoneRipple />
370+
<DemoDropzoneRipple button/>
372371
</Paper>
373372

374-
<CodeDemoDropzoneRipple />
373+
<CodeDemoDropzoneRipple button/>
375374
</section>
376375

377376
<section id="disabled">
378-
<SubTitle content="Disabled Dropzone" />
377+
<SubTitle content="Disabled FileInputButton" />
379378
<DescParagraph>
380379
According to{" "}
381380
<AnchorToTab href="https://m2.material.io/develop/ios/supporting/ripple">
@@ -387,10 +386,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
387386
</DescParagraph>
388387

389388
<Paper variant="outlined" style={{ padding: "25px" }}>
390-
<DemoDropzoneDisabled />
389+
<DemoDropzoneDisabled button/>
391390
</Paper>
392391

393-
<CodeDemoDropzoneDisabled />
392+
<CodeDemoDropzoneDisabled button/>
394393
</section>
395394

396395
<section id="clickable">

0 commit comments

Comments
 (0)