From 54d9e02a428fe8e1c7a1fb74e3014b0028bded7a Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Thu, 29 Dec 2016 16:50:25 +0900
Subject: [PATCH] add: NoteItem component on NoteList component when using
 simple display mode

---
 browser/main/NoteList/NoteItemSimple.js | 44 +++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 browser/main/NoteList/NoteItemSimple.js

diff --git a/browser/main/NoteList/NoteItemSimple.js b/browser/main/NoteList/NoteItemSimple.js
new file mode 100644
index 00000000..3e66a43e
--- /dev/null
+++ b/browser/main/NoteList/NoteItemSimple.js
@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Note item component with simple display mode.
+ */
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteList.styl'
+
+/**
+ * @description Note item component when using simple display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ */
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+  <div styleName={isActive
+      ? 'item--active'
+      : 'item'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+  >
+    <div styleName='item-title'>
+      {note.title.trim().length > 0
+        ? note.title
+        : <span styleName='item-title-empty'>Empty</span>
+      }
+    </div>
+  </div>
+)
+
+NoteItemSimple.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired,
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+}
+
+export default CSSModules(NoteItemSimple, styles)