Rating system patched components (#5912)

ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx

@@ -4,6 +4,7 @@ import { Icon } from "../Icon";
 import { faPencil, faStar } from "@fortawesome/free-solid-svg-icons";
 import { useFocusOnce } from "src/utils/focus";
 import { useStopWheelScroll } from "src/utils/form";
+import { PatchComponent } from "src/patch";
 
 export interface IRatingNumberProps {
   value: number | null;
@@ -14,9 +15,9 @@ export interface IRatingNumberProps {
   withoutContext?: boolean;
 }
 
-export const RatingNumber: React.FC<IRatingNumberProps> = (
-  props: IRatingNumberProps
-) => {
+export const RatingNumber = PatchComponent(
+  "RatingNumber",
+  (props: IRatingNumberProps) => {
     const [editing, setEditing] = useState(false);
     const [valueStage, setValueStage] = useState<number | null>(props.value);
 
@@ -161,4 +162,5 @@ export const RatingNumber: React.FC<IRatingNumberProps> = (
         </div>
       );
     }
-};
+  }
+);

ui/v2.5/src/components/Shared/Rating/RatingStars.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button } from "react-bootstrap";
 import { Icon } from "../Icon";
 import { faStar as fasStar } from "@fortawesome/free-solid-svg-icons";
@@ -11,6 +11,7 @@ import {
   RatingSystemType,
 } from "src/utils/rating";
 import { useIntl } from "react-intl";
+import { PatchComponent } from "src/patch";
 
 export interface IRatingStarsProps {
   value: number | null;
@@ -20,9 +21,9 @@ export interface IRatingStarsProps {
   valueRequired?: boolean;
 }
 
-export const RatingStars: React.FC<IRatingStarsProps> = (
-  props: IRatingStarsProps
-) => {
+export const RatingStars = PatchComponent(
+  "RatingStars",
+  (props: IRatingStarsProps) => {
     const intl = useIntl();
     const [hoverRating, setHoverRating] = useState<number | undefined>();
     const disabled = props.disabled || !props.onSetRating;
@@ -250,4 +251,5 @@ export const RatingStars: React.FC<IRatingStarsProps> = (
         {maybeRenderStarRatingNumber()}
       </div>
     );
-};
+  }
+);

ui/v2.5/src/components/Shared/Rating/RatingSystem.tsx

@@ -7,6 +7,7 @@ import {
 } from "src/utils/rating";
 import { RatingNumber } from "./RatingNumber";
 import { RatingStars } from "./RatingStars";
+import { PatchComponent } from "src/patch";
 
 export interface IRatingSystemProps {
   value: number | null | undefined;
@@ -19,9 +20,9 @@ export interface IRatingSystemProps {
   withoutContext?: boolean;
 }
 
-export const RatingSystem: React.FC<IRatingSystemProps> = (
-  props: IRatingSystemProps
-) => {
+export const RatingSystem = PatchComponent(
+  "RatingSystem",
+  (props: IRatingSystemProps) => {
     const { configuration: config } = React.useContext(ConfigurationContext);
     const ratingSystemOptions =
       config?.ui.ratingSystemOptions ?? defaultRatingSystemOptions;
@@ -49,4 +50,5 @@ export const RatingSystem: React.FC<IRatingSystemProps> = (
         />
       );
     }
-};
+  }
+);

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

@@ -196,6 +196,9 @@ Returns `void`.
 - `PerformerImagesPanel`
 - `PerformerScenesPanel`
 - `PluginRoutes`
+- `RatingNumber`
+- `RatingStars`
+- `RatingSystem`
 - `SceneCard`
 - `SceneCard.Details`
 - `SceneCard.Image`

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

@@ -727,6 +727,9 @@ declare namespace PluginApi {
     "GalleryCard.Image": React.FC<any>;
     "GalleryCard.Overlays": React.FC<any>;
     "GalleryCard.Popovers": React.FC<any>;
+    RatingNumber: React.FC<any>;
+    RatingStars: React.FC<any>;
+    RatingSystem: React.FC<any>;
   };
   type PatchableComponentNames = keyof typeof components | string;
   namespace utils {