From cc3179ac29f04d9557373014ab392ae9b95a6547 Mon Sep 17 00:00:00 2001
From: Javier Romero Castro <jrcastro9515@gmail.com>
Date: Mon, 4 Sep 2023 14:41:30 +0200
Subject: [PATCH] NumberInput: add option to allow only positive integers

* closes https://github.com/zenodo/who-rdm/issues/77
---
 src/lib/forms/widgets/text/Input.js       |  4 ++
 src/lib/forms/widgets/text/NumberInput.js | 54 ++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/lib/forms/widgets/text/Input.js b/src/lib/forms/widgets/text/Input.js
index 420af472..1b5f300b 100644
--- a/src/lib/forms/widgets/text/Input.js
+++ b/src/lib/forms/widgets/text/Input.js
@@ -15,6 +15,7 @@ export default class Input extends Component {
       description,
       disabled,
       type,
+      onKeyPress,
     } = this.props;
 
     return (
@@ -27,6 +28,7 @@ export default class Input extends Component {
         label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
         placeholder={placeholder}
         type={type}
+        onKeyPress={onKeyPress}
       />
     );
   }
@@ -41,6 +43,7 @@ Input.propTypes = {
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   type: PropTypes.string,
+  onKeyPress: PropTypes.func,
 };
 
 Input.defaultProps = {
@@ -48,4 +51,5 @@ Input.defaultProps = {
   required: false,
   disabled: false,
   type: "input",
+  onKeyPress: undefined,
 };
diff --git a/src/lib/forms/widgets/text/NumberInput.js b/src/lib/forms/widgets/text/NumberInput.js
index b76913b8..d3c2a8f0 100644
--- a/src/lib/forms/widgets/text/NumberInput.js
+++ b/src/lib/forms/widgets/text/NumberInput.js
@@ -1,5 +1,57 @@
 import React from "react";
 import Input from "./Input";
+import PropTypes from "prop-types";
+
+const NumberInput = (props) => {
+  const {
+    fieldPath,
+    label,
+    placeholder,
+    description,
+    icon,
+    required,
+    disabled,
+    type,
+    positiveIntegerOnly,
+  } = props;
+  const onKeyPress = (event) => {
+    if (!/[0-9]/.test(event.key)) {
+      event.preventDefault();
+    }
+  };
+  return (
+    <Input
+      fieldPath={fieldPath}
+      label={label}
+      placeholder={placeholder}
+      description={description}
+      icon={icon}
+      required={required}
+      disabled={disabled}
+      type={type}
+      onKeyPress={positiveIntegerOnly && onKeyPress}
+    />
+  );
+};
 
-const NumberInput = (props) => <Input {...props} type="number" />;
 export default NumberInput;
+
+NumberInput.propTypes = {
+  fieldPath: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  positiveIntegerOnly: PropTypes.bool,
+};
+
+NumberInput.defaultProps = {
+  icon: undefined,
+  required: false,
+  disabled: false,
+  type: "number",
+  positiveIntegerOnly: false,
+};