zentrixui/dist/components/file-upload/feedback/error-feedback.js

ZentrixUI - A modern, highly customizable and accessible React file upload component library with multiple variants, JSON-based configuration, and excellent developer experience.

import { jsx, jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { useFileUpload } from "../file-upload-context.js";
import { ErrorDisplay } from "../error-display.js";
import { AccessibilityAnnouncer } from "../accessibility-announcer.js";
import { cn } from "../../../utils/theme.js";
const ErrorFeedback = ({
  className,
  compact = false,
  showTechnicalDetails = false,
  maxErrors = 5,
  groupByType = false,
  showAccessibilityAnnouncer = true
}) => {
  const { processedErrors, actions, config } = useFileUpload();
  const handleErrorAction = useCallback((action, error) => {
    switch (action.type) {
      case "retry":
        if (error.context.fileName) {
          const fileToRetry = actions.state?.files.find((f) => f.name === error.context.fileName);
          if (fileToRetry) {
            actions.retryUpload(fileToRetry.id);
          }
        } else {
          actions.retryFailedUploads();
        }
        actions.dismissError(error.id);
        break;
      case "remove":
        if (error.context.fileName) {
          const fileToRemove = actions.state?.files.find((f) => f.name === error.context.fileName);
          if (fileToRemove) {
            actions.removeFile(fileToRemove.id);
          }
        }
        actions.dismissError(error.id);
        break;
      case "clear":
        actions.clearFailedUploads();
        actions.dismissAllErrors();
        break;
      case "refresh":
        window.location.reload();
        break;
      case "contact":
        console.log("Contact support for error:", error.id);
        break;
      default:
        if (action.handler) {
          action.handler();
        }
        break;
    }
  }, [actions]);
  const handleDismissError = useCallback((errorId) => {
    actions.dismissError(errorId);
  }, [actions]);
  const handleDismissAllErrors = useCallback(() => {
    actions.dismissAllErrors();
  }, [actions]);
  if (processedErrors.length === 0) {
    return showAccessibilityAnnouncer ? /* @__PURE__ */ jsx(
      AccessibilityAnnouncer,
      {
        errors: processedErrors,
        announceErrors: config.accessibility.announceErrors,
        announceProgress: config.accessibility.announceProgress,
        announceFileSelection: config.accessibility.announceFileSelection
      }
    ) : null;
  }
  return /* @__PURE__ */ jsxs("div", { className: cn("error-feedback-container", className), children: [
    showAccessibilityAnnouncer && /* @__PURE__ */ jsx(
      AccessibilityAnnouncer,
      {
        errors: processedErrors,
        announceErrors: config.accessibility.announceErrors,
        announceProgress: config.accessibility.announceProgress,
        announceFileSelection: config.accessibility.announceFileSelection
      }
    ),
    /* @__PURE__ */ jsx(
      ErrorDisplay,
      {
        errors: processedErrors,
        onAction: handleErrorAction,
        onDismiss: handleDismissError,
        onDismissAll: handleDismissAllErrors,
        compact,
        showTechnicalDetails,
        maxErrors,
        groupByType
      }
    )
  ] });
};
ErrorFeedback.displayName = "ErrorFeedback";
export {
  ErrorFeedback
};
//# sourceMappingURL=error-feedback.js.map