Skip to content

Commit 4826ce8

Browse files
JinSSJ3JinSSJ3
committed
[FEAT]: Add context provider for icons and darkmode
1 parent a9218f5 commit 4826ce8

File tree

8 files changed

+148
-34
lines changed

8 files changed

+148
-34
lines changed

‎src/files-ui/FilesUiProvider/FilesUiContextType.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
import { IconsMap } from "../core";
2+
13
export type FilesUiConfig = {
24
darkMode?:boolean;
3-
}
5+
icons?:IconsConfig;
6+
}
7+
8+
export type IconsConfig=IconsMap;

‎src/files-ui/components/file-card/FileCard.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
109109
//} = mergeProps(props, FileCardPropsDefault);
110110
} = props;
111111
//context
112-
const { darkMode: darkModeContext } = React.useContext(FilesUiContext);
112+
const { darkMode: darkModeContext , icons} = React.useContext(FilesUiContext);
113113
const darkMode: boolean | undefined =
114114
darkModeProp !== undefined ? darkModeProp : darkModeContext;
115115

@@ -150,7 +150,8 @@ const darkMode: boolean | undefined =
150150
valid,
151151
preview as boolean,
152152
imageUrl,
153-
videoUrl
153+
videoUrl,
154+
icons
154155
);
155156
//The size formatted and rounded in 2 decimals
156157
const sizeFormatted: string | undefined = fileSizeFormater(localSize);

‎src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
7171
} = props;
7272

7373
//context
74-
const { darkMode: darkModeContext } = React.useContext(FilesUiContext);
74+
const { darkMode: darkModeContext, icons } = React.useContext(FilesUiContext);
7575
const darkMode: boolean | undefined =
7676
darkModeProp !== undefined ? darkModeProp : darkModeContext;
77-
console.log("globalConfig", darkMode);
77+
console.log("globalConfig", darkMode, icons);
7878

7979
//localizers
8080

@@ -120,7 +120,8 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
120120
valid,
121121
preview as boolean,
122122
imageUrl,
123-
videoUrl
123+
videoUrl,
124+
icons
124125
);
125126

126127
//The size formatted and rounded in 2 decimals

‎src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
22
import { getURLFileIco, readAsDataURL } from "../../../core";
33
import { getURLFileIcoFromNameAndType } from "../../../core/mime/mime";
4+
import { IconsConfig } from "../../../FilesUiProvider/FilesUiContextType";
45

56
/**
67
* Initializer hook for FileItemNeo
@@ -20,6 +21,7 @@ const useFileMosaicInitializer = (
2021
preview: boolean,
2122
imageUrl: string | undefined,
2223
videoUrl: string | undefined,
24+
customIcons?:IconsConfig,
2325
xhr?: XMLHttpRequest,
2426

2527
): [boolean, boolean, boolean, string, string | undefined, File | string | undefined] => {
@@ -40,6 +42,7 @@ const useFileMosaicInitializer = (
4042
preview: boolean,
4143
imageUrl: string | undefined,
4244
videoUrl: string | undefined,
45+
customIcons?:IconsConfig,
4346
xhr?: XMLHttpRequest,
4447
progress?: number
4548
) => {
@@ -48,8 +51,8 @@ const useFileMosaicInitializer = (
4851

4952
if (!file && (!name && !type)) return;
5053

51-
const { url } = file ? getURLFileIco(file) :
52-
getURLFileIcoFromNameAndType(name, type);
54+
const { url } = file ? getURLFileIco(file,customIcons) :
55+
getURLFileIcoFromNameAndType(name, type,customIcons);
5356

5457
//console.log("init", url);
5558

@@ -107,15 +110,15 @@ const useFileMosaicInitializer = (
107110

108111
////// CLEAN UP
109112
React.useEffect(() => {
110-
init(file, name, type, valid, preview || false, imageUrl, videoUrl);
113+
init(file, name, type, valid, preview || false, imageUrl, videoUrl,customIcons);
111114
return () => {
112115
setImageSource(undefined);
113116
setIsImage(false);
114117
setIsVideo(false);
115118
setIsReady(false);
116119
};
117120
// eslint-disable-next-line
118-
}, [file, name, type, valid, preview, imageUrl, videoUrl]);
121+
}, [file, name, type, valid, preview, imageUrl, videoUrl,customIcons]);
119122

120123
return [isReady, isImage, isVideo, url, imageSource, videoSource];
121124
}

‎src/files-ui/core/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ export type {
8787
UploadPromiseResponse,
8888
UploadResponse,
8989
UploadConfig,
90-
UPLOADSTATUS
90+
UPLOADSTATUS,
91+
IconsMap
9192
} from "./types";
9293

9394
export {

‎src/files-ui/core/mime/mime.ts‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,15 @@ import {
1919
zip
2020
} from "./icons";
2121
import { getExt } from "../utils/getExt";
22+
import { IconsMap } from "../types";
2223

23-
const DEF_GEN_MIME: string = "octet";
24+
const DEF_GEN_MIME: keyof IconsMap = "octet";
2425
/**
2526
*
2627
* @param tailMime
2728
* @returns
2829
*/
29-
export const audioSelector = (tailMime: string): string => {
30+
export const audioSelector = (tailMime: string): keyof IconsMap => {
3031
switch (tailMime) {
3132
case "aac": return "aac";
3233
case "midi": return "midi";
@@ -43,7 +44,7 @@ export const audioSelector = (tailMime: string): string => {
4344
default: return DEF_GEN_MIME;
4445
}
4546
}
46-
export const textSelector = (tailMime: string): string => {
47+
export const textSelector = (tailMime: string): keyof IconsMap => {
4748
switch (tailMime) {
4849
case "css": return "css";
4950
case "csv": return "csv";
@@ -57,12 +58,12 @@ export const textSelector = (tailMime: string): string => {
5758

5859
}
5960
}
60-
export const imageSelector = (tailMime: string): string => {
61+
export const imageSelector = (tailMime: string): keyof IconsMap => {
6162
switch (tailMime) {
6263
case "bmp": return "bmp";
6364
case "gif": return "gif";
6465
// case "vnd.microsoft.icon": return "ico";
65-
case "ico": return "ico";
66+
//case "ico": return "ico";
6667
case "jpg": return "jpeg";
6768
case "jpeg": return "jpeg";
6869
case "png": return "png";
@@ -74,7 +75,7 @@ export const imageSelector = (tailMime: string): string => {
7475

7576
}
7677
}
77-
export const fontSelector = (tailMime: string): string => {
78+
export const fontSelector = (tailMime: string): keyof IconsMap => {
7879
switch (tailMime) {
7980
case "otf": return "otf";
8081
case "ttf": return "ttf";
@@ -85,7 +86,7 @@ export const fontSelector = (tailMime: string): string => {
8586
}
8687
}
8788

88-
export const videoSelector = (tailMime: string): string => {
89+
export const videoSelector = (tailMime: string): keyof IconsMap => {
8990
switch (tailMime) {
9091
case "x-msvideo": return "avi";
9192
case "msvideo": return "avi";
@@ -108,7 +109,7 @@ export const videoSelector = (tailMime: string): string => {
108109
* @param tailMime
109110
* @returns
110111
*/
111-
export const applicationSelector = (tailMime: string): string => {
112+
export const applicationSelector = (tailMime: string): keyof IconsMap => {
112113
switch (tailMime) {
113114
case "x-abiword": return "abw";
114115
case "abiword": return "abw";
@@ -164,7 +165,7 @@ export const applicationSelector = (tailMime: string): string => {
164165
* @returns the generic type,
165166
if not found it return "octet" that means generic binary file
166167
*/
167-
export const mimeSelector = (mimeType?: string): string => {
168+
export const mimeSelector = (mimeType?: string): keyof IconsMap => {
168169
// let genericMime: string | undefined = undefined;
169170
if (!mimeType || !mimeType.includes("/")) {
170171
return DEF_GEN_MIME;
@@ -194,8 +195,8 @@ export const mimeSelector = (mimeType?: string): string => {
194195
* @param extension
195196
* @returns
196197
*/
197-
export const extensionSelector = (extension?: string): string => {
198-
let genericMime: string = "octet";
198+
export const extensionSelector = (extension?: string): keyof IconsMap => {
199+
let genericMime: keyof IconsMap = "octet";
199200

200201
if (extension && extension !== "") {
201202
if (extension.includes("zip") || extension.includes("rar")) {
@@ -219,7 +220,7 @@ export const extensionSelector = (extension?: string): string => {
219220
} else if (extension === "java") {
220221
genericMime = "java";
221222
} else if (extension === "ts") {
222-
genericMime = "ts";
223+
genericMime = "typescript";
223224
} else if (extension === "sass" || extension === "scss") {
224225
genericMime = "sass";
225226
}
@@ -232,8 +233,8 @@ export const extensionSelector = (extension?: string): string => {
232233
* @param extension
233234
* @returns
234235
*/
235-
export const checkIsCode = (extension?: string): string => {
236-
let genericMime = "text";
236+
export const checkIsCode = (extension?: string): keyof IconsMap => {
237+
let genericMime: keyof IconsMap = "text";
237238
if (extension && extension !== "") {
238239
if (extension === "jsx") {
239240
genericMime = "react";
@@ -258,17 +259,22 @@ export const checkIsCode = (extension?: string): string => {
258259

259260
/**
260261
* Looks for a suitable file icon
262+
* If not found, returns octet-stream url
261263
* @param props mime and extension from file to search
262-
* @returns the result file ico, if not found, turns octet-stream url
264+
* @returns the result file ico
263265
*/
264266
export const getURLFileIco = (
265-
file: File | undefined
267+
file: File | undefined,
268+
customIcons: IconsMap | undefined
266269
): ResultFileIco => {
267270

268-
let result = "";
271+
let result: keyof IconsMap = "fallBack";
269272
//if not file, return octet
270273
if (!file) {
271274
result = DEF_GEN_MIME;
275+
if (customIcons?.fallBack)
276+
return { url: customIcons?.fallBack, mimeResume: result };
277+
272278
return { url: mimeUrlList[result], mimeResume: result };
273279
} else {
274280
result = mimeSelector(file.type);
@@ -285,6 +291,11 @@ export const getURLFileIco = (
285291
result = extensionSelector(extention);
286292
}
287293

294+
const customUrl = customIcons?.[result];
295+
if (customUrl !== undefined)
296+
return { url: customUrl, mimeResume: result };
297+
298+
288299
return { url: mimeUrlList[result], mimeResume: result };
289300
}
290301
/**
@@ -295,12 +306,15 @@ export const getURLFileIco = (
295306
export const getURLFileIcoFromNameAndType = (
296307
name: string | undefined,
297308
type: string | undefined,
309+
customIcons: IconsMap | undefined
298310
): ResultFileIco => {
299311

300-
let result = "";
312+
let result: keyof IconsMap = "octet";
301313
//if not nam and type, return octet
302314
if (!name) {
303315
result = DEF_GEN_MIME;
316+
if (customIcons?.fallBack)
317+
return { url: customIcons?.fallBack, mimeResume: result };
304318
return { url: mimeUrlList[result], mimeResume: result };
305319
} else {
306320
result = mimeSelector(type);
@@ -316,12 +330,15 @@ export const getURLFileIcoFromNameAndType = (
316330
if (result === DEF_GEN_MIME) {
317331
result = extensionSelector(extention);
318332
}
333+
const customUrl = customIcons?.[result];
334+
if (customUrl !== undefined)
335+
return { url: customUrl, mimeResume: result };
319336

320337
return { url: mimeUrlList[result], mimeResume: result };
321338
}
322339
interface ResultFileIco {
323340
url: string;
324-
mimeResume: string;
341+
mimeResume: keyof IconsMap;
325342
}
326343
/**
327344
* set of registered mimes on MDN
@@ -333,9 +350,6 @@ interface MimeSelector {
333350
}
334351

335352
const mimeUrlList: MimeSelector = {
336-
img: "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_image_x16.png",
337-
video: "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_video_x16.png",
338-
audio: "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_audio_x16.png",
339353
aac: aac,
340354
accdb: accdb,
341355
abw: abw,
@@ -416,4 +430,6 @@ const mimeUrlList: MimeSelector = {
416430
react: react,
417431
vue: vue,
418432

433+
434+
fallBack: octet,
419435
};

0 commit comments

Comments
 (0)