From 642ad896230d2ba2ebbde4fcd931976294e4acdb Mon Sep 17 00:00:00 2001
From: Yoshihiro OKUMURA <yoshihiro.okumura@riken.jp>
Date: Mon, 13 May 2019 20:00:14 +0900
Subject: [PATCH] implemented preview field

---
 .../item-type/util/Preview.module.css         | 23 +++++++++++++++++++
 .../database/item-type/util/Preview.tsx       | 22 ++++++++++--------
 2 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 src/components/database/item-type/util/Preview.module.css

diff --git a/src/components/database/item-type/util/Preview.module.css b/src/components/database/item-type/util/Preview.module.css
new file mode 100644
index 0000000..7ce5431
--- /dev/null
+++ b/src/components/database/item-type/util/Preview.module.css
@@ -0,0 +1,23 @@
+.previewBox {
+    text-align: center;
+    margin: 10px;
+}
+
+.previewBox::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.preview {
+    width: 200px;
+    margin: 0 auto;
+    float: left;
+    text-align: center;
+}
+
+.preview caption {
+    width: 200px;
+    margin: 5px;
+    font-size: 80%;
+}
\ No newline at end of file
diff --git a/src/components/database/item-type/util/Preview.tsx b/src/components/database/item-type/util/Preview.tsx
index b438e40..ed06434 100644
--- a/src/components/database/item-type/util/Preview.tsx
+++ b/src/components/database/item-type/util/Preview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { ItemBasicFile } from '../../../../common/ItemUtil';
+import ItemUtil, { ItemBasicFile } from '../../../../common/ItemUtil';
+import styles from './Preview.module.css';
 
 const Preview = (props: { file: ItemBasicFile[] }) => {
     const { file } = props;
@@ -9,18 +10,21 @@ const Preview = (props: { file: ItemBasicFile[] }) => {
     if (data.length === 0) {
         return null;
     }
-    const elements = data.map((value) => {
+    const previews = data.map((value) => {
+        const fileUrl = ItemUtil.getFileUrl(value.file_id);
+        const previewUrl = fileUrl + '.png';
         return (
-            <td key={value.file_id}>{value.original_file_name}</td>
+            <div key={value.file_id} className={styles.preview}>
+                <a href={fileUrl} download={value.original_file_name}>
+                    <img src={previewUrl} alt={value.original_file_name} />
+                </a>
+                <caption>{value.caption}</caption>
+            </div>
         );
     });
     return (
-        <div>
-            <table className="preview">
-                <tbody>
-                    {elements}
-                </tbody>
-            </table>
+        <div className={styles.previewBox}>
+            {previews}
         </div>
     );
 }