Patched AlertModal, SweatDrops, TruncatedText, BackgroundImage components (#5913)

* Patched AlertModal, SweatDrops, TruncatedText
* Patch BackgroundImage component
* Inline PatchComponent calls
---------
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Shared/Alert.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { Button, Modal } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
+import { PatchComponent } from "src/patch";
 
 export interface IAlertModalProps {
   text: JSX.Element | string;
@@ -11,7 +11,9 @@ export interface IAlertModalProps {
   onCancel: () => void;
 }
 
-export const AlertModal: React.FC<IAlertModalProps> = ({
+export const AlertModal: React.FC<IAlertModalProps> = PatchComponent(
+  "AlertModal",
+  ({
     text,
     show,
     confirmVariant = "danger",
@@ -32,4 +34,5 @@ export const AlertModal: React.FC<IAlertModalProps> = ({
         </Modal.Footer>
       </Modal>
     );
-};
+  }
+);

ui/v2.5/src/components/Shared/DetailsPage/BackgroundImage.tsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { PatchComponent } from "src/patch";
 
 export const BackgroundImage: React.FC<{
   imagePath: string | undefined;
   show: boolean;
   alt?: string;
-}> = ({ imagePath, show, alt }) => {
+}> = PatchComponent("BackgroundImage", ({ imagePath, show, alt }) => {
   if (imagePath && show) {
     const imageURL = new URL(imagePath);
     let isDefaultImage = imageURL.searchParams.get("default");
@@ -21,4 +22,4 @@ export const BackgroundImage: React.FC<{
   }
 
   return null;
-};
+});

ui/v2.5/src/components/Shared/SweatDrops.tsx

@@ -1,6 +1,7 @@
 import React from "react";
+import { PatchComponent } from "src/patch";
 
-export const SweatDrops: React.FC = () => (
+export const SweatDrops: React.FC = PatchComponent("SweatDrops", () => (
   <span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -20,4 +21,4 @@ export const SweatDrops: React.FC = () => (
       <rect x="0" y="0" width="36" height="36" fill="rgba(0, 0, 0, 0)" />
     </svg>
   </span>
-);
+));

ui/v2.5/src/components/Shared/TruncatedText.tsx

@@ -3,6 +3,7 @@ import { Overlay, Tooltip } from "react-bootstrap";
 import { Placement } from "react-bootstrap/Overlay";
 import cx from "classnames";
 import { useDebounce } from "src/hooks/debounce";
+import { PatchComponent } from "src/patch";
 
 const CLASSNAME = "TruncatedText";
 const CLASSNAME_TOOLTIP = `${CLASSNAME}-tooltip`;
@@ -15,13 +16,9 @@ interface ITruncatedTextProps {
   className?: string;
 }
 
-export const TruncatedText: React.FC<ITruncatedTextProps> = ({
+export const TruncatedText: React.FC<ITruncatedTextProps> = PatchComponent(
-  text,
+  "TruncatedText",
-  className,
+  ({ text, className, lineCount = 1, placement = "bottom", delay = 1000 }) => {
-  lineCount = 1,
-  placement = "bottom",
-  delay = 1000,
-}) => {
     const [showTooltip, setShowTooltip] = useState(false);
     const target = useRef(null);
 
@@ -65,7 +62,8 @@ export const TruncatedText: React.FC<ITruncatedTextProps> = ({
         {overlay}
       </div>
     );
-};
+  }
+);
 
 export const TruncatedInlineText: React.FC<ITruncatedTextProps> = ({
   text,

ui/v2.5/src/docs/en/Manual/UIPluginApi.md

@@ -143,7 +143,9 @@ Returns `void`.
 
 #### Patchable components and functions
 
+- `AlertModal`
 - `App`
+- `BackgroundImage`
 - `BooleanSetting`
 - `ChangeButtonSetting`
 - `CompressedPerformerDetailsPanel`
@@ -219,6 +221,7 @@ Returns `void`.
 - `StudioIDSelect`
 - `StudioSelect`
 - `StudioSelect.sort`
+- `SweatDrops`
 - `TabTitleCounter`
 - `TagCard`
 - `TagCard.Details`
@@ -231,6 +234,7 @@ Returns `void`.
 - `TagIDSelect`
 - `TagSelect`
 - `TagSelect.sort`
+- `TruncatedText`
 - `PluginSettings`
 - `Setting`
 - `SettingGroup`

ui/v2.5/src/pluginApi.d.ts

@@ -727,6 +727,10 @@ declare namespace PluginApi {
     "GalleryCard.Image": React.FC<any>;
     "GalleryCard.Overlays": React.FC<any>;
     "GalleryCard.Popovers": React.FC<any>;
+    TruncatedText: React.FC<any>;
+    SweatDrops: React.FC<any>;
+    AlertModal: React.FC<any>;
+    BackgroundImage: React.FC<any>;
     RatingNumber: React.FC<any>;
     RatingStars: React.FC<any>;
     RatingSystem: React.FC<any>;