From 4aaedbed139d403dd7b1c8cf7ed369d98a9c7e2d Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Thu, 17 Dec 2020 15:42:55 +0500 Subject: [PATCH] refactor some inputs --- .../src/components/AddNotebookDialog/index.js | 157 ++----- .../src/components/AddTopicDialog/index.js | 34 +- apps/mobile/src/components/Input/index.js | 399 +++++++++--------- 3 files changed, 255 insertions(+), 335 deletions(-) diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index a659b0d9d..9464d3aaf 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/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 { } /> - (this.titleRef = 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} /> - (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, - }); + + (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} + /> + + (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} /> - - (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} - /> - - - - - (this.listRef = ref)} diff --git a/apps/mobile/src/components/AddTopicDialog/index.js b/apps/mobile/src/components/AddTopicDialog/index.js index 78e400167..d686e49fe 100644 --- a/apps/mobile/src/components/AddTopicDialog/index.js +++ b/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} /> - { - this.setState({ - titleFocused: true, - }); - }} - onBlur={() => { - this.setState({ - titleFocused: true, - }); - }} - defaultValue={toEdit ? toEdit.title : null} + { this.title = value; }} + blurOnSubmit={false} + defaultValue={toEdit ? toEdit.title : null} placeholder="Enter title of topic" - placeholderTextColor={colors.icon} + onSubmit={this.addNewTopic} /> { - 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 ( - <> - - - - - {secureTextEntry && ( - { - setSecureEntry(!secureEntry); - }} - style={{ - width: 25, - marginLeft: 5, - }} - color={secureEntry ? colors.icon : colors.accent} - /> - )} - - {error && ( - { - setShowError(!showError); - }} - size={20} - style={{ - width: 25, - marginLeft: 5, - }} - color={colors.errorText} - /> - )} - - - {error && showError && errorMessage ? ( - - - {' '} - {errorMessage} - - - ) : null} - - - ); + 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 - \ No newline at end of file + 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 ( + <> + + + + + {secureTextEntry && ( + { + setSecureEntry(!secureEntry); + }} + style={{ + width: 25, + marginLeft: 5, + }} + color={secureEntry ? colors.icon : colors.accent} + /> + )} + + {button && ( + + )} + + {error && ( + { + setShowError(!showError); + }} + size={20} + style={{ + width: 25, + marginLeft: 5, + }} + color={colors.errorText} + /> + )} + + + {error && showError && errorMessage ? ( + + + {' '} + {errorMessage} + + + ) : null} + + + ); +}; + +export default Input;