Merge pull request #815 from asmsuechan/add-word-count-to-InfoPanel

Add wordcount and lettercount to InfoPanel

browser/main/Detail/InfoPanel.js

@@ -3,7 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 
 const InfoPanel = ({
-  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt
+  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type
 }) => (
   <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
     <div styleName='group-section'>
@@ -46,6 +46,27 @@ const InfoPanel = ({
         <input value={noteLink} onClick={(e) => { e.target.select() }} />
       </div>
     </div>
+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <div>
+        <div styleName='group-section'>
+          <div styleName='group-section-label'>
+            Words
+          </div>
+          <div styleName='group-section-control'>
+            {wordCount}
+          </div>
+        </div>
+        <div styleName='group-section'>
+          <div styleName='group-section-label'>
+            Letters
+          </div>
+          <div styleName='group-section-control'>
+            {letterCount}
+          </div>
+        </div>
+      </div>
+    }
 
     <div id='export-wrap'>
       <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
@@ -73,7 +94,10 @@ InfoPanel.propTypes = {
   updatedAt: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
-  exportAsTxt: PropTypes.func.isRequired
+  exportAsTxt: PropTypes.func.isRequired,
+  wordCount: PropTypes.number,
+  letterCount: PropTypes.number,
+  type: PropTypes.string.isRequired
 }
 
 export default CSSModules(InfoPanel, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -353,6 +353,9 @@ class MarkdownNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
+          wordCount={note.content.split(' ').length}
+          letterCount={note.content.length}
+          type={note.type}
         />
       </div>
     </div>

browser/main/Detail/SnippetNoteDetail.js

@@ -611,6 +611,7 @@ class SnippetNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
+          type={note.type}
         />
       </div>
     </div>