[ISSUE] Optional Callback Props Throw Error When Not Passed

[Saifullah-dev]

Description

When optional callback props aren't provided to the <FileManager /> component, it results in an error. This issue occurs because the component attempts to invoke these callbacks regrardless of whether they're defined, leading to Uncaught TypeError: xyz is not a function errors.

Steps to Reproduce

1. Render <FileManager /> without providing the optional callback props e.g. onFileOpen.
2. Trigger the file open action by double clicking a file which would call this callback function.
3. Observe the console error indicating that onFileOpen as l is not a function.

Expected Behavior

The component should check if each callback prop is defined before attempting to call it. If a callback is not provided, the component should proceed without error.

Actual Behavior

The component throws an error when optional callbacks are missing, as it tries to call them without checking if they exists.

Possible Solution

In the <FileManager /> component, there are different types of callback props:

• API-level callback functions: These functions trigger important operations such as creating a folder, pasting files, or uploading files (e.g., onCreateFolder, onPaste, onFileUploading). If these callbacks are not provided, it should throw a user-friendly error because these functions are critical for the component’s functionality and the absence of these functions would prevent key operations from executing. Use try-catch blocks for throwing errors.
• Event-level callback functions: These functions handle events like layout changes or file uploads (e.g., onLayoutChange, onUploaded). These are optional for the user and should not throw errors. Instead, they should have default values (() => {}) to ensure the component behaves gracefully even if they are not provided.

Creating a utility function to handle API callbacks safely:

const validateApiCallback = (callback, callbackName, ...args) => {
  try {
    if (typeof callback === 'function') {
      callback(...args);  // Call the API function if it exists
    } else {
      throw new Error(
        `<FileManager /> Missing prop: Callback function "${callbackName}" is required.`
      );
    }
  } catch (error) {
    console.error(error.message);
  }
};

// Usage example:
validateApiCallback(onCreateFolder, "onCreateFolder", newFolderName, currentFolder);

Additional Context:

This error impact usage in cases where these callback functions are not necessary and leads to unexpected runtime errors in production.

[github-actions]

🎉 This issue has been resolved in version 1.9.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀