Add number input

Signed-off-by: soupette <cyril@strapi.io>

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

@@ -93,6 +93,7 @@ const EditViewDataManagerProvider = ({
     const errorsInForm = Object.keys(formErrors);
 
     // TODO check if working with DZ, components...
+    // TODO use querySelector querySelectorAll('[data-strapi-field-error]')
     if (errorsInForm.length > 0) {
       const firstError = errorsInForm[0];
       const el = document.getElementById(firstError);

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

@@ -1,19 +1,20 @@
 /**
  *
- * Input
+ * GenericInput
  * This is a temp file move it to the helper plugin when ready
  */
 
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { ToggleInput } from '@strapi/parts/ToggleInput';
+import { NumberInput } from '@strapi/parts/NumberInput';
 import { Textarea } from '@strapi/parts/Textarea';
 import { TextInput } from '@strapi/parts/TextInput';
+import { ToggleInput } from '@strapi/parts/ToggleInput';
 import Hide from '@strapi/icons/Hide';
 import Show from '@strapi/icons/Show';
 import PropTypes from 'prop-types';
 
-const Input = ({
+const GenericInput = ({
   autoComplete,
   customInputs,
   description,
@@ -24,6 +25,7 @@ const Input = ({
   name,
   onChange,
   placeholder,
+  step,
   type,
   value,
   ...rest
@@ -98,6 +100,25 @@ const Input = ({
         />
       );
     }
+    case 'number': {
+      return (
+        <NumberInput
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onValueChange={value => {
+            onChange({ target: { name, value, type } });
+          }}
+          placeholder={formattedPlaceholder}
+          step={step}
+          value={value || undefined}
+        />
+      );
+    }
     case 'email':
     case 'text':
     case 'string': {
@@ -180,7 +201,7 @@ const Input = ({
   }
 };
 
-Input.defaultProps = {
+GenericInput.defaultProps = {
   autoComplete: undefined,
   customInputs: null,
   description: null,
@@ -188,10 +209,11 @@ Input.defaultProps = {
   error: '',
   labelAction: undefined,
   placeholder: null,
+  step: 1,
   value: '',
 };
 
-Input.propTypes = {
+GenericInput.propTypes = {
   autoComplete: PropTypes.string,
   customInputs: PropTypes.object,
   description: PropTypes.shape({
@@ -214,8 +236,9 @@ Input.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  step: PropTypes.number,
   type: PropTypes.string.isRequired,
   value: PropTypes.any,
 };
 
-export default Input;
+export default GenericInput;

packages/core/admin/admin/src/content-manager/pages/EditView/index.js

@@ -156,7 +156,7 @@ const EditView = ({
                                   {grid.map(
                                     ({ fieldSchema, labelAction, metadatas, name, size }) => {
                                       return (
-                                        <GridItem col={size} key={name}>
+                                        <GridItem col={size} key={name} s={12} xs={12}>
                                           <Inputs
                                             fieldSchema={fieldSchema}
                                             keys={name}