lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use a specific prop for each different cashbox styling

Browse source
This commit is contained in:
José Oliveira 2021-06-21 18:55:36 +01:00 • committed by Josh Harvey
parent 410bc25afb
commit bb5f1fb1d3
3 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

19
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
View file

@ -19,25 +19,32 @@ const Cashbox = ({
className, className,
emptyPartClassName, emptyPartClassName,
labelClassName, labelClassName,
inFiatBalanceAlerts applyColorVariant,
applyFiatBalanceAlertsStyling,
removeInnerPercentage
}) => { }) => {
const classes = cashboxClasses({ percent, cashOut, inFiatBalanceAlerts }) console.log(
applyColorVariant,
applyFiatBalanceAlertsStyling,
removeInnerPercentage
)
const classes = cashboxClasses({ percent, cashOut, applyColorVariant })
const threshold = 51 const threshold = 51
const showCashBox = { const showCashBox = {
[classes.fiatBalanceAlertCashbox]: inFiatBalanceAlerts, [classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
[classes.cashbox]: !inFiatBalanceAlerts [classes.cashbox]: !applyFiatBalanceAlertsStyling
} }
return ( return (
<div className={classnames(className, showCashBox)}> <div className={classnames(className, showCashBox)}>
<div className={classnames(emptyPartClassName, classes.emptyPart)}> <div className={classnames(emptyPartClassName, classes.emptyPart)}>
{!inFiatBalanceAlerts && percent <= threshold && ( {!removeInnerPercentage && percent <= threshold && (
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2> <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
)} )}
</div> </div>
<div className={classes.fullPart}> <div className={classes.fullPart}>
{!inFiatBalanceAlerts && percent > threshold && ( {!removeInnerPercentage && percent > threshold && (
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2> <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
)} )}
</div> </div>

4
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
View file

@ -11,8 +11,8 @@ const colors = {
} }
} }
const colorPicker = ({ percent, cashOut, inFiatBalanceAlerts }) => { const colorPicker = ({ percent, cashOut, applyColorVariant }) => {
if (inFiatBalanceAlerts) return colors[cashOut ? 'cashOut' : 'cashIn'].full if (applyColorVariant) return colors[cashOut ? 'cashOut' : 'cashIn'].full
return colors[cashOut ? 'cashOut' : 'cashIn'][ return colors[cashOut ? 'cashOut' : 'cashIn'][
percent >= 50 ? 'full' : 'empty' percent >= 50 ? 'full' : 'empty'
] ]

8
new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
View file

@ -77,7 +77,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
values.fillingPercentageCassette1 ?? values.fillingPercentageCassette1 ??
data?.fillingPercentageCassette1 data?.fillingPercentageCassette1
} }
inFiatBalanceAlerts={true} applyColorVariant
applyFiatBalanceAlertsStyling
removeInnerPercentage
cashOut cashOut
/> />
<div className={classes.col2}> <div className={classes.col2}>
@ -101,7 +103,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
values.fillingPercentageCassette2 ?? values.fillingPercentageCassette2 ??
data?.fillingPercentageCassette2 data?.fillingPercentageCassette2
} }
inFiatBalanceAlerts={true} applyColorVariant
applyFiatBalanceAlertsStyling
removeInnerPercentage
cashOut cashOut
/> />
<div className={classes.col2}> <div className={classes.col2}>