Skip to content

Commit 6742f6f

Browse files
author
edwardxiao
committed
- Bugfix for <Textbox> async customFunc when updating unmounted component problem.
1 parent 88b014c commit 6742f6f

8 files changed

+138
-144
lines changed

‎example/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -587,6 +587,9 @@ class Index extends Component {
587587
name: 'Name', // Optional.[String].Default: "". To display in the Error message. i.e Please enter your {name}.
588588
check: true, // Optional.[Bool].Default: true. To determin if you need to validate.
589589
required: true, // Optional.[Bool].Default: true. To determin if it is a required field.
590+
customFunc: (v) =>{
591+
return ''
592+
}
590593
}}
591594
/>
592595
<br />

‎lib/components/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-inputs-validation",
3-
"version": "4.5.1",
3+
"version": "4.5.2",
44
"description": "A react component for form inputs validation.",
55
"main": "index.js",
66
"repository": {

‎src/js/Inputs/Textbox.tsx

+129-138
Original file line numberDiff line numberDiff line change
@@ -253,183 +253,174 @@ const component: React.FC<Props> = ({
253253
},
254254
[err, attributesInput, option],
255255
);
256-
const check = useCallback(
257-
async () => {
258-
const { reg, min, max, type, name, check, length, regMsg, locale, compare, required, msgOnSuccess, customFunc } = option;
259-
if (!check) {
260-
return;
261-
}
262-
if (type) {
263-
if (VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1) {
264-
if (!message[locale] || !message[locale][TYPE]) {
265-
console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
256+
const check = useCallback(async () => {
257+
const { reg, min, max, type, name, check, length, regMsg, locale, compare, required, msgOnSuccess, customFunc } = option;
258+
if (!check) {
259+
return;
260+
}
261+
if (type) {
262+
if (VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1) {
263+
if (!message[locale] || !message[locale][TYPE]) {
264+
console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
265+
return;
266+
}
267+
const msg = message[locale][TYPE];
268+
const nameText = name ? name : '';
269+
if (required) {
270+
if (validator.empty(internalValue)) {
271+
handleCheckEnd(true, msg.empty(nameText));
266272
return;
267273
}
268-
const msg = message[locale][TYPE];
269-
const nameText = name ? name : '';
270-
if (required) {
271-
if (validator.empty(internalValue)) {
272-
handleCheckEnd(true, msg.empty(nameText));
274+
}
275+
if (String(internalValue) !== '') {
276+
if (reg) {
277+
if (validator['reg'](reg, internalValue)) {
278+
handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
273279
return;
274280
}
275281
}
276-
if (String(internalValue) !== '') {
277-
if (reg) {
278-
if (validator['reg'](reg, internalValue)) {
279-
handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
280-
return;
281-
}
282-
}
283-
if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
284-
if (min || max) {
285-
if (min && max) {
286-
if (String(internalValue).length < min || String(internalValue).length > max) {
287-
handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
282+
if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
283+
if (min || max) {
284+
if (min && max) {
285+
if (String(internalValue).length < min || String(internalValue).length > max) {
286+
handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
287+
return;
288+
}
289+
} else {
290+
if (min) {
291+
if (String(internalValue).length < min) {
292+
handleCheckEnd(true, msg.lessThan(nameText)(min));
288293
return;
289294
}
290-
} else {
291-
if (min) {
292-
if (String(internalValue).length < min) {
293-
handleCheckEnd(true, msg.lessThan(nameText)(min));
294-
return;
295-
}
296-
}
297-
if (max) {
298-
if (String(internalValue).length > max) {
299-
handleCheckEnd(true, msg.greaterThan(nameText)(max));
300-
return;
301-
}
302-
}
303295
}
304-
}
305-
if (length) {
306-
if (String(internalValue).length !== length) {
307-
handleCheckEnd(true, msg.lengthEqual(nameText)(length));
308-
return;
296+
if (max) {
297+
if (String(internalValue).length > max) {
298+
handleCheckEnd(true, msg.greaterThan(nameText)(max));
299+
return;
300+
}
309301
}
310302
}
311303
}
312-
if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
313-
if (!validator[type](internalValue, null, null)) {
314-
handleCheckEnd(true, msg.invalid(nameText));
304+
if (length) {
305+
if (String(internalValue).length !== length) {
306+
handleCheckEnd(true, msg.lengthEqual(nameText)(length));
315307
return;
316308
}
317-
if (min || max) {
318-
if (min && max) {
319-
if (!validator[type](internalValue, min, max)) {
320-
handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
309+
}
310+
}
311+
if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
312+
if (!validator[type](internalValue, null, null)) {
313+
handleCheckEnd(true, msg.invalid(nameText));
314+
return;
315+
}
316+
if (min || max) {
317+
if (min && max) {
318+
if (!validator[type](internalValue, min, max)) {
319+
handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
320+
return;
321+
}
322+
} else {
323+
if (min) {
324+
if (!validator[type](internalValue, min)) {
325+
handleCheckEnd(true, msg.lessThan(nameText)(min));
321326
return;
322327
}
323-
} else {
324-
if (min) {
325-
if (!validator[type](internalValue, min)) {
326-
handleCheckEnd(true, msg.lessThan(nameText)(min));
327-
return;
328-
}
329-
}
330-
if (max) {
331-
if (!validator[type](internalValue, 0, max)) {
332-
handleCheckEnd(true, msg.greaterThan(nameText)(max));
333-
return;
334-
}
335-
}
336328
}
337-
}
338-
if (length) {
339-
if (String(internalValue).length !== length) {
340-
handleCheckEnd(true, msg.lengthEqual(nameText)(length));
341-
return;
329+
if (max) {
330+
if (!validator[type](internalValue, 0, max)) {
331+
handleCheckEnd(true, msg.greaterThan(nameText)(max));
332+
return;
333+
}
342334
}
343335
}
344336
}
345-
if (compare && compare !== '') {
346-
if (internalValue !== compare) {
347-
handleCheckEnd(true, msg.twoInputsNotEqual());
337+
if (length) {
338+
if (String(internalValue).length !== length) {
339+
handleCheckEnd(true, msg.lengthEqual(nameText)(length));
348340
return;
349341
}
350342
}
351343
}
352-
if (customFunc && typeof customFunc === 'function') {
353-
const customFuncResult = await customFunc(internalValue);
354-
/* istanbul ignore next because of async problem */
355-
if (typeof customFuncResult === 'object') {
356-
if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
357-
if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
358-
setSuccessMsg(customFuncResult.message);
359-
}
360-
handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
361-
}
344+
if (compare && compare !== '') {
345+
if (internalValue !== compare) {
346+
handleCheckEnd(true, msg.twoInputsNotEqual());
362347
return;
363348
}
364-
/* istanbul ignore next because of async problem */
365-
if (customFuncResult !== true) {
366-
handleCheckEnd(true, customFuncResult, true);
367-
return;
349+
}
350+
}
351+
if (customFunc && typeof customFunc === 'function') {
352+
const customFuncResult = await customFunc(internalValue);
353+
if (!($input && $input.current)) {
354+
return;
355+
}
356+
/* istanbul ignore next because of async problem */
357+
if (typeof customFuncResult === 'object') {
358+
if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
359+
if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
360+
setSuccessMsg(customFuncResult.message);
361+
}
362+
handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
368363
}
364+
return;
369365
}
370-
if (msgOnSuccess) {
371-
setSuccessMsg(msgOnSuccess);
366+
/* istanbul ignore next because of async problem */
367+
if (customFuncResult !== true) {
368+
handleCheckEnd(true, customFuncResult, true);
369+
return;
372370
}
373-
handleCheckEnd(false, msgOnSuccess);
374-
} else {
375-
console.error(`The valid ${utils.toCamelCase(TYPE)(true)} "type" options in validationOption are [${VALIDATE_OPTION_TYPE_LIST.map(i => i)}]`);
376371
}
372+
if (msgOnSuccess) {
373+
setSuccessMsg(msgOnSuccess);
374+
}
375+
handleCheckEnd(false, msgOnSuccess);
377376
} else {
378-
console.error('Please provide "type" in validationOption');
377+
console.error(`The valid ${utils.toCamelCase(TYPE)(true)} "type" options in validationOption are [${VALIDATE_OPTION_TYPE_LIST.map(i => i)}]`);
379378
}
379+
} else {
380+
console.error('Please provide "type" in validationOption');
381+
}
382+
}, [internalValue, option]);
383+
const handleCheckEnd = useCallback(
384+
(err: boolean, message: string, fromCustomFunc: boolean = false) => {
385+
let msg = message;
386+
const { msgOnError } = option;
387+
if (err && msgOnError && !fromCustomFunc) {
388+
msg = msgOnError;
389+
}
390+
setErr(err);
391+
setMsg(msg);
392+
validationCallback && validationCallback(err);
380393
},
381-
[internalValue, option],
394+
[option.msgOnError],
382395
);
383-
const handleCheckEnd = useCallback((err: boolean, message: string, fromCustomFunc: boolean = false) => {
384-
let msg = message;
385-
const { msgOnError } = option;
386-
if (err && msgOnError && !fromCustomFunc) {
387-
msg = msgOnError;
396+
useEffect(() => {
397+
if (validate) {
398+
check();
388399
}
389-
setErr(err);
390-
setMsg(msg);
391-
validationCallback && validationCallback(err);
392-
}, [option.msgOnError]);
393-
useEffect(
394-
() => {
395-
if (validate) {
400+
}, [validate]);
401+
useEffect(() => {
402+
setInternalValue(String(value));
403+
}, [value]);
404+
useEffect(() => {
405+
/* istanbul ignore next because of https://github.com/airbnb/enzyme/issues/441 && https://github.com/airbnb/enzyme/blob/master/docs/future.md */
406+
if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
407+
if (option.customFunc && onKeyUp) {
396408
check();
397409
}
398-
},
399-
[validate],
400-
);
401-
useEffect(
402-
() => {
403-
setInternalValue(String(value));
404-
},
405-
[value],
406-
);
407-
useEffect(
408-
() => {
409-
/* istanbul ignore next because of https://github.com/airbnb/enzyme/issues/441 && https://github.com/airbnb/enzyme/blob/master/docs/future.md */
410-
if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
411-
if (option.customFunc && onKeyUp) {
412-
check();
410+
}
411+
}, [internalValue]);
412+
useEffect(() => {
413+
if (asyncObj) {
414+
if (asyncObj.message) {
415+
if (asyncObj.showOnError) {
416+
handleCheckEnd(asyncObj.error, asyncObj.message);
413417
}
414-
}
415-
},
416-
[internalValue],
417-
);
418-
useEffect(
419-
() => {
420-
if (asyncObj) {
421-
if (asyncObj.message) {
422-
if (asyncObj.showOnError) {
423-
handleCheckEnd(asyncObj.error, asyncObj.message);
424-
}
425-
if (!asyncObj.error && asyncObj.showOnSuccess) {
426-
setSuccessMsg(asyncObj.message);
427-
}
418+
if (!asyncObj.error && asyncObj.showOnSuccess) {
419+
setSuccessMsg(asyncObj.message);
428420
}
429421
}
430-
},
431-
[asyncMsgObj],
432-
);
422+
}
423+
}, [asyncMsgObj]);
433424
const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${err && reactInputsValidationCss['error']} ${successMsg !== '' &&
434425
!err &&
435426
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

0 commit comments

Comments
 (0)