Patch CustomFields Component (#5914)

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

@@ -54,7 +54,9 @@ const CustomField: React.FC<{ field: string; value: unknown }> = ({
   );
 };
 
-export const CustomFields: React.FC<ICustomFields> = ({ values }) => {
+export const CustomFields: React.FC<ICustomFields> = PatchComponent(
+  "CustomFields",
+  ({ values }) => {
     const intl = useIntl();
     if (Object.keys(values).length === 0) {
       return null;
@@ -63,14 +65,17 @@ export const CustomFields: React.FC<ICustomFields> = ({ values }) => {
     return (
       // according to linter rule CSS classes shouldn't use underscores
       <div className="custom-fields">
-      <CollapseButton text={intl.formatMessage({ id: "custom_fields.title" })}>
+        <CollapseButton
+          text={intl.formatMessage({ id: "custom_fields.title" })}
+        >
           {Object.entries(values).map(([key, value]) => (
             <CustomField key={key} field={key} value={value} />
           ))}
         </CollapseButton>
       </div>
     );
-};
+  }
+);
 
 function isNumeric(v: string) {
   return /^-?(?:0|(?:[1-9][0-9]*))(?:\.[0-9]+)?$/.test(v);

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

@@ -149,6 +149,7 @@ Returns `void`.
 - `CompressedPerformerDetailsPanel`
 - `ConstantSetting`
 - `CountrySelect`
+- `CustomFields`
 - `CustomFieldInput`
 - `DateInput`
 - `DetailImage`

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

@@ -701,6 +701,7 @@ declare namespace PluginApi {
     PerformerCard: React.FC<any>;
     ExternalLinkButtons: React.FC<any>;
     ExternalLinksButton: React.FC<any>;
+    CustomFields: React.FC<any>;
     CustomFieldInput: React.FC<any>;
     ImageInput: React.FC<any>;
     DetailImage: React.FC<any>;