Cm/coming soon input (#11075)

packages/core/admin/admin/src/content-manager/components/Inputs/ComingSoonInput.js

@@ -0,0 +1,69 @@
+/**
+ *
+ * CominSoonInput
+ *
+ */
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { TextInput } from '@strapi/parts/TextInput';
+import PropTypes from 'prop-types';
+
+const CominSoonInput = ({ description, intlLabel, labelAction, error, name }) => {
+  const { formatMessage } = useIntl();
+  const label = intlLabel.id
+    ? formatMessage(
+        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+        { ...intlLabel.values }
+      )
+    : name;
+
+  const hint = description
+    ? formatMessage(
+        { id: description.id, defaultMessage: description.defaultMessage },
+        { ...description.values }
+      )
+    : '';
+
+  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+
+  return (
+    <TextInput
+      disabled
+      error={errorMessage}
+      label={label}
+      labelAction={labelAction}
+      id={name}
+      hint={hint}
+      name={name}
+      onChange={() => {}}
+      placeholder="Coming soon"
+      type="text"
+      value=""
+    />
+  );
+};
+
+CominSoonInput.defaultProps = {
+  description: null,
+  error: '',
+  labelAction: undefined,
+};
+
+CominSoonInput.propTypes = {
+  description: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+  error: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  labelAction: PropTypes.element,
+  name: PropTypes.string.isRequired,
+};
+
+export default CominSoonInput;

packages/core/admin/admin/src/content-manager/components/Inputs/index.js

@@ -12,6 +12,7 @@ import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
 import InputJSON from '../InputJSON';
+import ComingSoonInput from './ComingSoonInput';
 import GenericInput from './GenericInput';
 // import SelectWrapper from '../SelectWrapper';
 // import WysiwygWithErrors from '../WysiwygWithErrors';
@@ -188,7 +189,14 @@ function Inputs({
   }
 
   if (type === 'relation') {
-    return 'RELATION';
+    // return 'RELATION';
+    return (
+      <ComingSoonInput
+        labelAction={labelAction}
+        name={keys}
+        intlLabel={{ id: label, defaultMessage: label }}
+      />
+    );
     // return (
     //   <div key={keys}>
     //     <SelectWrapper
@@ -219,9 +227,10 @@ function Inputs({
         // uid: InputUID,
         // ...fields,
         json: InputJSON,
-        media: () => <div>TODO media</div>,
+        // FIXME
+        datetime: ComingSoonInput,
+        media: ComingSoonInput,
         uid: () => <div>TODO uid</div>,
-        // wysiwyg: () => <div>TODO wysiwyg</div>,
         wysiwyg: Wysiwyg,
       }}
       multiple={fieldSchema.multiple || false}