From 7e05dc7a885cf562052461565376e174e6a9c962 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 28 Oct 2020 00:36:19 +0100 Subject: Migrate to Reactstrap for Modal implementation --- frontend/package.json | 1 + frontend/src/components/modals/Modal.js | 163 ++++++--------------- frontend/src/components/modals/TextInputModal.js | 2 +- .../NewPortfolioModalComponent.js | 12 +- .../custom-components/NewScenarioModalComponent.js | 26 ++-- .../custom-components/NewTopologyModalComponent.js | 6 +- frontend/yarn.lock | 64 +++++++- 7 files changed, 133 insertions(+), 141 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 57e27d2f..1a3fc7cb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,6 +38,7 @@ "react-router-dom": "~5.1.2", "react-scripts": "~3.4.1", "react-shortcuts": "~2.1.0", + "reactstrap": "^8.6.0", "recharts": "~1.8.5", "redux": "~4.0.5", "redux-localstorage": "~0.4.1", diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index 40656dc1..36bb498e 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -1,124 +1,51 @@ -import classNames from 'classnames' +import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' -import React from 'react' -import jQuery from '../../util/jquery' - -class Modal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - submitButtonType: PropTypes.string, - submitButtonText: PropTypes.string, - } - static defaultProps = { - submitButtonType: 'primary', - submitButtonText: 'Save', - } - static idCounter = 0 - - // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate - // 'close' triggers) - visible = false - - constructor(props) { - super(props) - this.id = 'modal-' + Modal.idCounter++ - } - - componentDidMount() { - this.visible = this.props.show - this.openOrCloseModal() - - // Trigger auto-focus - jQuery('#' + this.id) - .on('shown.bs.modal', function () { - jQuery(this).find('input').first().focus() - }) - .on('hide.bs.modal', () => { - if (this.visible) { - this.props.onCancel() - } - }) - .on('keydown', (e) => { - e.stopPropagation() - }) - } - - componentDidUpdate() { - if (this.visible !== this.props.show) { - this.visible = this.props.show - this.openOrCloseModal() - } - } - - onSubmit() { - if (this.visible) { - this.props.onSubmit() - this.visible = false - this.closeModal() - } - } - - onCancel() { - if (this.visible) { - this.props.onCancel() - this.visible = false - this.closeModal() - } - } - - openModal() { - jQuery('#' + this.id).modal('show') - } - - closeModal() { - jQuery('#' + this.id).modal('hide') - } +import { Modal as RModal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap' + +function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, submitButtonText }) { + const [modal, setModal] = useState(show) + + useEffect(() => setModal(show), [show]) + + const toggle = () => setModal(!modal) + const cancel = () => { + toggle() + onCancel() + } + const submit = () => { + toggle() + onSubmit() + } + + return ( + + {title} + {children} + + + + + + ) +} - openOrCloseModal() { - if (this.visible) { - this.openModal() - } else { - this.closeModal() - } - } +Modal.propTypes = { + title: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + submitButtonType: PropTypes.string, + submitButtonText: PropTypes.string, +} - render() { - return ( - - ) - } +Modal.defaultProps = { + submitButtonType: 'primary', + submitButtonText: 'Save', + show: false, } export default Modal diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js index d5edb60b..d0918c7e 100644 --- a/frontend/src/components/modals/TextInputModal.js +++ b/frontend/src/components/modals/TextInputModal.js @@ -12,7 +12,7 @@ class TextInputModal extends React.Component { } componentDidUpdate() { - if (this.props.initialValue) { + if (this.props.initialValue && this.textInput) { this.textInput.value = this.props.initialValue } } diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js index 2d001302..19049931 100644 --- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js @@ -19,11 +19,13 @@ class NewPortfolioModalComponent extends React.Component { } reset() { - this.textInput.value = '' - AVAILABLE_METRICS.forEach((metric) => { - this.metricCheckboxes[metric].checked = true - }) - this.repeatsInput.value = 1 + if (this.textInput) { + this.textInput.value = '' + AVAILABLE_METRICS.forEach((metric) => { + this.metricCheckboxes[metric].checked = true + }) + this.repeatsInput.value = 1 + } } onSubmit() { diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js index d7d99982..5ba74b0f 100644 --- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js @@ -19,21 +19,25 @@ class NewScenarioModalComponent extends React.Component { } componentDidUpdate() { - if (this.props.currentPortfolioScenarioIds.length === 0) { - this.textInput.value = 'Base scenario' - } else if (this.textInput.value === 'Base scenario') { - this.textInput.value = '' + if (this.textInput) { + if (this.props.currentPortfolioScenarioIds.length === 0) { + this.textInput.value = 'Base scenario' + } else if (this.textInput.value === 'Base scenario') { + this.textInput.value = '' + } } } reset() { - this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : '' - this.traceSelect.selectedIndex = 0 - this.traceLoadInput.value = 1.0 - this.topologySelect.selectedIndex = 0 - this.failuresCheckbox.checked = false - this.performanceInterferenceCheckbox.checked = false - this.schedulerSelect.selectedIndex = 0 + if (this.textInput) { + this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : '' + this.traceSelect.selectedIndex = 0 + this.traceLoadInput.value = 1.0 + this.topologySelect.selectedIndex = 0 + this.failuresCheckbox.checked = false + this.performanceInterferenceCheckbox.checked = false + this.schedulerSelect.selectedIndex = 0 + } } onSubmit() { diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js index d8262baa..8a625b13 100644 --- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js @@ -13,8 +13,10 @@ class NewTopologyModalComponent extends React.Component { } reset() { - this.textInput.value = '' - this.originTopology.selectedIndex = 0 + if (this.textInput) { + this.textInput.value = '' + this.originTopology.selectedIndex = 0 + } } onSubmit() { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 592e7d32..2d867878 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1076,6 +1076,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.2.0": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740" + integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.1", "@babel/template@^7.10.3", "@babel/template@^7.4.0", "@babel/template@^7.8.6": version "7.10.3" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8" @@ -2959,7 +2966,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5, classnames@~2.2.5: +classnames@^2.2.3, classnames@^2.2.5, classnames@~2.2.5: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -3390,6 +3397,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-context@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" + integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw== + dependencies: + gud "^1.0.0" + warning "^4.0.3" + cross-spawn@7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14" @@ -3827,7 +3842,7 @@ deep-diff@^0.3.5: resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84" integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ= -deep-equal@^1.0.1: +deep-equal@^1.0.1, deep-equal@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a" integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g== @@ -8518,6 +8533,11 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +popper.js@^1.14.4: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + portfinder@^1.0.25: version "1.0.26" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70" @@ -9271,7 +9291,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.4" -prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: +prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -9528,6 +9548,19 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-popper@^1.3.6: + version "1.3.7" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324" + integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww== + dependencies: + "@babel/runtime" "^7.1.2" + create-react-context "^0.3.0" + deep-equal "^1.1.1" + popper.js "^1.14.4" + prop-types "^15.6.1" + typed-styles "^0.0.7" + warning "^4.0.2" + react-reconciler@^0.25.1: version "0.25.1" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.25.1.tgz#f9814d59d115e1210762287ce987801529363aaa" @@ -9677,7 +9710,7 @@ react-smooth@^1.0.5: raf "^3.4.0" react-transition-group "^2.5.0" -react-transition-group@^2.5.0: +react-transition-group@^2.3.1, react-transition-group@^2.5.0: version "2.9.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== @@ -9696,6 +9729,17 @@ react@~16.13.1: object-assign "^4.1.1" prop-types "^15.6.2" +reactstrap@^8.6.0: + version "8.6.0" + resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.6.0.tgz#baee0d12990c9fef3c82199fb05e84d9f0af1a26" + integrity sha512-03/UMbLPR6MhVStVUfCLuKh8xh4JOtNVkRxDB9/uHixN+cEQPOpSYa0K69YyK1/2YdZBs2qS6y0cQkK8NQKBHA== + dependencies: + "@babel/runtime" "^7.2.0" + classnames "^2.2.3" + prop-types "^15.5.8" + react-popper "^1.3.6" + react-transition-group "^2.3.1" + read-pkg-up@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02" @@ -11457,6 +11501,11 @@ typed-function@^2.0.0: resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-2.0.0.tgz#15ab3825845138a8b1113bd89e60cd6a435739e8" integrity sha512-Hhy1Iwo/e4AtLZNK10ewVVcP2UEs408DS35ubP825w/YgSBK1KVLwALvvIG4yX75QJrxjCpcWkzkVRB0BwwYlA== +typed-styles@^0.0.7: + version "0.0.7" + resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9" + integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q== + typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" @@ -11738,6 +11787,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^4.0.2, warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack-chokidar2@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0" -- cgit v1.2.3