Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-21 14:09:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor some inputs

Browse Source
This commit is contained in:
ammarahm-ed
2020-12-17 15:42:55 +05:00
parent 7b34157d45
commit 4aaedbed13
3 changed files with 255 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
apps/mobile/src/components/AddNotebookDialog/index.js
View File

@@ -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
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}
/>
<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}
defaultValue={toEdit ? toEdit.title : null}
/>
<View style={styles.topicContainer}>
<TextInput
ref={(ref) => (this.topicInputRef = ref)}
testID={notesnook.ids.dialogs.notebook.inputs.topic}
<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({
@@ -363,54 +311,31 @@ export class AddNotebookDialog extends React.Component {
});
}
}}
blurOnSubmit={false}
onFocus={() => {
this.setState({
topicInputFocused: true,
});
placeholder="Describe your notebook."
onSubmit={() => {
this.topicInputRef.focus();
}}
onBlur={() => {
this.onSubmit(false);
this.setState({
topicInputFocused: false,
editTopic: false,
});
defaultValue={toEdit ? toEdit.title : null}
/>
<Input
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}

34
apps/mobile/src/components/AddTopicDialog/index.js
View File

@@ -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

41
apps/mobile/src/components/Input/index.js
View File

@@ -1,16 +1,15 @@
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
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 = ({
@@ -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;