Add selection and export for all list pages (#873)

* Include studios in movie export
* Generalise cards
* Add selection and export for movies
* Refactor gallery card
* Refactor export dialogs
* Add performer selection and export
* Add selection and export for studios
* Add selection and export of tags
* Include movie scenes and gallery images

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -1,19 +1,25 @@
 import React from "react";
-import { Card } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { FormattedNumber, FormattedPlural, FormattedMessage } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { NavUtils, TextUtils } from "src/utils";
 import { CountryFlag } from "src/components/Shared";
+import { BasicCard } from "../Shared/BasicCard";
 
 interface IPerformerCardProps {
   performer: GQL.PerformerDataFragment;
   ageFromDate?: string;
+  selecting?: boolean;
+  selected?: boolean;
+  onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
 export const PerformerCard: React.FC<IPerformerCardProps> = ({
   performer,
   ageFromDate,
+  selecting,
+  selected,
+  onSelectedChanged,
 }) => {
   const age = TextUtils.age(performer.birthdate, ageFromDate);
   const ageString = `${age} years old${ageFromDate ? " in this scene." : "."}`;
@@ -30,35 +36,44 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
   }
 
   return (
-    <Card className="performer-card">
-      <Link to={`/performers/${performer.id}`}>
-        <img
-          className="performer-card-image"
-          alt={performer.name ?? ""}
-          src={performer.image_path ?? ""}
-        />
-        {maybeRenderFavoriteBanner()}
-      </Link>
-      <div className="card-section">
-        <h5 className="text-truncate">{performer.name}</h5>
-        {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
-        <Link to={NavUtils.makePerformersCountryUrl(performer)}>
-          <CountryFlag country={performer.country} />
-        </Link>
-        <div className="text-muted">
-          Stars in&nbsp;
-          <FormattedNumber value={performer.scene_count ?? 0} />
-          &nbsp;
-          <Link to={NavUtils.makePerformerScenesUrl(performer)}>
-            <FormattedPlural
-              value={performer.scene_count ?? 0}
-              one="scene"
-              other="scenes"
-            />
+    <BasicCard
+      className="performer-card"
+      url={`/performers/${performer.id}`}
+      image={
+        <>
+          <img
+            className="performer-card-image"
+            alt={performer.name ?? ""}
+            src={performer.image_path ?? ""}
+          />
+          {maybeRenderFavoriteBanner()}
+        </>
+      }
+      details={
+        <>
+          <h5 className="text-truncate">{performer.name}</h5>
+          {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
+          <Link to={NavUtils.makePerformersCountryUrl(performer)}>
+            <CountryFlag country={performer.country} />
           </Link>
-          .
-        </div>
-      </div>
-    </Card>
+          <div className="text-muted">
+            Stars in&nbsp;
+            <FormattedNumber value={performer.scene_count ?? 0} />
+            &nbsp;
+            <Link to={NavUtils.makePerformerScenesUrl(performer)}>
+              <FormattedPlural
+                value={performer.scene_count ?? 0}
+                one="scene"
+                other="scenes"
+              />
+            </Link>
+            .
+          </div>
+        </>
+      }
+      selected={selected}
+      selecting={selecting}
+      onSelectedChanged={onSelectedChanged}
+    />
   );
 };