Skip to content

Commit ca4d122

Browse files
ugogougogo
committed
feat: remove useCallback
1 parent 54c5871 commit ca4d122

File tree

1 file changed

+127
-156
lines changed

1 file changed

+127
-156
lines changed

‎src/index.tsx‎

Lines changed: 127 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,8 @@ const ReactInputVerificationCode = ({
3636
* generate a new array, map through it
3737
* and replace with the value when possible
3838
*/
39-
const fillValues = useCallback(
40-
(value: string) =>
41-
new Array(length).fill('').map((_, index) => value[index] ?? ''),
42-
[length]
43-
);
39+
const fillValues = (value: string) =>
40+
new Array(length).fill('').map((_, index) => value[index] ?? '');
4441

4542
const [values, setValues] = useState(fillValues(defaultValue));
4643
const [focusedIndex, setFocusedIndex] = useState<number>(-1);
@@ -50,53 +47,44 @@ const ReactInputVerificationCode = ({
5047
[length]
5148
);
5249

53-
const validate = useCallback(
54-
(input: string) => {
55-
if (type === 'number') {
56-
return /^\d/.test(input);
57-
}
50+
const validate = (input: string) => {
51+
if (type === 'number') {
52+
return /^\d/.test(input);
53+
}
5854

59-
if (type === 'alphanumeric') {
60-
return /^[a-zA-Z0-9]/.test(input);
61-
}
55+
if (type === 'alphanumeric') {
56+
return /^[a-zA-Z0-9]/.test(input);
57+
}
6258

63-
return true;
64-
},
65-
[type]
66-
);
59+
return true;
60+
};
6761

68-
const selectInputContent = useCallback(
69-
(index: number) => {
70-
const input = inputsRefs[index].current;
62+
const selectInputContent = (index: number) => {
63+
const input = inputsRefs[index].current;
7164

72-
if (input) {
73-
requestAnimationFrame(() => {
74-
input.select();
75-
});
76-
}
77-
},
78-
[inputsRefs]
79-
);
65+
if (input) {
66+
requestAnimationFrame(() => {
67+
input.select();
68+
});
69+
}
70+
};
8071

81-
const setValue = useCallback(
82-
(value: string, index: number) => {
83-
const nextValues = [...values];
84-
nextValues[index] = value;
72+
const setValue = (value: string, index: number) => {
73+
const nextValues = [...values];
74+
nextValues[index] = value;
8575

86-
setValues(nextValues);
76+
setValues(nextValues);
8777

88-
const stringifiedValues = nextValues.join('');
89-
const isCompleted = stringifiedValues.length === length;
78+
const stringifiedValues = nextValues.join('');
79+
const isCompleted = stringifiedValues.length === length;
9080

91-
if (isCompleted) {
92-
onCompleted(stringifiedValues);
93-
return;
94-
}
81+
if (isCompleted) {
82+
onCompleted(stringifiedValues);
83+
return;
84+
}
9585

96-
onChange(stringifiedValues);
97-
},
98-
[length, onChange, onCompleted, values]
99-
);
86+
onChange(stringifiedValues);
87+
};
10088

10189
const focusInput = useCallback(
10290
(index: number) => {
@@ -111,139 +99,122 @@ const ReactInputVerificationCode = ({
11199
[inputsRefs]
112100
);
113101

114-
const blurInput = useCallback(
115-
(index: number) => {
116-
const input = inputsRefs[index]?.current;
117-
118-
if (input) {
119-
requestAnimationFrame(() => {
120-
input.blur();
121-
});
122-
}
123-
},
124-
[inputsRefs]
125-
);
126-
127-
const onInputFocus = useCallback(
128-
(index: number) => {
129-
const input = inputsRefs[index]?.current;
130-
131-
if (input) {
132-
setFocusedIndex(index);
133-
selectInputContent(index);
134-
}
135-
},
136-
[inputsRefs, selectInputContent]
137-
);
138-
139-
const onInputChange = useCallback(
140-
(event: ChangeEvent<HTMLInputElement>, index: number) => {
141-
event.preventDefault();
102+
const blurInput = (index: number) => {
103+
const input = inputsRefs[index]?.current;
142104

143-
const eventValue = event.target.value;
144-
console.log('-------');
145-
console.log('RIVC:onInputChange', {
146-
event,
147-
eventValue,
148-
focusedIndex,
149-
index,
105+
if (input) {
106+
requestAnimationFrame(() => {
107+
input.blur();
150108
});
109+
}
110+
};
151111

152-
/**
153-
* otp code or pasted value
154-
*/
155-
if (eventValue.length > 1) {
156-
console.log('RIVC: isOtp', true);
157-
console.log('RIVC: fillValues(eventValue)', fillValues(eventValue));
158-
159-
setValues(fillValues(eventValue));
112+
const onInputFocus = (index: number) => {
113+
const input = inputsRefs[index]?.current;
160114

161-
const isCompleted = eventValue.length === length;
162-
console.log('RIVC: isCompleted', isCompleted);
115+
if (input) {
116+
setFocusedIndex(index);
117+
selectInputContent(index);
118+
}
119+
};
120+
121+
const onInputChange = (
122+
event: ChangeEvent<HTMLInputElement>,
123+
index: number
124+
) => {
125+
event.preventDefault();
126+
127+
const eventValue = event.target.value;
128+
console.log('-------');
129+
console.log('RIVC:onInputChange', {
130+
event,
131+
eventValue,
132+
focusedIndex,
133+
index,
134+
});
163135

164-
if (isCompleted) {
165-
onCompleted(eventValue);
166-
blurInput(index);
167-
return;
168-
}
136+
/**
137+
* otp code or pasted value
138+
*/
139+
if (eventValue.length > 1) {
140+
console.log('RIVC: isOtp', true);
141+
console.log('RIVC: fillValues(eventValue)', fillValues(eventValue));
169142

170-
focusInput(eventValue.length);
171-
return;
172-
}
143+
setValues(fillValues(eventValue));
173144

174-
console.log('RIVC: isOtp', false);
145+
const isCompleted = eventValue.length === length;
146+
console.log('RIVC: isCompleted', isCompleted);
175147

176-
/**
177-
* ensure we only display 1 character in the input
178-
* by clearing the already setted value
179-
*/
180-
const value = eventValue.replace(values[index], '');
181-
182-
/**
183-
* if the value is not valid, don't go any further
184-
* and select the content of the input for a better UX
185-
*/
186-
if (!validate(value)) {
187-
selectInputContent(index);
148+
if (isCompleted) {
149+
onCompleted(eventValue);
150+
blurInput(index);
188151
return;
189152
}
190153

191-
console.log('RIVC', { value });
192-
193-
setValue(value, index);
154+
focusInput(eventValue.length);
155+
return;
156+
}
194157

195-
/**
196-
* if the input is the last of the list
197-
* blur it, otherwise focus the next one
198-
*/
199-
if (index === length - 1) {
200-
blurInput(index);
201-
return;
202-
}
158+
console.log('RIVC: isOtp', false);
159+
160+
/**
161+
* ensure we only display 1 character in the input
162+
* by clearing the already setted value
163+
*/
164+
const value = eventValue.replace(values[index], '');
165+
166+
/**
167+
* if the value is not valid, don't go any further
168+
* and select the content of the input for a better UX
169+
*/
170+
if (!validate(value)) {
171+
selectInputContent(index);
172+
return;
173+
}
203174

204-
focusInput(index + 1);
205-
},
206-
[
207-
blurInput,
208-
fillValues,
209-
focusInput,
210-
focusedIndex,
211-
length,
212-
onCompleted,
213-
selectInputContent,
214-
setValue,
215-
validate,
216-
values,
217-
]
218-
);
175+
console.log('RIVC', { value });
219176

220-
const onInputKeyDown = useCallback(
221-
(event: KeyboardEvent<HTMLInputElement>, index: number) => {
222-
const eventKey = event.key;
177+
setValue(value, index);
223178

224-
if (eventKey === 'Backspace' || eventKey === 'Delete') {
225-
/**
226-
* prevent trigger a change event
227-
* `onInputChange` won't be called
228-
*/
229-
event.preventDefault();
179+
/**
180+
* if the input is the last of the list
181+
* blur it, otherwise focus the next one
182+
*/
183+
if (index === length - 1) {
184+
blurInput(index);
185+
return;
186+
}
230187

231-
setValue('', focusedIndex);
232-
focusInput(index - 1);
188+
focusInput(index + 1);
189+
};
233190

234-
return;
235-
}
191+
const onInputKeyDown = (
192+
event: KeyboardEvent<HTMLInputElement>,
193+
index: number
194+
) => {
195+
const eventKey = event.key;
236196

197+
if (eventKey === 'Backspace' || eventKey === 'Delete') {
237198
/**
238-
* since the value won't change, `onInputChange` won't be called
239-
* only focus the next input
199+
* prevent trigger a change event
200+
* `onInputChange` won't be called
240201
*/
241-
if (eventKey === values[index]) {
242-
focusInput(index + 1);
243-
}
244-
},
245-
[focusInput, focusedIndex, setValue, values]
246-
);
202+
event.preventDefault();
203+
204+
setValue('', focusedIndex);
205+
focusInput(index - 1);
206+
207+
return;
208+
}
209+
210+
/**
211+
* since the value won't change, `onInputChange` won't be called
212+
* only focus the next input
213+
*/
214+
if (eventKey === values[index]) {
215+
focusInput(index + 1);
216+
}
217+
};
247218

248219
/**
249220
* autoFocus

0 commit comments

Comments
 (0)