Skip to content

Commit f1a336b

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #15 from files-ui/28-feat-add-all-components-api-page-dropzone-filemosaic-fileinputbutton-filecard-avatar-types-extfile-serverresponse-actionbuttons
28 feat add all components api page dropzone filemosaic fileinputbutton filecard avatar types extfile serverresponse actionbuttons upload config actionbuttonitem uploadstatus header and footer config
2 parents 7a7a8c8 + 600a849 commit f1a336b

File tree

70 files changed

+3214
-416
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+3214
-416
lines changed

‎src/components/MainMenu/MainMenuSideBar.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,16 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
6868

6969
subMenu: [
7070
{
71-
label: "Dropzone",
71+
label: "Avatar",
7272
index: 31,
73-
onClick: () => navigate("/api/dropzone"),
73+
onClick: () => navigate("/api/avatar"),
7474
},
75-
7675
{
77-
label: "FileMosaic",
76+
label: "Dropzone",
7877
index: 32,
79-
onClick: () => navigate("/api/filemosaic"),
78+
onClick: () => navigate("/api/dropzone"),
8079
},
80+
8181
{
8282
label: "FileInputButton",
8383
index: 33,
@@ -89,25 +89,25 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
8989
onClick: () => navigate("/api/filecard"),
9090
},
9191
{
92-
label: "FullScreenPreview",
93-
index: 34,
94-
onClick: () => navigate("/api/fullscreenpreview"),
92+
label: "FileMosaic",
93+
index: 35,
94+
onClick: () => navigate("/api/filemosaic"),
95+
},
96+
{
97+
label: "FullScreen",
98+
index: 36,
99+
onClick: () => navigate("/api/fullscreen"),
95100
},
96101
{
97102
label: "ImagePreview",
98-
index: 34,
103+
index: 37,
99104
onClick: () => navigate("/api/imagepreview"),
100105
},
101106
{
102107
label: "VideoPreview",
103-
index: 34,
108+
index: 38,
104109
onClick: () => navigate("/api/videopreview"),
105110
},
106-
{
107-
label: "Avatar",
108-
index: 35,
109-
onClick: () => navigate("/api/avatar"),
110-
},
111111
],
112112
},
113113
{

‎src/components/RightMenu/RightMenu.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
text-decoration: none;
44
padding-left: 5px;
55
width: 100%;
6+
//word-break: break-all;
67
&.selected,
78
&:hover {
89
border-left: 2px #b2bac2 solid;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
2-
const CodeDemoDropzoneActionButtons = ({ splittedOnly = false, button }) => {
2+
const CodeDemoActionButtons = ({ splittedOnly = false, button }) => {
33
if (button)
44
return (
55
<ShowDemoCode
@@ -24,7 +24,7 @@ const CodeDemoDropzoneActionButtons = ({ splittedOnly = false, button }) => {
2424
/>
2525
);
2626
};
27-
export default CodeDemoDropzoneActionButtons;
27+
export default CodeDemoActionButtons;
2828

2929
const splittedCodeJSButton = `<FileInputButton
3030
onChange={updateFiles}

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default CodeDemoDropzoneCustomValidation;
3131

3232
const splittedCodeJSButton = ``;
3333
const splittedCodeTSButton = ``;
34-
const completeCodeJSButton =`import { FileInputButton, FileCard } from "@files-ui/react";
34+
const completeCodeJSButton = `import { FileInputButton, FileCard } from "@files-ui/react";
3535
import * as React from "react";
3636
3737
//validate files
@@ -94,16 +94,19 @@ export default function App() {
9494
</div>
9595
);
9696
}`;
97-
const completeCodeTSButton = `import { FileInputButton, FileCard, ExtFile } from "@files-ui/react";
97+
const completeCodeTSButton =
98+
`import { FileInputButton, FileCard, ExtFile } from "@files-ui/react";
9899
import * as React from "react";
99100
100101
//validate files
101102
// file name must start with the following prefix: "test_file"
102103
// (e.g. a valid file name could be "test_file_photo.png")
103-
const myOwnValidation = (file: File): CustomValidateFileResponse => {
104+
const myOwnValidation = (file: File): ValidateFileResponse => {
104105
let errorList: string[] = [];
105106
let validResult: boolean = true;
106-
const regExPrefix: RegExp = /\btest_file\w+/;
107+
` +
108+
// eslint-disable-next-line
109+
`const regExPrefix: RegExp = /\btest_file\w+/;
107110
if (!file.name.match(regExPrefix)) {
108111
validResult = false;
109112
errorList.push('Prefix "test_file" was not present in the file name');
@@ -161,11 +164,11 @@ export default function App() {
161164

162165
/////
163166

164-
165167
const splittedCodeJS = ``;
166168
const splittedCodeTS = ``;
167169
const completeCodeJS = `import { Dropzone, FileMosaic } from "@files-ui/react";
168170
import * as React from "react";
171+
169172
//validate files
170173
// file name must start with the following prefix: "test_file"
171174
// (e.g. a valid file name could be "test_file_photo.png")
@@ -179,6 +182,7 @@ const myOwnValidation = (file) => {
179182
}
180183
return { valid: validResult, errors: errorList };
181184
};
185+
182186
export default function App() {
183187
const [files, setFiles] = React.useState([]);
184188
const updateFiles = (incommingFiles) => {
@@ -204,16 +208,16 @@ export default function App() {
204208
);
205209
}`;
206210

207-
const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile, CustomValidateFileResponse } from "@files-ui/react";
211+
const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile, ValidateFileResponse } from "@files-ui/react";
208212
import * as React from "react";
209213
210214
//validate files
211215
// file name must start with the following prefix: "test_file"
212216
// (e.g. a valid file name could be "test_file_photo.png")
213-
const myOwnValidation = (file: File): CustomValidateFileResponse => {
217+
const myOwnValidation = (file: File): ValidateFileResponse => {
214218
let errorList: string[] = [];
215219
let validResult: boolean = true;
216-
const regExPrefix: RegExp = /\btest_file\w+/;
220+
const regExPrefix: RegExp = /\\btest_file\\w+/;
217221
if (!file.name.match(regExPrefix)) {
218222
validResult = false;
219223
errorList.push('Prefix "test_file" was not present in the file name');

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

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

4-
const DemoDropzoneActionButtons = ({ button }) => {
4+
const DemoActionButtons = ({ button }) => {
55
const [files, setFiles] = React.useState([]);
66
const updateFiles = (incommingFiles) => {
77
//do something with the files
@@ -83,4 +83,4 @@ const DemoDropzoneActionButtons = ({ button }) => {
8383
</Dropzone>
8484
);
8585
};
86-
export default DemoDropzoneActionButtons;
86+
export default DemoActionButtons;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import {
44
ExtFile,
55
FileMosaic,
66
FileMosaicProps,
7-
CustomValidateFileResponse,
7+
ValidateFileResponse,
88
FileInputButton,
99
FileCard,
1010
} from "../../../files-ui";
1111

1212
//validate files
1313
// file name must start with the following prefix: "test_file"
1414
// (e.g. a valid file name could be "test_file_photo.png")
15-
const myOwnValidation = (file: File): CustomValidateFileResponse => {
15+
const myOwnValidation = (file: File): ValidateFileResponse => {
1616
let errorList: string[] = [];
1717
let validResult: boolean = true;
1818
const regExPrefix: RegExp = /\btest_file\w+/;

‎src/components/show-demo-code/ShowDemoCode.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,11 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
112112
console.log("code copied to clipboard: ");
113113
console.log(code_);
114114
}}
115-
style={{
115+
style={{
116116
margin: "20px 0",
117-
fontSize:"15px",
118-
lineHeight:"",
119-
}}
117+
fontSize: "15px",
118+
lineHeight: "",
119+
}}
120120
>
121121
{code}
122122
</Highlighter>

‎src/data/ActionButtonItemAPIRows.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import TypeHighlight from "../components/typeHighlight/TypeHighlight";
2+
3+
export const ActionButtonItemAPIRows = [
4+
{
5+
name: "children",
6+
type: <TypeHighlight np>React.ReactNode</TypeHighlight>,
7+
default: <TypeHighlight np></TypeHighlight>,
8+
description: <>The content of the button.</>,
9+
},
10+
{
11+
name: "label",
12+
type: <TypeHighlight np>string</TypeHighlight>,
13+
default: <TypeHighlight np></TypeHighlight>,
14+
description: <>The label of the button.</>,
15+
},
16+
17+
{
18+
name: "style",
19+
type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
20+
default: <TypeHighlight np></TypeHighlight>,
21+
description: <>The in-line style object applied to the main container.</>,
22+
},
23+
{
24+
name: "className",
25+
type: <TypeHighlight np>string</TypeHighlight>,
26+
default: <TypeHighlight np></TypeHighlight>,
27+
description: (
28+
<>
29+
The classname to override the css styles in .css or .sass file instead
30+
of using in-line styles. Classname is applied to the main container.
31+
</>
32+
),
33+
},
34+
{
35+
name: "resetStyles",
36+
type: <TypeHighlight np>boolean</TypeHighlight>,
37+
default: <TypeHighlight np></TypeHighlight>,
38+
description: (
39+
<>
40+
If true, the given class name and style properties will replace the
41+
default ones instead of overriding them.
42+
</>
43+
),
44+
},
45+
{
46+
name: "onClick",
47+
type: <TypeHighlight np>func</TypeHighlight>,
48+
default: <TypeHighlight np></TypeHighlight>,
49+
description: (
50+
<>
51+
Callback fired when the button is clicked. If given, will replace the
52+
default behaviour.{" "}
53+
</>
54+
),
55+
},
56+
{
57+
name: "disabled",
58+
type: <TypeHighlight np>boolean</TypeHighlight>,
59+
default: <TypeHighlight np>false</TypeHighlight>,
60+
description: <>If true, the component is disabled.</>,
61+
},
62+
];

‎src/data/ActionButtonsAPIRows.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import TypeHighlight from "../components/typeHighlight/TypeHighlight";
2+
import AnchorToTab from "../components/util-components/AnchorToTab";
3+
4+
export const ActionButtonsAPIRows = [
5+
{
6+
name: "position",
7+
type: (
8+
<>
9+
<TypeHighlight np>{'"before"'}</TypeHighlight>
10+
{" | "}
11+
<TypeHighlight np>{'"after"'}</TypeHighlight>
12+
</>
13+
),
14+
default: <TypeHighlight np></TypeHighlight>,
15+
description: (
16+
<>The position of the action buttons. Before or after the component.</>
17+
),
18+
},
19+
{
20+
name: "style",
21+
type: <TypeHighlight np>React.CSSProperties</TypeHighlight>,
22+
default: <TypeHighlight np></TypeHighlight>,
23+
description: <>The in-line style object applied to the main container.</>,
24+
},
25+
{
26+
name: "className",
27+
type: <TypeHighlight np>string</TypeHighlight>,
28+
default: <TypeHighlight np></TypeHighlight>,
29+
description: (
30+
<>
31+
The classname to override the css styles in .css or .sass file instead
32+
of using in-line styles. Classname is applied to the main container.
33+
</>
34+
),
35+
},
36+
{
37+
name: "uploadButton",
38+
type: (
39+
<TypeHighlight np>
40+
<AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
41+
</TypeHighlight>
42+
),
43+
default: <TypeHighlight np></TypeHighlight>,
44+
description: (
45+
<>
46+
If set, the upload button will be shown. Specific props applied to the upload button.
47+
Type definition can be found{" "}
48+
<AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
49+
</>
50+
),
51+
},
52+
{
53+
name: "abortButton",
54+
type: (
55+
<TypeHighlight np>
56+
<AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
57+
</TypeHighlight>
58+
),
59+
default: <TypeHighlight np></TypeHighlight>,
60+
description: (
61+
<>
62+
If set, the abort button will be shown. Specific props applied to the abort button.
63+
Type definition can be found{" "}
64+
<AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
65+
</>
66+
),
67+
},
68+
{
69+
name: "deleteButton",
70+
type: (
71+
<TypeHighlight np>
72+
<AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
73+
</TypeHighlight>
74+
),
75+
default: <TypeHighlight np></TypeHighlight>,
76+
description: (
77+
<>
78+
If set, the delete button will be shown. Specific props applied to the delete button.
79+
Type definition can be found{" "}
80+
<AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
81+
</>
82+
),
83+
},
84+
{
85+
name: "cleanButton",
86+
type: (
87+
<TypeHighlight np>
88+
<AnchorToTab href="/types#actionbuttonitem">{"ActionButtonItem"}</AnchorToTab>
89+
</TypeHighlight>
90+
),
91+
default: <TypeHighlight np></TypeHighlight>,
92+
description: (
93+
<>
94+
If set, the clean button will be shown. Specific props applied to the clean button.
95+
Type definition can be found{" "}
96+
<AnchorToTab href="/types#actionbuttonitem">{"here"}</AnchorToTab>.
97+
</>
98+
),
99+
},
100+
];

0 commit comments

Comments
 (0)