@gateweb/react-utils 1.11.0 → 1.13.0

package/dist/cjs/index.d.ts

@@ -474,11 +474,33 @@ declare const fakeApi: <T>(returnValue: T, result?: boolean, time?: number) => P
     message: string;
 }>;
 
+declare const MimeTypeMap: {
+    readonly jpeg: "image/jpeg";
+    readonly jpg: "image/jpeg";
+    readonly gif: "image/gif";
+    readonly png: "image/png";
+    readonly pdf: "application/pdf";
+    readonly zip: "application/zip";
+    readonly csv: "text/csv";
+    readonly ppt: "application/vnd.ms-powerpoint";
+    readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly xls: "application/vnd.ms-excel";
+    readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly doc: "application/msword";
+    readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly txt: "text/plain";
+};
+declare const OtherMimeType = "application/octet-stream";
+type MimeTypeExtension = keyof typeof MimeTypeMap;
+type MimeTypeValue = (typeof MimeTypeMap)[MimeTypeExtension] | typeof OtherMimeType;
+
 /**
- * 檢查檔案是否為合法的 MIME 類型
+ * 檢查檔案是否為合法的檔案類型
+ *
+ * `accepts` 可同時接受副檔名以及 MIME 類型
  *
  * @param file 檔案
- * @param accepts 允許的 MIME 類型
+ * @param accepts 允許的類型
  *
  * @example
  *
@@ -486,6 +508,7 @@ declare const fakeApi: <T>(returnValue: T, result?: boolean, time?: number) => P
  * validateFileType({ type: 'image/png' }, ['image/png', 'image/jpeg']) // true
  * validateFileType({ type: 'image/png' }, ['image/jpeg']) // false
  * validateFileType({ type: 'image/png' }, ['image/*']) // true
+ * validateFileType({ name: '圖片.png', type: 'image/png' }, ['.png']) // true
  * ```
  */
 declare const validateFileType: (file: File, accepts: string[]) => boolean;
@@ -507,8 +530,44 @@ declare const validateFileType: (file: File, accepts: string[]) => boolean;
  * getMimeType('txt') // 'text/plain'
  * getMimeType('zip') // 'application/zip'
  * getMimeType('mp4') // 'application/octet-stream'
+ * getMimeType('xls') // 'application/vnd.ms-excel'
+ * getMimeType('xlsx') // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ * getMimeType('doc') // 'application/msword'
+ * getMimeType('docx') // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ *
+ * @deprecated use `parseFileInfoFromFilename` instead
+ */
+declare const getMimeType: (fileName: string) => "image/jpeg" | "image/gif" | "image/png" | "application/pdf" | "application/zip" | "text/csv" | "application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "text/plain";
+/**
+ * 用來解析後端在 response header content-disposition 的內容
+ *
+ * 一般來說格式會有以下兩種
+ *
+ * - Content-Disposition: attachment; filename="file name.jpg"
+ * - Content-Disposition: attachment; filename*=UTF-8''file%20name2.jpg
+ *
+ * 如果格式正確就會取得檔案名稱(包含副檔名)，優先取 filename* 內的內容
+ *
+ * @param disposition Content-Disposition
+ *
+ * @example
+ *
+ * parseFilenameFromDisposition('attachment; filename="file name1.jpg') // file name.jpg
+ * parseFilenameFromDisposition('attachment; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ * parseFilenameFromDisposition('attachment; filename="file name.jpg; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ */
+declare const parseFilenameFromDisposition: (disposition: string) => string | undefined;
+/**
+ * 解析 `filename` 回傳檔名、副檔名、MIME type
+ *
+ * @param filename 檔案名稱
+ *
+ * @example
+ *
+ * parseFileInfoFromFilename('image.jpg') // ['image', 'jpg', 'image/jpeg']
+ * parseFileInfoFromFilename('image') // ['image', '', 'application/octet-stream']
  */
-declare const getMimeType: (fileName: string) => "image/jpeg" | "image/png" | "application/pdf" | "application/zip" | "text/csv" | "text/plain" | "application/octet-stream";
+declare const parseFileInfoFromFilename: (filename: string) => [string, string, MimeTypeValue];
 
 declare function invariant(condition: any, message?: string | (() => string)): asserts condition;
 
@@ -1145,4 +1204,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
 
-export { ByteSize, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };
+export { ByteSize, type MimeTypeExtension, MimeTypeMap, type MimeTypeValue, OtherMimeType, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, parseFileInfoFromFilename, parseFilenameFromDisposition, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };

package/dist/cjs/index.js

@@ -238,11 +238,31 @@ function createEnumLikeObject(obj, name, scene) {
         }, time);
     });
 
+const MimeTypeMap = {
+    jpeg: 'image/jpeg',
+    jpg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    pdf: 'application/pdf',
+    zip: 'application/zip',
+    csv: 'text/csv',
+    ppt: 'application/vnd.ms-powerpoint',
+    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    xls: 'application/vnd.ms-excel',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    doc: 'application/msword',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    txt: 'text/plain'
+};
+const OtherMimeType = 'application/octet-stream';
+
 /**
- * 檢查檔案是否為合法的 MIME 類型
+ * 檢查檔案是否為合法的檔案類型
+ *
+ * `accepts` 可同時接受副檔名以及 MIME 類型
  *
  * @param file 檔案
- * @param accepts 允許的 MIME 類型
+ * @param accepts 允許的類型
  *
  * @example
  *
@@ -250,21 +270,24 @@ function createEnumLikeObject(obj, name, scene) {
  * validateFileType({ type: 'image/png' }, ['image/png', 'image/jpeg']) // true
  * validateFileType({ type: 'image/png' }, ['image/jpeg']) // false
  * validateFileType({ type: 'image/png' }, ['image/*']) // true
+ * validateFileType({ name: '圖片.png', type: 'image/png' }, ['.png']) // true
  * ```
  */ const validateFileType = (file, accepts)=>{
     if (accepts.length === 0) return true;
     // 獲取文件的MIME類型
     const fileMimeType = file.type;
+    // 提取副檔名（含 .，且轉小寫）
+    const fileExt = file.name.includes('.') ? `.${file.name.split('.').pop().toLowerCase()}` : '';
     return accepts.some((accept)=>{
+        if (accept.startsWith('.')) {
+            // 以副檔名檢查，忽略大小寫
+            return fileExt === accept.toLowerCase();
+        }
         if (accept === fileMimeType) {
             return true;
         }
         if (accept.endsWith('/*')) {
-            const acceptedCategory = accept.split('/')[0];
-            const fileCategory = fileMimeType.split('/')[0];
-            if (acceptedCategory === fileCategory) {
-                return true;
-            }
+            return accept.split('/')[0] === fileMimeType.split('/')[0];
         }
         return false;
     });
@@ -287,24 +310,74 @@ function createEnumLikeObject(obj, name, scene) {
  * getMimeType('txt') // 'text/plain'
  * getMimeType('zip') // 'application/zip'
  * getMimeType('mp4') // 'application/octet-stream'
+ * getMimeType('xls') // 'application/vnd.ms-excel'
+ * getMimeType('xlsx') // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ * getMimeType('doc') // 'application/msword'
+ * getMimeType('docx') // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ *
+ * @deprecated use `parseFileInfoFromFilename` instead
  */ const getMimeType = (fileName)=>{
-    switch((fileName.split('.').pop() || '').toLocaleLowerCase()){
-        case 'jpeg':
-        case 'jpg':
-            return 'image/jpeg';
-        case 'png':
-            return 'image/png';
-        case 'pdf':
-            return 'application/pdf';
-        case 'zip':
-            return 'application/zip';
-        case 'csv':
-            return 'text/csv';
-        case 'txt':
-            return 'text/plain';
-        default:
-            return 'application/octet-stream';
+    const ext = (fileName.split('.').pop() || '').toLowerCase();
+    return MimeTypeMap[ext] ?? OtherMimeType;
+};
+/**
+ * 用來解析後端在 response header content-disposition 的內容
+ *
+ * 一般來說格式會有以下兩種
+ *
+ * - Content-Disposition: attachment; filename="file name.jpg"
+ * - Content-Disposition: attachment; filename*=UTF-8''file%20name2.jpg
+ *
+ * 如果格式正確就會取得檔案名稱(包含副檔名)，優先取 filename* 內的內容
+ *
+ * @param disposition Content-Disposition
+ *
+ * @example
+ *
+ * parseFilenameFromDisposition('attachment; filename="file name1.jpg') // file name.jpg
+ * parseFilenameFromDisposition('attachment; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ * parseFilenameFromDisposition('attachment; filename="file name.jpg; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ */ const parseFilenameFromDisposition = (disposition)=>{
+    // 1. 先找 filename*
+    const filenameStarMatch = disposition.match(/filename\*\s*=\s*(?:UTF-8'')?([^;]+)/i);
+    if (filenameStarMatch && filenameStarMatch[1]) {
+        // 依 RFC 5987 格式（UTF-8''URL-ENCODED），要先 decode
+        try {
+            return decodeURIComponent(filenameStarMatch[1].replace(/(^['"]|['"]$)/g, ''));
+        } catch  {
+            // fallback，如果 decode 失敗，直接傳回原值
+            return filenameStarMatch[1];
+        }
     }
+    // 2. 沒有 filename*，再找 filename
+    const filenameMatch = disposition.match(/filename\s*=\s*("?)([^";]+)\1/i);
+    if (filenameMatch && filenameMatch[2]) {
+        return filenameMatch[2];
+    }
+    // 3. 都沒有則 undefined
+    return undefined;
+};
+/**
+ * 解析 `filename` 回傳檔名、副檔名、MIME type
+ *
+ * @param filename 檔案名稱
+ *
+ * @example
+ *
+ * parseFileInfoFromFilename('image.jpg') // ['image', 'jpg', 'image/jpeg']
+ * parseFileInfoFromFilename('image') // ['image', '', 'application/octet-stream']
+ */ const parseFileInfoFromFilename = (filename)=>{
+    const lastDot = filename.lastIndexOf('.');
+    if (lastDot === -1) return [
+        filename,
+        '',
+        OtherMimeType
+    ]; // 沒有副檔名
+    return [
+        filename.slice(0, lastDot),
+        filename.slice(lastDot + 1),
+        MimeTypeMap[filename.slice(lastDot + 1)] ?? OtherMimeType
+    ];
 };
 
 // const isProduction: boolean = process.env.NODE_ENV === 'production';
@@ -1226,6 +1299,8 @@ exports.downloadFile = downloadClient.downloadFile;
 exports.getLocalStorage = webStorageClient.getLocalStorage;
 exports.setLocalStorage = webStorageClient.setLocalStorage;
 exports.ByteSize = ByteSize;
+exports.MimeTypeMap = MimeTypeMap;
+exports.OtherMimeType = OtherMimeType;
 exports.adToRocEra = adToRocEra;
 exports.camelCase2PascalCase = camelCase2PascalCase;
 exports.camelCase2SnakeCase = camelCase2SnakeCase;
@@ -1266,6 +1341,8 @@ exports.mergeRefs = mergeRefs;
 exports.objectToSearchParams = objectToSearchParams;
 exports.omit = omit;
 exports.omitByValue = omitByValue;
+exports.parseFileInfoFromFilename = parseFileInfoFromFilename;
+exports.parseFilenameFromDisposition = parseFilenameFromDisposition;
 exports.pascalCase2CamelCase = pascalCase2CamelCase;
 exports.pascalCase2SnakeCase = pascalCase2SnakeCase;
 exports.pascalString2CamelString = pascalString2CamelString;

package/dist/es/index.d.mts

@@ -474,11 +474,33 @@ declare const fakeApi: <T>(returnValue: T, result?: boolean, time?: number) => P
     message: string;
 }>;
 
+declare const MimeTypeMap: {
+    readonly jpeg: "image/jpeg";
+    readonly jpg: "image/jpeg";
+    readonly gif: "image/gif";
+    readonly png: "image/png";
+    readonly pdf: "application/pdf";
+    readonly zip: "application/zip";
+    readonly csv: "text/csv";
+    readonly ppt: "application/vnd.ms-powerpoint";
+    readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly xls: "application/vnd.ms-excel";
+    readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly doc: "application/msword";
+    readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly txt: "text/plain";
+};
+declare const OtherMimeType = "application/octet-stream";
+type MimeTypeExtension = keyof typeof MimeTypeMap;
+type MimeTypeValue = (typeof MimeTypeMap)[MimeTypeExtension] | typeof OtherMimeType;
+
 /**
- * 檢查檔案是否為合法的 MIME 類型
+ * 檢查檔案是否為合法的檔案類型
+ *
+ * `accepts` 可同時接受副檔名以及 MIME 類型
  *
  * @param file 檔案
- * @param accepts 允許的 MIME 類型
+ * @param accepts 允許的類型
  *
  * @example
  *
@@ -486,6 +508,7 @@ declare const fakeApi: <T>(returnValue: T, result?: boolean, time?: number) => P
  * validateFileType({ type: 'image/png' }, ['image/png', 'image/jpeg']) // true
  * validateFileType({ type: 'image/png' }, ['image/jpeg']) // false
  * validateFileType({ type: 'image/png' }, ['image/*']) // true
+ * validateFileType({ name: '圖片.png', type: 'image/png' }, ['.png']) // true
  * ```
  */
 declare const validateFileType: (file: File, accepts: string[]) => boolean;
@@ -507,8 +530,44 @@ declare const validateFileType: (file: File, accepts: string[]) => boolean;
  * getMimeType('txt') // 'text/plain'
  * getMimeType('zip') // 'application/zip'
  * getMimeType('mp4') // 'application/octet-stream'
+ * getMimeType('xls') // 'application/vnd.ms-excel'
+ * getMimeType('xlsx') // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ * getMimeType('doc') // 'application/msword'
+ * getMimeType('docx') // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ *
+ * @deprecated use `parseFileInfoFromFilename` instead
+ */
+declare const getMimeType: (fileName: string) => "image/jpeg" | "image/gif" | "image/png" | "application/pdf" | "application/zip" | "text/csv" | "application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "text/plain";
+/**
+ * 用來解析後端在 response header content-disposition 的內容
+ *
+ * 一般來說格式會有以下兩種
+ *
+ * - Content-Disposition: attachment; filename="file name.jpg"
+ * - Content-Disposition: attachment; filename*=UTF-8''file%20name2.jpg
+ *
+ * 如果格式正確就會取得檔案名稱(包含副檔名)，優先取 filename* 內的內容
+ *
+ * @param disposition Content-Disposition
+ *
+ * @example
+ *
+ * parseFilenameFromDisposition('attachment; filename="file name1.jpg') // file name.jpg
+ * parseFilenameFromDisposition('attachment; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ * parseFilenameFromDisposition('attachment; filename="file name.jpg; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ */
+declare const parseFilenameFromDisposition: (disposition: string) => string | undefined;
+/**
+ * 解析 `filename` 回傳檔名、副檔名、MIME type
+ *
+ * @param filename 檔案名稱
+ *
+ * @example
+ *
+ * parseFileInfoFromFilename('image.jpg') // ['image', 'jpg', 'image/jpeg']
+ * parseFileInfoFromFilename('image') // ['image', '', 'application/octet-stream']
  */
-declare const getMimeType: (fileName: string) => "image/jpeg" | "image/png" | "application/pdf" | "application/zip" | "text/csv" | "text/plain" | "application/octet-stream";
+declare const parseFileInfoFromFilename: (filename: string) => [string, string, MimeTypeValue];
 
 declare function invariant(condition: any, message?: string | (() => string)): asserts condition;
 
@@ -1145,4 +1204,4 @@ declare const getLocalStorage: <T>(key: string, deCode?: boolean) => T | undefin
  */
 declare const setLocalStorage: (key: string, value: Record<string, any>, enCode?: boolean) => void;
 
-export { ByteSize, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };
+export { ByteSize, type MimeTypeExtension, MimeTypeMap, type MimeTypeValue, OtherMimeType, type PartialBy, QueryProvider, type RequiredBy, type TCountdownActions, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, downloadFile, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getLocalStorage, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, parseFileInfoFromFilename, parseFilenameFromDisposition, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, setLocalStorage, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useCountdown, useQueryContext, useValue, validTaxId, validateDateString, validateFileType, wait };

package/dist/es/index.mjs

@@ -231,11 +231,31 @@ function createEnumLikeObject(obj, name, scene) {
         }, time);
     });
 
+const MimeTypeMap = {
+    jpeg: 'image/jpeg',
+    jpg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    pdf: 'application/pdf',
+    zip: 'application/zip',
+    csv: 'text/csv',
+    ppt: 'application/vnd.ms-powerpoint',
+    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    xls: 'application/vnd.ms-excel',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    doc: 'application/msword',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    txt: 'text/plain'
+};
+const OtherMimeType = 'application/octet-stream';
+
 /**
- * 檢查檔案是否為合法的 MIME 類型
+ * 檢查檔案是否為合法的檔案類型
+ *
+ * `accepts` 可同時接受副檔名以及 MIME 類型
  *
  * @param file 檔案
- * @param accepts 允許的 MIME 類型
+ * @param accepts 允許的類型
  *
  * @example
  *
@@ -243,21 +263,24 @@ function createEnumLikeObject(obj, name, scene) {
  * validateFileType({ type: 'image/png' }, ['image/png', 'image/jpeg']) // true
  * validateFileType({ type: 'image/png' }, ['image/jpeg']) // false
  * validateFileType({ type: 'image/png' }, ['image/*']) // true
+ * validateFileType({ name: '圖片.png', type: 'image/png' }, ['.png']) // true
  * ```
  */ const validateFileType = (file, accepts)=>{
     if (accepts.length === 0) return true;
     // 獲取文件的MIME類型
     const fileMimeType = file.type;
+    // 提取副檔名（含 .，且轉小寫）
+    const fileExt = file.name.includes('.') ? `.${file.name.split('.').pop().toLowerCase()}` : '';
     return accepts.some((accept)=>{
+        if (accept.startsWith('.')) {
+            // 以副檔名檢查，忽略大小寫
+            return fileExt === accept.toLowerCase();
+        }
         if (accept === fileMimeType) {
             return true;
         }
         if (accept.endsWith('/*')) {
-            const acceptedCategory = accept.split('/')[0];
-            const fileCategory = fileMimeType.split('/')[0];
-            if (acceptedCategory === fileCategory) {
-                return true;
-            }
+            return accept.split('/')[0] === fileMimeType.split('/')[0];
         }
         return false;
     });
@@ -280,24 +303,74 @@ function createEnumLikeObject(obj, name, scene) {
  * getMimeType('txt') // 'text/plain'
  * getMimeType('zip') // 'application/zip'
  * getMimeType('mp4') // 'application/octet-stream'
+ * getMimeType('xls') // 'application/vnd.ms-excel'
+ * getMimeType('xlsx') // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ * getMimeType('doc') // 'application/msword'
+ * getMimeType('docx') // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ *
+ * @deprecated use `parseFileInfoFromFilename` instead
  */ const getMimeType = (fileName)=>{
-    switch((fileName.split('.').pop() || '').toLocaleLowerCase()){
-        case 'jpeg':
-        case 'jpg':
-            return 'image/jpeg';
-        case 'png':
-            return 'image/png';
-        case 'pdf':
-            return 'application/pdf';
-        case 'zip':
-            return 'application/zip';
-        case 'csv':
-            return 'text/csv';
-        case 'txt':
-            return 'text/plain';
-        default:
-            return 'application/octet-stream';
+    const ext = (fileName.split('.').pop() || '').toLowerCase();
+    return MimeTypeMap[ext] ?? OtherMimeType;
+};
+/**
+ * 用來解析後端在 response header content-disposition 的內容
+ *
+ * 一般來說格式會有以下兩種
+ *
+ * - Content-Disposition: attachment; filename="file name.jpg"
+ * - Content-Disposition: attachment; filename*=UTF-8''file%20name2.jpg
+ *
+ * 如果格式正確就會取得檔案名稱(包含副檔名)，優先取 filename* 內的內容
+ *
+ * @param disposition Content-Disposition
+ *
+ * @example
+ *
+ * parseFilenameFromDisposition('attachment; filename="file name1.jpg') // file name.jpg
+ * parseFilenameFromDisposition('attachment; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ * parseFilenameFromDisposition('attachment; filename="file name.jpg; filename*=UTF-8''file%20name2.jpg') // file name2.jpg
+ */ const parseFilenameFromDisposition = (disposition)=>{
+    // 1. 先找 filename*
+    const filenameStarMatch = disposition.match(/filename\*\s*=\s*(?:UTF-8'')?([^;]+)/i);
+    if (filenameStarMatch && filenameStarMatch[1]) {
+        // 依 RFC 5987 格式（UTF-8''URL-ENCODED），要先 decode
+        try {
+            return decodeURIComponent(filenameStarMatch[1].replace(/(^['"]|['"]$)/g, ''));
+        } catch  {
+            // fallback，如果 decode 失敗，直接傳回原值
+            return filenameStarMatch[1];
+        }
     }
+    // 2. 沒有 filename*，再找 filename
+    const filenameMatch = disposition.match(/filename\s*=\s*("?)([^";]+)\1/i);
+    if (filenameMatch && filenameMatch[2]) {
+        return filenameMatch[2];
+    }
+    // 3. 都沒有則 undefined
+    return undefined;
+};
+/**
+ * 解析 `filename` 回傳檔名、副檔名、MIME type
+ *
+ * @param filename 檔案名稱
+ *
+ * @example
+ *
+ * parseFileInfoFromFilename('image.jpg') // ['image', 'jpg', 'image/jpeg']
+ * parseFileInfoFromFilename('image') // ['image', '', 'application/octet-stream']
+ */ const parseFileInfoFromFilename = (filename)=>{
+    const lastDot = filename.lastIndexOf('.');
+    if (lastDot === -1) return [
+        filename,
+        '',
+        OtherMimeType
+    ]; // 沒有副檔名
+    return [
+        filename.slice(0, lastDot),
+        filename.slice(lastDot + 1),
+        MimeTypeMap[filename.slice(lastDot + 1)] ?? OtherMimeType
+    ];
 };
 
 // const isProduction: boolean = process.env.NODE_ENV === 'production';
@@ -1212,4 +1285,4 @@ function mergeRefs(refs) {
     return dayjs(endMonth, 'YYYYMM').subtract(1911, 'year').format('YYYYMM').substring(1);
 };
 
-export { ByteSize, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useValue, validTaxId, validateDateString, validateFileType, wait };
+export { ByteSize, MimeTypeMap, OtherMimeType, adToRocEra, camelCase2PascalCase, camelCase2SnakeCase, camelString2PascalString, camelString2SnakeString, convertBytes, createDataContext, createEnumLikeObject, debounce, deepMerge, extractEnumLikeObject, fakeApi, formatAmount, formatBytes, formatStarMask, generatePeriodArray, getCurrentPeriod, getMimeType, invariant, isChinese, isDateString, isDateTimeString, isEmail, isEnglish, isEqual, isNonZeroStart, isNumber, isNumberAtLeastN, isNumberN, isNumberNM, isServer, isTWMobile, isTWPhone, isTimeString, isValidPassword, maskString, mergeRefs, objectToSearchParams, omit, omitByValue, parseFileInfoFromFilename, parseFilenameFromDisposition, pascalCase2CamelCase, pascalCase2SnakeCase, pascalString2CamelString, pascalString2SnakeString, pick, pickByValue, rocEraToAd, searchParamsToObject, snakeCase2CamelCase, snakeCase2PascalCase, snakeString2CamelString, snakeString2PascalString, throttle, useValue, validTaxId, validateDateString, validateFileType, wait };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gateweb/react-utils",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "React Utils for GateWeb",
   "homepage": "https://github.com/GatewebSolutions/react-utils",
   "files": [