1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

fix BoxSelection fields checked state

This commit is contained in:
Matthias Kretschmann 2021-11-15 15:19:50 +00:00
parent 94147026c0
commit b41e15a92e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 36 additions and 6 deletions

View File

@ -2,6 +2,7 @@ import React, { ChangeEvent } from 'react'
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
import Loader from '@shared/atoms/Loader' import Loader from '@shared/atoms/Loader'
import styles from './BoxSelection.module.css' import styles from './BoxSelection.module.css'
import { useField } from 'formik'
const cx = classNames.bind(styles) const cx = classNames.bind(styles)

View File

@ -15,11 +15,6 @@ const dockerImageOptionsTitles = getFieldContent(
content.metadata.fields content.metadata.fields
).options ).options
const assetTypeOptions = assetTypeOptionsTitles.map((title) => ({
name: title.toLowerCase(),
title
}))
const dockerImageOptions = dockerImageOptionsTitles.map((title) => ({ const dockerImageOptions = dockerImageOptionsTitles.map((title) => ({
name: title.toLowerCase(), name: title.toLowerCase(),
title title
@ -29,6 +24,21 @@ export default function MetadataFields(): ReactElement {
// connect with Form state, use for conditional field rendering // connect with Form state, use for conditional field rendering
const { values } = useFormikContext<FormPublishData>() const { values } = useFormikContext<FormPublishData>()
// BoxSelection component is not a Formik component
// so we need to handle checked state manually.
const assetTypeOptions = [
{
name: assetTypeOptionsTitles[0].toLowerCase(),
title: assetTypeOptionsTitles[0],
checked: values.metadata.type === assetTypeOptionsTitles[0].toLowerCase()
},
{
name: assetTypeOptionsTitles[1].toLowerCase(),
title: assetTypeOptionsTitles[1],
checked: values.metadata.type === assetTypeOptionsTitles[1].toLowerCase()
}
]
return ( return (
<> <>
<Field <Field

View File

@ -29,6 +29,25 @@ export default function ServicesFields(): ReactElement {
// connect with Form state, use for conditional field rendering // connect with Form state, use for conditional field rendering
const { values, setFieldValue } = useFormikContext<FormPublishData>() const { values, setFieldValue } = useFormikContext<FormPublishData>()
const accessTypeOptions = [
{
name: accessTypeOptionsTitles[0].toLowerCase(),
title: accessTypeOptionsTitles[0],
icon: <IconDownload />,
// BoxSelection component is not a Formik component
// so we need to handle checked state manually.
checked:
values.services[0].access === accessTypeOptionsTitles[0].toLowerCase()
},
{
name: accessTypeOptionsTitles[1].toLowerCase(),
title: accessTypeOptionsTitles[1],
icon: <IconCompute />,
checked:
values.services[0].access === accessTypeOptionsTitles[1].toLowerCase()
}
]
// Auto-change access type based on algo privacy boolean. // Auto-change access type based on algo privacy boolean.
// Could be also done later in transformPublishFormToDdo(). // Could be also done later in transformPublishFormToDdo().
useEffect(() => { useEffect(() => {

View File

@ -37,7 +37,7 @@ export const initialValues: FormPublishData = {
accountId: '', accountId: '',
metadata: { metadata: {
nft: { name: '', symbol: '', tokenURI: '' }, nft: { name: '', symbol: '', tokenURI: '' },
type: '', type: 'dataset',
name: '', name: '',
author: '', author: '',
description: '', description: '',