created postForm parrent component

src/components/editorElements/tagArea/view/tagAreaView.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { View } from 'react-native';
 // Constants
 
@@ -6,6 +6,7 @@ import { View } from 'react-native';
 import { Chip } from '../../../basicUIElements';
 // Styles
 import styles from './tagAreaStyles';
+import globalStyles from '../../../../globalStyles';
 
 export default class TagAreaView extends Component {
   /* Props
@@ -63,7 +64,7 @@ export default class TagAreaView extends Component {
     const { chips } = this.state;
 
     return (
-      <Fragment>
+      <View style={globalStyles.containerHorizontal16}>
         <View style={styles.tagWrapper}>
           {chips.map((chip, i) => (
             <Chip
@@ -82,11 +83,11 @@ export default class TagAreaView extends Component {
               handleOnBlur={() => this._handleOnBlur()}
               blurOnSubmit
               autoCapitalize="none"
-              returnKeyType="next"
+              {...this.props}
             />
           ))}
         </View>
-      </Fragment>
+      </View>
     );
   }
 }

src/components/editorElements/titleArea/view/titleAreaView.js

@@ -1,11 +1,12 @@
-import React, { Component, Fragment } from 'react';
-import { TextInput } from 'react-native';
+import React, { Component } from 'react';
+import { TextInput, View } from 'react-native';
 // Constants
 
 // Components
 
 // Styles
 import styles from './titleAreaStyles';
+import globalStyles from '../../../../globalStyles';
 
 export default class TitleAreaView extends Component {
   /* Props
@@ -26,7 +27,7 @@ export default class TitleAreaView extends Component {
     const { onChange, value } = this.props;
 
     return (
-      <Fragment>
+      <View style={globalStyles.containerHorizontal16}>
         <TextInput
           style={styles.textInput}
           placeholderTextColor="c1c5c7"
@@ -38,8 +39,9 @@ export default class TitleAreaView extends Component {
           numberOfLines={4}
           onChangeText={text => onChange && onChange(text)}
           value={value}
+          {...this.props}
         />
-      </Fragment>
+      </View>
     );
   }
 }

src/components/editorHeader/view/editorHeaderStyles.js

@@ -29,9 +29,15 @@ export default EStyleSheet.create({
     alignSelf: 'center',
   },
   textButton: {
-    color: '$iconColor',
     fontSize: 16,
   },
+  textButtonDisable: {
+    color: '$iconColor',
+  },
+  textButtonEnable: {
+    color: '$primaryBlue',
+    fontWeight: 'bold',
+  },
   textButtonWrapper: {
     justifyContent: 'center',
   },

src/components/editorHeader/view/editorHeaderView.js

@@ -12,7 +12,8 @@ import styles from './editorHeaderStyles';
 class EditorHeaderView extends Component {
   /* Props
     * ------------------------------------------------
-    *   @prop { type }    name                - Description....
+    *   @prop { boolean }    isFormValid                - Righst button propertie
+    *   @prop { string }     quickTitle                 - Left side behind back button text
     */
 
   constructor(props) {
@@ -30,6 +31,7 @@ class EditorHeaderView extends Component {
       handleOnPressPreviewButton,
       isPreviewActive,
       quickTitle,
+      isFormValid,
     } = this.props;
 
     return (
@@ -55,7 +57,10 @@ class EditorHeaderView extends Component {
             name={isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
           />
           <TextButton
-            textStyle={styles.textButton}
+            textStyle={[
+              styles.textButton,
+              isFormValid ? styles.textButtonEnable : styles.textButtonDisable,
+            ]}
             style={styles.textButtonWrapper}
             text="Publish"
           />

src/components/markdownEditor/view/markdownEditorView.js

@@ -125,6 +125,7 @@ export default class MarkdownEditorView extends Component {
             style={styles.textWrapper}
             underlineColorAndroid="transparent"
             value={text}
+            {...this.props}
           />
         ) : (
           this._renderPreview()

src/components/postForm/index.js

@@ -0,0 +1,4 @@
+import PostForm from './view/postFormView';
+
+export { PostForm };
+export default PostForm;

src/components/postForm/view/postFormView.js

@@ -0,0 +1,33 @@
+import React, { Component, Fragment } from 'react';
+
+class PostFormView extends Component {
+  _handleOnSubmitEditing = (returnKeyType = null, inputElement = null) => {
+    const { handleOnSubmit, isFormValid } = this.props;
+
+    if (isFormValid && handleOnSubmit && returnKeyType === 'done') {
+      handleOnSubmit();
+    } else if (returnKeyType === 'next' && inputElement) {
+      // TODO: its accept current input but its should be next input ref
+      inputElement.focus();
+    }
+  };
+
+  render() {
+    const { children, isFormValid } = this.props;
+
+    return (
+      <Fragment>
+        {React.Children.map(children, (child) => {
+          if (child) {
+            return React.cloneElement(child, {
+              onSubmitEditing: item => this._handleOnSubmitEditing(child.props.returnKeyType, item),
+              returnKeyType: isFormValid ? 'done' : 'next',
+            });
+          }
+        })}
+      </Fragment>
+    );
+  }
+}
+
+export default PostFormView;

src/screens/editor/screen/editorScreen.js

@@ -9,6 +9,7 @@ import { getWordsCount } from '../../../utils/editor';
 // Components
 import { EditorHeader } from '../../../components/editorHeader';
 import { TitleArea, TagArea, TextArea } from '../../../components/editorElements';
+import { PostForm } from '../../../components/postForm';
 // Styles
 import globalStyles from '../../../globalStyles';
 
@@ -44,6 +45,8 @@ export class EditorScreen extends Component {
     }
   };
 
+  _handleOnSubmit = () => {};
+
   render() {
     const { isPreviewActive, wordsCount } = this.state;
 
@@ -53,12 +56,20 @@ export class EditorScreen extends Component {
           isPreviewActive={isPreviewActive}
           quickTitle={wordsCount > 0 && `${wordsCount} words`}
           handleOnPressPreviewButton={this._handleOnPressPreviewButton}
+          isFormValid
         />
-        <View style={globalStyles.containerHorizontal16}>
+        <PostForm
+          handleOnSubmit={this._handleOnSubmit}
+          isPreviewActive={isPreviewActive}
+          isFormValid
+        >
           <TitleArea isPreviewActive={isPreviewActive} />
           <TagArea isPreviewActive={isPreviewActive} />
-        </View>
-        <TextArea handleOnTextChange={this._handleOnTextChange} isPreviewActive={isPreviewActive} />
+          <TextArea
+            handleOnTextChange={this._handleOnTextChange}
+            isPreviewActive={isPreviewActive}
+          />
+        </PostForm>
       </View>
     );
   }