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,136 +283,60 @@ export class AddNotebookDialog extends React.Component {
                 }
               />
 
-              <TextInput
-                ref={(ref) => (this.titleRef = ref)}
+              <Input
+                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"
-                placeholderTextColor={colors.icon}
+                defaultValue={toEdit ? toEdit.title : null}
               />
-              <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,
-                  });
+
+              <Input
+                fwdRef={(ref) => (this.descriptionRef = ref)}
+                testID={notesnook.ids.dialogs.notebook.inputs.title}
+                onChangeText={(value) => {
+                  this.description = value;
+                  this.currentInputValue = value;
+                  if (this.prevItem !== null) {
+                    refs[this.prevIndex].setNativeProps({
+                      text: this.prevIndex + 1 + '. ' + value,
+                      style: {
+                        borderBottomColor: colors.accent,
+                      },
+                    });
+                  }
                 }}
-                onBlur={() => {
-                  this.setState({
-                    descFocused: false,
-                  });
+                placeholder="Describe your notebook."
+                onSubmit={() => {
+                  this.topicInputRef.focus();
                 }}
-                defaultValue={toEdit ? toEdit.description : null}
+                defaultValue={toEdit ? toEdit.title : null}
+              />
+
+              <Input
+                fwdRef={(ref) => (this.topicInputRef = ref)}
+                testID={notesnook.ids.dialogs.notebook.inputs.title}
                 onChangeText={(value) => {
                   this.description = value;
                 }}
-                onSubmitEditing={() => {
-                  this.topicInputRef.focus();
-                }}
                 placeholder="Describe your notebook."
-                placeholderTextColor={colors.icon}
+                onSubmit={() => {
+                  this.onSubmit();
+                }}
+                button={{
+                  icon: this.state.editTopic ? 'check' : 'plus',
+                  onPress: this.onSubmit,
+                  color: topicInputFocused ? colors.accent : colors.icon,
+                }}
+                placeholder="Add a topic"
+                defaultValue={toEdit ? toEdit.title : null}
               />
 
-              <View style={styles.topicContainer}>
-                <TextInput
-                  ref={(ref) => (this.topicInputRef = ref)}
-                  testID={notesnook.ids.dialogs.notebook.inputs.topic}
-                  onChangeText={(value) => {
-                    this.currentInputValue = value;
-                    if (this.prevItem !== null) {
-                      refs[this.prevIndex].setNativeProps({
-                        text: this.prevIndex + 1 + '. ' + value,
-                        style: {
-                          borderBottomColor: colors.accent,
-                        },
-                      });
-                    }
-                  }}
-                  blurOnSubmit={false}
-                  onFocus={() => {
-                    this.setState({
-                      topicInputFocused: true,
-                    });
-                  }}
-                  onBlur={() => {
-                    this.onSubmit(false);
-                    this.setState({
-                      topicInputFocused: false,
-                      editTopic: false,
-                    });
-                  }}
-                  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}
-                />
-                <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}
                 ref={(ref) => (this.listRef = ref)}

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
-            ref={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}
+          <Input
+            fwdRef={this.titleRef}
             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,200 +1,215 @@
-
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { TextInput } from 'react-native-gesture-handler';
+import React, {useState} from 'react';
+import {View} from 'react-native';
+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
+  validateEmail,
+  validatePass,
+  validateUsername,
 } from '../../services/Validation';
-import { getElevation } from '../../utils';
-import { SIZE, WEIGHT } from '../../utils/SizeUtils';
+import {getElevation} from '../../utils';
+import {SIZE, WEIGHT} from '../../utils/SizeUtils';
 import Paragraph from '../Typography/Paragraph';
 
 const Input = ({
-	fwdRef,
-	validationType,
-	loading,
-	autoCapitalize,
-	onChangeText,
-	onSubmit,
-	blurOnSubmit,
-	placeholder,
-	onErrorCheck,
-	errorMessage,
-	secureTextEntry,
-	customColor,
-	customValidator,
-	marginBottom = 10,
-  }) => {
-	const [state] = useTracked();
-	const colors = state.colors;
-	const [error, setError] = useState(false);
-	const [value, setValue] = useState(null);
-	const [focus, setFocus] = useState(false);
-	const [secureEntry, setSecureEntry] = useState(true);
-	const [showError, setShowError] = useState(false);
-	const color = error
-	  ? colors.red
-	  : focus
-	  ? customColor || colors.accent
-	  : colors.nav;
-  
-	const validate = () => {
-	  if (!validationType) return;
-	  if (!value || value?.length === 0) {
-		setError(false);
-		onErrorCheck(false);
-		return;
-	  }
-	  let isError = false;
-	  switch (validationType) {
-		case 'password':
-		  isError = validatePass(value);
-		  break;
-		case 'email':
-		  isError = validateEmail(value);
-		  break;
-		case 'username':
-		  isError = validateUsername(value);
-		  break;
-		case 'confirmPassword':
-		  isError = value === customValidator();
-		  break;
-	  }
-	  console.log('isError', isError, error);
-	  setError(!isError);
-	  onErrorCheck(!isError);
-	};
-  
-	const onChange = (value) => {
-	  onChangeText(value);
-	  setValue(value);
-	  if (error) {
-		validate();
-	  }
-	};
-  
-	const onBlur = () => {
-	  setFocus(false);
-	  validate();
-	};
-  
-	const onFocus = () => {
-	  setFocus(true);
-	};
-  
-	const style = {
-	  borderBottomWidth: 1,
-	  borderColor: color,
-	  paddingHorizontal: 0,
-	  flexDirection: 'row',
-	  justifyContent: 'space-between',
-	  alignItems: 'flex-end',
-	  height: 50,
-	  marginBottom: marginBottom,
-	};
-  
-	const textStyle = {
-	  paddingHorizontal: 0,
-	  fontSize: SIZE.md,
-	  fontFamily: WEIGHT.regular,
-	  color: colors.pri,
-	  paddingVertical: 0,
-	  paddingBottom: 2.5,
-	  flexGrow: 1,
-	  height: 35,
-	};
-  
-	return (
-	  <>
-		<View style={style}>
-		  <TextInput
-			ref={fwdRef}
-			editable={!loading}
-			defaultValue={value}
-			autoCapitalize={autoCapitalize}
-			onChangeText={onChange}
-			onBlur={onBlur}
-			onFocus={onFocus}
-			onSubmitEditing={onSubmit}
-			blurOnSubmit={blurOnSubmit}
-			style={textStyle}
-			secureTextEntry={secureTextEntry && secureEntry}
-			placeholder={placeholder}
-			placeholderTextColor={colors.icon}
-		  />
-  
-		  <View
-			style={{
-			  flexDirection: 'row',
-			  justifyContent: 'center',
-			  height: 35,
-			  alignItems: 'center',
-			}}>
-			{secureTextEntry && (
-			  <Icon
-				name="eye"
-				size={20}
-				onPress={() => {
-				  setSecureEntry(!secureEntry);
-				}}
-				style={{
-				  width: 25,
-				  marginLeft: 5,
-				}}
-				color={secureEntry ? colors.icon : colors.accent}
-			  />
-			)}
-  
-			{error && (
-			  <Icon
-				name="alert-circle-outline"
-				onPress={() => {
-				  setShowError(!showError);
-				}}
-				size={20}
-				style={{
-				  width: 25,
-				  marginLeft: 5,
-				}}
-				color={colors.errorText}
-			  />
-			)}
-		  </View>
-  
-		  {error && showError && errorMessage ? (
-			<View
-			  style={{
-				position: 'absolute',
-				backgroundColor: colors.nav,
-				paddingVertical: 3,
-				paddingHorizontal: 5,
-				borderRadius: 2.5,
-				...getElevation(2),
-				top: 0,
-			  }}>
-			  <Paragraph
-				size={SIZE.xs}
-				style={{
-				  textAlign: 'right',
-				  textAlignVertical: 'bottom',
-				}}>
-				<Icon
-				  name="alert-circle-outline"
-				  size={SIZE.xs}
-				  color={colors.errorText}
-				/>{' '}
-				{errorMessage}
-			  </Paragraph>
-			</View>
-		  ) : null}
-		</View>
-	  </>
-	);
+  fwdRef,
+  validationType,
+  loading,
+  autoCapitalize,
+  onChangeText,
+  onSubmit,
+  blurOnSubmit,
+  placeholder,
+  onErrorCheck,
+  errorMessage,
+  secureTextEntry,
+  customColor,
+  customValidator,
+  marginBottom = 10,
+  button,
+  testID,
+  defaultValue
+}) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  const [error, setError] = useState(false);
+  const [value, setValue] = useState(null);
+  const [focus, setFocus] = useState(false);
+  const [secureEntry, setSecureEntry] = useState(true);
+  const [showError, setShowError] = useState(false);
+  const color = error
+    ? colors.red
+    : focus
+    ? customColor || colors.accent
+    : colors.nav;
+
+  const validate = () => {
+    if (!validationType) return;
+    if (!value || value?.length === 0) {
+      setError(false);
+      onErrorCheck(false);
+      return;
+    }
+    let isError = false;
+    switch (validationType) {
+      case 'password':
+        isError = validatePass(value);
+        break;
+      case 'email':
+        isError = validateEmail(value);
+        break;
+      case 'username':
+        isError = validateUsername(value);
+        break;
+      case 'confirmPassword':
+        isError = value === customValidator();
+        break;
+    }
+    console.log('isError', isError, error);
+    setError(!isError);
+    onErrorCheck(!isError);
   };
 
-  export default Input
-  
+  const onChange = (value) => {
+    onChangeText(value);
+    setValue(value);
+    if (error) {
+      validate();
+    }
+  };
+
+  const onBlur = () => {
+    setFocus(false);
+    validate();
+  };
+
+  const onFocus = () => {
+    setFocus(true);
+  };
+
+  const style = {
+    borderBottomWidth: 1,
+    borderColor: color,
+    paddingHorizontal: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    height: 50,
+    marginBottom: marginBottom,
+  };
+
+  const textStyle = {
+    paddingHorizontal: 0,
+    fontSize: SIZE.md,
+    fontFamily: WEIGHT.regular,
+    color: colors.pri,
+    paddingVertical: 0,
+    paddingBottom: 2.5,
+    flexGrow: 1,
+    height: 35,
+  };
+
+  return (
+    <>
+      <View style={style}>
+        <TextInput
+		  ref={fwdRef}
+		  testID={testID}
+          editable={!loading}
+          defaultValue={defaultValue}
+          autoCapitalize={autoCapitalize}
+          onChangeText={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          onSubmitEditing={onSubmit}
+          blurOnSubmit={blurOnSubmit}
+          style={textStyle}
+          secureTextEntry={secureTextEntry && secureEntry}
+          placeholder={placeholder}
+          placeholderTextColor={colors.icon}
+        />
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            height: 35,
+            alignItems: 'center',
+          }}>
+          {secureTextEntry && (
+            <Icon
+              name="eye"
+              size={20}
+              onPress={() => {
+                setSecureEntry(!secureEntry);
+              }}
+              style={{
+                width: 25,
+                marginLeft: 5,
+              }}
+              color={secureEntry ? colors.icon : colors.accent}
+            />
+          )}
+
+          {button && (
+            <Icon
+              name={button.icon}
+              size={20}
+              onPress={button.onPress}
+              style={{
+                width: 25,
+                marginLeft: 5,
+              }}
+              color={button.color}
+            />
+          )}
+
+          {error && (
+            <Icon
+              name="alert-circle-outline"
+              onPress={() => {
+                setShowError(!showError);
+              }}
+              size={20}
+              style={{
+                width: 25,
+                marginLeft: 5,
+              }}
+              color={colors.errorText}
+            />
+          )}
+        </View>
+
+        {error && showError && errorMessage ? (
+          <View
+            style={{
+              position: 'absolute',
+              backgroundColor: colors.nav,
+              paddingVertical: 3,
+              paddingHorizontal: 5,
+              borderRadius: 2.5,
+              ...getElevation(2),
+              top: 0,
+            }}>
+            <Paragraph
+              size={SIZE.xs}
+              style={{
+                textAlign: 'right',
+                textAlignVertical: 'bottom',
+              }}>
+              <Icon
+                name="alert-circle-outline"
+                size={SIZE.xs}
+                color={colors.errorText}
+              />{' '}
+              {errorMessage}
+            </Paragraph>
+          </View>
+        ) : null}
+      </View>
+    </>
+  );
+};
+
+export default Input;