From bbacd4f855cec0dc7357fe4de5a41efe7fa838c2 Mon Sep 17 00:00:00 2001 From: Tomas Van Morlegan Date: Thu, 16 Dec 2021 19:06:17 -0300 Subject: [PATCH 1/2] Wrap Switch to handle onKeyUp --- .../Settings/Display/Display.component.js | 2 +- .../Navigation/Navigation.component.js | 2 +- .../Settings/Scanning/Scanning.component.js | 2 +- src/components/UI/Switch/Switch.js | 28 +++++++++++++++++++ src/components/UI/Switch/index.js | 1 + 5 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 src/components/UI/Switch/Switch.js create mode 100644 src/components/UI/Switch/index.js diff --git a/src/components/Settings/Display/Display.component.js b/src/components/Settings/Display/Display.component.js index 0404f2404..e7021911e 100644 --- a/src/components/Settings/Display/Display.component.js +++ b/src/components/Settings/Display/Display.component.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import Switch from '@material-ui/core/Switch'; +import Switch from '../../UI/Switch'; import Paper from '@material-ui/core/Paper'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; diff --git a/src/components/Settings/Navigation/Navigation.component.js b/src/components/Settings/Navigation/Navigation.component.js index d3adc7db9..01eb6746d 100644 --- a/src/components/Settings/Navigation/Navigation.component.js +++ b/src/components/Settings/Navigation/Navigation.component.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import Switch from '@material-ui/core/Switch'; +import Switch from '../../UI/Switch'; import Paper from '@material-ui/core/Paper'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; diff --git a/src/components/Settings/Scanning/Scanning.component.js b/src/components/Settings/Scanning/Scanning.component.js index 99fa682bd..22f0be892 100644 --- a/src/components/Settings/Scanning/Scanning.component.js +++ b/src/components/Settings/Scanning/Scanning.component.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import Switch from '@material-ui/core/Switch'; +import Switch from '../../UI/Switch'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; import Paper from '@material-ui/core/Paper'; diff --git a/src/components/UI/Switch/Switch.js b/src/components/UI/Switch/Switch.js new file mode 100644 index 000000000..78c70c053 --- /dev/null +++ b/src/components/UI/Switch/Switch.js @@ -0,0 +1,28 @@ +import React from 'react'; +import Switch from '@material-ui/core/Switch'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** + * The callback function trigered when the switch change value. The value change and then the switch change position. + */ + onChange: PropTypes.func.isRequired +}; + +function SwitchWithEnter(props) { + const onKeyUp = event => { + if (event.key === 'Enter' || event.keyCode === 13) { + props.onChange(); + } + }; + + return ( +
+ +
+ ); +} + +SwitchWithEnter.propTypes = propTypes; + +export default SwitchWithEnter; diff --git a/src/components/UI/Switch/index.js b/src/components/UI/Switch/index.js new file mode 100644 index 000000000..ed80f23e5 --- /dev/null +++ b/src/components/UI/Switch/index.js @@ -0,0 +1 @@ +export { default } from './Switch'; From 5a888f414c4374cb3868bb2f831638e7c8876f0e Mon Sep 17 00:00:00 2001 From: Tomas Van Morlegan Date: Tue, 21 Dec 2021 10:53:54 -0300 Subject: [PATCH 2/2] fix tests --- .../__snapshots__/Display.test.js.snap | 4 +-- .../Settings/Navigation/Navigation.test.js | 7 ++-- .../__snapshots__/Navigation.test.js.snap | 36 +++++++++---------- .../Settings/Scanning/Scanning.test.js | 2 +- .../__snapshots__/Scanning.test.js.snap | 6 ++-- 5 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/components/Settings/Display/__snapshots__/Display.test.js.snap b/src/components/Settings/Display/__snapshots__/Display.test.js.snap index d0cc8e27b..388d39ee0 100644 --- a/src/components/Settings/Display/__snapshots__/Display.test.js.snap +++ b/src/components/Settings/Display/__snapshots__/Display.test.js.snap @@ -148,7 +148,7 @@ exports[`Display tests default renderer 1`] = ` } /> - - { expect(tree).toMatchSnapshot(); const state = wrapper.state(); - - const switch0 = wrapper.find('WithStyles(ForwardRef(Switch))').at(0); + const switch0 = wrapper.find('SwitchWithEnter').at(0); switch0.simulate('change'); - const switch1 = wrapper.find('WithStyles(ForwardRef(Switch))').at(1); + const switch1 = wrapper.find('SwitchWithEnter').at(1); switch1.simulate('change'); - const switch2 = wrapper.find('WithStyles(ForwardRef(Switch))').at(2); + const switch2 = wrapper.find('SwitchWithEnter').at(2); switch2.simulate('change'); const newState = wrapper.state(); diff --git a/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap b/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap index f1d445d10..5876209a9 100644 --- a/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap +++ b/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap @@ -37,7 +37,7 @@ exports[`Navigation tests default renderer 1`] = ` } /> - - - - - - - - - - - - - - - - - - { const state = wrapper.state(); - const switchElement = wrapper.find('WithStyles(ForwardRef(Switch))').at(0); + const switchElement = wrapper.find('SwitchWithEnter').at(0); switchElement.simulate('change'); /** const selects = wrapper.find('Select'); diff --git a/src/components/Settings/Scanning/__snapshots__/Scanning.test.js.snap b/src/components/Settings/Scanning/__snapshots__/Scanning.test.js.snap index bfbaf0661..93159154f 100644 --- a/src/components/Settings/Scanning/__snapshots__/Scanning.test.js.snap +++ b/src/components/Settings/Scanning/__snapshots__/Scanning.test.js.snap @@ -37,7 +37,7 @@ exports[`Scanning tests default renderer 1`] = ` } /> - - -