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

feat: created a number input component (base and formik)

Browse source 
fix: replace numeric TextInput fields on the Cashout, Commissions,
Cashboxes, Notifications, Operator Info and Terms & Conditions pages

fix: change the way the number format is defined on the component

fix: parameterize the number of decimal places in the in the number
input and set it's value for the current number inputs on the admin
This commit is contained in:
Liordino Neto 2020-08-05 20:12:12 -03:00 • committed by Josh Harvey
parent 72a1b798f8
commit 27da8cc025
13 changed files with 195 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

1
new-lamassu-admin/package.json
View file

@ -30,6 +30,7 @@
"react": "^16.12.0",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.10.2",
"react-number-format": "^4.4.1",
"react-router-dom": "5.1.2",
"react-virtualized": "^9.21.2",
"sanctuary": "^2.0.1",

54
new-lamassu-admin/src/components/inputs/base/NumberInput.js Normal file
View file

@ -0,0 +1,54 @@
import React, { memo } from 'react'
import NumberFormat from 'react-number-format'
import TextInput from './TextInput'
const NumberInput = memo(
({
name,
onChange,
onBlur,
value,
error,
suffix,
textAlign,
width,
// lg or sm
size,
bold,
className,
decimalPlaces,
InputProps,
...props
}) => {
return (
<NumberFormat
name={name}
onChange={onChange}
onBlur={onBlur}
value={value}
error={error}
suffix={suffix}
textAlign={textAlign}
width={width}
// lg or sm
size={size}
bold={bold}
className={className}
customInput={TextInput}
decimalScale={decimalPlaces}
onValueChange={values => {
onChange({
target: {
id: name,
value: values.floatValue
}
})
}}
{...props}
/>
)
}
)
export default NumberInput

11
new-lamassu-admin/src/components/inputs/base/index.js
View file

@ -1,8 +1,17 @@
import Autocomplete from './Autocomplete'
import Checkbox from './Checkbox'
import NumberInput from './NumberInput'
import RadioGroup from './RadioGroup'
import SecretInput from './SecretInput'
import Switch from './Switch'
import TextInput from './TextInput'
export { Checkbox, TextInput, Switch, SecretInput, RadioGroup, Autocomplete }
export {
Checkbox,
TextInput,
NumberInput,
Switch,
SecretInput,
RadioGroup,
Autocomplete
}

24
new-lamassu-admin/src/components/inputs/formik/NumberInput.js Normal file
View file

@ -0,0 +1,24 @@
import React, { memo } from 'react'
import { NumberInput } from '../base'
const NumberInputFormik = memo(({ decimalPlaces, ...props }) => {
const { name, onChange, onBlur, value } = props.field
const { touched, errors } = props.form
const error = !!(touched[name] && errors[name])
return (
<NumberInput
name={name}
onChange={onChange}
onBlur={onBlur}
value={value}
error={error}
decimalPlaces={decimalPlaces}
{...props}
/>
)
})
export default NumberInputFormik

10
new-lamassu-admin/src/components/inputs/formik/index.js
View file

@ -1,7 +1,15 @@
import Autocomplete from './Autocomplete'
import Checkbox from './Checkbox'
import NumberInput from './NumberInput'
import RadioGroup from './RadioGroup'
import SecretInput from './SecretInput'
import TextInput from './TextInput'
export { Autocomplete, Checkbox, TextInput, SecretInput, RadioGroup }
export {
Autocomplete,
Checkbox,
TextInput,
NumberInput,
SecretInput,
RadioGroup
}

17
new-lamassu-admin/src/pages/Cashout/helper.js
View file

@ -1,6 +1,6 @@
import * as Yup from 'yup'
import TextInput from 'src/components/inputs/formik/TextInput'
import { NumberInput } from 'src/components/inputs/formik'
const DenominationsSchema = Yup.object().shape({
top: Yup.number().required('Required'),
@ -26,7 +26,10 @@ const getElements = (machines, { fiatCurrency } = {}) => {
stripe: true,
width: 200,
textAlign: 'right',
input: TextInput
input: NumberInput,
inputProps: {
decimalPlaces: 0
}
},
{
name: 'bottom',
@ -36,7 +39,10 @@ const getElements = (machines, { fiatCurrency } = {}) => {
stripe: true,
textAlign: 'right',
width: 200,
input: TextInput
input: NumberInput,
inputProps: {
decimalPlaces: 0
}
},
{
name: 'zeroConfLimit',
@ -45,7 +51,10 @@ const getElements = (machines, { fiatCurrency } = {}) => {
stripe: true,
textAlign: 'right',
width: 200,
input: TextInput
input: NumberInput,
inputProps: {
decimalPlaces: 0
}
}
]
}

58
new-lamassu-admin/src/pages/Commissions/helper.js
View file

@ -1,7 +1,7 @@
import * as R from 'ramda'
import * as Yup from 'yup'
import { TextInput } from 'src/components/inputs/formik'
import { NumberInput } from 'src/components/inputs/formik'
import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
const getOverridesFields = (getData, currency) => {
@ -54,35 +54,47 @@ const getOverridesFields = (getData, currency) => {
name: 'cashIn',
display: 'Cash-in',
width: 140,
input: TextInput,
input: NumberInput,
textAlign: 'right',
suffix: '%'
suffix: '%',
inputProps: {
decimalPlaces: 0
}
},
{
name: 'cashOut',
display: 'Cash-out',
width: 140,
input: TextInput,
input: NumberInput,
textAlign: 'right',
suffix: '%'
suffix: '%',
inputProps: {
decimalPlaces: 0
}
},
{
name: 'fixedFee',
display: 'Fixed fee',
width: 140,
input: TextInput,
input: NumberInput,
doubleHeader: 'Cash-in only',
textAlign: 'right',
suffix: currency
suffix: currency,
inputProps: {
decimalPlaces: 2
}
},
{
name: 'minimumTx',
display: 'Minimun Tx',
width: 140,
input: TextInput,
input: NumberInput,
doubleHeader: 'Cash-in only',
textAlign: 'right',
suffix: currency
suffix: currency,
inputProps: {
decimalPlaces: 2
}
}
]
}
@ -93,16 +105,22 @@ const mainFields = currency => [
display: 'Cash-in',
width: 169,
size: 'lg',
input: TextInput,
suffix: '%'
input: NumberInput,
suffix: '%',
inputProps: {
decimalPlaces: 0
}
},
{
name: 'cashOut',
display: 'Cash-out',
width: 169,
size: 'lg',
input: TextInput,
suffix: '%'
input: NumberInput,
suffix: '%',
inputProps: {
decimalPlaces: 0
}
},
{
name: 'fixedFee',
@ -111,8 +129,11 @@ const mainFields = currency => [
size: 'lg',
doubleHeader: 'Cash-in only',
textAlign: 'center',
input: TextInput,
suffix: currency
input: NumberInput,
suffix: currency,
inputProps: {
decimalPlaces: 2
}
},
{
name: 'minimumTx',
@ -121,8 +142,11 @@ const mainFields = currency => [
size: 'lg',
doubleHeader: 'Cash-in only',
textAlign: 'center',
input: TextInput,
suffix: currency
input: NumberInput,
suffix: currency,
inputProps: {
decimalPlaces: 2
}
}
]

12
new-lamassu-admin/src/pages/Maintenance/Cashboxes.js
View file

@ -4,7 +4,7 @@ import React from 'react'
import * as Yup from 'yup'
import { Table as EditableTable } from 'src/components/editableTable'
import TextInputFormik from 'src/components/inputs/formik/TextInput'
import { NumberInput } from 'src/components/inputs/formik'
import TitleSection from 'src/components/layout/TitleSection'
const ValidationSchema = Yup.object().shape({
@ -87,14 +87,20 @@ const Cashboxes = () => {
header: 'Cash-out 1',
width: 265,
textAlign: 'left',
input: TextInputFormik
input: NumberInput,
inputProps: {
decimalPlaces: 0
}
},
{
name: 'cassette2',
header: 'Cash-out 2',
width: 265,
textAlign: 'left',
input: TextInputFormik
input: NumberInput,
inputProps: {
decimalPlaces: 0
}
}
]

6
new-lamassu-admin/src/pages/Notifications/components/EditableNumber.js
View file

@ -3,7 +3,7 @@ import classnames from 'classnames'
import { useFormikContext, Field as FormikField } from 'formik'
import React from 'react'
import TextInput from 'src/components/inputs/formik/TextInput'
import { NumberInput } from 'src/components/inputs/formik'
import { Label1, Info1, TL2 } from 'src/components/typography'
import styles from './EditableNumber.styles'
@ -17,6 +17,7 @@ const EditableNumber = ({
displayValue,
decoration,
className,
decimalPlaces = 0,
width = 80
}) => {
const classes = useStyles({ width, editing })
@ -40,9 +41,10 @@ const EditableNumber = ({
size="lg"
fullWidth
name={name}
component={TextInput}
component={NumberInput}
textAlign="right"
width={width}
decimalPlaces={decimalPlaces}
/>
)}
<TL2 className={classes.decoration}>{decoration}</TL2>

16
new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceOverrides.js
View file

@ -3,8 +3,8 @@ import React, { useContext } from 'react'
import * as Yup from 'yup'
import { Table as EditableTable } from 'src/components/editableTable'
import { NumberInput } from 'src/components/inputs/formik'
import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
import TextInputFormik from 'src/components/inputs/formik/TextInput.js'
import NotificationsCtx from '../NotificationsContext'
@ -89,16 +89,22 @@ const CryptoBalanceOverrides = ({ section }) => {
width: 155,
textAlign: 'right',
bold: true,
input: TextInputFormik,
suffix: currency
input: NumberInput,
suffix: currency,
inputProps: {
decimalPlaces: 2
}
},
{
name: HIGH_BALANCE_KEY,
width: 155,
textAlign: 'right',
bold: true,
input: TextInputFormik,
suffix: currency
input: NumberInput,
suffix: currency,
inputProps: {
decimalPlaces: 2
}
}
]

16
new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js
View file

@ -3,8 +3,8 @@ import React, { useContext } from 'react'
import * as Yup from 'yup'
import { Table as EditableTable } from 'src/components/editableTable'
import { NumberInput } from 'src/components/inputs/formik/'
import Autocomplete from 'src/components/inputs/formik/Autocomplete'
import TextInputFormik from 'src/components/inputs/formik/TextInput.js'
import NotificationsCtx from '../NotificationsContext'
@ -74,8 +74,11 @@ const FiatBalanceOverrides = ({ section }) => {
textAlign: 'right',
doubleHeader: 'Cash-out (Cassette Empty)',
bold: true,
input: TextInputFormik,
suffix: 'notes'
input: NumberInput,
suffix: 'notes',
inputProps: {
decimalPlaces: 0
}
},
{
name: CASSETTE_2_KEY,
@ -84,8 +87,11 @@ const FiatBalanceOverrides = ({ section }) => {
textAlign: 'right',
doubleHeader: 'Cash-out (Cassette Empty)',
bold: true,
input: TextInputFormik,
suffix: 'notes'
input: NumberInput,
suffix: 'notes',
inputProps: {
decimalPlaces: 0
}
}
]

12
new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
View file

@ -11,7 +11,7 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import { Link } from 'src/components/buttons'
import Switch from 'src/components/inputs/base/Switch'
import TextInputFormik from 'src/components/inputs/formik/TextInput'
import { TextInput, NumberInput } from 'src/components/inputs/formik'
import {
P,
Info2,
@ -160,7 +160,7 @@ const ContactInfo = () => {
name: 'name',
label: 'Full name',
value: info.name ?? '',
component: TextInputFormik
component: TextInput
},
{
name: 'phone',
@ -170,25 +170,25 @@ const ContactInfo = () => {
info.phone,
locale.country
).formatInternational() ?? '',
component: TextInputFormik
component: NumberInput
},
{
name: 'email',
label: 'Email',
value: info.email ?? '',
component: TextInputFormik
component: TextInput
},
{
name: 'website',
label: 'Website',
value: info.website ?? '',
component: TextInputFormik
component: TextInput
},
{
name: 'companyNumber',
label: 'Company number',
value: info.companyNumber ?? '',
component: TextInputFormik
component: NumberInput
}
]

4
new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
View file

@ -10,7 +10,7 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import { Button } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import TextInputFormik from 'src/components/inputs/formik/TextInput'
import { TextInput } from 'src/components/inputs/formik'
import { Info2, Label2 } from 'src/components/typography'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
@ -149,7 +149,7 @@ const TermsConditions = () => {
<Field
id={f.name}
name={f.name}
component={TextInputFormik}
component={TextInput}
width={f.width}
placeholder={f.placeholder}
type="text"