@navegarti/rn-design-system 0.8.5 → 0.8.6
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.
|
@@ -9,6 +9,7 @@ export const OTPInput = ({
|
|
|
9
9
|
autoFocus = false,
|
|
10
10
|
onlyNumbers = true,
|
|
11
11
|
containerProps,
|
|
12
|
+
theme,
|
|
12
13
|
...props
|
|
13
14
|
}) => {
|
|
14
15
|
return /*#__PURE__*/_jsx(OtpEntry, {
|
|
@@ -20,17 +21,21 @@ export const OTPInput = ({
|
|
|
20
21
|
type: "alphanumeric",
|
|
21
22
|
blurOnFilled: true,
|
|
22
23
|
textInputProps: {
|
|
23
|
-
accessibilityLabel: 'Código de verificação'
|
|
24
|
+
accessibilityLabel: 'Código de verificação',
|
|
25
|
+
...props.textInputProps
|
|
24
26
|
},
|
|
25
27
|
textProps: {
|
|
26
28
|
accessibilityRole: 'text',
|
|
27
29
|
accessibilityLabel: 'Dígito do código de verificação',
|
|
28
|
-
allowFontScaling: false
|
|
30
|
+
allowFontScaling: false,
|
|
31
|
+
...props.textProps
|
|
29
32
|
},
|
|
30
33
|
theme: {
|
|
31
34
|
containerStyle: {
|
|
32
|
-
gap:
|
|
33
|
-
justifyContent: 'flex-start'
|
|
35
|
+
gap: 4,
|
|
36
|
+
justifyContent: 'flex-start',
|
|
37
|
+
flexWrap: 'wrap',
|
|
38
|
+
...theme?.containerStyle
|
|
34
39
|
},
|
|
35
40
|
pinCodeContainerStyle: {
|
|
36
41
|
backgroundColor: 'rgb(242,242,242)',
|
|
@@ -38,26 +43,35 @@ export const OTPInput = ({
|
|
|
38
43
|
borderRadius: 4,
|
|
39
44
|
width: 50,
|
|
40
45
|
height: 50,
|
|
41
|
-
borderColor: 'transparent'
|
|
46
|
+
borderColor: 'transparent',
|
|
47
|
+
...theme?.pinCodeContainerStyle
|
|
42
48
|
},
|
|
43
49
|
pinCodeTextStyle: {
|
|
44
50
|
color: disabled ? '#555' : '#333',
|
|
45
51
|
fontSize: 20,
|
|
46
|
-
fontWeight: 500
|
|
52
|
+
fontWeight: 500,
|
|
53
|
+
...theme?.pinCodeTextStyle
|
|
47
54
|
},
|
|
48
55
|
focusedPinCodeContainerStyle: {
|
|
49
|
-
borderColor: 'rgb(50,50,50)'
|
|
56
|
+
borderColor: 'rgb(50,50,50)',
|
|
57
|
+
...theme?.focusedPinCodeContainerStyle
|
|
50
58
|
},
|
|
51
59
|
focusStickStyle: {
|
|
52
60
|
backgroundColor: '#555',
|
|
53
|
-
height: 24
|
|
61
|
+
height: 24,
|
|
62
|
+
...theme?.focusStickStyle
|
|
54
63
|
},
|
|
55
64
|
disabledPinCodeContainerStyle: {
|
|
56
65
|
backgroundColor: 'rgb(220,220,220)',
|
|
57
|
-
borderColor: 'rgb(100,100,100)'
|
|
66
|
+
borderColor: 'rgb(100,100,100)',
|
|
67
|
+
...theme?.disabledPinCodeContainerStyle
|
|
58
68
|
},
|
|
59
69
|
filledPinCodeContainerStyle: {
|
|
60
|
-
borderColor: 'transparent'
|
|
70
|
+
borderColor: 'transparent',
|
|
71
|
+
...theme?.filledPinCodeContainerStyle
|
|
72
|
+
},
|
|
73
|
+
placeholderTextStyle: {
|
|
74
|
+
...theme?.placeholderTextStyle
|
|
61
75
|
}
|
|
62
76
|
},
|
|
63
77
|
...props
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { OTPInputProps } from './types';
|
|
2
2
|
export type { OTPInputProps } from './types';
|
|
3
|
-
export declare const OTPInput: ({ length, onComplete, disabled, autoFocus, onlyNumbers, containerProps, ...props }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const OTPInput: ({ length, onComplete, disabled, autoFocus, onlyNumbers, containerProps, theme, ...props }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/package.json
CHANGED
|
@@ -11,6 +11,7 @@ export const OTPInput = ({
|
|
|
11
11
|
autoFocus = false,
|
|
12
12
|
onlyNumbers = true,
|
|
13
13
|
containerProps,
|
|
14
|
+
theme,
|
|
14
15
|
...props
|
|
15
16
|
}: OTPInputProps) => {
|
|
16
17
|
return (
|
|
@@ -24,16 +25,20 @@ export const OTPInput = ({
|
|
|
24
25
|
blurOnFilled={true}
|
|
25
26
|
textInputProps={{
|
|
26
27
|
accessibilityLabel: 'Código de verificação',
|
|
28
|
+
...props.textInputProps,
|
|
27
29
|
}}
|
|
28
30
|
textProps={{
|
|
29
31
|
accessibilityRole: 'text',
|
|
30
32
|
accessibilityLabel: 'Dígito do código de verificação',
|
|
31
33
|
allowFontScaling: false,
|
|
34
|
+
...props.textProps,
|
|
32
35
|
}}
|
|
33
36
|
theme={{
|
|
34
37
|
containerStyle: {
|
|
35
|
-
gap:
|
|
38
|
+
gap: 4,
|
|
36
39
|
justifyContent: 'flex-start',
|
|
40
|
+
flexWrap: 'wrap',
|
|
41
|
+
...theme?.containerStyle,
|
|
37
42
|
},
|
|
38
43
|
pinCodeContainerStyle: {
|
|
39
44
|
backgroundColor: 'rgb(242,242,242)',
|
|
@@ -42,25 +47,34 @@ export const OTPInput = ({
|
|
|
42
47
|
width: 50,
|
|
43
48
|
height: 50,
|
|
44
49
|
borderColor: 'transparent',
|
|
50
|
+
...theme?.pinCodeContainerStyle,
|
|
45
51
|
},
|
|
46
52
|
pinCodeTextStyle: {
|
|
47
53
|
color: disabled ? '#555' : '#333',
|
|
48
54
|
fontSize: 20,
|
|
49
55
|
fontWeight: 500,
|
|
56
|
+
...theme?.pinCodeTextStyle,
|
|
50
57
|
},
|
|
51
58
|
focusedPinCodeContainerStyle: {
|
|
52
59
|
borderColor: 'rgb(50,50,50)',
|
|
60
|
+
...theme?.focusedPinCodeContainerStyle,
|
|
53
61
|
},
|
|
54
62
|
focusStickStyle: {
|
|
55
63
|
backgroundColor: '#555',
|
|
56
64
|
height: 24,
|
|
65
|
+
...theme?.focusStickStyle,
|
|
57
66
|
},
|
|
58
67
|
disabledPinCodeContainerStyle: {
|
|
59
68
|
backgroundColor: 'rgb(220,220,220)',
|
|
60
69
|
borderColor: 'rgb(100,100,100)',
|
|
70
|
+
...theme?.disabledPinCodeContainerStyle,
|
|
61
71
|
},
|
|
62
72
|
filledPinCodeContainerStyle: {
|
|
63
73
|
borderColor: 'transparent',
|
|
74
|
+
...theme?.filledPinCodeContainerStyle,
|
|
75
|
+
},
|
|
76
|
+
placeholderTextStyle: {
|
|
77
|
+
...theme?.placeholderTextStyle,
|
|
64
78
|
},
|
|
65
79
|
}}
|
|
66
80
|
{...props}
|