@pagopa/io-app-design-system 8.0.1 → 8.1.0
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.
- package/lib/commonjs/components/otpInput/OTPInput.js +20 -19
- package/lib/commonjs/components/otpInput/OTPInput.js.map +1 -1
- package/lib/module/components/otpInput/OTPInput.js +20 -19
- package/lib/module/components/otpInput/OTPInput.js.map +1 -1
- package/lib/typescript/components/otpInput/OTPInput.d.ts +13 -6
- package/lib/typescript/components/otpInput/OTPInput.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/otpInput/OTPInput.tsx +40 -24
|
@@ -35,18 +35,18 @@ const OTPInput = ({
|
|
|
35
35
|
length,
|
|
36
36
|
accessibilityLabel,
|
|
37
37
|
accessibilityHint,
|
|
38
|
-
accessibilityValueText,
|
|
39
38
|
onValidate,
|
|
40
39
|
errorMessage = "",
|
|
41
|
-
secret = false,
|
|
42
40
|
autocomplete = false,
|
|
43
41
|
inputAccessoryViewID,
|
|
44
42
|
autoFocus = false,
|
|
45
43
|
deleteButtonAccessibilityLabel,
|
|
46
|
-
ref
|
|
44
|
+
ref,
|
|
45
|
+
...props
|
|
47
46
|
}) => {
|
|
48
47
|
const [hasFocus, setHasFocus] = (0, _react.useState)(autoFocus);
|
|
49
48
|
const [hasError, setHasError] = (0, _react.useState)(false);
|
|
49
|
+
const isSecret = props.secret === true;
|
|
50
50
|
const theme = (0, _context.useIOTheme)();
|
|
51
51
|
const {
|
|
52
52
|
translate,
|
|
@@ -95,10 +95,17 @@ const OTPInput = ({
|
|
|
95
95
|
}
|
|
96
96
|
break;
|
|
97
97
|
default:
|
|
98
|
-
|
|
98
|
+
if (!isSecret) {
|
|
99
|
+
_reactNative.AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
|
|
100
|
+
}
|
|
99
101
|
break;
|
|
100
102
|
}
|
|
101
103
|
};
|
|
104
|
+
const accessibilityValueTextParams = {
|
|
105
|
+
valueLength: value.length,
|
|
106
|
+
length
|
|
107
|
+
};
|
|
108
|
+
const accessibilityValueText = isSecret ? props.accessibilityValueText(accessibilityValueTextParams) : props.accessibilityValueText?.(accessibilityValueTextParams) ?? value.split("").join(", ");
|
|
102
109
|
const cells = (0, _react.useMemo)(() => Array.from({
|
|
103
110
|
length
|
|
104
111
|
}), [length]);
|
|
@@ -118,14 +125,11 @@ const OTPInput = ({
|
|
|
118
125
|
onChangeText: handleChange,
|
|
119
126
|
onKeyPress: handleKeyPress,
|
|
120
127
|
caretHidden: _reactNative.Platform.OS === "ios",
|
|
121
|
-
style: [_reactNative.StyleSheet.absoluteFillObject,
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
opacity: 0
|
|
127
|
-
}
|
|
128
|
-
})],
|
|
128
|
+
style: [_reactNative.StyleSheet.absoluteFillObject,
|
|
129
|
+
// Keep the hidden TextInput minimally visible so native focus still works.
|
|
130
|
+
{
|
|
131
|
+
opacity: 0.01
|
|
132
|
+
}],
|
|
129
133
|
maxLength: length,
|
|
130
134
|
ref: inputRef,
|
|
131
135
|
onBlur: () => setHasFocus(false),
|
|
@@ -138,16 +142,13 @@ const OTPInput = ({
|
|
|
138
142
|
accessible: true,
|
|
139
143
|
accessibilityLabel: accessibilityLabel,
|
|
140
144
|
accessibilityHint: accessibilityHint
|
|
141
|
-
//
|
|
145
|
+
// Keep secret values out of the screen reader output.
|
|
142
146
|
,
|
|
143
147
|
accessibilityValue: {
|
|
144
|
-
text: accessibilityValueText
|
|
145
|
-
valueLength: value.length,
|
|
146
|
-
length
|
|
147
|
-
}) ?? value.split("").join(" ")
|
|
148
|
+
text: accessibilityValueText
|
|
148
149
|
},
|
|
149
150
|
autoFocus: autoFocus,
|
|
150
|
-
secureTextEntry:
|
|
151
|
+
secureTextEntry: isSecret
|
|
151
152
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
152
153
|
style: {
|
|
153
154
|
flexDirection: "row",
|
|
@@ -160,7 +161,7 @@ const OTPInput = ({
|
|
|
160
161
|
importantForAccessibility: "no-hide-descendants",
|
|
161
162
|
children: cells.map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxedInput.BoxedInput, {
|
|
162
163
|
status: hasError ? "error" : hasFocus && value.length === i ? "focus" : "default",
|
|
163
|
-
secret:
|
|
164
|
+
secret: isSecret,
|
|
164
165
|
value: value[i]
|
|
165
166
|
}, i))
|
|
166
167
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_context","_functions","_useErrorShakeAnimation","_layout","_typography","_BoxedInput","_jsxRuntime","e","__esModule","default","OTP_ITEMS_GAP","OTPInput","value","onValueChange","length","accessibilityLabel","accessibilityHint","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_context","_functions","_useErrorShakeAnimation","_layout","_typography","_BoxedInput","_jsxRuntime","e","__esModule","default","OTP_ITEMS_GAP","OTPInput","value","onValueChange","length","accessibilityLabel","accessibilityHint","onValidate","errorMessage","autocomplete","inputAccessoryViewID","autoFocus","deleteButtonAccessibilityLabel","ref","props","hasFocus","setHasFocus","useState","hasError","setHasError","isSecret","secret","theme","useIOTheme","translate","animatedStyle","shakeAnimation","useErrorShakeAnimation","inputRef","createRef","timerRef","useRef","undefined","handleValidate","val","isValid","triggerHaptic","current","clearTimeout","setTimeout","useEffect","handleChange","handleKeyPress","nativeEvent","key","AccessibilityInfo","announceForAccessibility","accessibilityValueTextParams","valueLength","accessibilityValueText","split","join","cells","useMemo","Array","from","jsxs","View","style","flexGrow","children","Pressable","onPress","focus","accessible","jsx","TextInput","onChangeText","onKeyPress","caretHidden","Platform","OS","StyleSheet","absoluteFillObject","opacity","maxLength","onBlur","keyboardType","inputMode","returnKeyType","textContentType","autoComplete","accessibilityValue","text","secureTextEntry","flexDirection","justifyContent","columnGap","zIndex","accessibilityElementsHidden","importantForAccessibility","map","_","i","BoxedInput","status","VSpacer","size","BodySmall","weight","color","errorText","textAlign","exports"],"sourceRoot":"../../../../src","sources":["components/otpInput/OTPInput.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -30,18 +30,18 @@ export const OTPInput = ({
|
|
|
30
30
|
length,
|
|
31
31
|
accessibilityLabel,
|
|
32
32
|
accessibilityHint,
|
|
33
|
-
accessibilityValueText,
|
|
34
33
|
onValidate,
|
|
35
34
|
errorMessage = "",
|
|
36
|
-
secret = false,
|
|
37
35
|
autocomplete = false,
|
|
38
36
|
inputAccessoryViewID,
|
|
39
37
|
autoFocus = false,
|
|
40
38
|
deleteButtonAccessibilityLabel,
|
|
41
|
-
ref
|
|
39
|
+
ref,
|
|
40
|
+
...props
|
|
42
41
|
}) => {
|
|
43
42
|
const [hasFocus, setHasFocus] = useState(autoFocus);
|
|
44
43
|
const [hasError, setHasError] = useState(false);
|
|
44
|
+
const isSecret = props.secret === true;
|
|
45
45
|
const theme = useIOTheme();
|
|
46
46
|
const {
|
|
47
47
|
translate,
|
|
@@ -90,10 +90,17 @@ export const OTPInput = ({
|
|
|
90
90
|
}
|
|
91
91
|
break;
|
|
92
92
|
default:
|
|
93
|
-
|
|
93
|
+
if (!isSecret) {
|
|
94
|
+
AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
|
|
95
|
+
}
|
|
94
96
|
break;
|
|
95
97
|
}
|
|
96
98
|
};
|
|
99
|
+
const accessibilityValueTextParams = {
|
|
100
|
+
valueLength: value.length,
|
|
101
|
+
length
|
|
102
|
+
};
|
|
103
|
+
const accessibilityValueText = isSecret ? props.accessibilityValueText(accessibilityValueTextParams) : props.accessibilityValueText?.(accessibilityValueTextParams) ?? value.split("").join(", ");
|
|
97
104
|
const cells = useMemo(() => Array.from({
|
|
98
105
|
length
|
|
99
106
|
}), [length]);
|
|
@@ -113,14 +120,11 @@ export const OTPInput = ({
|
|
|
113
120
|
onChangeText: handleChange,
|
|
114
121
|
onKeyPress: handleKeyPress,
|
|
115
122
|
caretHidden: Platform.OS === "ios",
|
|
116
|
-
style: [StyleSheet.absoluteFillObject,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
opacity: 0
|
|
122
|
-
}
|
|
123
|
-
})],
|
|
123
|
+
style: [StyleSheet.absoluteFillObject,
|
|
124
|
+
// Keep the hidden TextInput minimally visible so native focus still works.
|
|
125
|
+
{
|
|
126
|
+
opacity: 0.01
|
|
127
|
+
}],
|
|
124
128
|
maxLength: length,
|
|
125
129
|
ref: inputRef,
|
|
126
130
|
onBlur: () => setHasFocus(false),
|
|
@@ -133,16 +137,13 @@ export const OTPInput = ({
|
|
|
133
137
|
accessible: true,
|
|
134
138
|
accessibilityLabel: accessibilityLabel,
|
|
135
139
|
accessibilityHint: accessibilityHint
|
|
136
|
-
//
|
|
140
|
+
// Keep secret values out of the screen reader output.
|
|
137
141
|
,
|
|
138
142
|
accessibilityValue: {
|
|
139
|
-
text: accessibilityValueText
|
|
140
|
-
valueLength: value.length,
|
|
141
|
-
length
|
|
142
|
-
}) ?? value.split("").join(" ")
|
|
143
|
+
text: accessibilityValueText
|
|
143
144
|
},
|
|
144
145
|
autoFocus: autoFocus,
|
|
145
|
-
secureTextEntry:
|
|
146
|
+
secureTextEntry: isSecret
|
|
146
147
|
}), /*#__PURE__*/_jsx(View, {
|
|
147
148
|
style: {
|
|
148
149
|
flexDirection: "row",
|
|
@@ -155,7 +156,7 @@ export const OTPInput = ({
|
|
|
155
156
|
importantForAccessibility: "no-hide-descendants",
|
|
156
157
|
children: cells.map((_, i) => /*#__PURE__*/_jsx(BoxedInput, {
|
|
157
158
|
status: hasError ? "error" : hasFocus && value.length === i ? "focus" : "default",
|
|
158
|
-
secret:
|
|
159
|
+
secret: isSecret,
|
|
159
160
|
value: value[i]
|
|
160
161
|
}, i))
|
|
161
162
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createRef","useEffect","useMemo","useRef","useState","AccessibilityInfo","Platform","Pressable","StyleSheet","TextInput","View","Animated","useIOTheme","triggerHaptic","useErrorShakeAnimation","VSpacer","BodySmall","BoxedInput","jsx","_jsx","jsxs","_jsxs","OTP_ITEMS_GAP","OTPInput","value","onValueChange","length","accessibilityLabel","accessibilityHint","
|
|
1
|
+
{"version":3,"names":["createRef","useEffect","useMemo","useRef","useState","AccessibilityInfo","Platform","Pressable","StyleSheet","TextInput","View","Animated","useIOTheme","triggerHaptic","useErrorShakeAnimation","VSpacer","BodySmall","BoxedInput","jsx","_jsx","jsxs","_jsxs","OTP_ITEMS_GAP","OTPInput","value","onValueChange","length","accessibilityLabel","accessibilityHint","onValidate","errorMessage","autocomplete","inputAccessoryViewID","autoFocus","deleteButtonAccessibilityLabel","ref","props","hasFocus","setHasFocus","hasError","setHasError","isSecret","secret","theme","translate","animatedStyle","shakeAnimation","inputRef","timerRef","undefined","handleValidate","val","isValid","current","clearTimeout","setTimeout","handleChange","handleKeyPress","e","nativeEvent","key","announceForAccessibility","accessibilityValueTextParams","valueLength","accessibilityValueText","split","join","cells","Array","from","style","flexGrow","children","onPress","focus","accessible","onChangeText","onKeyPress","caretHidden","OS","absoluteFillObject","opacity","maxLength","onBlur","keyboardType","inputMode","returnKeyType","textContentType","autoComplete","accessibilityValue","text","secureTextEntry","flexDirection","justifyContent","columnGap","zIndex","accessibilityElementsHidden","importantForAccessibility","map","_","i","status","size","weight","color","errorText","textAlign"],"sourceRoot":"../../../../src","sources":["components/otpInput/OTPInput.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
import { Ref } from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
|
+
export type OTPInputAccessibilityValueText = (params: {
|
|
4
|
+
valueLength: number;
|
|
5
|
+
length: number;
|
|
6
|
+
}) => string;
|
|
3
7
|
type Props = {
|
|
4
8
|
ref?: Ref<View>;
|
|
5
9
|
value: string;
|
|
6
10
|
onValueChange: (value: string) => void;
|
|
7
11
|
length: number;
|
|
8
|
-
secret?: boolean;
|
|
9
12
|
autocomplete?: boolean;
|
|
10
13
|
onValidate?: (value: string) => boolean;
|
|
11
14
|
errorMessage?: string;
|
|
12
15
|
accessibilityLabel?: string;
|
|
13
16
|
deleteButtonAccessibilityLabel?: string;
|
|
14
17
|
accessibilityHint?: string;
|
|
15
|
-
accessibilityValueText?: (params: {
|
|
16
|
-
valueLength: number;
|
|
17
|
-
length: number;
|
|
18
|
-
}) => string;
|
|
19
18
|
inputAccessoryViewID?: string;
|
|
20
19
|
autoFocus?: boolean;
|
|
21
20
|
};
|
|
21
|
+
export type OTPInputSecretProps = {
|
|
22
|
+
secret: true;
|
|
23
|
+
accessibilityValueText: OTPInputAccessibilityValueText;
|
|
24
|
+
} | {
|
|
25
|
+
secret?: false;
|
|
26
|
+
accessibilityValueText?: OTPInputAccessibilityValueText;
|
|
27
|
+
};
|
|
28
|
+
export type OTPInputProps = Props & OTPInputSecretProps;
|
|
22
29
|
/**
|
|
23
30
|
* `OTPInput` is a component that allows the user to enter a one-time password.
|
|
24
31
|
* It has an hidden `TextInput` that is used to handle the keyboard and the focus.
|
|
@@ -32,6 +39,6 @@ type Props = {
|
|
|
32
39
|
* @param errorMessage - The error message to display
|
|
33
40
|
* @returns
|
|
34
41
|
*/
|
|
35
|
-
export declare const OTPInput: ({ value, onValueChange, length, accessibilityLabel, accessibilityHint,
|
|
42
|
+
export declare const OTPInput: ({ value, onValueChange, length, accessibilityLabel, accessibilityHint, onValidate, errorMessage, autocomplete, inputAccessoryViewID, autoFocus, deleteButtonAccessibilityLabel, ref, ...props }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
43
|
export {};
|
|
37
44
|
//# sourceMappingURL=OTPInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../../src/components/otpInput/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAmD,MAAM,OAAO,CAAC;AAC7E,OAAO,EAOL,IAAI,EACL,MAAM,cAAc,CAAC;AAWtB,KAAK,KAAK,GAAG;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,
|
|
1
|
+
{"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../../src/components/otpInput/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAmD,MAAM,OAAO,CAAC;AAC7E,OAAO,EAOL,IAAI,EACL,MAAM,cAAc,CAAC;AAWtB,MAAM,MAAM,8BAA8B,GAAG,CAAC,MAAM,EAAE;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,KAAK,MAAM,CAAC;AAEb,KAAK,KAAK,GAAG;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC3B;IACE,MAAM,EAAE,IAAI,CAAC;IACb,sBAAsB,EAAE,8BAA8B,CAAC;CACxD,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,sBAAsB,CAAC,EAAE,8BAA8B,CAAC;CACzD,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,mBAAmB,CAAC;AAExD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GAAI,iMActB,aAAa,4CA4Jf,CAAC"}
|
package/package.json
CHANGED
|
@@ -18,26 +18,38 @@ import { BoxedInput } from "./BoxedInput";
|
|
|
18
18
|
|
|
19
19
|
const OTP_ITEMS_GAP = 8;
|
|
20
20
|
|
|
21
|
+
export type OTPInputAccessibilityValueText = (params: {
|
|
22
|
+
valueLength: number;
|
|
23
|
+
length: number;
|
|
24
|
+
}) => string;
|
|
25
|
+
|
|
21
26
|
type Props = {
|
|
22
27
|
ref?: Ref<View>;
|
|
23
28
|
value: string;
|
|
24
29
|
onValueChange: (value: string) => void;
|
|
25
30
|
length: number;
|
|
26
|
-
secret?: boolean;
|
|
27
31
|
autocomplete?: boolean;
|
|
28
32
|
onValidate?: (value: string) => boolean;
|
|
29
33
|
errorMessage?: string;
|
|
30
34
|
accessibilityLabel?: string;
|
|
31
35
|
deleteButtonAccessibilityLabel?: string;
|
|
32
36
|
accessibilityHint?: string;
|
|
33
|
-
accessibilityValueText?: (params: {
|
|
34
|
-
valueLength: number;
|
|
35
|
-
length: number;
|
|
36
|
-
}) => string;
|
|
37
37
|
inputAccessoryViewID?: string;
|
|
38
38
|
autoFocus?: boolean;
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
+
export type OTPInputSecretProps =
|
|
42
|
+
| {
|
|
43
|
+
secret: true;
|
|
44
|
+
accessibilityValueText: OTPInputAccessibilityValueText;
|
|
45
|
+
}
|
|
46
|
+
| {
|
|
47
|
+
secret?: false;
|
|
48
|
+
accessibilityValueText?: OTPInputAccessibilityValueText;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export type OTPInputProps = Props & OTPInputSecretProps;
|
|
52
|
+
|
|
41
53
|
/**
|
|
42
54
|
* `OTPInput` is a component that allows the user to enter a one-time password.
|
|
43
55
|
* It has an hidden `TextInput` that is used to handle the keyboard and the focus.
|
|
@@ -57,18 +69,18 @@ export const OTPInput = ({
|
|
|
57
69
|
length,
|
|
58
70
|
accessibilityLabel,
|
|
59
71
|
accessibilityHint,
|
|
60
|
-
accessibilityValueText,
|
|
61
72
|
onValidate,
|
|
62
73
|
errorMessage = "",
|
|
63
|
-
secret = false,
|
|
64
74
|
autocomplete = false,
|
|
65
75
|
inputAccessoryViewID,
|
|
66
76
|
autoFocus = false,
|
|
67
77
|
deleteButtonAccessibilityLabel,
|
|
68
|
-
ref
|
|
69
|
-
|
|
78
|
+
ref,
|
|
79
|
+
...props
|
|
80
|
+
}: OTPInputProps) => {
|
|
70
81
|
const [hasFocus, setHasFocus] = useState(autoFocus);
|
|
71
82
|
const [hasError, setHasError] = useState(false);
|
|
83
|
+
const isSecret = props.secret === true;
|
|
72
84
|
|
|
73
85
|
const theme = useIOTheme();
|
|
74
86
|
|
|
@@ -126,11 +138,23 @@ export const OTPInput = ({
|
|
|
126
138
|
}
|
|
127
139
|
break;
|
|
128
140
|
default:
|
|
129
|
-
|
|
141
|
+
if (!isSecret) {
|
|
142
|
+
AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
|
|
143
|
+
}
|
|
130
144
|
break;
|
|
131
145
|
}
|
|
132
146
|
};
|
|
133
147
|
|
|
148
|
+
const accessibilityValueTextParams = {
|
|
149
|
+
valueLength: value.length,
|
|
150
|
+
length
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
const accessibilityValueText = isSecret
|
|
154
|
+
? props.accessibilityValueText(accessibilityValueTextParams)
|
|
155
|
+
: props.accessibilityValueText?.(accessibilityValueTextParams) ??
|
|
156
|
+
value.split("").join(", ");
|
|
157
|
+
|
|
134
158
|
const cells = useMemo(() => Array.from({ length }), [length]);
|
|
135
159
|
|
|
136
160
|
return (
|
|
@@ -150,10 +174,8 @@ export const OTPInput = ({
|
|
|
150
174
|
caretHidden={Platform.OS === "ios"}
|
|
151
175
|
style={[
|
|
152
176
|
StyleSheet.absoluteFillObject,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
android: { opacity: 0 }
|
|
156
|
-
})
|
|
177
|
+
// Keep the hidden TextInput minimally visible so native focus still works.
|
|
178
|
+
{ opacity: 0.01 }
|
|
157
179
|
]}
|
|
158
180
|
maxLength={length}
|
|
159
181
|
ref={inputRef}
|
|
@@ -167,16 +189,10 @@ export const OTPInput = ({
|
|
|
167
189
|
accessible={true}
|
|
168
190
|
accessibilityLabel={accessibilityLabel}
|
|
169
191
|
accessibilityHint={accessibilityHint}
|
|
170
|
-
//
|
|
171
|
-
accessibilityValue={{
|
|
172
|
-
text:
|
|
173
|
-
accessibilityValueText?.({
|
|
174
|
-
valueLength: value.length,
|
|
175
|
-
length
|
|
176
|
-
}) ?? value.split("").join(" ")
|
|
177
|
-
}}
|
|
192
|
+
// Keep secret values out of the screen reader output.
|
|
193
|
+
accessibilityValue={{ text: accessibilityValueText }}
|
|
178
194
|
autoFocus={autoFocus}
|
|
179
|
-
secureTextEntry={
|
|
195
|
+
secureTextEntry={isSecret}
|
|
180
196
|
/>
|
|
181
197
|
<View
|
|
182
198
|
style={{
|
|
@@ -199,7 +215,7 @@ export const OTPInput = ({
|
|
|
199
215
|
? "focus"
|
|
200
216
|
: "default"
|
|
201
217
|
}
|
|
202
|
-
secret={
|
|
218
|
+
secret={isSecret}
|
|
203
219
|
value={value[i]}
|
|
204
220
|
/>
|
|
205
221
|
))}
|