Event Data Types

/**
 * Represents component value changes with metadata
 */
interface ValueData {
  /** The actual value from the component */
  value: any;
  /** Flag indicating this is value data */
  is_value_data: boolean;
}

import { type ValueData } from "@gradio/utils";

function handleValueChange(data: ValueData) {
  if (data.is_value_data) {
    console.log("New value:", data.value);
  }
}

/**
 * Represents selection events from interactive components
 */
interface SelectData {
  /** Row values for table selections (optional) */
  row_value?: any[];
  /** Column values for table selections (optional) */
  col_value?: any[];
  /** Index of selected item - single number or [row, col] for tables */
  index: number | [number, number];
  /** The selected value */
  value: any;
  /** Whether the item is currently selected (optional) */
  selected?: boolean;
}

import { type SelectData } from "@gradio/utils";

// Handle list selection
function handleListSelect(data: SelectData) {
  console.log(`Selected item ${data.index}:`, data.value);
}

// Handle table selection
function handleTableSelect(data: SelectData) {
  if (Array.isArray(data.index)) {
    const [row, col] = data.index;
    console.log(`Selected cell [${row}, ${col}]:`, data.value);
    console.log("Row data:", data.row_value);
    console.log("Column data:", data.col_value);
  }
}

/**
 * Represents like/unlike events from rating components
 */
interface LikeData {
  /** Index of the liked item - single number or [row, col] for tables */
  index: number | [number, number];
  /** The value of the liked item */
  value: any;
  /** Like status - boolean for simple like/unlike, string for rating systems */
  liked?: boolean | string;
}

import { type LikeData } from "@gradio/utils";

// Handle simple like/unlike
function handleLike(data: LikeData) {
  if (typeof data.liked === "boolean") {
    console.log(`Item ${data.index} ${data.liked ? "liked" : "unliked"}`);
  }
}

// Handle rating system
function handleRating(data: LikeData) {
  if (typeof data.liked === "string") {
    console.log(`Item ${data.index} rated: ${data.liked}`);
  }
}

/**
 * Represents keyboard events with key and input context
 */
interface KeyUpData {
  /** The key that was pressed */
  key: string;
  /** Current value of the input field */
  input_value: string;
}

import { type KeyUpData } from "@gradio/utils";

function handleKeyUp(data: KeyUpData) {
  if (data.key === "Enter") {
    console.log("Enter pressed with input:", data.input_value);
  }
  
  if (data.key === "Escape") {
    console.log("Escape pressed, clearing input");
  }
}

/**
 * Represents sharing events with content metadata
 */
interface ShareData {
  /** Description of the content being shared */
  description: string;
  /** Optional title for the shared content */
  title?: string;
}

import { type ShareData } from "@gradio/utils";

function handleShare(data: ShareData) {
  const shareText = data.title 
    ? `${data.title}: ${data.description}`
    : data.description;
    
  if (navigator.share) {
    navigator.share({
      title: data.title,
      text: data.description
    });
  }
}

/**
 * Represents copy-to-clipboard events
 */
interface CopyData {
  /** The content that was copied to clipboard */
  value: string;
}

import { type CopyData } from "@gradio/utils";

function handleCopy(data: CopyData) {
  console.log("Copied to clipboard:", data.value);
  // Show feedback to user
  showToast("Content copied to clipboard!");
}

import { 
  type ValueData, 
  type SelectData, 
  type LikeData 
} from "@gradio/utils";

function handleEvent(data: ValueData | SelectData | LikeData) {
  if ("is_value_data" in data) {
    // This is ValueData
    console.log("Value changed:", data.value);
  } else if ("selected" in data) {
    // This is SelectData
    console.log("Selection changed:", data.index);
  } else if ("liked" in data) {
    // This is LikeData
    console.log("Like status changed:", data.liked);
  }
}