refactor: separate logic from checkbox component
This commit is contained in:
parent
0a4fbad335
commit
8f648cca8e
4 changed files with 34 additions and 28 deletions
|
|
@ -1,10 +1,7 @@
|
|||
import { useQuery } from '@apollo/react-hooks'
|
||||
import Checkbox from '@material-ui/core/Checkbox'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import CheckBoxIcon from '@material-ui/icons/CheckBox'
|
||||
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
|
||||
import gql from 'graphql-tag'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import { Label2, Info3 } from 'src/components/typography'
|
||||
|
|
@ -43,24 +40,13 @@ const useStyles = makeStyles({
|
|||
}
|
||||
})
|
||||
|
||||
const GET_INFO = gql`
|
||||
query getData {
|
||||
config
|
||||
}
|
||||
`
|
||||
|
||||
const CheckboxInput = ({ name, onChange, value, ...props }) => {
|
||||
const { data: configData } = useQuery(GET_INFO)
|
||||
|
||||
const disabledMessage = 'RBF verification not available'
|
||||
const label = 'Enable RBF verification'
|
||||
const wallet = R.lensPath(['config', 'wallets_BTC_wallet'])
|
||||
const isEnabled = R.equals(R.view(wallet, configData), 'bitcoind')
|
||||
const CheckboxInput = ({ name, onChange, value, settings, ...props }) => {
|
||||
const { enabled, label, disabledMessage } = settings
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<>
|
||||
{isEnabled ? (
|
||||
{enabled ? (
|
||||
<div className={classes.checkBoxLabel}>
|
||||
<Label2>{label}</Label2>
|
||||
<Checkbox
|
||||
|
|
|
|||
|
|
@ -63,17 +63,20 @@ const FormRenderer = ({
|
|||
onSubmit={saveNonEmptySecret}>
|
||||
<Form className={classes.form}>
|
||||
<Grid container spacing={3} className={classes.grid}>
|
||||
{elements.map(({ component, code, display, inputProps }) => (
|
||||
<Grid item xs={xs} key={code}>
|
||||
<FastField
|
||||
component={component}
|
||||
{...inputProps}
|
||||
name={code}
|
||||
label={display}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
{elements.map(
|
||||
({ component, code, display, settings, inputProps }) => (
|
||||
<Grid item xs={xs} key={code}>
|
||||
<FastField
|
||||
component={component}
|
||||
{...inputProps}
|
||||
name={code}
|
||||
label={display}
|
||||
settings={settings}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</Grid>
|
||||
)
|
||||
)}
|
||||
</Grid>
|
||||
<Button
|
||||
className={classnames(classes.button, buttonClass)}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import React, { useState } from 'react'
|
|||
|
||||
import Modal from 'src/components/Modal'
|
||||
import { SecretInput } from 'src/components/inputs/formik'
|
||||
import CheckboxInput from 'src/components/inputs/formik/Checkbox'
|
||||
import TitleSection from 'src/components/layout/TitleSection'
|
||||
import SingleRowTable from 'src/components/single-row-table/SingleRowTable'
|
||||
import { formatLong } from 'src/utils/string'
|
||||
|
|
@ -16,6 +17,7 @@ import schemas from './schemas'
|
|||
const GET_INFO = gql`
|
||||
query getData {
|
||||
accounts
|
||||
config
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -57,8 +59,17 @@ const Services = () => {
|
|||
}))(faceElements)
|
||||
}
|
||||
|
||||
const updateSettings = element => {
|
||||
const settings = element.settings
|
||||
const wallet = R.lensPath(['config', 'wallets_BTC_wallet'])
|
||||
const isEnabled = R.equals(R.view(wallet, data), settings.requirement)
|
||||
settings.enabled = isEnabled
|
||||
return element
|
||||
}
|
||||
|
||||
const getElements = ({ code, elements }) => {
|
||||
return R.map(elem => {
|
||||
if (elem.component === CheckboxInput) return updateSettings(elem)
|
||||
if (elem.component !== SecretInput) return elem
|
||||
return {
|
||||
...elem,
|
||||
|
|
|
|||
|
|
@ -24,6 +24,12 @@ export default {
|
|||
{
|
||||
code: 'rbf',
|
||||
component: CheckboxInput,
|
||||
settings: {
|
||||
enabled: true,
|
||||
disabledMessage: 'RBF verification not available',
|
||||
label: 'Enable RBF verification',
|
||||
requirement: 'bitcoind'
|
||||
},
|
||||
face: true
|
||||
}
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue