Skip to content

Commit

Permalink
fix: Decimals and Steps options only allow positive values (DHIS2-900…
Browse files Browse the repository at this point in the history
…2, DHIS2-9194) (#1161)

* New base type PositiveNumberBaseType added that only allows positive whole numbers
* Math.round prevents decimal numbers and returns Number instead of String, which fixes DHIS2-9194
* parseInt(value, 10) to allow for clearing the value with backspace
* Applies to both typing manually and by using the browser's built-in "stepper arrows".
* New help text for Steps, as per Slack discussion, Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.
  • Loading branch information
martinkrulltott authored Aug 14, 2020
1 parent 6809675 commit f29e13c
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 8 deletions.
4 changes: 3 additions & 1 deletion packages/app/i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,9 @@ msgstr ""
msgid "Auto"
msgstr ""

msgid "The number of axis steps between the min and max values"
msgid ""
"Number of axis tick steps, including the min and max. A value of 2 or lower "
"will be ignored."
msgstr ""

msgid "Steps"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { InputField } from '@dhis2/ui'

import { sGetUiOptions } from '../../../reducers/ui'
import { acSetUiOptions } from '../../../actions/ui'
import { tabSectionOption } from '../styles/VisualizationOptions.style.js'

export const PositiveNumberBaseType = ({
label,
placeholder,
helpText,
width,
option,
value,
onChange,
disabled,
}) => (
<div className={tabSectionOption.className}>
<div>
<InputField
type="number"
label={label}
onChange={({ 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() : ''}
helpText={helpText}
placeholder={placeholder}
inputWidth={width}
dense
disabled={disabled}
/>
</div>
</div>
)

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)
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import React from 'react'
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'

import TextBaseOption from './TextBaseOption'
import PositiveNumberBaseType from './PositiveNumberBaseType'

const RangeAxisDecimals = ({ disabled }) => (
<TextBaseOption
type="number"
<PositiveNumberBaseType
width="96px"
label={i18n.t('Decimals')}
disabled={disabled}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import React from 'react'
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'

import TextBaseOption from './TextBaseOption'
import PositiveNumberBaseType from './PositiveNumberBaseType'

export const RangeAxisSteps = ({ disabled }) => (
<TextBaseOption
type="number"
<PositiveNumberBaseType
width="96px"
helpText={i18n.t(
'The number of axis steps between the min and max values'
'Number of axis tick steps, including the min and max. A value of 2 or lower will be ignored.'
)}
label={i18n.t('Steps')}
disabled={disabled}
Expand Down

0 comments on commit f29e13c

Please sign in to comment.