enhanced chips on editor

src/components/basicHeader/view/basicHeaderView.js

@@ -91,7 +91,7 @@ class BasicHeaderView extends Component {
               name={isModalHeader ? 'close' : 'md-arrow-back'}
               onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
             />
-            {isHasIcons && (
+            {isHasIcons && !isReply && (
               <View>
                 {!isDraftSaving ? (
                   <IconButton

src/components/basicUIElements/view/chip/chipStyle.js

@@ -6,7 +6,7 @@ export default EStyleSheet.create({
     fontSize: 10,
     backgroundColor: '#c1c5c7',
     borderRadius: 50,
-    maxHeight: 18,
+    height: 20,
     padding: 5,
     paddingHorizontal: 10,
     marginRight: 8,

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

@@ -10,9 +10,9 @@ import globalStyles from '../../../../globalStyles';
 
 export default class TagAreaView extends Component {
   /* Props
-    * ------------------------------------------------
-    *   @prop { type }    name                - Description....
-    */
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
 
   constructor(props) {
     super(props);
@@ -20,6 +20,7 @@ export default class TagAreaView extends Component {
       currentText: '',
       chips: [' '],
       chipsCount: props.chipsCount || 5,
+      activeChip: 0,
     };
   }
 
@@ -37,7 +38,10 @@ export default class TagAreaView extends Component {
 
   // Component Functions
   _handleOnChange = (text, i) => {
-    this.setState({ currentText: text.trim() });
+    this.setState({
+      currentText: text.replace(/\s/g, ''),
+    });
+
     if (text.indexOf(' ') > 0 && text) {
       this._handleTagAdded();
     }
@@ -53,16 +57,22 @@ export default class TagAreaView extends Component {
   _handleTagAdded = (i = null, text = null) => {
     const { currentText, chips, chipsCount } = this.state;
     const { handleTagChanged } = this.props;
-    const _currentText = (currentText && currentText.trim()) || text;
-
+    const _currentText = currentText || text;
     if (_currentText && chips && chips.length < chipsCount) {
       this.setState({
         chips: [...chips, _currentText],
         currentText: '',
       });
+    } else if (_currentText && chips && chips.length === chipsCount) {
+      let _chips = chips;
+      _chips[chipsCount -1] = currentText;
+      this.setState({
+        chips: _chips,
+        currentText: null,
+      });
     }
 
-    if (handleTagChanged && chips.length < chipsCount + 1) {
+    if (handleTagChanged && chips.length < chipsCount) {
       handleTagChanged([...chips, _currentText]);
     }
   };
@@ -81,10 +91,8 @@ export default class TagAreaView extends Component {
   };
 
   render() {
-    const {
-      isPreviewActive, draftChips, intl, autoFocus,
-    } = this.props;
-    const { chips } = this.state;
+    const { isPreviewActive, intl } = this.props;
+    const { chips, currentText, activeChip } = this.state;
 
     return (
       <View style={globalStyles.containerHorizontal16}>
@@ -102,13 +110,14 @@ export default class TagAreaView extends Component {
               placeholder={intl.formatMessage({
                 id: 'editor.tags',
               })}
-              autoFocus={autoFocus ? i !== 0 && chips.length - 1 === i : false}
+              autoFocus={i !== 0 && chips.length - 1 === i}
               multiline={false}
               handleOnChange={text => this._handleOnChange(text, i)}
               handleOnBlur={() => this._handleOnBlur(i)}
               blurOnSubmit
-              value={draftChips.length > 0 ? chip && chip : null}
+              value={activeChip === i ? currentText : chip}
               autoCapitalize="none"
+              onFocus={() => this.setState({ activeChip: i })}
               {...this.props}
             />
           ))}

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

@@ -17,10 +17,18 @@ export default class TitleAreaView extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      text: props.value || null,
+    };
   }
 
   // Component Life Cycles
+  componentWillReceiveProps = (nextProps) => {
+    const { text } = this.state;
+    if (nextProps.value !== text) {
+      this.setState({ text: nextProps.value });
+    }
+  };
 
   // Component Functions
   _handleOnChange = (text) => {
@@ -35,9 +43,8 @@ export default class TitleAreaView extends Component {
   };
 
   render() {
-    const {
-      intl, isPreviewActive, value, autoFocus,
-    } = this.props;
+    const { intl, isPreviewActive, autoFocus } = this.props;
+    const { text } = this.state;
 
     return (
       <View style={globalStyles.containerHorizontal16}>
@@ -53,9 +60,7 @@ export default class TitleAreaView extends Component {
           autoFocus={autoFocus}
           numberOfLines={4}
           onChangeText={text => this._handleOnChange(text)}
-          // TODO: Fix it
-          // value={value && value}
-          // {...this.props}
+          value={text}
         />
       </View>
     );

src/components/header/view/headerView.js

@@ -113,7 +113,6 @@ class HeaderView extends Component {
             }}
           >
             <IconButton
-              style={styles.searchButton}
               iconStyle={styles.backIcon}
               name="md-search"
               onPress={() => this.setState({ isSearchModalOpen: true })}

src/screens/editor/container/editorContainer.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { Alert } from 'react-native'
 import ImagePicker from 'react-native-image-crop-picker';
 
 // Services and Actions
@@ -169,7 +170,7 @@ class EditorContainer extends Component {
   _handleMediaOnSelectFailure = (error) => {
     // const { navigation } = this.props;
     this.setState({ isCameraOrPickerOpen: false });
-    // navigation.navigate(ROUTES.SCREENS.HOME);
+    Alert.alert('Permission Denied', 'Please, go to settings then find eSteem change the app permision settings.');
   };
 
   // Media select functions <- END ->