From ff79968cfcaa57dbef705eb0aa69f20d78c71e27 Mon Sep 17 00:00:00 2001 From: yifatmakias Date: Wed, 12 Aug 2020 09:25:13 +0300 Subject: [PATCH] Fixes #30638 - replace react-numeric-input with rc-number-input --- package.json | 12 +-- .../__snapshots__/CPUCoresInput.test.js.snap | 3 + .../CPUCoresInput/cpuCoresInput.scss | 11 --- .../components/common/forms/NumericInput.js | 26 ++++- .../components/common/forms/NumericInput.scss | 95 +++++++++++++++++++ .../storage/vmware/controller/disk/disk.scss | 11 --- 6 files changed, 126 insertions(+), 32 deletions(-) create mode 100644 webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss diff --git a/package.json b/package.json index 43665119158b..84adda5b8f85 100644 --- a/package.json +++ b/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", diff --git a/webpack/assets/javascripts/react_app/components/CPUCoresInput/__tests__/__snapshots__/CPUCoresInput.test.js.snap b/webpack/assets/javascripts/react_app/components/CPUCoresInput/__tests__/__snapshots__/CPUCoresInput.test.js.snap index 69bfa4239b66..8b8c457c4df8 100644 --- a/webpack/assets/javascripts/react_app/components/CPUCoresInput/__tests__/__snapshots__/CPUCoresInput.test.js.snap +++ b/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`] = ` > diff --git a/webpack/assets/javascripts/react_app/components/CPUCoresInput/cpuCoresInput.scss b/webpack/assets/javascripts/react_app/components/CPUCoresInput/cpuCoresInput.scss index d9d741e5c3d7..718dfbb6e376 100644 --- a/webpack/assets/javascripts/react_app/components/CPUCoresInput/cpuCoresInput.scss +++ b/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; - } - } -} diff --git a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.js b/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.js index 3ff96f8da8fd..fd62c2d69da5 100644 --- a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.js +++ b/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, }) => ( - - + ); @@ -30,9 +40,13 @@ 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 = { @@ -40,9 +54,13 @@ NumericInput.defaultProps = { className: '', value: 0, format: null, + parser: undefined, + step: 1, precision: 0, minValue: 0, onChange: noop, + disabled: false, + readOnly: false, }; export default NumericInput; diff --git a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss b/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss new file mode 100644 index 000000000000..d2eefc2d740a --- /dev/null +++ b/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss @@ -0,0 +1,95 @@ +@import "~@theforeman/vendor/scss/variables"; + +.foreman-numeric-input { + position: relative; + display: flex; + + .foreman-numeric-input-input-wrap { + width: 100%; + + 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 { + outline: $input-border-focus auto 0.5px; + } + + &:hover { + border-color: $input-border-hover; + } + } + } + + .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; + } + } +} diff --git a/webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.scss b/webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.scss index 7d7d9407c2e5..3305570f9736 100644 --- a/webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.scss +++ b/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; - } - } - } } }