mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
price field component splitup
This commit is contained in:
parent
8f19f8ac4e
commit
576b9f4c2e
@ -0,0 +1,9 @@
|
|||||||
|
.advancedInput {
|
||||||
|
display: flex;
|
||||||
|
gap: calc(var(--spacer) / 2);
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advancedInput label {
|
||||||
|
}
|
27
src/components/molecules/FormFields/Price/Advanced.tsx
Normal file
27
src/components/molecules/FormFields/Price/Advanced.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React, { ReactElement } from 'react'
|
||||||
|
import { InputProps } from '../../../atoms/Input'
|
||||||
|
import InputElement from '../../../atoms/Input/InputElement'
|
||||||
|
import stylesIndex from './index.module.css'
|
||||||
|
import styles from './Advanced.module.css'
|
||||||
|
import Label from '../../../atoms/Input/Label'
|
||||||
|
import { MetadataPublishForm } from '../../../../@types/MetaData'
|
||||||
|
import Cost from './Cost'
|
||||||
|
|
||||||
|
export default function Advanced(props: InputProps): ReactElement {
|
||||||
|
const { price } = props.form.values as MetadataPublishForm
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${stylesIndex.content} ${styles.advancedInput}`}>
|
||||||
|
<Cost {...props} />
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
|
||||||
|
<InputElement
|
||||||
|
{...props.field}
|
||||||
|
value={(price && price.tokensToMint) || 1}
|
||||||
|
name="price.tokensToMint"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
28
src/components/molecules/FormFields/Price/Cost.module.css
Normal file
28
src/components/molecules/FormFields/Price/Cost.module.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
.cost {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost label {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost input {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefix {
|
||||||
|
border: 1px solid var(--brand-grey-lighter);
|
||||||
|
min-height: 43px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: calc(var(--spacer) / 2);
|
||||||
|
padding-right: calc(var(--spacer) / 2);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-size: var(--font-size-small);
|
||||||
|
margin-right: -2px;
|
||||||
|
border-top-left-radius: var(--border-radius);
|
||||||
|
border-bottom-left-radius: var(--border-radius);
|
||||||
|
}
|
26
src/components/molecules/FormFields/Price/Cost.tsx
Normal file
26
src/components/molecules/FormFields/Price/Cost.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import React, { ReactElement } from 'react'
|
||||||
|
import InputElement from '../../../atoms/Input/InputElement'
|
||||||
|
import styles from './Cost.module.css'
|
||||||
|
import { MetadataPublishForm } from '../../../../@types/MetaData'
|
||||||
|
import Conversion from '../../../atoms/Price/Conversion'
|
||||||
|
import { InputProps } from '../../../atoms/Input'
|
||||||
|
import Label from '../../../atoms/Input/Label'
|
||||||
|
|
||||||
|
export default function Cost(props: InputProps): ReactElement {
|
||||||
|
const { price } = props.form.values as MetadataPublishForm
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.cost}>
|
||||||
|
<Label htmlFor="price.cost">Cost</Label>
|
||||||
|
|
||||||
|
<div className={styles.prefix}>OCEAN</div>
|
||||||
|
<InputElement
|
||||||
|
{...props.field}
|
||||||
|
value={(price && price.cost) || 0}
|
||||||
|
name="price.cost"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
<Conversion price={price.cost.toString()} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
12
src/components/molecules/FormFields/Price/Simple.module.css
Normal file
12
src/components/molecules/FormFields/Price/Simple.module.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.simple {
|
||||||
|
margin-bottom: calc(var(--spacer) / 2);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple > div {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple label {
|
||||||
|
display: none;
|
||||||
|
}
|
17
src/components/molecules/FormFields/Price/Simple.tsx
Normal file
17
src/components/molecules/FormFields/Price/Simple.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React, { ReactElement } from 'react'
|
||||||
|
import stylesIndex from './index.module.css'
|
||||||
|
import styles from './Simple.module.css'
|
||||||
|
import FormHelp from '../../../atoms/Input/Help'
|
||||||
|
import { InputProps } from '../../../atoms/Input'
|
||||||
|
import Cost from './Cost'
|
||||||
|
|
||||||
|
export default function Simple(props: InputProps): ReactElement {
|
||||||
|
return (
|
||||||
|
<div className={stylesIndex.content}>
|
||||||
|
<div className={styles.simple}>
|
||||||
|
<Cost {...props} />
|
||||||
|
</div>
|
||||||
|
{props.help && <FormHelp>{props.help}</FormHelp>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -6,7 +6,6 @@
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 0 calc(var(--spacer) / 2);
|
padding: 0 calc(var(--spacer) / 2);
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content label {
|
.content label {
|
||||||
@ -21,35 +20,3 @@
|
|||||||
.content p {
|
.content p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simpleInput {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: calc(var(--spacer) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.simpleInput input {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prefix {
|
|
||||||
border: 1px solid var(--brand-grey-lighter);
|
|
||||||
min-height: 43px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: calc(var(--spacer) / 2);
|
|
||||||
padding-right: calc(var(--spacer) / 2);
|
|
||||||
color: var(--color-secondary);
|
|
||||||
font-size: var(--font-size-small);
|
|
||||||
margin-right: -2px;
|
|
||||||
border-top-left-radius: var(--border-radius);
|
|
||||||
border-bottom-left-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.advancedInput {
|
|
||||||
display: flex;
|
|
||||||
gap: calc(var(--spacer) / 2);
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
@ -1,78 +1,14 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { InputProps } from '../../../atoms/Input'
|
import { InputProps } from '../../../atoms/Input'
|
||||||
import InputElement from '../../../atoms/Input/InputElement'
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import Label from '../../../atoms/Input/Label'
|
|
||||||
import { useFormikContext } from 'formik'
|
|
||||||
import { MetadataPublishForm } from '../../../../@types/MetaData'
|
|
||||||
import Tabs from '../../../atoms/Tabs'
|
import Tabs from '../../../atoms/Tabs'
|
||||||
import FormHelp from '../../../atoms/Input/Help'
|
import Simple from './Simple'
|
||||||
import Conversion from '../../../atoms/Price/Conversion'
|
import Advanced from './Advanced'
|
||||||
|
|
||||||
export default function Price(props: InputProps): ReactElement {
|
export default function Price(props: InputProps): ReactElement {
|
||||||
const { values } = useFormikContext()
|
|
||||||
|
|
||||||
const Simple = (
|
|
||||||
<div className={styles.content}>
|
|
||||||
<div className={styles.simpleInput}>
|
|
||||||
{/* <Label htmlFor="price.cost">Cost</Label> */}
|
|
||||||
<div className={styles.prefix}>OCEAN</div>
|
|
||||||
<InputElement
|
|
||||||
{...props.field}
|
|
||||||
value={
|
|
||||||
((values as MetadataPublishForm).price &&
|
|
||||||
(values as MetadataPublishForm).price.cost) ||
|
|
||||||
0
|
|
||||||
}
|
|
||||||
name="price.cost"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<Conversion
|
|
||||||
price={(values as MetadataPublishForm).price.cost.toString()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FormHelp>{props.help}</FormHelp>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
const Advanced = (
|
|
||||||
<div className={`${styles.content} ${styles.advancedInput}`}>
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="price.cost">Cost</Label>
|
|
||||||
<InputElement
|
|
||||||
{...props.field}
|
|
||||||
value={
|
|
||||||
(values as MetadataPublishForm).price &&
|
|
||||||
((values as MetadataPublishForm).price.cost || 1)
|
|
||||||
}
|
|
||||||
name="price.cost"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
|
|
||||||
<InputElement
|
|
||||||
{...props.field}
|
|
||||||
value={
|
|
||||||
(values as MetadataPublishForm).price &&
|
|
||||||
((values as MetadataPublishForm).price.tokensToMint || 1)
|
|
||||||
}
|
|
||||||
name="price.tokensToMint"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{ title: 'Simple', content: <Simple {...props} /> },
|
||||||
title: 'Simple',
|
{ title: 'Advanced', content: <Advanced {...props} /> }
|
||||||
content: Simple
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Advanced',
|
|
||||||
content: Advanced
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user