fix: always display a selected radio option and styling

This commit is contained in:
José Oliveira 2021-07-09 15:37:11 +01:00 committed by Josh Harvey
parent 686c7a2b36
commit 2eda9645b3
3 changed files with 18 additions and 9 deletions

View file

@ -18,6 +18,8 @@ import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enable
import { ReactComponent as ReverseHistoryIcon } from 'src/styling/icons/circle buttons/history/white.svg' import { ReactComponent as ReverseHistoryIcon } from 'src/styling/icons/circle buttons/history/white.svg'
import { ReactComponent as HistoryIcon } from 'src/styling/icons/circle buttons/history/zodiac.svg' import { ReactComponent as HistoryIcon } from 'src/styling/icons/circle buttons/history/zodiac.svg'
import { fromNamespace, toNamespace } from 'src/utils/config' import { fromNamespace, toNamespace } from 'src/utils/config'
import { MANUAL, AUTOMATIC } from 'src/utils/constants.js'
import { onlyFirstToUpper } from 'src/utils/string'
import styles from './CashCassettes.styles.js' import styles from './CashCassettes.styles.js'
import CashCassettesFooter from './CashCassettesFooter' import CashCassettesFooter from './CashCassettesFooter'
@ -156,8 +158,8 @@ const CashCassettes = () => {
const isCashOutDisabled = ({ id }) => !getCashoutSettings(id).active const isCashOutDisabled = ({ id }) => !getCashoutSettings(id).active
const radioButtonOptions = [ const radioButtonOptions = [
{ display: 'Automatic', code: 'Automatic' }, { display: 'Automatic', code: AUTOMATIC },
{ display: 'Manual', code: 'Manual' } { display: 'Manual', code: MANUAL }
] ]
const handleRadioButtons = evt => { const handleRadioButtons = evt => {
@ -262,7 +264,11 @@ const CashCassettes = () => {
alignItems="center" alignItems="center"
justifyContent="end" justifyContent="end"
mr="-4px"> mr="-4px">
<P className={classes.selection}>{cashboxReset}</P> {cashboxReset && (
<P className={classes.selection}>
{onlyFirstToUpper(cashboxReset)}
</P>
)}
<IconButton <IconButton
onClick={() => setEditingSchema(true)} onClick={() => setEditingSchema(true)}
className={classes.button}> className={classes.button}>
@ -326,7 +332,7 @@ const CashCassettes = () => {
</P> </P>
<RadioGroup <RadioGroup
name="set-automatic-reset" name="set-automatic-reset"
value={selectedRadio} value={selectedRadio ?? cashboxReset}
options={[radioButtonOptions[0]]} options={[radioButtonOptions[0]]}
onChange={handleRadioButtons} onChange={handleRadioButtons}
className={classes.radioButtons} className={classes.radioButtons}
@ -337,7 +343,7 @@ const CashCassettes = () => {
</P> </P>
<RadioGroup <RadioGroup
name="set-manual-reset" name="set-manual-reset"
value={selectedRadio} value={selectedRadio ?? cashboxReset}
options={[radioButtonOptions[1]]} options={[radioButtonOptions[1]]}
onChange={handleRadioButtons} onChange={handleRadioButtons}
className={classes.radioButtons} className={classes.radioButtons}

View file

@ -20,13 +20,13 @@ export default {
}, },
descriptions: { descriptions: {
color: offColor, color: offColor,
marginTop: '0px' marginTop: 0
}, },
cashboxReset: { cashboxReset: {
color: offColor, color: offColor,
margin: '13px 0px -5px 20px' margin: [[13, 0, -5, 20]]
}, },
selection: { selection: {
marginRight: '12px' marginRight: 12
} }
} }

View file

@ -1,3 +1,6 @@
const CURRENCY_MAX = 9999999 const CURRENCY_MAX = 9999999
export { CURRENCY_MAX } const AUTOMATIC = 'automatic'
const MANUAL = 'manual'
export { CURRENCY_MAX, AUTOMATIC, MANUAL }