@ctlyst.id/internal-ui 5.4.8 → 5.4.10

package/dist/index.d.mts

@@ -803,7 +803,7 @@ type UploaderProps = FlexProps & {
     /**
      * callback when validation is not valid
      */
-    onHandleRejections?: (file: File, image: HTMLImageElement | null) => void;
+    onHandleRejections?: (file: File, image: HTMLImageElement | null, type?: string | keyof typeof ErrorCode) => void;
     /**
      * Text for drag active
      * - if `dragActiveText` is undefined. Text will take from default constant.
@@ -893,6 +893,24 @@ type UploaderProps = FlexProps & {
     testId?: string;
     isShowReupload?: boolean;
     size?: 'sm' | 'lg';
+    buttonChangeText?: string;
+    /**
+     * Custom error messages for different error types
+     * Each error type can have a custom message and display type
+     * - message: The error message to display
+     * - type: How to display the error ('toast' for popup notification, 'inline' for inline text)
+     * Example:
+     * {
+     *   'file-invalid-type': { message: 'Invalid file type', type: 'inline' },
+     *   'file-too-large': { message: 'File too large', type: 'toast' }
+     * }
+     */
+    customErrorRejection?: {
+        [key in ErrorCode]?: {
+            message: string;
+            type: 'inline' | 'toast';
+        };
+    };
 };
 
 declare const Uploader: React__default.FC<UploaderProps>;
@@ -932,10 +950,11 @@ declare enum ErrorCode {
     FileTooLarge = "file-too-large",
     FileTooSmall = "file-too-small",
     TooManyFiles = "too-many-files",
-    FileInvalidDimension = "file-invalid-dimension"
+    FileInvalidDimension = "file-invalid-dimension",
+    FileInvalid = "file-invalid"
 }
 
-declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null) => void) => void;
+declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null, type?: string) => void) => void;
 
 interface ImageRes {
     width: number;

package/dist/index.d.ts

@@ -803,7 +803,7 @@ type UploaderProps = FlexProps & {
     /**
      * callback when validation is not valid
      */
-    onHandleRejections?: (file: File, image: HTMLImageElement | null) => void;
+    onHandleRejections?: (file: File, image: HTMLImageElement | null, type?: string | keyof typeof ErrorCode) => void;
     /**
      * Text for drag active
      * - if `dragActiveText` is undefined. Text will take from default constant.
@@ -893,6 +893,24 @@ type UploaderProps = FlexProps & {
     testId?: string;
     isShowReupload?: boolean;
     size?: 'sm' | 'lg';
+    buttonChangeText?: string;
+    /**
+     * Custom error messages for different error types
+     * Each error type can have a custom message and display type
+     * - message: The error message to display
+     * - type: How to display the error ('toast' for popup notification, 'inline' for inline text)
+     * Example:
+     * {
+     *   'file-invalid-type': { message: 'Invalid file type', type: 'inline' },
+     *   'file-too-large': { message: 'File too large', type: 'toast' }
+     * }
+     */
+    customErrorRejection?: {
+        [key in ErrorCode]?: {
+            message: string;
+            type: 'inline' | 'toast';
+        };
+    };
 };
 
 declare const Uploader: React__default.FC<UploaderProps>;
@@ -932,10 +950,11 @@ declare enum ErrorCode {
     FileTooLarge = "file-too-large",
     FileTooSmall = "file-too-small",
     TooManyFiles = "too-many-files",
-    FileInvalidDimension = "file-invalid-dimension"
+    FileInvalidDimension = "file-invalid-dimension",
+    FileInvalid = "file-invalid"
 }
 
-declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null) => void) => void;
+declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null, type?: string) => void) => void;
 
 interface ImageRes {
     width: number;

package/dist/index.js

@@ -6082,6 +6082,7 @@ var ErrorCode = /* @__PURE__ */ ((ErrorCode2) => {
   ErrorCode2["FileTooSmall"] = "file-too-small";
   ErrorCode2["TooManyFiles"] = "too-many-files";
   ErrorCode2["FileInvalidDimension"] = "file-invalid-dimension";
+  ErrorCode2["FileInvalid"] = "file-invalid";
   return ErrorCode2;
 })(ErrorCode || {});
 var error_code_default = ErrorCode;
@@ -6098,19 +6099,24 @@ var defaultOnHandleRejections = (fileRejection, config2, handleRejection) => {
         handleRejection(
           (_d = (_b = config2.acceptFormat) == null ? void 0 : _b.message) != null ? _d : formatValidationMessage((_c = config2.acceptFormat) == null ? void 0 : _c.validate),
           file,
-          null
+          null,
+          error_code_default.FileInvalidType
         );
       }
       break;
     }
     case error_code_default.FileTooLarge: {
       if (config2.maxFileSize) {
-        handleRejection(config2.maxFileSize.message, file, null);
+        handleRejection(config2.maxFileSize.message, file, null, error_code_default.FileTooLarge);
       }
       break;
     }
+    case error_code_default.TooManyFiles: {
+      handleRejection(errors3[0].message, file, null, error_code_default.TooManyFiles);
+      break;
+    }
     default:
-      handleRejection(errors3[0].message, file, null);
+      handleRejection(errors3[0].message, file, null, error_code_default.FileInvalid);
       break;
   }
 };
@@ -6139,24 +6145,41 @@ var Uploader = ({
   value,
   isShowCloseButton = true,
   testId,
-  isError,
-  errorText,
+  isError: propIsError,
+  errorText: propErrorText,
   isShowReupload = true,
   size: size2 = "lg",
   validatorExt,
+  buttonChangeText = "Ubah Foto",
+  customErrorRejection,
   ...props
 }) => {
   const [filePreview, setFilePreview] = (0, import_react94.useState)();
+  const [isError, setIsError] = (0, import_react94.useState)(propIsError);
+  const [errorText, setErrorText] = (0, import_react94.useState)(propErrorText);
   const toast2 = useToast();
   const handleRejection = (0, import_react94.useCallback)(
-    (message, file, image) => {
+    (message, file, image, errorCode) => {
       if (onHandleRejections) {
-        onHandleRejections(file, image);
+        onHandleRejections(file, image, errorCode);
       }
+      if (customErrorRejection == null ? void 0 : customErrorRejection[errorCode]) {
+        const error = customErrorRejection[errorCode];
+        if ((error == null ? void 0 : error.type) === "toast") {
+          return toast2.error(error.message);
+        }
+        if ((error == null ? void 0 : error.type) === "inline") {
+          setIsError(true);
+          setErrorText(error.message);
+          return error.message;
+        }
+      }
+      setIsError(true);
+      setErrorText(message);
       return toast2.error(message);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onHandleRejections]
+    [onHandleRejections, customErrorRejection]
   );
   const onDropAccepted = (0, import_react94.useCallback)(
     (files) => {
@@ -6255,6 +6278,10 @@ var Uploader = ({
           setFilePreview(value.name);
           return;
         }
+        if (acceptFileType == null ? void 0 : acceptFileType.some((type) => type === value.type)) {
+          setFilePreview(value.name);
+          return;
+        }
         setFilePreview(URL.createObjectURL(value));
       }
     } else {
@@ -6317,7 +6344,7 @@ var Uploader = ({
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
               justify: "center",
               align: "center",
-              children: filePreview.includes("blob") ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              children: filePreview.includes("blob") && !acceptFile.some(([type]) => typeof type === "string" && type.includes("image/")) ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 import_react93.Image,
                 {
                   h: size2 === "lg" ? "120" : "100",
@@ -6362,7 +6389,7 @@ var Uploader = ({
         size: "sm",
         variant: "outline",
         onClick: open,
-        children: "Ubah Foto"
+        children: buttonChangeText
       }
     ) }),
     renderErrorText(errorText),