Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2026-01-27 02:23:06 +01:00
Code Issues Projects Releases Wiki Activity

Plugin API - card grid components (#6482)

Browse source 
* SceneCardsGrid plugin API patch
* GalleryCardGrid plugin API patch
* GroupCardGrid plugin API patch
* ImageGridCard plugin API patch
* PerformerCardGrid plugin API patch
* ImageGridCard name corrected
* SceneMarkerCardsGrid plugin API patch
* StudioCardGrid plugin API patch
* TagCardGrid plugin API patch
* GalleryGridCard.tsx renamed to GalleryCardGrid.tsx
* ImageGridCard renamed to ImageCardGrid
* SceneCardsGrid renamed to SceneCardGrid
* SceneMarkerCardsGrid renamed to SceneMarkerCardGrid
This commit is contained in:
Valkyr-JS 2026-01-13 04:49:50 +00:00 committed by GitHub
parent deada580e5
commit 6049b21d22
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 305 additions and 310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ui/v2.5/src/components/Galleries/GalleryCardGrid.tsx Normal file
View file

@ -0,0 +1,43 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { GalleryCard } from "./GalleryCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { PatchComponent } from "src/patch";
interface IGalleryCardGrid {
galleries: GQL.SlimGalleryDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
const zoomWidths = [280, 340, 480, 640];
export const GalleryCardGrid: React.FC<IGalleryCardGrid> = PatchComponent(
"GalleryCardGrid",
({ galleries, selectedIds, zoomIndex, onSelectChange }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{galleries.map((gallery) => (
<GalleryCard
key={gallery.id}
cardWidth={cardWidth}
gallery={gallery}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(gallery.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(gallery.id, selected, shiftKey)
}
/>
))}
</div>
);
}
);

44
ui/v2.5/src/components/Galleries/GalleryGridCard.tsx
View file

@ -1,44 +0,0 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { GalleryCard } from "./GalleryCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
interface IGalleryCardGrid {
galleries: GQL.SlimGalleryDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
const zoomWidths = [280, 340, 480, 640];
export const GalleryCardGrid: React.FC<IGalleryCardGrid> = ({
galleries,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{galleries.map((gallery) => (
<GalleryCard
key={gallery.id}
cardWidth={cardWidth}
gallery={gallery}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(gallery.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(gallery.id, selected, shiftKey)
}
/>
))}
</div>
);
};

2
ui/v2.5/src/components/Galleries/GalleryList.tsx
View file

@ -13,7 +13,7 @@ import { EditGalleriesDialog } from "./EditGalleriesDialog";
import { DeleteGalleriesDialog } from "./DeleteGalleriesDialog";
import { ExportDialog } from "../Shared/ExportDialog";
import { GalleryListTable } from "./GalleryListTable";
import { GalleryCardGrid } from "./GalleryGridCard";
import { GalleryCardGrid } from "./GalleryCardGrid";
import { View } from "../List/views";
import { PatchComponent } from "src/patch";
import { IItemListOperation } from "../List/FilteredListToolbar";

57
ui/v2.5/src/components/Groups/GroupCardGrid.tsx
View file

@ -5,6 +5,7 @@ import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { PatchComponent } from "src/patch";
interface IGroupCardGrid {
groups: GQL.ListGroupDataFragment[];
@ -17,34 +18,30 @@ interface IGroupCardGrid {
const zoomWidths = [210, 250, 300, 375];
export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
groups,
selectedIds,
zoomIndex,
onSelectChange,
fromGroupId,
onMove,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
export const GroupCardGrid: React.FC<IGroupCardGrid> = PatchComponent(
"GroupCardGrid",
({ groups, selectedIds, zoomIndex, onSelectChange, fromGroupId, onMove }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{groups.map((p) => (
<GroupCard
key={p.id}
cardWidth={cardWidth}
group={p}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
fromGroupId={fromGroupId}
onMove={onMove}
/>
))}
</div>
);
};
return (
<div className="row justify-content-center" ref={componentRef}>
{groups.map((p) => (
<GroupCard
key={p.id}
cardWidth={cardWidth}
group={p}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
fromGroupId={fromGroupId}
onMove={onMove}
/>
))}
</div>
);
}
);

47
ui/v2.5/src/components/Images/ImageCardGrid.tsx Normal file
View file

@ -0,0 +1,47 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { ImageCard } from "./ImageCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { PatchComponent } from "src/patch";
interface IImageCardGrid {
images: GQL.SlimImageDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
onPreview: (index: number, ev: React.MouseEvent<Element, MouseEvent>) => void;
}
const zoomWidths = [280, 340, 480, 640];
export const ImageCardGrid: React.FC<IImageCardGrid> = PatchComponent(
"ImageCardGrid",
({ images, selectedIds, zoomIndex, onSelectChange, onPreview }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{images.map((image, index) => (
<ImageCard
key={image.id}
cardWidth={cardWidth}
image={image}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(image.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(image.id, selected, shiftKey)
}
onPreview={
selectedIds.size < 1 ? (ev) => onPreview(index, ev) : undefined
}
/>
))}
</div>
);
}
);

49
ui/v2.5/src/components/Images/ImageGridCard.tsx
View file

@ -1,49 +0,0 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { ImageCard } from "./ImageCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
interface IImageCardGrid {
images: GQL.SlimImageDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
onPreview: (index: number, ev: React.MouseEvent<Element, MouseEvent>) => void;
}
const zoomWidths = [280, 340, 480, 640];
export const ImageGridCard: React.FC<IImageCardGrid> = ({
images,
selectedIds,
zoomIndex,
onSelectChange,
onPreview,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{images.map((image, index) => (
<ImageCard
key={image.id}
cardWidth={cardWidth}
image={image}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(image.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(image.id, selected, shiftKey)
}
onPreview={
selectedIds.size < 1 ? (ev) => onPreview(index, ev) : undefined
}
/>
))}
</div>
);
};

4
ui/v2.5/src/components/Images/ImageList.tsx
View file

@ -22,7 +22,7 @@ import Gallery, { RenderImageProps } from "react-photo-gallery";
import { ExportDialog } from "../Shared/ExportDialog";
import { objectTitle } from "src/core/files";
import { useConfigurationContext } from "src/hooks/Config";
import { ImageGridCard } from "./ImageGridCard";
import { ImageCardGrid } from "./ImageCardGrid";
import { View } from "../List/views";
import { IItemListOperation } from "../List/FilteredListToolbar";
import { FileSize } from "../Shared/FileSize";
@ -263,7 +263,7 @@ const ImageListImages: React.FC<IImageListImages> = ({
if (filter.displayMode === DisplayMode.Grid) {
return (
<ImageGridCard
<ImageCardGrid
images={images}
selectedIds={selectedIds}
zoomIndex={filter.zoomIndex}

54
ui/v2.5/src/components/Performers/PerformerCardGrid.tsx
View file

@ -5,6 +5,7 @@ import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { PatchComponent } from "src/patch";
interface IPerformerCardGrid {
performers: GQL.PerformerDataFragment[];
@ -16,32 +17,29 @@ interface IPerformerCardGrid {
const zoomWidths = [240, 300, 375, 470];
export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
performers,
selectedIds,
zoomIndex,
onSelectChange,
extraCriteria,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
export const PerformerCardGrid: React.FC<IPerformerCardGrid> = PatchComponent(
"PerformerCardGrid",
({ performers, selectedIds, zoomIndex, onSelectChange, extraCriteria }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{performers.map((p) => (
<PerformerCard
key={p.id}
cardWidth={cardWidth}
performer={p}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
extraCriteria={extraCriteria}
/>
))}
</div>
);
};
return (
<div className="row justify-content-center" ref={componentRef}>
{performers.map((p) => (
<PerformerCard
key={p.id}
cardWidth={cardWidth}
performer={p}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(p.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(p.id, selected, shiftKey)
}
extraCriteria={extraCriteria}
/>
))}
</div>
);
}
);

50
ui/v2.5/src/components/Scenes/SceneCardGrid.tsx Normal file
View file

@ -0,0 +1,50 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { SceneQueue } from "src/models/sceneQueue";
import { SceneCard } from "./SceneCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { PatchComponent } from "src/patch";
interface ISceneCardGrid {
scenes: GQL.SlimSceneDataFragment[];
queue?: SceneQueue;
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
fromGroupId?: string;
}
const zoomWidths = [280, 340, 480, 640];
export const SceneCardGrid: React.FC<ISceneCardGrid> = PatchComponent(
"SceneCardGrid",
({ scenes, queue, selectedIds, zoomIndex, onSelectChange, fromGroupId }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{scenes.map((scene, index) => (
<SceneCard
key={scene.id}
width={cardWidth}
scene={scene}
queue={queue}
index={index}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(scene.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(scene.id, selected, shiftKey)
}
fromGroupId={fromGroupId}
/>
))}
</div>
);
}
);

53
ui/v2.5/src/components/Scenes/SceneCardsGrid.tsx
View file

@ -1,53 +0,0 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { SceneQueue } from "src/models/sceneQueue";
import { SceneCard } from "./SceneCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
interface ISceneCardsGrid {
scenes: GQL.SlimSceneDataFragment[];
queue?: SceneQueue;
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
fromGroupId?: string;
}
const zoomWidths = [280, 340, 480, 640];
export const SceneCardsGrid: React.FC<ISceneCardsGrid> = ({
scenes,
queue,
selectedIds,
zoomIndex,
onSelectChange,
fromGroupId,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{scenes.map((scene, index) => (
<SceneCard
key={scene.id}
width={cardWidth}
scene={scene}
queue={queue}
index={index}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(scene.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(scene.id, selected, shiftKey)
}
fromGroupId={fromGroupId}
/>
))}
</div>
);
};

4
ui/v2.5/src/components/Scenes/SceneList.tsx
View file

@ -15,7 +15,7 @@ import { EditScenesDialog } from "./EditScenesDialog";
import { DeleteScenesDialog } from "./DeleteScenesDialog";
import { GenerateDialog } from "../Dialogs/GenerateDialog";
import { ExportDialog } from "../Shared/ExportDialog";
import { SceneCardsGrid } from "./SceneCardsGrid";
import { SceneCardGrid } from "./SceneCardGrid";
import { TaggerContext } from "../Tagger/context";
import { IdentifyDialog } from "../Dialogs/IdentifyDialog/IdentifyDialog";
import { useConfigurationContext } from "src/hooks/Config";
@ -209,7 +209,7 @@ const SceneList: React.FC<{
if (filter.displayMode === DisplayMode.Grid) {
return (
<SceneCardsGrid
<SceneCardGrid
scenes={scenes}
queue={queue}
zoomIndex={filter.zoomIndex}

46
ui/v2.5/src/components/Scenes/SceneMarkerCardGrid.tsx Normal file
View file

@ -0,0 +1,46 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { SceneMarkerCard } from "./SceneMarkerCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { PatchComponent } from "src/patch";
interface ISceneMarkerCardGrid {
markers: GQL.SceneMarkerDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
const zoomWidths = [240, 340, 480, 640];
export const SceneMarkerCardGrid: React.FC<ISceneMarkerCardGrid> =
PatchComponent(
"SceneMarkerCardGrid",
({ markers, selectedIds, zoomIndex, onSelectChange }) => {
const [componentRef, { width: containerWidth }] =
useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{markers.map((marker, index) => (
<SceneMarkerCard
key={marker.id}
cardWidth={cardWidth}
marker={marker}
index={index}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(marker.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(marker.id, selected, shiftKey)
}
/>
))}
</div>
);
}
);

45
ui/v2.5/src/components/Scenes/SceneMarkerCardsGrid.tsx
View file

@ -1,45 +0,0 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { SceneMarkerCard } from "./SceneMarkerCard";
import {
useCardWidth,
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
interface ISceneMarkerCardsGrid {
markers: GQL.SceneMarkerDataFragment[];
selectedIds: Set<string>;
zoomIndex: number;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
const zoomWidths = [240, 340, 480, 640];
export const SceneMarkerCardsGrid: React.FC<ISceneMarkerCardsGrid> = ({
markers,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{markers.map((marker, index) => (
<SceneMarkerCard
key={marker.id}
cardWidth={cardWidth}
marker={marker}
index={index}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(marker.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(marker.id, selected, shiftKey)
}
/>
))}
</div>
);
};

4
ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
View file

@ -14,7 +14,7 @@ import { ListFilterModel } from "src/models/list-filter/filter";
import { DisplayMode } from "src/models/list-filter/types";
import { MarkerWallPanel } from "./SceneMarkerWallPanel";
import { View } from "../List/views";
import { SceneMarkerCardsGrid } from "./SceneMarkerCardsGrid";
import { SceneMarkerCardGrid } from "./SceneMarkerCardGrid";
import { DeleteSceneMarkersDialog } from "./DeleteSceneMarkersDialog";
import { EditSceneMarkersDialog } from "./EditSceneMarkersDialog";
import { PatchComponent } from "src/patch";
@ -109,7 +109,7 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = PatchComponent(
if (filter.displayMode === DisplayMode.Grid) {
return (
<SceneMarkerCardsGrid
<SceneMarkerCardGrid
markers={result.data.findSceneMarkers.scene_markers}
zoomIndex={filter.zoomIndex}
selectedIds={selectedIds}

54
ui/v2.5/src/components/Studios/StudioCardGrid.tsx
View file

@ -5,6 +5,7 @@ import {
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { StudioCard } from "./StudioCard";
import { PatchComponent } from "src/patch";
interface IStudioCardGrid {
studios: GQL.StudioDataFragment[];
@ -16,32 +17,29 @@ interface IStudioCardGrid {
const zoomWidths = [280, 340, 420, 560];
export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
studios,
fromParent,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
export const StudioCardGrid: React.FC<IStudioCardGrid> = PatchComponent(
"StudioCardGrid",
({ studios, fromParent, selectedIds, zoomIndex, onSelectChange }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{studios.map((studio) => (
<StudioCard
key={studio.id}
cardWidth={cardWidth}
studio={studio}
zoomIndex={zoomIndex}
hideParent={fromParent}
selecting={selectedIds.size > 0}
selected={selectedIds.has(studio.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(studio.id, selected, shiftKey)
}
/>
))}
</div>
);
};
return (
<div className="row justify-content-center" ref={componentRef}>
{studios.map((studio) => (
<StudioCard
key={studio.id}
cardWidth={cardWidth}
studio={studio}
zoomIndex={zoomIndex}
hideParent={fromParent}
selecting={selectedIds.size > 0}
selected={selectedIds.has(studio.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(studio.id, selected, shiftKey)
}
/>
))}
</div>
);
}
);

51
ui/v2.5/src/components/Tags/TagCardGrid.tsx
View file

@ -5,6 +5,7 @@ import {
useContainerDimensions,
} from "../Shared/GridCard/GridCard";
import { TagCard } from "./TagCard";
import { PatchComponent } from "src/patch";
interface ITagCardGrid {
tags: (GQL.TagDataFragment | GQL.TagListDataFragment)[];
@ -15,30 +16,28 @@ interface ITagCardGrid {
const zoomWidths = [280, 340, 480, 640];
export const TagCardGrid: React.FC<ITagCardGrid> = ({
tags,
selectedIds,
zoomIndex,
onSelectChange,
}) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
export const TagCardGrid: React.FC<ITagCardGrid> = PatchComponent(
"TagCardGrid",
({ tags, selectedIds, zoomIndex, onSelectChange }) => {
const [componentRef, { width: containerWidth }] = useContainerDimensions();
const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
return (
<div className="row justify-content-center" ref={componentRef}>
{tags.map((tag) => (
<TagCard
key={tag.id}
cardWidth={cardWidth}
tag={tag}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(tag.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(tag.id, selected, shiftKey)
}
/>
))}
</div>
);
};
return (
<div className="row justify-content-center" ref={componentRef}>
{tags.map((tag) => (
<TagCard
key={tag.id}
cardWidth={cardWidth}
tag={tag}
zoomIndex={zoomIndex}
selecting={selectedIds.size > 0}
selected={selectedIds.has(tag.id)}
onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
onSelectChange(tag.id, selected, shiftKey)
}
/>
))}
</div>
);
}
);

8
ui/v2.5/src/pluginApi.d.ts vendored
View file

@ -672,6 +672,7 @@ declare namespace PluginApi {
"GalleryCard.Image": React.FC<any>;
"GalleryCard.Overlays": React.FC<any>;
"GalleryCard.Popovers": React.FC<any>;
GalleryCardGrid: React.FC<any>;
GalleryAddPanel: React.FC<any>;
GalleryIDSelect: React.FC<any>;
GalleryImagesPanel: React.FC<any>;
@ -679,6 +680,7 @@ declare namespace PluginApi {
GallerySelect: React.FC<any>;
GridCard: React.FC<any>;
GroupCard: React.FC<any>;
GroupCardGrid: React.FC<any>;
GroupIDSelect: React.FC<any>;
GroupList: React.FC<any>;
GroupSelect: React.FC<any>;
@ -687,6 +689,7 @@ declare namespace PluginApi {
HoverPopover: React.FC<any>;
Icon: React.FC<any>;
ImageCard: React.FC<any>;
ImageCardGrid: React.FC<any>;
ImageInput: React.FC<any>;
ImageList: React.FC<any>;
LightboxLink: React.FC<any>;
@ -697,6 +700,7 @@ declare namespace PluginApi {
NumberSetting: React.FC<any>;
PerformerAppearsWithPanel: React.FC<any>;
PerformerCard: React.FC<any>;
PerformerCardGrid: React.FC<any>;
"PerformerCard.Details": React.FC<any>;
"PerformerCard.Image": React.FC<any>;
"PerformerCard.Overlays": React.FC<any>;
@ -728,12 +732,14 @@ declare namespace PluginApi {
"SceneCard.Image": React.FC<any>;
"SceneCard.Overlays": React.FC<any>;
"SceneCard.Popovers": React.FC<any>;
SceneCardGrid: React.FC<any>;
SceneList: React.FC<any>;
SceneListOperations: React.FC<any>;
SceneMarkerCard: React.FC<any>;
"SceneMarkerCard.Details": React.FC<any>;
"SceneMarkerCard.Image": React.FC<any>;
"SceneMarkerCard.Popovers": React.FC<any>;
SceneMarkerCardGrid: React.FC<any>;
SceneMarkerList: React.FC<any>;
SelectSetting: React.FC<any>;
Setting: React.FC<any>;
@ -742,6 +748,7 @@ declare namespace PluginApi {
StringListSetting: React.FC<any>;
StringSetting: React.FC<any>;
StudioCard: React.FC<any>;
StudioCardGrid: React.FC<any>;
StudioDetailsPanel: React.FC<any>;
StudioIDSelect: React.FC<any>;
StudioList: React.FC<any>;
@ -754,6 +761,7 @@ declare namespace PluginApi {
"TagCard.Overlays": React.FC<any>;
"TagCard.Popovers": React.FC<any>;
"TagCard.Title": React.FC<any>;
TagCardGrid: React.FC<any>;
TagLink: React.FC<any>;
TagList: React.FC<any>;
TagSelect: React.FC<any>;