refactor some inputs

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -23,6 +23,7 @@ import {GetPremium} from '../ActionSheetComponent/GetPremium';
 import DialogButtons from '../Dialog/dialog-buttons';
 import DialogHeader from '../Dialog/dialog-header';
 import {updateEvent} from '../DialogManager/recievers';
+import Input from '../Input';
 import {Toast} from '../Toast';
 import Paragraph from '../Typography/Paragraph';
 
@@ -129,7 +130,7 @@ export class AddNotebookDialog extends React.Component {
     let edit = this.props.toEdit;
 
     if (!this.title || this.title?.trim().length === 0)
-      return ToastEvent.show('Title is required', 'error', 'local');
+      return ToastEvent.show('Notebook title is required', 'error', 'local');
 
     let id = edit && edit.id ? edit.id : null;
 
@@ -282,77 +283,24 @@ export class AddNotebookDialog extends React.Component {
                 }
               />
 
-              <TextInput
+              <Input
-                ref={(ref) => (this.titleRef = ref)}
+                fwdRef={(ref) => (this.titleRef = ref)}
                 testID={notesnook.ids.dialogs.notebook.inputs.title}
-                style={[
-                  styles.input,
-                  {
-                    borderColor: titleFocused ? colors.accent : colors.nav,
-                    color: colors.pri,
-                    fontSize: SIZE.md,
-                  },
-                ]}
-                numberOfLines={1}
-                multiline={false}
-                onFocus={() => {
-                  this.setState({
-                    titleFocused: true,
-                  });
-                }}
-                onBlur={() => {
-                  this.setState({
-                    titleFocused: false,
-                  });
-                }}
-                defaultValue={toEdit ? toEdit.title : null}
                 onChangeText={(value) => {
                   this.title = value;
                 }}
-                onSubmitEditing={() => {
+                placeholder="Title"
+                onSubmit={() => {
                   this.descriptionRef.focus();
                 }}
-                placeholder="Title"
+                defaultValue={toEdit ? toEdit.title : null}
-                placeholderTextColor={colors.icon}
-              />
-              <TextInput
-                ref={(ref) => (this.descriptionRef = ref)}
-                testID={notesnook.ids.dialogs.notebook.inputs.description}
-                style={[
-                  styles.input,
-                  {
-                    borderColor: descFocused ? colors.accent : colors.nav,
-                    minHeight: 45,
-                    color: colors.pri,
-                  },
-                ]}
-                maxLength={150}
-                onFocus={() => {
-                  this.setState({
-                    descFocused: true,
-                  });
-                }}
-                onBlur={() => {
-                  this.setState({
-                    descFocused: false,
-                  });
-                }}
-                defaultValue={toEdit ? toEdit.description : null}
-                onChangeText={(value) => {
-                  this.description = value;
-                }}
-                onSubmitEditing={() => {
-                  this.topicInputRef.focus();
-                }}
-                placeholder="Describe your notebook."
-                placeholderTextColor={colors.icon}
               />
 
-              <View style={styles.topicContainer}>
+              <Input
-                <TextInput
+                fwdRef={(ref) => (this.descriptionRef = ref)}
-                  ref={(ref) => (this.topicInputRef = ref)}
+                testID={notesnook.ids.dialogs.notebook.inputs.title}
-                  testID={notesnook.ids.dialogs.notebook.inputs.topic}
                 onChangeText={(value) => {
+                  this.description = value;
                   this.currentInputValue = value;
                   if (this.prevItem !== null) {
                     refs[this.prevIndex].setNativeProps({
@@ -363,54 +311,31 @@ export class AddNotebookDialog extends React.Component {
                     });
                   }
                 }}
-                  blurOnSubmit={false}
+                placeholder="Describe your notebook."
-                  onFocus={() => {
+                onSubmit={() => {
-                    this.setState({
+                  this.topicInputRef.focus();
-                      topicInputFocused: true,
-                    });
                 }}
-                  onBlur={() => {
+                defaultValue={toEdit ? toEdit.title : null}
-                    this.onSubmit(false);
+              />
-                    this.setState({
+
-                      topicInputFocused: false,
+              <Input
-                      editTopic: false,
+                fwdRef={(ref) => (this.topicInputRef = ref)}
-                    });
+                testID={notesnook.ids.dialogs.notebook.inputs.title}
+                onChangeText={(value) => {
+                  this.description = value;
+                }}
+                placeholder="Describe your notebook."
+                onSubmit={() => {
+                  this.onSubmit();
+                }}
+                button={{
+                  icon: this.state.editTopic ? 'check' : 'plus',
+                  onPress: this.onSubmit,
+                  color: topicInputFocused ? colors.accent : colors.icon,
                 }}
-                  onSubmitEditing={this.onSubmit}
-                  style={[
-                    styles.input,
-                    {
-                      borderColor: topicInputFocused
-                        ? colors.accent
-                        : colors.nav,
-                      color: colors.pri,
-                      width: '100%',
-                      maxWidth: '100%',
-                      marginTop: 5,
-                      paddingRight: '15%',
-                    },
-                  ]}
                 placeholder="Add a topic"
-                  placeholderTextColor={colors.icon}
+                defaultValue={toEdit ? toEdit.title : null}
               />
-                <TouchableOpacity
-                  onPress={this.onSubmit}
-                  testID={notesnook.ids.dialogs.notebook.buttons.add}
-                  style={[
-                    styles.addBtn,
-                    {
-                      borderColor: topicInputFocused
-                        ? colors.accent
-                        : colors.nav,
-                    },
-                  ]}>
-                  <Icon
-                    name={this.state.editTopic ? 'check' : 'plus'}
-                    size={SIZE.lg}
-                    color={topicInputFocused ? colors.accent : colors.icon}
-                  />
-                </TouchableOpacity>
-              </View>
 
               <FlatList
                 data={topics}

apps/mobile/src/components/AddTopicDialog/index.js

@@ -1,5 +1,4 @@
 import React, {createRef} from 'react';
-import {TextInput} from 'react-native-gesture-handler';
 import {Actions} from '../../provider/Actions';
 import {
   eSendEvent,
@@ -13,12 +12,12 @@ import {
   eOnNewTopicAdded,
   eOpenAddTopicDialog,
 } from '../../utils/Events';
-import {SIZE, WEIGHT} from '../../utils/SizeUtils';
 import BaseDialog from '../Dialog/base-dialog';
 import DialogButtons from '../Dialog/dialog-buttons';
 import DialogContainer from '../Dialog/dialog-container';
 import DialogHeader from '../Dialog/dialog-header';
 import {updateEvent} from '../DialogManager/recievers';
+import Input from '../Input';
 import {Toast} from '../Toast';
 
 export class AddTopicDialog extends React.Component {
@@ -75,7 +74,7 @@ export class AddTopicDialog extends React.Component {
   };
 
   render() {
-    const {visible, titleFocused} = this.state;
+    const {visible} = this.state;
     const {colors, toEdit} = this.props;
     if (!visible) return null;
     return (
@@ -93,34 +92,15 @@ export class AddTopicDialog extends React.Component {
             paragraph={'Add a new topic to ' + this.notebook.title}
           />
 
-          <TextInput
+          <Input
-            ref={this.titleRef}
+            fwdRef={this.titleRef}
-            style={{
-              paddingTop: 10,
-              paddingBottom: 5,
-              borderBottomWidth: 1,
-              borderColor: titleFocused ? colors.accent : colors.nav,
-              paddingHorizontal: 0,
-              fontSize: SIZE.sm,
-              fontFamily: WEIGHT.regular,
-              color: colors.pri,
-            }}
-            onFocus={() => {
-              this.setState({
-                titleFocused: true,
-              });
-            }}
-            onBlur={() => {
-              this.setState({
-                titleFocused: true,
-              });
-            }}
-            defaultValue={toEdit ? toEdit.title : null}
             onChangeText={(value) => {
               this.title = value;
             }}
+            blurOnSubmit={false}
+            defaultValue={toEdit ? toEdit.title : null}
             placeholder="Enter title of topic"
-            placeholderTextColor={colors.icon}
+            onSubmit={this.addNewTopic}
           />
 
           <DialogButtons

apps/mobile/src/components/Input/index.js

@@ -1,16 +1,15 @@
-
+import React, {useState} from 'react';
-import React, { useState } from 'react';
+import {View} from 'react-native';
-import { View } from 'react-native';
+import {TextInput} from 'react-native-gesture-handler';
-import { TextInput } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider/index';
+import {useTracked} from '../../provider/index';
 import {
   validateEmail,
   validatePass,
-	validateUsername
+  validateUsername,
 } from '../../services/Validation';
-import { getElevation } from '../../utils';
+import {getElevation} from '../../utils';
-import { SIZE, WEIGHT } from '../../utils/SizeUtils';
+import {SIZE, WEIGHT} from '../../utils/SizeUtils';
 import Paragraph from '../Typography/Paragraph';
 
 const Input = ({
@@ -28,7 +27,10 @@ const Input = ({
   customColor,
   customValidator,
   marginBottom = 10,
-  }) => {
+  button,
+  testID,
+  defaultValue
+}) => {
   const [state] = useTracked();
   const colors = state.colors;
   const [error, setError] = useState(false);
@@ -113,8 +115,9 @@ const Input = ({
       <View style={style}>
         <TextInput
 		  ref={fwdRef}
+		  testID={testID}
           editable={!loading}
-			defaultValue={value}
+          defaultValue={defaultValue}
           autoCapitalize={autoCapitalize}
           onChangeText={onChange}
           onBlur={onBlur}
@@ -149,6 +152,19 @@ const Input = ({
             />
           )}
 
+          {button && (
+            <Icon
+              name={button.icon}
+              size={20}
+              onPress={button.onPress}
+              style={{
+                width: 25,
+                marginLeft: 5,
+              }}
+              color={button.color}
+            />
+          )}
+
           {error && (
             <Icon
               name="alert-circle-outline"
@@ -194,7 +210,6 @@ const Input = ({
       </View>
     </>
   );
-  };
+};
-
-  export default Input
 
+export default Input;