From 8b51823409aa09b48516567030961e92b43a098a Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 9 Sep 2020 15:56:14 +0200 Subject: [PATCH] fix: Decimals and Steps options only allow positive values (DHIS2-9002, DHIS2-9194) v33 (#1254) --- packages/app/i18n/en.pot | 12 +++- .../Options/PositiveNumberBaseType.js | 61 +++++++++++++++++++ .../Options/RangeAxisDecimals.js | 8 ++- .../Options/RangeAxisSteps.js | 10 +-- .../__tests__/RangeAxisSteps.spec.js | 18 +++--- 5 files changed, 93 insertions(+), 16 deletions(-) create mode 100644 packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot index 66a445e80c..2d75014245 100644 --- a/packages/app/i18n/en.pot +++ b/packages/app/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2020-05-14T01:00:50.112Z\n" -"PO-Revision-Date: 2020-05-14T01:00:50.112Z\n" +"POT-Creation-Date: 2020-09-09T07:57:02.674Z\n" +"PO-Revision-Date: 2020-09-09T07:57:02.674Z\n" msgid "Rename successful" msgstr "" @@ -252,6 +252,9 @@ msgstr "" msgid "Use 100% stacked values" msgstr "" +msgid "Auto" +msgstr "" + msgid "Range axis decimals" msgstr "" @@ -264,6 +267,11 @@ msgstr "" msgid "Range axis min" msgstr "" +msgid "" +"Number of axis tick steps, including the min and max. A value of 2 or lower " +"will be ignored." +msgstr "" + msgid "Range axis tick steps" msgstr "" diff --git a/packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js b/packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js new file mode 100644 index 0000000000..7acb103c6b --- /dev/null +++ b/packages/app/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import TextField from '@material-ui/core/TextField'; + +import { sGetUiOptions } from '../../../reducers/ui'; +import { acSetUiOptions } from '../../../actions/ui'; + +export const PositiveNumberBaseType = ({ + label, + placeholder, + helpText, + width, + option, + value, + onChange, + disabled, +}) => ( + { + const value = event.target.value; + const parsedValue = parseInt(value, 10); + parsedValue >= 0 + ? onChange(Math.round(value)) + : onChange(parsedValue ? 0 : null); + }} + name={option.name} + value={value || value === 0 ? value.toString() : ''} + placeholder={placeholder} + disabled={disabled} + helperText={option.helperText} + /> +); + +PositiveNumberBaseType.propTypes = { + disabled: PropTypes.bool, + helpText: PropTypes.string, + label: PropTypes.string, + option: PropTypes.object, + placeholder: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + width: PropTypes.string, + onChange: PropTypes.func, +}; + +const mapStateToProps = (state, ownProps) => ({ + value: sGetUiOptions(state)[ownProps.option.name], + enabled: sGetUiOptions(state)[ownProps.option.name] !== undefined, +}); + +const mapDispatchToProps = (dispatch, ownProps) => ({ + onChange: value => + dispatch(acSetUiOptions({ [ownProps.option.name]: value })), +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(PositiveNumberBaseType); diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js index 8826a9b2c9..df9b920633 100644 --- a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js +++ b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js @@ -1,10 +1,12 @@ import React from 'react'; -import TextBaseOption from './TextBaseOption'; import i18n from '@dhis2/d2-i18n'; +import PositiveNumberBaseType from './PositiveNumberBaseType'; + const RangeAxisDecimals = () => ( - ( - Options > RangeAxisSteps', () => { @@ -22,14 +22,16 @@ describe('DV > Options > RangeAxisSteps', () => { shallowRangeAxisSteps = undefined; }); - it('renders a ', () => { - expect(rangeAxisSteps(props).find(TextBaseOption)).toHaveLength(1); + it('renders a ', () => { + expect(rangeAxisSteps(props).find(PositiveNumberBaseType)).toHaveLength( + 1 + ); }); it('sets the label prop to what passed in the option prop', () => { expect( rangeAxisSteps(props) - .find(TextBaseOption) + .find(PositiveNumberBaseType) .props().option.label ).toEqual('Range axis tick steps'); }); @@ -37,7 +39,7 @@ describe('DV > Options > RangeAxisSteps', () => { it('does not show the helper text when showHelperText is false', () => { expect( rangeAxisSteps(props) - .find(TextBaseOption) + .find(PositiveNumberBaseType) .props().option.helperText ).toBe(null); }); @@ -47,8 +49,10 @@ describe('DV > Options > RangeAxisSteps', () => { expect( rangeAxisSteps(props) - .find(TextBaseOption) + .find(PositiveNumberBaseType) .props().option.helperText - ).toEqual(`Tick steps may extend the chart beyond 'Range axis max'`); + ).toEqual( + 'Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.' + ); }); });