more examples...

takanoriyanagitani · Nov 23, 2019 · 97a161e · 97a161e
1 parent 44c9376
commit 97a161e
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 6 deletions.
diff --git a/examples/ex1.html b/examples/ex1.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <title>React Mail Viewer Example 1</title>
+  <meta charset="UTF-8" />
+  <script src="https://unpkg.com/react@16.10.2/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@16.10.2/umd/react-dom.production.min.js"></script>
+  <script src="/react-mail-viewer/lib/react-mail-viewer.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/react-mail-viewer/examples/ex1.js"></script>
+</body>
+</html>
diff --git a/examples/ex1.js b/examples/ex1.js
@@ -0,0 +1,42 @@
+const sample_mail = {
+  date:    "Sat, 09 Nov 2019 18:41:56 -0800",
+  from:    "takanori.yanagitani@gmail.com",
+  to:      "takanori.yanagitani@gmail.com",
+  subject: "sample subject",
+  content: {
+    type: "text/plain",
+    body: "hw\nthis\nis\nsample\nbody",
+  },
+}
+
+const sample_text2detail = ({term, detail}) => [
+  React.createElement("dt", { key: "term"   }, term  ),
+  React.createElement("dd", { key: "detail" }, detail),
+]
+
+const sample_date2detail = ({term, detail}) => [
+  React.createElement("dt", { key: "term"   }, term  ),
+  React.createElement("dd", { key: "detail" }, new Date(Date.parse(detail)).toLocaleString()),
+]
+
+const sample_content2detail = ({term, detail}) => [
+  React.createElement("dt", { key: "term"   }, term),
+  React.createElement("dd", { key: "detail" }, React.createElement("pre", {}, detail && detail.body)),
+]
+
+class SampleMailViewer extends React.PureComponent {
+  render(){
+    const { mail } = this.props
+    return React.createElement("dl", {}, ReactMailViewer.mail2dl({
+      mail,
+      text2detail:    sample_text2detail,
+      date2detail:    sample_date2detail,
+      content2detail: sample_content2detail,
+    }))
+  }
+}
+
+ReactDOM.render(
+  React.createElement(SampleMailViewer, { mail: sample_mail }),
+  document.getElementById("root")
+)
diff --git a/examples/ex2.html b/examples/ex2.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+<head>
+  <title>React Mail Viewer Example 2</title>
+  <meta charset="UTF-8" />
+  <script src="https://unpkg.com/react@16.10.2/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@16.10.2/umd/react-dom.production.min.js"></script>
+  <script src="/react-mail-viewer/lib/react-mail-viewer.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/react-mail-viewer/examples/ex2.js"></script>
+</body>
+</html>
diff --git a/examples/ex2.js b/examples/ex2.js
@@ -0,0 +1,26 @@
+const sample_mails = [
+  { date: "Sat, 11 Nov 2019 18:41:56 -0800", from: "takanori.yanagitani@gmail.com", to: "takanori.yanagitani@gmail.com", subject: "s3" },
+  { date: "Sat, 10 Nov 2019 18:41:56 -0800", from: "takanori.yanagitani@gmail.com", to: "takanori.yanagitani@gmail.com", subject: "s2" },
+  { date: "Sat, 09 Nov 2019 18:41:56 -0800", from: "takanori.yanagitani@gmail.com", to: "takanori.yanagitani@gmail.com", subject: "s1" },
+]
+
+const sample_mail2child  = mail         => React.createElement("div", {}, mail && mail.subject || "")
+const sample_child2li    = (child, key) => React.createElement("li", { key, className: "list-group-item" }, child)
+const sample_children2ul = children     => React.createElement("ul", { className: "list-group" }, children)
+
+class SampleMailListViewer extends React.PureComponent {
+  render(){
+    const { mails } = this.props
+    return ReactMailViewer.mails2list({
+      mails,
+      mail2child:  sample_mail2child,
+      child2li:    sample_child2li,
+      children2ul: sample_children2ul,
+    })
+  }
+}
+
+ReactDOM.render(
+  React.createElement(SampleMailListViewer, { mails: sample_mails }),
+  document.getElementById("root")
+)
diff --git a/examples/index.html b/examples/index.html
@@ -1,14 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>React Mail Viewer Example 1</title>
+  <title>React Mail Viewer Examples</title>
   <meta charset="UTF-8" />
-  <script src="https://unpkg.com/react@16.10.2/umd/react.production.min.js"></script>
-  <script src="https://unpkg.com/react-dom@16.10.2/umd/react-dom.production.min.js"></script>
-  <script src="/react-mail-viewer/lib/react-mail-viewer.js"></script>
 </head>
 <body>
-  <div id="root"></div>
-  <script type="module" src="/react-mail-viewer/examples/index.js"></script>
+  <ul>
+    <li><a href="ex1.html">Example 1</a></li>
+    <li><a href="ex2.html">Example 2</a></li>
+  </ul>
 </body>
 </html>