Fixes #30638 - replace react-numeric-input with rc-number-input

package.json

@@ -23,6 +23,7 @@
     "@theforeman/vendor": "^4.12.0",
     "intl": "~1.2.5",
     "jed": "^1.1.1",
+    "rc-input-number": "^6.0.0",
     "react-intl": "^2.8.0"
   },
   "devDependencies": {

webpack/assets/javascripts/react_app/components/CPUCoresInput/__tests__/__snapshots__/CPUCoresInput.test.js.snap

@@ -20,11 +20,14 @@ exports[`CPUCoresInput rendering should render with default props 1`] = `
       >
         <NumericInput
           className=""
+          disabled={false}
           format={null}
           label="CPUs"
           minValue={1}
           onChange={[Function]}
           precision={0}
+          readOnly={false}
+          step={1}
           value={1}
         />
       </Col>

webpack/assets/javascripts/react_app/components/CPUCoresInput/cpuCoresInput.scss

@@ -2,14 +2,3 @@
 .help-block-icon {
   margin-right: 3px;
 }
-
-.common-numericInput {
-  .react-numeric-input {
-    display: flex !important;
-
-    input {
-      flex: 1;
-      height: 28px;
-    }
-  }
-}

webpack/assets/javascripts/react_app/components/common/forms/NumericInput.js

@@ -1,6 +1,7 @@
-import ReactNumericInput from 'react-numeric-input';
+import RCInputNumber from 'rc-input-number';
 import React from 'react';
 import PropTypes from 'prop-types';
+import './NumericInput.scss';
 
 import { noop } from '../../../common/helpers';
 import CommonForm from './CommonForm';
@@ -11,16 +12,25 @@ const NumericInput = ({
   value,
   onChange,
   format,
+  parser,
+  step,
   precision,
   minValue,
+  disabled,
+  readOnly,
 }) => (
-  <CommonForm label={label} className={`common-numericInput ${className}`}>
-    <ReactNumericInput
-      format={format}
+  <CommonForm label={label} className={`foreman-numeric-input ${className}`}>
+    <RCInputNumber
+      formatter={format}
+      parser={parser}
+      step={step}
       min={minValue}
       value={value}
       precision={precision}
       onChange={onChange}
+      disabled={disabled}
+      readOnly={readOnly}
+      prefixCls="foreman-numeric-input"
     />
   </CommonForm>
 );
@@ -30,19 +40,27 @@ NumericInput.propTypes = {
   className: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   format: PropTypes.func,
+  parser: PropTypes.func,
+  step: PropTypes.number,
   precision: PropTypes.number,
   minValue: PropTypes.number,
   onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 NumericInput.defaultProps = {
   label: '',
   className: '',
   value: 0,
   format: null,
+  parser: undefined,
+  step: 1,
   precision: 0,
   minValue: 0,
   onChange: noop,
+  disabled: false,
+  readOnly: false,
 };
 
 export default NumericInput;

webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss

@@ -0,0 +1,88 @@
+
+.foreman-numeric-input {
+  position: relative;
+  display: flex !important;
+
+  .foreman-numeric-input-input-wrap {
+    width: 100%;
+
+    input {
+      flex: 1;
+      height: 28px;
+      width: 100%;
+      padding-right: 3ex;
+      box-sizing: border-box;
+      font-size: inherit;
+      border: 1px solid rgb(204, 204, 204);
+      border-radius: 2px;
+      padding-left: 4px;
+      display: block;
+      appearance: none;
+      line-height: normal;
+    }
+  }
+
+  .foreman-numeric-input-handler-up-inner,
+  .foreman-numeric-input-handler-down-inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    margin: -0.3ex 0 0 -0.56ex;
+  }
+
+  .foreman-numeric-input-handler-up-inner {
+    border-width: 0 0.6ex 0.6ex 0.6ex;
+    border-color: transparent transparent rgba(0, 0, 0, 0.7);
+  }
+
+  .foreman-numeric-input-handler-down-inner {
+    border-width: 0.6ex 0.6ex 0 0.6ex;
+    border-color: rgba(0, 0, 0, 0.7) transparent transparent;
+  }
+
+  .foreman-numeric-input-handler-up {
+    top: 2px;
+    bottom: 50%;
+    border-radius: 2px 2px 0 0;
+    border-width: 1px 1px 0;
+  }
+
+  .foreman-numeric-input-handler-down {
+    top: 50%;
+    bottom: 2px;
+    border-radius: 0 0 2px 2px;
+    border-width: 0 1px 1px 1px;
+  }
+
+  .foreman-numeric-input-handler-up,
+  .foreman-numeric-input-handler-down {
+    position: absolute;
+    right: 2px;
+    width: 2.26ex;
+    border-color: rgba(0, 0, 0, 0.1);
+    border-style: solid;
+    text-align: center;
+    cursor: default;
+    transition: all 0.1s ease 0s;
+    background: rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.1) -1px -1px 3px inset, rgba(255, 255, 255, 0.7) 1px 1px 3px inset;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.3);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset, -1px -1px 4px rgba(255, 255, 255, 0.5) inset;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+  }
+}

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.scss

@@ -32,16 +32,5 @@
     .common-checkbox {
       text-align: left;
     }
-
-    .common-numericInput {
-      .react-numeric-input {
-        display: flex !important;
-
-        input {
-          flex: 1;
-          height: 28px;
-        }
-      }
-    }
   }
 }