overridable: Start implementing for custom fields

palkerecsenyi · palkerecsenyi · commit 0ef74f649265 · 2025-07-16T17:18:31.000+02:00
* This commit demonstrates a potential method of implementing `Overridable` support for custom fields. * When creating a custom field [UI definition](https://inveniordm.docs.cern.ch/customize/metadata/custom_fields/records/#upload-deposit-form), the user simply has to specify an additional `id` prop with their desired ID value for the Overridable. Then, they can specify a `parametrize` in the `overridableRegistry/mapping.js` as usual. * The aim is to have a set of common props that can be applied to all the field widgets, similarly to inveniosoftware/invenio-app-rdm#3103. * This commit makes the necessary changes to two of the UI widgets as a demonstration. When parameterizing, the user has to reference e.g. `AutocompleteDropdownComponent` instead of `AutocompleteDropdown`. These are both exported.
diff --git a/src/lib/forms/common/fieldComponents.js b/src/lib/forms/common/fieldComponents.js
@@ -0,0 +1,73 @@
+// This file is part of React-Invenio-Forms
+// Copyright (C) 2022-2025 CERN.
+// Copyright (C) 2022 Northwestern University.
+//
+// React-Invenio-Forms is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import PropTypes from "prop-types";
+import React from "react";
+import Overridable from "react-overridable";
+
+// Props used for fields that are mandatory for all records
+export const mandatoryFieldCommonProps = {
+  fieldPath: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  labelIcon: PropTypes.string,
+  helpText: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+// Also includes props that allow not including a field in the form, which are not applicable
+// to mandatory fields.
+export const fieldCommonProps = {
+  ...mandatoryFieldCommonProps,
+  hidden: PropTypes.bool,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+};
+
+export const createCommonDepositFieldComponent = (id, Child) => {
+  const Component = ({ hidden, ...props }) => {
+    if (props.disabled && props.required) {
+      throw new Error(`Cannot make field component ${id} both required and disabled`);
+    }
+
+    if (props.hidden) return null;
+    return <Child {...props} />;
+  };
+
+  Component.propTypes = Child.propTypes;
+  return Overridable.component(id, Component);
+};
+
+export const createShowHideComponent = (Component) => {
+  const ShowHideComponent = ({ hidden, ...props }) => {
+    if (hidden) return null;
+    return <Component {...props} />;
+  };
+
+  ShowHideComponent.displayName = `ShowHide(${
+    Component.displayName || Component.name
+  })`;
+  ShowHideComponent.propTypes = { ...Component.propTypes };
+  ShowHideComponent.defaultProps = { ...Component.defaultProps };
+  return ShowHideComponent;
+};
+
+export const createDynamicOverridableWidget = (Widget) => {
+  const Component = ({ id, ...props }) => {
+    if (id === undefined) return <Widget {...props} />;
+
+    return (
+      <Overridable id={id} {...props}>
+        <Widget {...props} />
+      </Overridable>
+    );
+  };
+
+  Component.propTypes = { ...Widget.propTypes, id: PropTypes.string };
+  Component.defaultProps = { ...Widget.defaultProps, id: undefined };
+  Component.displayName = `DynamicOverridable(${Widget.displayName || Widget.name})`;
+  return Component;
+};
diff --git a/src/lib/forms/widgets/select/AutocompleteDropdown.js b/src/lib/forms/widgets/select/AutocompleteDropdown.js
@@ -6,8 +6,13 @@ import _isArray from "lodash/isArray";
 import { Field } from "formik";
 import { FieldLabel } from "../../FieldLabel";
 import { RemoteSelectField } from "../../RemoteSelectField";
+import {
+  createDynamicOverridableWidget,
+  createShowHideComponent,
+  fieldCommonProps,
+} from "../../common/fieldComponents";
 
-export default class AutocompleteDropdown extends Component {
+class _AutocompleteDropdownComponent extends Component {
   render() {
     const {
       description,
@@ -20,10 +25,16 @@ export default class AutocompleteDropdown extends Component {
       multiple,
       autocompleteFrom,
       autocompleteFromAcceptHeader,
+      helpText: helpTextProp,
+      labelIcon: labelIconProp,
     } = this.props;
+
+    const helpText = helpTextProp ?? description;
+    const labelIcon = labelIconProp ?? icon;
+
     return (
       <>
-        <FieldLabel htmlFor={fieldPath} icon={icon} label={label} />
+        <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
         <Field name={fieldPath}>
           {({ form: { values } }) => {
             return (
@@ -58,29 +69,40 @@ export default class AutocompleteDropdown extends Component {
             );
           }}
         </Field>
-        {description && <label className="helptext">{description}</label>}
+        {helpText && <label className="helptext">{helpText}</label>}
       </>
     );
   }
 }
 
-AutocompleteDropdown.propTypes = {
-  fieldPath: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+_AutocompleteDropdownComponent.propTypes = {
   placeholder: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
   autocompleteFrom: PropTypes.string.isRequired,
   autocompleteFromAcceptHeader: PropTypes.string,
-  icon: PropTypes.string,
   clearable: PropTypes.bool,
   multiple: PropTypes.bool,
-  required: PropTypes.bool,
+  /**
+   * @deprecated Use `helpText` instead
+   */
+  description: PropTypes.string,
+  /**
+   * @deprecated Use `labelIcon` instead
+   */
+  icon: PropTypes.string,
+  ...fieldCommonProps,
 };
 
-AutocompleteDropdown.defaultProps = {
-  icon: undefined,
+_AutocompleteDropdownComponent.defaultProps = {
   autocompleteFromAcceptHeader: "application/vnd.inveniordm.v1+json",
   clearable: false,
   multiple: false,
-  required: false,
+  icon: undefined,
+  description: undefined,
 };
+
+export const AutocompleteDropdownComponent = createShowHideComponent(
+  _AutocompleteDropdownComponent
+);
+export const AutocompleteDropdown = createDynamicOverridableWidget(
+  AutocompleteDropdownComponent
+);
diff --git a/src/lib/forms/widgets/select/Dropdown.js b/src/lib/forms/widgets/select/Dropdown.js
@@ -1,10 +1,14 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-
 import { FieldLabel } from "../../FieldLabel";
 import { SelectField } from "../../SelectField";
+import {
+  createDynamicOverridableWidget,
+  createShowHideComponent,
+  fieldCommonProps,
+} from "../../common/fieldComponents";
 
-export default class Dropdown extends Component {
+class _DropdownComponent extends Component {
   serializeOptions = (options) =>
     options?.map((option) => ({
       text: option.title_l10n,
@@ -15,62 +19,72 @@ export default class Dropdown extends Component {
   render() {
     const {
       description,
+      helpText: helpTextProp,
       placeholder,
       fieldPath,
       label,
       icon,
+      labelIcon: labelIconProp,
       options,
       search,
       multiple,
       clearable,
       required,
     } = this.props;
+
+    const helpText = helpTextProp ?? description;
+    const labelIcon = labelIconProp ?? icon;
+
     return (
-      <>
-        <SelectField
-          fieldPath={fieldPath}
-          label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
-          options={this.serializeOptions(options)}
-          search={search}
-          aria-label={label}
-          multiple={multiple}
-          placeholder={{
-            role: "option",
-            content: placeholder,
-          }}
-          clearable={clearable}
-          required={required}
-          optimized
-          defaultValue={multiple ? [] : ""}
-        />
-        {description && <label className="helptext">{description}</label>}
-      </>
+      <SelectField
+        fieldPath={fieldPath}
+        label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
+        options={this.serializeOptions(options)}
+        search={search}
+        aria-label={label}
+        multiple={multiple}
+        placeholder={{
+          role: "option",
+          content: placeholder,
+        }}
+        clearable={clearable}
+        required={required}
+        optimized
+        defaultValue={multiple ? [] : ""}
+        helpText={helpText}
+      />
     );
   }
 }
 
-Dropdown.propTypes = {
-  fieldPath: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
+_DropdownComponent.propTypes = {
   options: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       title_l10n: PropTypes.string.isRequired,
     })
   ).isRequired,
-  icon: PropTypes.string,
   search: PropTypes.bool,
   multiple: PropTypes.bool,
   clearable: PropTypes.bool,
-  required: PropTypes.bool,
+  /**
+   * @deprecated Use `helpText` instead
+   */
+  description: PropTypes.string,
+  /**
+   * @deprecated Use `labelIcon` instead
+   */
+  icon: PropTypes.string,
+  ...fieldCommonProps,
 };
 
-Dropdown.defaultProps = {
+_DropdownComponent.defaultProps = {
   icon: undefined,
   search: false,
   multiple: false,
   clearable: true,
-  required: false,
+  description: undefined,
 };
+
+export const DropdownComponent = createShowHideComponent(_DropdownComponent);
+export const Dropdown = createDynamicOverridableWidget(_DropdownComponent);
diff --git a/src/lib/forms/widgets/select/index.js b/src/lib/forms/widgets/select/index.js
@@ -1,2 +1,5 @@
-export { default as AutocompleteDropdown } from "./AutocompleteDropdown";
-export { default as Dropdown } from "./Dropdown";
+export {
+  AutocompleteDropdown,
+  AutocompleteDropdownComponent,
+} from "./AutocompleteDropdown";
+export { Dropdown, DropdownComponent } from "./Dropdown";
