Patch CustomFields Component (#5914)

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

@@ -54,23 +54,28 @@ const CustomField: React.FC<{ field: string; value: unknown }> = ({
   );
 };
 
-export const CustomFields: React.FC<ICustomFields> = ({ values }) => {
+export const CustomFields: React.FC<ICustomFields> = PatchComponent(
-  const intl = useIntl();
+  "CustomFields",
-  if (Object.keys(values).length === 0) {
+  ({ values }) => {
-    return null;
+    const intl = useIntl();
-  }
+    if (Object.keys(values).length === 0) {
+      return null;
+    }
 
-  return (
+    return (
-    // according to linter rule CSS classes shouldn't use underscores
+      // according to linter rule CSS classes shouldn't use underscores
-    <div className="custom-fields">
+      <div className="custom-fields">
-      <CollapseButton text={intl.formatMessage({ id: "custom_fields.title" })}>
+        <CollapseButton
-        {Object.entries(values).map(([key, value]) => (
+          text={intl.formatMessage({ id: "custom_fields.title" })}
-          <CustomField key={key} field={key} value={value} />
+        >
-        ))}
+          {Object.entries(values).map(([key, value]) => (
-      </CollapseButton>
+            <CustomField key={key} field={key} value={value} />
-    </div>
+          ))}
-  );
+        </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>;