From 576b9f4c2e3f0984cc5e5f8282a59d11ac593465 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 Jul 2020 18:42:07 +0200
Subject: [PATCH] price field component splitup

---
 .../FormFields/Price/Advanced.module.css      |  9 +++
 .../molecules/FormFields/Price/Advanced.tsx   | 27 +++++++
 .../FormFields/Price/Cost.module.css          | 28 ++++++++
 .../molecules/FormFields/Price/Cost.tsx       | 26 +++++++
 .../FormFields/Price/Simple.module.css        | 12 ++++
 .../molecules/FormFields/Price/Simple.tsx     | 17 +++++
 .../FormFields/Price/index.module.css         | 33 ---------
 .../molecules/FormFields/Price/index.tsx      | 72 ++-----------------
 8 files changed, 123 insertions(+), 101 deletions(-)
 create mode 100644 src/components/molecules/FormFields/Price/Advanced.module.css
 create mode 100644 src/components/molecules/FormFields/Price/Advanced.tsx
 create mode 100644 src/components/molecules/FormFields/Price/Cost.module.css
 create mode 100644 src/components/molecules/FormFields/Price/Cost.tsx
 create mode 100644 src/components/molecules/FormFields/Price/Simple.module.css
 create mode 100644 src/components/molecules/FormFields/Price/Simple.tsx

diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css
new file mode 100644
index 000000000..30d90102e
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Advanced.module.css
@@ -0,0 +1,9 @@
+.advancedInput {
+  display: flex;
+  gap: calc(var(--spacer) / 2);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.advancedInput label {
+}
diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx
new file mode 100644
index 000000000..0120df47d
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Advanced.tsx
@@ -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>
+  )
+}
diff --git a/src/components/molecules/FormFields/Price/Cost.module.css b/src/components/molecules/FormFields/Price/Cost.module.css
new file mode 100644
index 000000000..3d0131835
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Cost.module.css
@@ -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);
+}
diff --git a/src/components/molecules/FormFields/Price/Cost.tsx b/src/components/molecules/FormFields/Price/Cost.tsx
new file mode 100644
index 000000000..c23b82785
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Cost.tsx
@@ -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>
+  )
+}
diff --git a/src/components/molecules/FormFields/Price/Simple.module.css b/src/components/molecules/FormFields/Price/Simple.module.css
new file mode 100644
index 000000000..200a835cf
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Simple.module.css
@@ -0,0 +1,12 @@
+.simple {
+  margin-bottom: calc(var(--spacer) / 2);
+  text-align: center;
+}
+
+.simple > div {
+  justify-content: center;
+}
+
+.simple label {
+  display: none;
+}
diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx
new file mode 100644
index 000000000..8be0f36f4
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Simple.tsx
@@ -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>
+  )
+}
diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css
index 7ad682b21..90024ce6a 100644
--- a/src/components/molecules/FormFields/Price/index.module.css
+++ b/src/components/molecules/FormFields/Price/index.module.css
@@ -6,7 +6,6 @@
 
 .content {
   padding: 0 calc(var(--spacer) / 2);
-  text-align: center;
 }
 
 .content label {
@@ -21,35 +20,3 @@
 .content p {
   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;
-}
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index f5dc9fbf3..747a3da8f 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -1,78 +1,14 @@
 import React, { ReactElement } from 'react'
 import { InputProps } from '../../../atoms/Input'
-import InputElement from '../../../atoms/Input/InputElement'
 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 FormHelp from '../../../atoms/Input/Help'
-import Conversion from '../../../atoms/Price/Conversion'
+import Simple from './Simple'
+import Advanced from './Advanced'
 
 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 = [
-    {
-      title: 'Simple',
-      content: Simple
-    },
-    {
-      title: 'Advanced',
-      content: Advanced
-    }
+    { title: 'Simple', content: <Simple {...props} /> },
+    { title: 'Advanced', content: <Advanced {...props} /> }
   ]
 
   return (