Root: ui|v2.5|src|components|Galleries|GalleryDetails: GalleryAddPanel.tsx

GalleryAddPanel.tsx

The file GalleryAddPanel.tsx contains the GalleryAddPanel component, responsible for displaying a panel to add images to a gallery. Here's an explanation of its structure and functionality:

1. Imports: The component imports necessary modules and components from various libraries such as React, react-intl, FontAwesome, and custom components related to galleries and images.

2. Props:

   • active: Boolean indicating whether the panel is active.
   • gallery: Data of the gallery to which images are to be added.

3. Functionality:

   • Provides a function filterHook to handle modification or addition of gallery criterion in the filter model.
   • Implements an addImages function to add selected images to the gallery.
   • Utilizes StashService function mutateAddGalleryImages for adding images and useToast hook for displaying toast messages.
   • Defines otherOperations array containing an operation to add selected images to the gallery.

4. Rendering:

   • Utilizes the ImageList component to render the list of images and provide functionality to add images to the gallery.
   • Passes the filterHook, otherOperations, and active props to the ImageList component.

Example Modification:

Let's say you want to add a button to clear the selection of images. Here's how you can modify the component:

import React from "react";
// Import other necessary modules

interface IGalleryAddProps {
  // Existing props...
}

export const GalleryAddPanel: React.FC<IGalleryAddProps> = ({
  active,
  gallery,
}) => {
  // Existing component logic...

  const clearSelection = () => {
    // Logic to clear the selection
    // For example, reset the selectedIds set
  };

  const otherOperations = [
    // Existing operations...
    {
      text: intl.formatMessage({ id: "actions.clear_selection" }),
      onClick: clearSelection,
      isDisplayed: showWhenSelected,
      postRefetch: true,
      icon: faTimes, // FontAwesome icon for clearing selection
    },
  ];

  // Remaining JSX...
};

Explanation

Added Button:

• Defined a new function clearSelection to handle clearing the selection of images.
• Added a new operation in the otherOperations array to execute the clearSelection function.
• Utilized FontAwesome icon faTimes for representing the clear action.