Skip to content

Commit d4fc22d

Browse files
JinSSJ3JinSSJ3
committed
[FEAT]: Add InputButton components missing features and InputButton demopage
1 parent 969ed84 commit d4fc22d

File tree

5 files changed

+281
-89
lines changed

5 files changed

+281
-89
lines changed

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

Lines changed: 184 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
2-
const CodeDemoDropzoneBehaviour = ({ splittedOnly = false }) => {
2+
const CodeDemoDropzoneBehaviour = ({ splittedOnly = false, button=false }) => {
3+
if(button) return (
4+
<ShowDemoCode
5+
splittedOnly={splittedOnly}
6+
codeCompleteJS={completeCodeJSButton}
7+
codeCompleteTS={completeCodeTSButton}
8+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
9+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSplittedJS={splittedCodeJSButton}
11+
codeSplittedTS={splittedCodeTSButton}
12+
/>
13+
);
314
return (
415
<ShowDemoCode
516
splittedOnly={splittedOnly}
@@ -14,6 +25,178 @@ const CodeDemoDropzoneBehaviour = ({ splittedOnly = false }) => {
1425
};
1526
export default CodeDemoDropzoneBehaviour;
1627

28+
const splittedCodeJSButton = `<FileInputButton onChange={updateFilesAdd} value={filesAdd} label="add"/>
29+
30+
{filesAdd.map((file) => (
31+
<FileCard key={file.id} {...file} onDelete={removeFileAdd} info preview />
32+
))}
33+
34+
<FileInputButton
35+
onChange={updateFilesReplace}
36+
value={filesReplace}
37+
variant="outlined"
38+
label="replace"
39+
behaviour="replace"
40+
/>
41+
{filesReplace.map((file) => (
42+
<FileCard key={file.id} {...file} onDelete={removeFileReplace} info preview />
43+
))}`;
44+
45+
const splittedCodeTSButton = splittedCodeJSButton;
46+
const completeCodeJSButton = `import * as React from "react";
47+
import { Dropzone, FileCard } from "@files-ui/react";
48+
49+
export default function App() {
50+
const [filesAdd, setFilesAdd] = React.useState([]);
51+
const [filesReplace, setFilesReplace] = React.useState([]);
52+
53+
const updateFilesAdd = (incommingFiles) => {
54+
setFilesAdd(incommingFiles);
55+
};
56+
const updateFilesReplace = (incommingFiles) => {
57+
setFilesReplace(incommingFiles);
58+
};
59+
const removeFileAdd = (id) => {
60+
setFilesAdd(filesAdd.filter((x) => x.id !== id));
61+
};
62+
const removeFileReplace = (id) => {
63+
setFilesReplace(filesReplace.filter((x) => x.id !== id));
64+
};
65+
66+
return (
67+
<div style={mainContainerStyle}>
68+
<div style={itemContainerStyle}>
69+
<FileInputButton
70+
onChange={updateFilesAdd}
71+
value={filesAdd}
72+
label="add"
73+
/>
74+
{filesAdd.map((file) => (
75+
<FileCard
76+
key={file.id}
77+
{...file}
78+
onDelete={removeFileAdd}
79+
info
80+
preview
81+
/>
82+
))}
83+
</div>
84+
<div style={itemContainerStyle}>
85+
<FileInputButton
86+
onChange={updateFilesReplace}
87+
value={filesReplace}
88+
variant="outlined"
89+
label="replace"
90+
behaviour="replace"
91+
/>
92+
{filesReplace.map((file) => (
93+
<FileCard
94+
key={file.id}
95+
{...file}
96+
onDelete={removeFileReplace}
97+
info
98+
preview
99+
/>
100+
))}
101+
</div>
102+
</div>
103+
);
104+
};
105+
106+
const mainContainerStyle = {
107+
display: "flex",
108+
justifyContent: "space-evenly",
109+
gap: "40px",
110+
flexWrap: "wrap",
111+
width: "100%",
112+
};
113+
const itemContainerStyle = {
114+
display: "flex",
115+
flexDirection: "column",
116+
minWidth: "40%",
117+
gap: "5px",
118+
alignItems: "center",
119+
};`;
120+
121+
const completeCodeTSButton = `import * as React from "react";
122+
import { FileInputButton, ExtFile, FileCard, FileCardProps } from "@files-ui/react";
123+
124+
export default function App() {
125+
const [filesAdd, setFilesAdd] = React.useState<ExtFile[]>([]);
126+
const [filesReplace, setFilesReplace] = React.useState<ExtFile[]>([]);
127+
128+
const updateFilesAdd = (incommingFiles:ExtFile[]) => {
129+
setFilesAdd(incommingFiles);
130+
};
131+
const updateFilesReplace = (incommingFiles:ExtFile[]) => {
132+
setFilesReplace(incommingFiles);
133+
};
134+
const removeFileAdd = (id:FileCardProps["id"]) => {
135+
setFilesAdd(filesAdd.filter((x) => x.id !== id));
136+
};
137+
const removeFileReplace = (id:FileCardProps["id"]) => {
138+
setFilesReplace(filesReplace.filter((x) => x.id !== id));
139+
};
140+
141+
return (
142+
<div style={mainContainerStyle}>
143+
<div style={itemContainerStyle}>
144+
<FileInputButton
145+
onChange={updateFilesAdd}
146+
value={filesAdd}
147+
label="add"
148+
/>
149+
{filesAdd.map((file) => (
150+
<FileCard
151+
key={file.id}
152+
{...file}
153+
onDelete={removeFileAdd}
154+
info
155+
preview
156+
/>
157+
))}
158+
</div>
159+
<div style={itemContainerStyle}>
160+
<FileInputButton
161+
onChange={updateFilesReplace}
162+
value={filesReplace}
163+
variant="outlined"
164+
label="replace"
165+
behaviour="replace"
166+
/>
167+
{filesReplace.map((file) => (
168+
<FileCard
169+
key={file.id}
170+
{...file}
171+
onDelete={removeFileReplace}
172+
info
173+
preview
174+
/>
175+
))}
176+
</div>
177+
</div>
178+
);
179+
};
180+
181+
const mainContainerStyle: React.CSSProperties = {
182+
display: "flex",
183+
justifyContent: "space-evenly",
184+
gap: "40px",
185+
flexWrap: "wrap",
186+
width: "100%",
187+
};
188+
const itemContainerStyle: React.CSSProperties = {
189+
display: "flex",
190+
flexDirection: "column",
191+
minWidth: "40%",
192+
gap: "5px",
193+
alignItems: "center",
194+
};`;
195+
196+
197+
198+
199+
//////
17200
const splittedCodeJS = `<Dropzone
18201
style={{ width: "min(100% , 420px)" }}
19202
onChange={updateFilesAdd}

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

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,86 @@
11
import * as React from "react";
2-
import { Dropzone, ExtFile, FileMosaic, FileMosaicProps } from "../../../files-ui";
2+
import {
3+
Dropzone,
4+
ExtFile,
5+
FileCard,
6+
FileCardProps,
7+
FileInputButton,
8+
FileMosaic,
9+
//FileMosaicProps,
10+
} from "../../../files-ui";
311

4-
const DemoDropzoneBehaviour = () => {
12+
const mainContainerStyle: React.CSSProperties = {
13+
display: "flex",
14+
justifyContent: "space-evenly",
15+
gap: "40px",
16+
flexWrap: "wrap",
17+
width: "100%",
18+
};
19+
const itemContainerStyle: React.CSSProperties = {
20+
display: "flex",
21+
flexDirection: "column",
22+
minWidth: "40%",
23+
gap: "5px",
24+
alignItems: "center",
25+
};
26+
27+
const DemoDropzoneBehaviour = ({ button = false }) => {
528
const [filesAdd, setFilesAdd] = React.useState<ExtFile[]>([]);
629
const [filesReplace, setFilesReplace] = React.useState<ExtFile[]>([]);
730

8-
const updateFilesAdd = (incommingFiles:ExtFile[]) => {
31+
const updateFilesAdd = (incommingFiles: ExtFile[]) => {
932
setFilesAdd(incommingFiles);
1033
};
11-
const updateFilesReplace = (incommingFiles:ExtFile[]) => {
34+
const updateFilesReplace = (incommingFiles: ExtFile[]) => {
1235
setFilesReplace(incommingFiles);
1336
};
14-
const removeFileAdd = (id:FileMosaicProps["id"]) => {
37+
const removeFileAdd = (id: FileCardProps["id"]) => {
1538
setFilesAdd(filesAdd.filter((x) => x.id !== id));
1639
};
17-
const removeFileReplace = (id:FileMosaicProps["id"]) => {
40+
const removeFileReplace = (id: FileCardProps["id"]) => {
1841
setFilesReplace(filesReplace.filter((x) => x.id !== id));
1942
};
43+
if (button)
44+
return (
45+
<div style={mainContainerStyle}>
46+
<div style={itemContainerStyle}>
47+
<FileInputButton
48+
onChange={updateFilesAdd}
49+
value={filesAdd}
50+
label="add"
51+
/>
52+
{filesAdd.map((file) => (
53+
<FileCard
54+
key={file.id}
55+
{...file}
56+
onDelete={removeFileAdd}
57+
info
58+
preview
59+
/>
60+
))}
61+
</div>
62+
<div style={itemContainerStyle}>
63+
<FileInputButton
64+
onChange={updateFilesReplace}
65+
value={filesReplace}
66+
variant="outlined"
67+
label="replace"
68+
behaviour="replace"
69+
/>
70+
{filesReplace.map((file) => (
71+
<FileCard
72+
key={file.id}
73+
{...file}
74+
onDelete={removeFileReplace}
75+
info
76+
preview
77+
/>
78+
))}
79+
</div>
80+
</div>
81+
);
2082
return (
21-
<div
22-
style={{
23-
display: "flex",
24-
justifyContent: "space-evenly",
25-
gap: "40px",
26-
flexWrap: "wrap",
27-
width: "100%",
28-
}}
29-
>
83+
<div style={mainContainerStyle}>
3084
<Dropzone
3185
style={{ width: "min(100% , 420px)" }}
3286
onChange={updateFilesAdd}

‎src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
5353
(ab: DropzoneActionButton | undefined) => ab !== undefined
5454
) as DropzoneActionButton[];
5555

56+
const tailClassName:string = `${top ? " top" : " bottom"}`;
5657
const finalClassName = addClassName(
57-
"files-ui-buttons-container" + `${top ? " top" : " bottom"}`,
58+
"files-ui-buttons-container" + tailClassName,
5859
containerClassName
5960
);
6061

‎src/pages/demo/DropzoneDemoPage.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -603,15 +603,15 @@ const DropzoneDemoPage = (props) => {
603603
<section id="localization">
604604
<SubTitle content="Localization" />
605605
<DescParagraph>
606-
The localization demo for this component can be found in the{" "}
607-
<AnchorToTab href="/localization">localization page</AnchorToTab>
606+
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component uses the{" "}
607+
<TypeHighlight>localization</TypeHighlight> prop in the validation
608+
and the upload process for setting status and messages according to the language that
609+
this prop refers to.
610+
<br/>
611+
The localization demo for this component can be found in
612+
the{" "}
613+
<AnchorToTab href="/localization">localization page</AnchorToTab>.
608614
</DescParagraph>
609-
610-
{/* <Paper variant="outlined" style={{ padding: "25px" }}>
611-
<DemoDropzoneFooterConfig />
612-
</Paper>
613-
614-
<CodeDemoDropzoneFooterConfig /> */}
615615
</section>
616616

617617
<section id="api">

0 commit comments

Comments
 (0)