From 36aaf1b7d42f3d4e535f06425b38676cb395fee3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 15 Mar 2021 19:03:10 +0100
Subject: [PATCH] Asset selection form component (#441)

* prototype AssetSelection

* assetselection styling

* typing "fix"
---
 src/components/atoms/Input/InputElement.tsx   | 20 +++++++
 .../FormFields/AssetSelection.module.css      | 57 ++++++++++++++++++
 .../molecules/FormFields/AssetSelection.tsx   | 58 +++++++++++++++++++
 3 files changed, 135 insertions(+)
 create mode 100644 src/components/molecules/FormFields/AssetSelection.module.css
 create mode 100644 src/components/molecules/FormFields/AssetSelection.tsx

diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index d136e22e4..d1842e0e5 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -6,6 +6,9 @@ import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 import Datatoken from '../../molecules/FormFields/Datatoken'
 import classNames from 'classnames/bind'
+import AssetSelection, {
+  AssetSelectionAsset
+} from '../../molecules/FormFields/AssetSelection'
 
 const cx = classNames.bind(styles)
 
@@ -90,6 +93,23 @@ export default function InputElement({
             ))}
         </div>
       )
+    case 'assetSelection':
+      return (
+        <AssetSelection
+          assets={(options as unknown) as AssetSelectionAsset[]}
+          {...field}
+          {...props}
+        />
+      )
+    case 'assetSelectionMultiple':
+      return (
+        <AssetSelection
+          assets={(options as unknown) as AssetSelectionAsset[]}
+          multiple
+          {...field}
+          {...props}
+        />
+      )
     case 'files':
       return <FilesInput name={name} {...field} {...props} />
     case 'datatoken':
diff --git a/src/components/molecules/FormFields/AssetSelection.module.css b/src/components/molecules/FormFields/AssetSelection.module.css
new file mode 100644
index 000000000..f4d24b250
--- /dev/null
+++ b/src/components/molecules/FormFields/AssetSelection.module.css
@@ -0,0 +1,57 @@
+.selection {
+  padding: calc(var(--spacer) / 4);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-highlight);
+  border-radius: var(--border-radius);
+  margin-bottom: calc(var(--spacer) / 2);
+  font-size: var(--font-size-small);
+
+  max-height: 300px;
+  /* smooth overflow scrolling for pre-iOS 13 */
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.row {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--border-color);
+  padding-top: calc(var(--spacer) / 4);
+  padding-bottom: calc(var(--spacer) / 4);
+}
+
+.row > div {
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+}
+
+.input {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: calc(var(--spacer) / 4);
+}
+
+.title {
+  font-size: var(--font-size-small);
+  margin: 0;
+}
+
+.link {
+  margin-left: calc(var(--spacer) / 4);
+}
+
+.link svg {
+  fill: var(--color-primary);
+  width: 0.7em;
+  height: 0.7em;
+}
+
+.price {
+  display: inline-block;
+  font-size: var(--font-size-small) !important;
+}
diff --git a/src/components/molecules/FormFields/AssetSelection.tsx b/src/components/molecules/FormFields/AssetSelection.tsx
new file mode 100644
index 000000000..a6813376f
--- /dev/null
+++ b/src/components/molecules/FormFields/AssetSelection.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import Dotdotdot from 'react-dotdotdot'
+import slugify from 'slugify'
+import PriceUnit from '../../atoms/Price/PriceUnit'
+import { ReactComponent as External } from '../../../images/external.svg'
+import styles from './AssetSelection.module.css'
+
+export interface AssetSelectionAsset {
+  did: string
+  name: string
+  price: string
+}
+
+export default function AssetSelection({
+  assets,
+  multiple,
+  ...props
+}: {
+  assets: AssetSelectionAsset[]
+  multiple?: boolean
+}): JSX.Element {
+  return (
+    <div className={styles.selection}>
+      {assets.map((asset: AssetSelectionAsset) => (
+        <div className={styles.row} key={asset.did}>
+          <input
+            id={slugify(asset.name)}
+            type={multiple ? 'checkbox' : 'radio'}
+            value={asset.did}
+            className={styles.input}
+            {...props}
+          />
+          <div className={styles.content}>
+            <label
+              className={styles.label}
+              htmlFor={slugify(asset.name)}
+              title={asset.name}
+            >
+              <Dotdotdot clamp={1} tagName="h3" className={styles.title}>
+                {asset.name}
+              </Dotdotdot>
+              <PriceUnit price={asset.price} small className={styles.price} />
+            </label>
+
+            <a
+              className={styles.link}
+              href={`/asset/${asset.did}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <External />
+            </a>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}