Skip to content

Commit 8256bc3

Browse files
Henus321Henus321
committed
Fix text component
1 parent 079daa1 commit 8256bc3

12 files changed

Lines changed: 393 additions & 347 deletions

File tree

‎example/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Record from './models/Record';
88
import Setting from './models/Setting';
99

1010
const defaultBasePrefix = 'defaultBasePrefix';
11-
const defaultBasePostfix = '1';
11+
const defaultBasePostfix = '2';
1212

1313
export default function App() {
1414
const [loader, setLoader] = useState('');

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-sqlite-explorer",
3-
"version": "0.1.15",
3+
"version": "0.1.16",
44
"description": "Explorer for react-native-sqlite-storage library database inside react native app",
55
"source": "./src/index.tsx",
66
"main": "./lib/commonjs/index.js",

‎src/Options.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export const RECORDS_PER_PAGE_TYPES = [10, 50, 100];
22

3-
export const REQIRED_TEXT = 'Field is required';
3+
export const REQIRED_TEXT = 'Field is required';

‎src/components/Input/index.tsx‎

Lines changed: 179 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -1,194 +1,195 @@
1-
import React, { RefObject, useState } from 'react';
1+
import { RefObject, useState } from 'react';
22
import {
3-
View,
4-
TextInput,
5-
TouchableOpacity,
6-
Image,
7-
ViewStyle,
8-
NativeSyntheticEvent,
9-
TextInputSubmitEditingEventData,
10-
KeyboardTypeOptions,
11-
StyleSheet,
12-
TextStyle,
13-
Text,
3+
View,
4+
TextInput,
5+
TouchableOpacity,
6+
Image,
7+
ViewStyle,
8+
NativeSyntheticEvent,
9+
TextInputSubmitEditingEventData,
10+
KeyboardTypeOptions,
11+
StyleSheet,
12+
TextStyle,
1413
} from 'react-native';
1514
import { GlobalStyles } from '../../styles';
15+
import Text from '../Text';
1616

1717
type InputProps = {
18-
placeholder?: string;
19-
placeholderColor?: string | null;
20-
placeholderStyle?: TextStyle | TextStyle[];
21-
onChangeText: ((text: string) => void) | undefined;
22-
onSubmitEditing?: ((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void) | undefined;
23-
onClearButtonPress?: null | (() => void);
24-
onBlur?: null | (() => void);
25-
text: string | number;
26-
style?: ViewStyle | ViewStyle[];
27-
inputStyle?: ViewStyle | ViewStyle[];
28-
showClearButton?: boolean;
29-
showMicrofone?: boolean;
30-
title?: string;
31-
maxLength?: number | undefined;
32-
multiline?: boolean | undefined;
33-
numberOfLines?: number;
34-
error?: boolean | string;
35-
autoCompleteType?: null | string;
36-
textContentType?: any;
37-
keyboardType?: KeyboardTypeOptions | undefined;
38-
secureTextEntry?: boolean;
39-
refInput?: RefObject<TextInput> | null;
40-
readOnly?: false | (() => void);
41-
}
18+
placeholder?: string;
19+
placeholderColor?: string | null;
20+
placeholderStyle?: TextStyle | TextStyle[];
21+
onChangeText: ((text: string) => void) | undefined;
22+
onSubmitEditing?:
23+
| ((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void)
24+
| undefined;
25+
onClearButtonPress?: null | (() => void);
26+
onBlur?: null | (() => void);
27+
text: string | number;
28+
style?: ViewStyle | ViewStyle[];
29+
inputStyle?: ViewStyle | ViewStyle[];
30+
showClearButton?: boolean;
31+
showMicrofone?: boolean;
32+
title?: string;
33+
maxLength?: number | undefined;
34+
multiline?: boolean | undefined;
35+
numberOfLines?: number;
36+
error?: boolean | string;
37+
autoCompleteType?: null | string;
38+
textContentType?: any;
39+
keyboardType?: KeyboardTypeOptions | undefined;
40+
secureTextEntry?: boolean;
41+
refInput?: RefObject<TextInput> | null;
42+
readOnly?: false | (() => void);
43+
};
4244

4345
const Input = ({
44-
placeholder = '',
45-
placeholderColor = null,
46-
placeholderStyle = {},
47-
onChangeText = () => { },
48-
onSubmitEditing = () => { },
49-
onClearButtonPress = null,
50-
onBlur = () => { },
51-
text = '',
52-
style = {},
53-
inputStyle = {},
54-
showClearButton = true,
55-
title = '',
56-
maxLength = undefined,
57-
multiline = false,
58-
numberOfLines = 1,
59-
error = false,
60-
autoCompleteType = null,
61-
textContentType = null,
62-
keyboardType = undefined,
63-
refInput = null,
64-
secureTextEntry = false,
65-
readOnly = false,
46+
placeholder = '',
47+
placeholderColor = null,
48+
placeholderStyle = {},
49+
onChangeText = () => {},
50+
onSubmitEditing = () => {},
51+
onClearButtonPress = null,
52+
onBlur = () => {},
53+
text = '',
54+
style = {},
55+
inputStyle = {},
56+
showClearButton = true,
57+
title = '',
58+
maxLength = undefined,
59+
multiline = false,
60+
numberOfLines = 1,
61+
error = false,
62+
autoCompleteType = null,
63+
textContentType = null,
64+
keyboardType = undefined,
65+
refInput = null,
66+
secureTextEntry = false,
67+
readOnly = false,
6668
}: InputProps) => {
67-
const [isFocus, setIsFocus] = useState(false);
69+
const [isFocus, setIsFocus] = useState(false);
6870

69-
return (
70-
<View style={{ ...style }}>
71-
{!!title && (
72-
<Text style={styles.Title}>
73-
{title}
74-
</Text>
75-
)}
71+
return (
72+
<View style={{ ...style }}>
73+
{!!title && <Text style={styles.Title}>{title}</Text>}
7674

77-
<View style={
78-
[
79-
styles.InputWrapper,
80-
{ ...inputStyle },
81-
!!isFocus && styles.FocusInput,
82-
!!error && styles.ErrorInput
83-
]
84-
}>
85-
<TextInput
86-
ref={refInput}
87-
value={`${text}`}
88-
onChangeText={onChangeText}
89-
onSubmitEditing={onSubmitEditing}
90-
style={[styles.Input, placeholderStyle]}
91-
placeholder={placeholder}
92-
placeholderTextColor={!!placeholderColor ? placeholderColor : styles.Placeholder.color}
93-
maxLength={maxLength}
94-
multiline={multiline}
95-
numberOfLines={numberOfLines}
96-
editable={!readOnly ? true : false}
97-
// @ts-ignore
98-
autoCompleteType={autoCompleteType}
99-
textContentType={textContentType}
100-
keyboardType={keyboardType}
101-
secureTextEntry={secureTextEntry}
102-
onFocus={() => setIsFocus(true)}
103-
onBlur={() => {
104-
setIsFocus(false);
105-
if (onBlur !== null) {
106-
onBlur();
107-
}
108-
}}
109-
/>
75+
<View
76+
style={[
77+
styles.InputWrapper,
78+
{ ...inputStyle },
79+
!!isFocus && styles.FocusInput,
80+
!!error && styles.ErrorInput,
81+
]}
82+
>
83+
<TextInput
84+
ref={refInput}
85+
value={`${text}`}
86+
onChangeText={onChangeText}
87+
onSubmitEditing={onSubmitEditing}
88+
style={[styles.Input, placeholderStyle]}
89+
placeholder={placeholder}
90+
placeholderTextColor={
91+
!!placeholderColor ? placeholderColor : styles.Placeholder.color
92+
}
93+
maxLength={maxLength}
94+
multiline={multiline}
95+
numberOfLines={numberOfLines}
96+
editable={!readOnly ? true : false}
97+
// @ts-ignore
98+
autoCompleteType={autoCompleteType}
99+
textContentType={textContentType}
100+
keyboardType={keyboardType}
101+
secureTextEntry={secureTextEntry}
102+
onFocus={() => setIsFocus(true)}
103+
onBlur={() => {
104+
setIsFocus(false);
105+
if (onBlur !== null) {
106+
onBlur();
107+
}
108+
}}
109+
/>
110110

111-
<View style={styles.RightContainer}>
112-
{!!`${text}`.length && !!showClearButton && (
113-
<TouchableOpacity
114-
style={styles.IconWrapper}
115-
onPress={() => {
116-
if (onClearButtonPress !== null) {
117-
onClearButtonPress();
118-
} else {
119-
onChangeText('');
120-
}
121-
}}
122-
>
123-
<Image source={require('../../assets/close.png')} style={styles.Icon} />
124-
</TouchableOpacity>
125-
)}
126-
</View>
127-
</View>
111+
<View style={styles.RightContainer}>
112+
{!!`${text}`.length && !!showClearButton && (
113+
<TouchableOpacity
114+
style={styles.IconWrapper}
115+
onPress={() => {
116+
if (onClearButtonPress !== null) {
117+
onClearButtonPress();
118+
} else {
119+
onChangeText('');
120+
}
121+
}}
122+
>
123+
<Image
124+
source={require('../../assets/close.png')}
125+
style={styles.Icon}
126+
/>
127+
</TouchableOpacity>
128+
)}
129+
</View>
130+
</View>
128131

129-
{!!error && typeof error === 'string' && error?.trim() && (
130-
<Text style={styles.ErrorText}>
131-
{error.trim()}
132-
</Text>
133-
)}
134-
</View>
135-
);
136-
}
132+
{!!error && typeof error === 'string' && error?.trim() && (
133+
<Text style={styles.ErrorText}>{error.trim()}</Text>
134+
)}
135+
</View>
136+
);
137+
};
137138

138139
export const styles = StyleSheet.create({
139-
Title: {
140-
fontSize: 12,
141-
color: GlobalStyles.colors.textGrey,
142-
fontWeight: 'bold',
143-
marginBottom: 3,
144-
},
145-
InputWrapper: {
146-
flexDirection: 'row',
147-
borderWidth: 1,
148-
borderColor: GlobalStyles.colors.gray,
149-
backgroundColor: GlobalStyles.colors.white,
150-
},
151-
Input: {
152-
flex: 1,
153-
fontSize: 14,
154-
color: GlobalStyles.colors.text,
155-
paddingVertical: 7,
156-
paddingHorizontal: 9,
157-
backgroundColor: 'transparent',
158-
},
159-
Placeholder: {
160-
color: GlobalStyles.colors.gray,
161-
},
162-
FocusInput: {
163-
borderColor: GlobalStyles.colors.blue,
164-
},
165-
ErrorInput: {
166-
borderColor: GlobalStyles.colors.red,
167-
},
168-
ErrorText: {
169-
fontSize: 12,
170-
marginTop: 2,
171-
color: GlobalStyles.colors.red,
172-
},
173-
RightContainer: {
174-
flex: 0,
175-
flexDirection: 'row',
176-
justifyContent: 'center',
177-
alignItems: 'center',
178-
},
179-
IconWrapper: {
180-
padding: 9
181-
},
182-
Icon: {
183-
width: 10,
184-
height: 10,
185-
tintColor: GlobalStyles.colors.text,
186-
resizeMode: 'contain',
187-
},
188-
BiggerIcon: {
189-
width: 14,
190-
height: 14
191-
},
140+
Title: {
141+
fontSize: 12,
142+
color: GlobalStyles.colors.textGrey,
143+
fontWeight: 'bold',
144+
marginBottom: 3,
145+
},
146+
InputWrapper: {
147+
flexDirection: 'row',
148+
borderWidth: 1,
149+
borderColor: GlobalStyles.colors.gray,
150+
backgroundColor: GlobalStyles.colors.white,
151+
},
152+
Input: {
153+
flex: 1,
154+
fontSize: 14,
155+
color: GlobalStyles.colors.text,
156+
paddingVertical: 7,
157+
paddingHorizontal: 9,
158+
backgroundColor: 'transparent',
159+
},
160+
Placeholder: {
161+
color: GlobalStyles.colors.gray,
162+
},
163+
FocusInput: {
164+
borderColor: GlobalStyles.colors.blue,
165+
},
166+
ErrorInput: {
167+
borderColor: GlobalStyles.colors.red,
168+
},
169+
ErrorText: {
170+
fontSize: 12,
171+
marginTop: 2,
172+
color: GlobalStyles.colors.red,
173+
},
174+
RightContainer: {
175+
flex: 0,
176+
flexDirection: 'row',
177+
justifyContent: 'center',
178+
alignItems: 'center',
179+
},
180+
IconWrapper: {
181+
padding: 9,
182+
},
183+
Icon: {
184+
width: 10,
185+
height: 10,
186+
tintColor: GlobalStyles.colors.text,
187+
resizeMode: 'contain',
188+
},
189+
BiggerIcon: {
190+
width: 14,
191+
height: 14,
192+
},
192193
});
193194

194-
export default Input;
195+
export default Input;

0 commit comments

Comments
 (0)