ikualo-ui-kit-mobile 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/styles/elements/inputs.ts +1 -1
  2. package/package.json +1 -1
  3. package/src/elements/inputs/Input.tsx +11 -9
  4. package/src/elements/inputs/InputEmail.tsx +10 -5
package/assets/styles/elements/inputs.ts CHANGED
@@ -16,7 +16,7 @@ const styleInput = StyleSheet.create({
16
16
  borderTopLeftRadius: 4,
17
17
  },
18
18
  'input-label': {
19
- backgroundColor: theme.colors.white,
19
+ backgroundColor: 'transparent',
20
20
  fontSize: 16,
21
21
  lineHeight: 24,
22
22
  color: theme.colors.boldBlack,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ikualo-ui-kit-mobile",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/elements/inputs/Input.tsx CHANGED
@@ -3,6 +3,7 @@ import { styleInput } from '../../../assets/styles/elements/inputs';
3
3
  import { useState } from 'react';
4
4
  import { Image, View } from 'react-native';
5
5
  import { icons } from '../../../assets/icons/_icons';
6
+ import { theme } from 'ikualo-ui-kit-mobile/src/config/paper.config';
6
7
 
7
8
  interface IfInputText {
8
9
  label?: string;
@@ -79,7 +80,7 @@ export const Input = (props: IfInputText) => {
79
80
  return (
80
81
  <View>
81
82
  <TextInput
82
- label={!isFocus && placeholder && value?.trim() !== '' ? placeholder : label}
83
+ label={!isFocus && placeholder && value?.trim() == '' ? placeholder : label}
83
84
  mode={mode ?? 'flat'}
84
85
  disabled={isDisabled}
85
86
  value={value}
@@ -88,8 +89,9 @@ export const Input = (props: IfInputText) => {
88
89
  selectionColor={!errorRequired ?styleInput['input'].borderBottomColor:styleInput['input-txt-error'].borderBottomColor}
89
90
  theme={{
90
91
  colors: {
91
- onSurfaceVariant: !errorRequired ?styleInput['input'].borderBottomColor:styleInput['input-txt-error'].borderBottomColor,
92
- error: styleInput['input-txt-error'].borderBottomColor,
92
+ primary:theme.colors.primary,
93
+ onSurfaceVariant: theme.colors.boldBlack,
94
+ error: theme.colors.darkRed,
93
95
  },
94
96
  }}
95
97
  onFocus={() => {
@@ -106,14 +108,14 @@ export const Input = (props: IfInputText) => {
106
108
  }}
107
109
  error={error || errorRequired}
108
110
  textColor={textColor}
109
- style={[styleInput['input-label'], style ?? []]}
111
+ style={[styleInput['input-label'],
112
+ ((!isValid && value?.trim() !== '')||errorRequired) && styleInput['input-error-focused'],
113
+ isFocus && isValid && !errorRequired && styleInput['input-text--focused'],
114
+ style ?? []]}
110
115
  contentStyle={[
111
116
  styleInput['input-label'],
112
- isFocus && isValid && styleInput['input-text--focused'],
113
- !isValid && value?.trim() !== '' && styleInput['input-error-focused'],
114
117
  !isValid && !isFocus && value?.trim() !== '' && styleInput['input-txt-error'],
115
- errorRequired && styleInput['input-txt-error'],
116
- errorRequired && isFocus && styleInput['input-error-focused'],
118
+ errorRequired && styleInput['input-txt-error'],
117
119
  style ?? [],
118
120
  ]}
119
121
  underlineColor={
@@ -151,4 +153,4 @@ export const Input = (props: IfInputText) => {
151
153
  )}
152
154
  </View>
153
155
  );
154
- };
156
+ };
package/src/elements/inputs/InputEmail.tsx CHANGED
@@ -3,6 +3,7 @@ import { styleInput } from '../../../assets/styles/elements/inputs';
3
3
  import { useState } from 'react';
4
4
  import { Image, View } from 'react-native';
5
5
  import { icons } from '../../../assets/icons/_icons';
6
+ import { theme } from 'ikualo-ui-kit-mobile/src/config/paper.config';
6
7
 
7
8
  interface IfInputText {
8
9
  label?: string;
@@ -48,6 +49,7 @@ export const InputEmail = (props: IfInputText) => {
48
49
  msgError,
49
50
  onInvalid,
50
51
  pattern,
52
+ placeholder
51
53
  } = props;
52
54
  const patternEmailDefault = pattern ?? /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
53
55
  const handleInputChange = (text: string) => {
@@ -60,14 +62,16 @@ export const InputEmail = (props: IfInputText) => {
60
62
  return (
61
63
  <View>
62
64
  <TextInput
63
- label={label}
65
+ label={!isFocus && placeholder && value?.trim() == '' ? placeholder : label}
64
66
  mode={mode ?? 'flat'}
65
67
  disabled={isDisabled}
66
68
  value={value}
67
69
  onChangeText={handleInputChange}
68
70
  theme={{
69
71
  colors: {
70
- onSurfaceVariant: styleInput['input-txt'].color,
72
+ primary:theme.colors.primary,
73
+ onSurfaceVariant: theme.colors.boldBlack,
74
+ error: theme.colors.darkRed,
71
75
  },
72
76
  }}
73
77
  onFocus={() => {
@@ -80,11 +84,12 @@ export const InputEmail = (props: IfInputText) => {
80
84
  }}
81
85
  error={error}
82
86
  textColor={textColor}
83
- style={[styleInput['input-label'], style ?? []]}
84
- contentStyle={[
85
- styleInput['input-label'],
87
+ style={[styleInput['input-label'],
86
88
  isFocus && isValid && styleInput['input-text--focused'],
87
89
  !isValid && styleInput['input-error-focused'],
90
+ style ?? []]}
91
+ contentStyle={[
92
+ styleInput['input-label'],
88
93
  !isValid && !isFocus && value.trim() !== '' && styleInput['input-txt-error'],
89
94
  style ?? [],
90
95
  ]}