Skip to content

Commit dd69388

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #13 from files-ui/26-feat-add-fileinputbutton-demo-page-and-finish-finleinputbutton-component
26 feat add fileinputbutton demo page and finish finleinputbutton component
2 parents 0e27cc3 + d4fc22d commit dd69388

30 files changed

+2312
-185
lines changed

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

Lines changed: 104 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,118 @@
11
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
2-
const BasicDropzoneCode = ({ splittedOnly = false }) => {
2+
const BasicDropzoneCode = ({ splittedOnly = false, button = false }) => {
33
return (
44
<ShowDemoCode
55
splittedOnly={splittedOnly}
6-
codeCompleteJS={completeCodeJS}
7-
codeCompleteTS={completeCodeTS}
6+
codeCompleteJS={button ? completeCodeJSButton : completeCodeJS}
7+
codeCompleteTS={button ? completeCodeTSButton : completeCodeTS}
88
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
99
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10-
codeSplittedJS={splittedCodeJS}
11-
codeSplittedTS={splittedCodeTS}
10+
codeSplittedJS={button ? splittedCodeJSButton : splittedCodeJS}
11+
codeSplittedTS={button ? splittedCodeTSButton : splittedCodeTS}
1212
/>
1313
);
1414
};
1515
export default BasicDropzoneCode;
1616

17+
const splittedCodeJSButton = `<FileInputButton onChange={updateFiles} value={files} />
18+
19+
{files.map((file) => (
20+
<FileCard key={file.id} {...file} onDelete={removeFile} info />
21+
))}`;
22+
const splittedCodeTSButton = `<FileInputButton onChange={updateFiles} value={files} />
23+
24+
{files.map((file: ExtFile) => (
25+
<FileCard key={file.id} {...file} onDelete={removeFile} info />
26+
))}`;
27+
28+
const completeCodeJSButton = `import { FileInputButton, FileCard } from "@files-ui/react";
29+
import * as React from "react";
30+
31+
export default function BasicDemoFileInputButton() {
32+
const [files, setFiles] = React.useState([]);
33+
const updateFiles = (incommingFiles) => {
34+
//do something with the files
35+
setFiles(incommingFiles);
36+
//even your own upload implementation
37+
};
38+
const removeFile = (id) => {
39+
setFiles(files.filter((x) => x.id !== id));
40+
};
41+
return (
42+
<div
43+
style={{
44+
display: "flex",
45+
alignItems: "center",
46+
justifyContent: "space-evenly",
47+
gap: "10px",
48+
flexWrap: "wrap",
49+
width: "100%",
50+
}}
51+
>
52+
<FileInputButton onChange={updateFiles} value={files} />
53+
{files.length > 0 && (
54+
<div
55+
style={{
56+
display: "flex",
57+
justifyContent:"center",
58+
flexWrap:"wrap",
59+
gap:"5px",
60+
minWidth:"50%"
61+
}}
62+
>
63+
{files.map((file) => (
64+
<FileCard key={file.id} {...file} onDelete={removeFile} info />
65+
))}
66+
</div>
67+
)}
68+
</div>
69+
);
70+
}`;
71+
const completeCodeTSButton = `import { FileInputButton, FileCard, ExtFile } from "@files-ui/react";
72+
import * as React from "react";
73+
74+
export default function BasicDemoFileInputButton() {
75+
const [files, setFiles] = React.useState<ExtFile[]>([]);
76+
const updateFiles = (incommingFiles:ExtFile[]) => {
77+
//do something with the files
78+
setFiles(incommingFiles);
79+
//even your own upload implementation
80+
};
81+
const removeFile = (id: number | string | undefined) => {
82+
setFiles(files.filter((x) => x.id !== id));
83+
};
84+
return (
85+
<div
86+
style={{
87+
display: "flex",
88+
alignItems: "center",
89+
justifyContent: "space-evenly",
90+
gap: "10px",
91+
flexWrap: "wrap",
92+
width: "100%",
93+
}}
94+
>
95+
<FileInputButton onChange={updateFiles} value={files} />
96+
{files.length > 0 && (
97+
<div
98+
style={{
99+
display: "flex",
100+
justifyContent:"center",
101+
flexWrap:"wrap",
102+
gap:"5px",
103+
minWidth:"50%"
104+
}}
105+
>
106+
{files.map((file: ExtFile) => (
107+
<FileCard key={file.id} {...file} onDelete={removeFile} info />
108+
))}
109+
</div>
110+
)}
111+
</div>
112+
);
113+
}`;
114+
115+
//////////
17116
const splittedCodeJS = `<Dropzone
18117
onChange={updateFiles}
19118
value={files}

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import { Dropzone, FileMosaic } from "../../../files-ui";
1+
import {
2+
Dropzone,
3+
FileCard,
4+
FileInputButton,
5+
FileMosaic,
6+
} from "../../../files-ui";
27
import * as React from "react";
3-
export default function BasicDemoDropzone() {
8+
export default function BasicDemoDropzone({ button }) {
49
const [files, setFiles] = React.useState([]);
510
const updateFiles = (incommingFiles) => {
611
//do something with the files
@@ -10,6 +15,37 @@ export default function BasicDemoDropzone() {
1015
const removeFile = (id) => {
1116
setFiles(files.filter((x) => x.id !== id));
1217
};
18+
if (button) {
19+
return (
20+
<div
21+
style={{
22+
display: "flex",
23+
alignItems: "center",
24+
justifyContent: "space-evenly",
25+
gap: "10px",
26+
flexWrap: "wrap",
27+
width: "100%",
28+
}}
29+
>
30+
<FileInputButton onChange={updateFiles} value={files} />
31+
{files.length > 0 && (
32+
<div
33+
style={{
34+
display: "flex",
35+
justifyContent:"center",
36+
flexWrap:"wrap",
37+
gap:"5px",
38+
minWidth:"50%"
39+
}}
40+
>
41+
{files.map((file) => (
42+
<FileCard key={file.id} {...file} onDelete={removeFile} info />
43+
))}
44+
</div>
45+
)}
46+
</div>
47+
);
48+
}
1349
return (
1450
<Dropzone onChange={updateFiles} value={files}>
1551
{files.length > 0 &&

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

Lines changed: 162 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 CodeDemoDropzoneActionButtons = ({ splittedOnly = false }) => {
2+
const CodeDemoDropzoneActionButtons = ({ splittedOnly = false, button }) => {
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,155 @@ const CodeDemoDropzoneActionButtons = ({ splittedOnly = false }) => {
1426
};
1527
export default CodeDemoDropzoneActionButtons;
1628

29+
const splittedCodeJSButton = `<FileInputButton
30+
onChange={updateFiles}
31+
value={files}
32+
autoClean
33+
uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
34+
fakeUpload
35+
actionButtons={{
36+
position: "bottom",
37+
uploadButton: { style: { textTransform: "uppercase" } },
38+
abortButton: {},
39+
cleanButton: {},
40+
deleteButton: {},
41+
}}
42+
/>
43+
{files.map((file) => (
44+
<FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
45+
))}`;
46+
const splittedCodeTSButton = `<FileInputButton
47+
onChange={updateFiles}
48+
value={files}
49+
autoClean
50+
uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
51+
fakeUpload
52+
actionButtons={{
53+
position: "bottom",
54+
uploadButton: { style: { textTransform: "uppercase" } },
55+
abortButton: {},
56+
cleanButton: {},
57+
deleteButton: {},
58+
}}
59+
/>
60+
{files.map((file: ExtFile) => (
61+
<FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
62+
))}`;
63+
const completeCodeJSButton = `import { FileInputButton, FileCard } from "@files-ui/react";
64+
import * as React from "react";
65+
66+
export default function App() {
67+
const [files, setFiles] = React.useState([]);
68+
const updateFiles = (incommingFiles) => {
69+
//do something with the files
70+
setFiles(incommingFiles);
71+
//even your own upload implementation
72+
};
73+
const removeFile = (id) => {
74+
setFiles(files.filter((x) => x.id !== id));
75+
};
76+
return (
77+
<div
78+
style={{
79+
display: "flex",
80+
alignItems: "center",
81+
justifyContent: "space-evenly",
82+
gap: "10px",
83+
flexWrap: "wrap",
84+
width: "100%",
85+
}}
86+
>
87+
<FileInputButton
88+
onChange={updateFiles}
89+
value={files}
90+
autoClean
91+
uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
92+
fakeUpload
93+
actionButtons={{
94+
position: "bottom",
95+
uploadButton: { style: { textTransform: "uppercase" } },
96+
abortButton: {},
97+
cleanButton: {},
98+
deleteButton: {},
99+
}}
100+
/>
101+
{files.length > 0 && (
102+
<div
103+
style={{
104+
display: "flex",
105+
justifyContent:"center",
106+
flexWrap:"wrap",
107+
gap:"5px",
108+
minWidth:"50%"
109+
}}
110+
>
111+
{files.map((file) => (
112+
<FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
113+
))}
114+
</div>
115+
)}
116+
</div>
117+
);
118+
}`;
119+
const completeCodeTSButton = `import { FileInputButton, FileCard, ExtFile } from "@files-ui/react";
120+
import * as React from "react";
121+
122+
export default function App() {
123+
const [files, setFiles] = React.useState<ExtFile[]>([]);
124+
const updateFiles = (incommingFiles:ExtFile[]) => {
125+
//do something with the files
126+
setFiles(incommingFiles);
127+
//even your own upload implementation
128+
};
129+
const removeFile = (id: number | string | undefined) => {
130+
setFiles(files.filter((x) => x.id !== id));
131+
};
132+
return (
133+
<div
134+
style={{
135+
display: "flex",
136+
alignItems: "center",
137+
justifyContent: "space-evenly",
138+
gap: "10px",
139+
flexWrap: "wrap",
140+
width: "100%",
141+
}}
142+
>
143+
<FileInputButton
144+
onChange={updateFiles}
145+
value={files}
146+
autoClean
147+
uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
148+
fakeUpload
149+
actionButtons={{
150+
position: "bottom",
151+
uploadButton: { style: { textTransform: "uppercase" } },
152+
abortButton: {},
153+
cleanButton: {},
154+
deleteButton: {},
155+
}}
156+
/>
157+
{files.length > 0 && (
158+
<div
159+
style={{
160+
display: "flex",
161+
justifyContent:"center",
162+
flexWrap:"wrap",
163+
gap:"5px",
164+
minWidth:"50%"
165+
}}
166+
>
167+
{files.map((file: ExtFile) => (
168+
<FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
169+
))}
170+
</div>
171+
)}
172+
</div>
173+
);
174+
}`;
175+
176+
/////
177+
17178
const splittedCodeJS = `<Dropzone
18179
onChange={updateFiles}
19180
value={files}

0 commit comments

Comments
 (0)