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

package.json

@@ -20,18 +20,18 @@
     "create-react-component": "yo react-domain"
   },
   "dependencies": {
-    "@theforeman/vendor": "^4.12.0",
+    "@theforeman/vendor": "^4.14.0",
     "intl": "~1.2.5",
     "jed": "^1.1.1",
     "react-intl": "^2.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.0",
-    "@theforeman/builder": "^4.12.0",
-    "@theforeman/eslint-plugin-foreman": "^4.12.0",
-    "@theforeman/stories": "^4.12.0",
-    "@theforeman/test": "^4.12.0",
-    "@theforeman/vendor-dev": "^4.12.0",
+    "@theforeman/builder": "^4.14.0",
+    "@theforeman/eslint-plugin-foreman": "^4.14.0",
+    "@theforeman/stories": "^4.14.0",
+    "@theforeman/test": "^4.14.0",
+    "@theforeman/vendor-dev": "^4.14.0",
     "argv-parse": "^1.0.1",
     "babel-eslint": "^10.0.0",
     "babel-loader": "^8.0.0",

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={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,104 @@
+@import "~@theforeman/vendor/scss/variables";
+@import "~@theforeman/vendor/scss/mixins";
+
+.foreman-numeric-input {
+  position: relative;
+  display: flex;
+
+  .foreman-numeric-input-input-wrap {
+    width: 100%;
+
+    // Remove input style when this PR is merged: https://github.com/react-component/input-number/pull/262
+    input {
+      flex: 1;
+      height: 26px;
+      width: 100%;
+      padding-right: $padding-small-vertical;
+      box-sizing: border-box;
+      font-size: inherit;
+      border: 1px solid $input-border;
+      border-radius: $input-border-radius;
+      padding-left: $padding-small-vertical;
+      display: block;
+      appearance: none;
+      line-height: normal;
+
+      &:focus {
+        @include form-control-outline;
+      }
+
+      &:hover {
+        border-color: $input-border-hover;
+      }
+
+      &[disabled] {
+        box-shadow: none;
+        border-color: $input-border;
+        color: #8b8d8f;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .foreman-numeric-input-handler-up-inner,
+  .foreman-numeric-input-handler-down-inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    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 $color-pf-black-600;
+  }
+
+  .foreman-numeric-input-handler-down-inner {
+    border-width: 0.6ex 0.6ex 0 0.6ex;
+    border-color: $color-pf-black-600 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: $color-pf-black-300;
+    border-style: solid;
+    text-align: center;
+    cursor: default;
+    transition: all 0.1s ease 0s;
+    background: $color-pf-black-300;
+    box-shadow: $color-pf-black-300 -1px -1px 3px inset, $color-pf-black-200 1px 1px 3px inset;
+
+    &:hover {
+      background: $color-pf-black-400;
+    }
+
+    &:active {
+      background: $color-pf-black-500;
+      box-shadow: 0 1px 3px $color-pf-black-300 inset, -1px -1px 4px $color-pf-black-200 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;
-        }
-      }
-    }
   }
 }