Skip to content

Commit 9bddc30

Browse files
JinSSJ3JinSSJ3
committed
[WIP][REF]: Refactor complete for right side, and advanced example
1 parent 122e46c commit 9bddc30

File tree

12 files changed

+281
-87
lines changed

12 files changed

+281
-87
lines changed

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

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,31 @@ const splittedCodeJS = `<Dropzone
3838
uploadButton: {},
3939
}}
4040
>
41-
{extFiles.map((file) => (
42-
<FileMosaic
43-
{...file}
44-
key={file.id}
45-
onDelete={onDelete}
46-
onSee={handleSee}
47-
onWatch={handleWatch}
48-
onAbort={handleAbort}
49-
onCancel={handleCancel}
50-
resultOnTooltip
51-
alwaysActive
52-
preview
53-
info
54-
/>
55-
))}
41+
{extFiles.map((file) => (
42+
<FileMosaic
43+
{...file}
44+
key={file.id}
45+
onDelete={onDelete}
46+
onSee={handleSee}
47+
onWatch={handleWatch}
48+
onAbort={handleAbort}
49+
onCancel={handleCancel}
50+
resultOnTooltip
51+
preview
52+
info
53+
/>
54+
))}
5655
</Dropzone>
5756
<FullScreen
5857
open={imageSrc !== undefined}
5958
onClose={() => setImageSrc(undefined)}
60-
>
59+
>
6160
<ImagePreview src={imageSrc} />
6261
</FullScreen>
6362
<FullScreen
6463
open={videoSrc !== undefined}
6564
onClose={() => setVideoSrc(undefined)}
66-
>
65+
>
6766
<VideoPreview src={videoSrc} autoPlay controls />
6867
</FullScreen>`;
6968
const completeCodeJS = `import {
@@ -72,9 +71,9 @@ const completeCodeJS = `import {
7271
FullScreen,
7372
ImagePreview,
7473
VideoPreview,
75-
} from "@files-ui/react";
74+
} from "@files-ui/react";
7675
77-
const BASE_URL =
76+
const BASE_URL =
7877
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
7978
8079
export default function AdvancedDropzoneDemo() {
@@ -122,26 +121,26 @@ export default function AdvancedDropzoneDemo() {
122121
return (
123122
<>
124123
<Dropzone
125-
onChange={updateFiles}
126-
minHeight="195px"
127-
value={extFiles}
128-
maxFiles={3}
129-
// FmaxFileSize={2998000 * 20}
130-
label="Drag'n drop files here or click to browse"
131-
// accept=".png,image/*, video/*"
132-
uploadConfig={{
133-
// autoUpload: true
134-
url: BASE_URL + "/file/28048465460",
135-
cleanOnUpload: true,
124+
onChange={updateFiles}
125+
minHeight="195px"
126+
value={extFiles}
127+
maxFiles={3}
128+
// FmaxFileSize={2998000 * 20}
129+
label="Drag'n drop files here or click to browse"
130+
// accept=".png,image/*, video/*"
131+
uploadConfig={{
132+
// autoUpload: true
133+
url: BASE_URL + "/file/28048465460",
134+
cleanOnUpload: true,
136135
}}
137-
onUploadStart={handleStart}
138-
onUploadFinish={handleFinish}
139-
//fakeUpload
140-
actionButtons={{
141-
position: "after",
142-
abortButton: {},
143-
deleteButton: {},
144-
uploadButton: {},
136+
onUploadStart={handleStart}
137+
onUploadFinish={handleFinish}
138+
//fakeUpload
139+
actionButtons={{
140+
position: "after",
141+
abortButton: {},
142+
deleteButton: {},
143+
uploadButton: {},
145144
}}
146145
>
147146
{extFiles.map((file) => (

‎src/pages/demo/AvatarDemoPage.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,24 @@ import DemoAvatarLoading from "../../components/demo-components/avatar-demo/Demo
2626
import CodeDemoAvatarLoading from "../../components/demo-components/avatar-demo/CodeDemoAvatarLoading";
2727
import CodeDemoAvatarVariant from "../../components/demo-components/avatar-demo/CodeAvatarVariant";
2828
import CodeDemoAvatarLabels from "../../components/demo-components/avatar-demo/CodeDemoAvatarLabels";
29+
import { scrollHandler } from "../../utils/scrollHandler";
2930

3031
interface AvatarDemoPageProps {}
3132
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
3233
props: AvatarDemoPageProps
3334
) => {
35+
const [selectedItem, setSelectedItem] = React.useState(0);
36+
37+
React.useEffect(() => {
38+
window.addEventListener("scroll", () =>
39+
scrollHandler(rightMenuItems, setSelectedItem)
40+
);
41+
return () => {
42+
window.removeEventListener("scroll", () =>
43+
scrollHandler(rightMenuItems, setSelectedItem)
44+
);
45+
};
46+
}, []);
3447
return (
3548
<React.Fragment>
3649
<MainContentContainer>
@@ -221,8 +234,8 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
221234
not set.
222235
</li>
223236
<li>
224-
<CodeHighlight>changeLabel</CodeHighlight>: when there is a valid
225-
source set.
237+
<CodeHighlight>changeLabel</CodeHighlight>: when there is a
238+
valid source set.
226239
</li>
227240
<li>
228241
<CodeHighlight>loadingLabel</CodeHighlight>: when you want to
@@ -261,7 +274,12 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
261274
</MainContentContainer>
262275

263276
<RightMenuContainer>
264-
<RightMenu width="240px" items={rightMenuItems} />
277+
<RightMenu
278+
width="240px"
279+
items={rightMenuItems}
280+
selectedItemProp={selectedItem}
281+
setSelected={setSelectedItem}
282+
/>
265283
</RightMenuContainer>
266284
</React.Fragment>
267285
);

‎src/pages/demo/DropzoneDemoPage.jsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,21 @@ import CodeDemoDropzoneClickable from "../../components/demo-components/dropzone
3939
import CodeDemoDropzoneDropLayer from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer";
4040
import CodeDemoDropzoneBehaviour from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour";
4141
import CodeDemoDropzoneLabel from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoLabel";
42+
import { scrollHandler } from "../../utils/scrollHandler";
4243

4344
const DropzoneDemoPage = (props) => {
45+
const [selectedItem, setSelectedItem] = React.useState(0);
46+
47+
React.useEffect(() => {
48+
window.addEventListener("scroll", () =>
49+
scrollHandler(rightMenuItems, setSelectedItem)
50+
);
51+
return () => {
52+
window.removeEventListener("scroll", () =>
53+
scrollHandler(rightMenuItems, setSelectedItem)
54+
);
55+
};
56+
}, []);
4457
return (
4558
<React.Fragment>
4659
<MainContentContainer>
@@ -642,7 +655,12 @@ const DropzoneDemoPage = (props) => {
642655
</MainContentContainer>
643656

644657
<RightMenuContainer>
645-
<RightMenu width="240px" items={rightMenuItems} />
658+
<RightMenu
659+
width="240px"
660+
items={rightMenuItems}
661+
selectedItemProp={selectedItem}
662+
setSelected={setSelectedItem}
663+
/>
646664
</RightMenuContainer>
647665
</React.Fragment>
648666
);

‎src/pages/demo/FileInputButtonDemoPage.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,24 @@ import DemoDropzoneUploading from "../../components/demo-components/dropzone-dem
3434
import CodeDemoDropzoneUploading from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneUploading";
3535
import DemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/DemoDropzoneActionButtons";
3636
import CodeDemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons";
37+
import { scrollHandler } from "../../utils/scrollHandler";
3738

3839
interface FileInputButtonDemoPageProps {}
3940
const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
4041
props: FileInputButtonDemoPageProps
4142
) => {
43+
const [selectedItem, setSelectedItem] = React.useState(0);
44+
45+
React.useEffect(() => {
46+
window.addEventListener("scroll", () =>
47+
scrollHandler(rightMenuItems, setSelectedItem)
48+
);
49+
return () => {
50+
window.removeEventListener("scroll", () =>
51+
scrollHandler(rightMenuItems, setSelectedItem)
52+
);
53+
};
54+
}, []);
4255
return (
4356
<React.Fragment>
4457
<MainContentContainer>
@@ -213,9 +226,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
213226
<Alert severity="info">
214227
<AlertTitle> "fakeUpload" </AlertTitle>
215228
By giving this prop, the {"<FileInputButton/>"} component will
216-
simulate the upload operation by randomly setting the upload status and
217-
message on each uploadable <TypeHighlight>ExtFile</TypeHighlight>.
218-
It will also set a fake progress.
229+
simulate the upload operation by randomly setting the upload status
230+
and message on each uploadable{" "}
231+
<TypeHighlight>ExtFile</TypeHighlight>. It will also set a fake
232+
progress.
219233
</Alert>
220234
<br />
221235
<Alert severity="info">
@@ -453,7 +467,12 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
453467
</MainContentContainer>
454468

455469
<RightMenuContainer>
456-
<RightMenu width="240px" items={rightMenuItems} />
470+
<RightMenu
471+
width="240px"
472+
items={rightMenuItems}
473+
selectedItemProp={selectedItem}
474+
setSelected={setSelectedItem}
475+
/>
457476
</RightMenuContainer>
458477
</React.Fragment>
459478
);

‎src/pages/demo/FullScreenDemoPage.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,23 @@ import MainTitle from "../../components/main-title/MainTitle";
1313
import MainParagraph from "../../components/paragraph-main/MainParagraph";
1414
import RightMenu from "../../components/RightMenu/RightMenu";
1515
import AnchorToTab from "../../components/util-components/AnchorToTab";
16+
import { scrollHandler } from "../../utils/scrollHandler";
1617
interface FullScreenDemoPageProps {}
1718
const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
1819
props: FullScreenDemoPageProps
1920
) => {
21+
const [selectedItem, setSelectedItem] = React.useState(0);
22+
23+
React.useEffect(() => {
24+
window.addEventListener("scroll", () =>
25+
scrollHandler(rightMenuItems, setSelectedItem)
26+
);
27+
return () => {
28+
window.removeEventListener("scroll", () =>
29+
scrollHandler(rightMenuItems, setSelectedItem)
30+
);
31+
};
32+
}, []);
2033
return (
2134
<React.Fragment>
2235
<MainContentContainer>
@@ -127,7 +140,12 @@ const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
127140
</section>
128141
</MainContentContainer>
129142
<RightMenuContainer>
130-
<RightMenu width="240px" items={rightMenuItems} />
143+
<RightMenu
144+
width="240px"
145+
items={rightMenuItems}
146+
selectedItemProp={selectedItem}
147+
setSelected={setSelectedItem}
148+
/>
131149
</RightMenuContainer>
132150
</React.Fragment>
133151
);

‎src/pages/download-page/FileDownloadPage.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,30 @@ import MainTitle from "../../components/main-title/MainTitle";
1616
import MainParagraph from "../../components/paragraph-main/MainParagraph";
1717
import RightMenu from "../../components/RightMenu/RightMenu";
1818
import AnchorToTab from "../../components/util-components/AnchorToTab";
19+
import { scrollHandler } from "../../utils/scrollHandler";
1920

2021
const FileDownloadPage = () => {
22+
const [selectedItem, setSelectedItem] = React.useState(0);
23+
24+
React.useEffect(() => {
25+
window.addEventListener("scroll", () =>
26+
scrollHandler(rightMenuItems, setSelectedItem)
27+
);
28+
return () => {
29+
window.removeEventListener("scroll", () =>
30+
scrollHandler(rightMenuItems, setSelectedItem)
31+
);
32+
};
33+
}, []);
2134
return (
2235
<React.Fragment>
2336
<MainLayoutPage selectedIndex={9}>
2437
<MainContentContainer>
2538
<MainTitle>File Download</MainTitle>
2639
<MainParagraph>
2740
In this page you will find some demos for downloading files with{" "}
28-
<CodeHighlight>{"<FileMosaic/>"}</CodeHighlight>{" "}
29-
and {" "}
30-
<CodeHighlight>{"<FileCard/>"}</CodeHighlight>{" "}
31-
components.
41+
<CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
42+
<CodeHighlight>{"<FileCard/>"}</CodeHighlight> components.
3243
</MainParagraph>
3344
<section id="samehost">
3445
<SubTitle content="Same origin URL" />
@@ -162,7 +173,12 @@ const FileDownloadPage = () => {
162173
</MainLayoutPage>
163174

164175
<RightMenuContainer>
165-
<RightMenu width="240px" items={rightMenuItems} />
176+
<RightMenu
177+
width="240px"
178+
items={rightMenuItems}
179+
selectedItemProp={selectedItem}
180+
setSelected={setSelectedItem}
181+
/>
166182
</RightMenuContainer>
167183
</React.Fragment>
168184
);

‎src/pages/file-icons/FileIconsPage.jsx‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,20 @@ import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic
1212
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
1313
import AnchorToTab from "../../components/util-components/AnchorToTab";
1414
import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
15+
import { scrollHandler } from "../../utils/scrollHandler";
1516
const FileIconsPage = (props) => {
17+
const [selectedItem, setSelectedItem] = React.useState(0);
18+
19+
React.useEffect(() => {
20+
window.addEventListener("scroll", () =>
21+
scrollHandler(rightMenuItems, setSelectedItem)
22+
);
23+
return () => {
24+
window.removeEventListener("scroll", () =>
25+
scrollHandler(rightMenuItems, setSelectedItem)
26+
);
27+
};
28+
}, []);
1629
const [component, setComponent] = React.useState("FileMosaic");
1730
const handleChangeComponent = (newVal) => {
1831
setComponent(newVal);
@@ -24,11 +37,11 @@ const FileIconsPage = (props) => {
2437
<MainTitle>File Icons (extensive list)</MainTitle>
2538
<MainParagraph>
2639
Both <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
27-
<CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a file icon
28-
according to the file mime type. A media type (also known as a
29-
Multipurpose Internet Mail Extensions or MIME type) indicates the
30-
nature and format of a document, file, or assortment of bytes. You
31-
can find more information{" "}
40+
<CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a
41+
file icon according to the file mime type. A media type (also known
42+
as a Multipurpose Internet Mail Extensions or MIME type) indicates
43+
the nature and format of a document, file, or assortment of bytes.
44+
You can find more information{" "}
3245
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">
3346
here
3447
</AnchorToTab>
@@ -63,11 +76,15 @@ const FileIconsPage = (props) => {
6376
<DemoFileMosaicFileIcons card={component === "FileCard"} />
6477
</Paper>
6578
</section>
66-
67-
<RightMenuContainer>
68-
<RightMenu width="240px" items={rightMenuItems} />
69-
</RightMenuContainer>
7079
</MainContentContainer>
80+
<RightMenuContainer>
81+
<RightMenu
82+
width="240px"
83+
items={rightMenuItems}
84+
selectedItemProp={selectedItem}
85+
setSelected={setSelectedItem}
86+
/>
87+
</RightMenuContainer>
7188
</MainLayoutPage>
7289
</React.Fragment>
7390
);

0 commit comments

Comments
 (0)