From cd7c339445c92dc8d53fa2e88a78b09ecded6f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Wed, 17 Aug 2022 14:49:59 +0200
Subject: [PATCH] Move custom field input to GenericInput

---
 .../components/Inputs/index.js                | 107 ++++++------------
 .../lib/src/components/GenericInput/index.js  |   9 +-
 2 files changed, 44 insertions(+), 72 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/Inputs/index.js b/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
index 8de1b405ca..7afa1c2bb2 100644
--- a/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
@@ -218,83 +218,48 @@ function Inputs({
     );
   }
 
+  const customInputs = {
+    json: InputJSON,
+    uid: InputUID,
+    media: fields.media,
+    wysiwyg: Wysiwyg,
+    ...fields,
+  };
+
   if (customFieldUid) {
     const customField = customFieldsRegistry.get(customFieldUid);
-
     const CustomFieldInput = React.lazy(customField.components.Input);
-
-    return (
-      <Suspense fallback="loading...">
-        <CustomFieldInput
-          attribute={fieldSchema}
-          autoComplete="new-password"
-          intlLabel={{ id: label, defaultMessage: label }}
-          // in case the default value of the boolean is null, attribute.default doesn't exist
-          isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
-          description={description ? { id: description, defaultMessage: description } : null}
-          disabled={shouldDisableField}
-          error={error}
-          labelAction={labelAction}
-          contentTypeUID={currentContentTypeLayout.uid}
-          customFieldUid={customFieldUid}
-          customInputs={{
-            json: InputJSON,
-            uid: InputUID,
-            media: fields.media,
-            wysiwyg: Wysiwyg,
-            ...fields,
-          }}
-          multiple={fieldSchema.multiple || false}
-          name={keys}
-          onChange={args => {
-            console.log('on change', args);
-            onChange(args);
-          }}
-          options={options}
-          placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
-          required={fieldSchema.required || false}
-          step={step}
-          type={inputType}
-          // validations={validations}
-          value={inputValue}
-          withDefaultValue={false}
-        />
-      </Suspense>
-    );
+    customInputs[customFieldUid] = CustomFieldInput;
   }
 
   return (
-    <GenericInput
-      attribute={fieldSchema}
-      autoComplete="new-password"
-      intlLabel={{ id: label, defaultMessage: label }}
-      // in case the default value of the boolean is null, attribute.default doesn't exist
-      isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
-      description={description ? { id: description, defaultMessage: description } : null}
-      disabled={shouldDisableField}
-      error={error}
-      labelAction={labelAction}
-      contentTypeUID={currentContentTypeLayout.uid}
-      customFieldUid={customFieldUid}
-      customInputs={{
-        json: InputJSON,
-        uid: InputUID,
-        media: fields.media,
-        wysiwyg: Wysiwyg,
-        ...fields,
-      }}
-      multiple={fieldSchema.multiple || false}
-      name={keys}
-      onChange={onChange}
-      options={options}
-      placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
-      required={fieldSchema.required || false}
-      step={step}
-      type={inputType}
-      // validations={validations}
-      value={inputValue}
-      withDefaultValue={false}
-    />
+    <Suspense fallback="loading...">
+      <GenericInput
+        attribute={fieldSchema}
+        autoComplete="new-password"
+        intlLabel={{ id: label, defaultMessage: label }}
+        // in case the default value of the boolean is null, attribute.default doesn't exist
+        isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
+        description={description ? { id: description, defaultMessage: description } : null}
+        disabled={shouldDisableField}
+        error={error}
+        labelAction={labelAction}
+        contentTypeUID={currentContentTypeLayout.uid}
+        customFieldUid={customFieldUid}
+        customInputs={customInputs}
+        multiple={fieldSchema.multiple || false}
+        name={keys}
+        onChange={onChange}
+        options={options}
+        placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
+        required={fieldSchema.required || false}
+        step={step}
+        type={inputType}
+        // validations={validations}
+        value={inputValue}
+        withDefaultValue={false}
+      />
+    </Suspense>
   );
 }
 
diff --git a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
index 3f8345987c..8436f45742 100644
--- a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
+++ b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
@@ -25,6 +25,7 @@ import NotSupported from './NotSupported';
 
 const GenericInput = ({
   autoComplete,
+  customFieldUid,
   customInputs,
   description,
   disabled,
@@ -45,7 +46,11 @@ const GenericInput = ({
   const { formatMessage } = useIntl();
   const [showPassword, setShowPassword] = useState(false);
 
-  const CustomInput = customInputs ? customInputs[type] : null;
+  let CustomInput = null;
+
+  if (customInputs) {
+    CustomInput = customInputs[customFieldUid || type];
+  }
 
   // the API always returns null, which throws an error in React,
   // therefore we cast this case to undefined
@@ -437,6 +442,7 @@ const GenericInput = ({
 GenericInput.defaultProps = {
   autoComplete: undefined,
   customInputs: null,
+  customFieldUid: null,
   description: null,
   disabled: false,
   error: '',
@@ -452,6 +458,7 @@ GenericInput.defaultProps = {
 GenericInput.propTypes = {
   autoComplete: PropTypes.string,
   customInputs: PropTypes.object,
+  customFieldUid: PropTypes.string,
   description: PropTypes.shape({
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,