created header words counter

src/components/editorHeader/view/editorHeaderStyles.js

@@ -13,8 +13,12 @@ export default EStyleSheet.create({
     fontSize: 24,
     color: '$iconColor',
   },
-  backIconButton: {
+  quickTitle: {
     flexGrow: 1,
+    fontSize: 10,
+    color: '$iconColor',
+    marginLeft: 24,
+    alignSelf: 'center',
   },
   rightIcon: {
     color: '$iconColor',

src/components/editorHeader/view/editorHeaderView.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, SafeAreaView } from 'react-native';
+import { View, SafeAreaView, Text } from 'react-native';
 import { TextButton } from '../..';
 import { IconButton } from '../../iconButton';
 // Constants
@@ -25,17 +25,22 @@ class EditorHeaderView extends Component {
   // Component Functions
 
   render() {
-    const { handleOnPressBackButton, handleOnPressPreviewButton, isPreviewActive } = this.props;
+    const {
+      handleOnPressBackButton,
+      handleOnPressPreviewButton,
+      isPreviewActive,
+      quickTitle,
+    } = this.props;
 
     return (
       <SafeAreaView>
         <View style={styles.container}>
           <IconButton
-            style={styles.backIconButton}
             iconStyle={styles.backIcon}
             name="md-arrow-back"
             onPress={() => handleOnPressBackButton()}
           />
+          <Text style={styles.quickTitle}>{quickTitle}</Text>
           <IconButton
             style={styles.iconButton}
             iconStyle={styles.rightIcon}

src/components/markdownEditor/view/markdownEditorView.js

@@ -27,12 +27,12 @@ export default class MarkdownEditorView extends Component {
   }
 
   changeText = (input) => {
-    const { onMarkdownChange } = this.props;
+    const { handleOnTextChange } = this.props;
 
     this.setState({ text: input });
 
-    if (onMarkdownChange) {
-      onMarkdownChange(input);
+    if (handleOnTextChange) {
+      handleOnTextChange(input);
     }
   };
 

src/screens/editor/screen/editorScreen.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
 
+// Utils
+import { getWordsCount } from '../../../utils/editor';
+
 // Constants
 
 // Components
@@ -19,6 +22,7 @@ export class EditorScreen extends Component {
     super(props);
     this.state = {
       isPreviewActive: false,
+      wordsCount: null,
     };
   }
 
@@ -31,20 +35,30 @@ export class EditorScreen extends Component {
     this.setState({ isPreviewActive: !isPreviewActive });
   };
 
+  _handleOnTextChange = (text) => {
+    const _wordsCount = getWordsCount(text);
+    const { wordsCount } = this.state;
+
+    if (_wordsCount !== wordsCount) {
+      this.setState({ wordsCount: _wordsCount });
+    }
+  };
+
   render() {
-    const { isPreviewActive } = this.state;
+    const { isPreviewActive, wordsCount } = this.state;
 
     return (
       <View style={globalStyles.defaultContainer}>
         <EditorHeader
           isPreviewActive={isPreviewActive}
+          quickTitle={wordsCount && `${wordsCount} words`}
           handleOnPressPreviewButton={this._handleOnPressPreviewButton}
         />
         <View style={globalStyles.containerHorizontal16}>
           <TitleArea isPreviewActive={isPreviewActive} />
           <TagArea isPreviewActive={isPreviewActive} />
         </View>
-        <TextArea isPreviewActive={isPreviewActive} />
+        <TextArea handleOnTextChange={this._handleOnTextChange} isPreviewActive={isPreviewActive} />
       </View>
     );
   }

src/utils/editor.js

@@ -0,0 +1 @@
+export const getWordsCount = text => text.replace(/^\s+|\s+$/g, '').split(/\s+/).length;