Skip to content

Commit c3277a2

Browse files
author
Edward Xiao
committed
- Fix async problems with customFunc in <Textbox/> and <Textarea/>.
1 parent a08391d commit c3277a2

File tree

10 files changed

+159
-42
lines changed

10 files changed

+159
-42
lines changed

‎example/index.js‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'core-js/es6/map';
22
import 'core-js/es6/set';
33
import 'raf/polyfill';
4+
import 'babel-polyfill';
45
import React, { Component } from 'react';
56
import PropTypes from 'prop-types';
67
import ReactDOM from 'react-dom';
@@ -882,14 +883,52 @@ class Index extends Component {
882883
// regMsg: 'failed in reg.test(${value})', // Optional.[String].Default: "" Custom regex error message.
883884
// locale: 'en-US', // Optional.[String].Default: "en-US". For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'.
884885
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", // Optional.[String].Default: "" Show your custom error message no matter what(except the message from customFunc) when it has error if it is provied.
885-
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border." // Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
886-
customFunc: res => { // Optional.[Func].Default: none. Custom function. Returns true or err message
887-
if (res != 'milk') {
888-
return 'Name cannot be other things but milk';
889-
}
890-
return true;
891-
}
886+
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border.", // Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
887+
// customFunc: res => { // Optional.[Func].Default: none. Custom function. Returns true or err message
888+
// if (res != 'milk') {
889+
// return 'Name cannot be other things but milk';
890+
// }
891+
// return true;
892+
// }
893+
// customFunc: async v => {
894+
// if (v === '') {
895+
// this.setState({ hasError: true });
896+
// return 'Name is required.';
897+
// }
898+
// if (v.length < 4) {
899+
// this.setState({ hasError: true });
900+
// return 'Name needs at least 4 length.';
901+
// }
902+
// let usernameRes = null;
903+
// await fetch('https://jsonplaceholder.typicode.com/todos/1')
904+
// .then(response => {
905+
// return response.json();
906+
// })
907+
// .then(json => {
908+
// console.log('parsed json', json);
909+
// usernameRes = true;
910+
// })
911+
// .catch(ex => {
912+
// console.log('parsing failed', ex);
913+
// });
914+
// if (usernameRes === false) {
915+
// this.setState({ hasError: true });
916+
// return {
917+
// error: true,
918+
// message: 'Username already exist.',
919+
// };
920+
// }
921+
// if (usernameRes === true) {
922+
// this.setState({ hasError: false });
923+
// return {
924+
// error: false,
925+
// message: 'Username does not already exist.',
926+
// showOnSuccess: true,
927+
// };
928+
// }
929+
// },
892930
}}
931+
// asyncMsgObj={this.state.nameAsyncMsgObj}
893932
// asyncMsgObj={{
894933
// error: false, // Optional.[Bool].Default: false. (Server response) Backend validation result.
895934
// message: '', // Optional.[String].Default: "". (Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'

‎lib/components/Textarea.js‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
1919

2020
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
2121

22+
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
23+
2224
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
2325

2426
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -288,12 +290,12 @@ var component = function component(_ref) {
288290

289291
case 3:
290292
if (!type) {
291-
_context.next = 52;
293+
_context.next = 59;
292294
break;
293295
}
294296

295297
if (!(VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1)) {
296-
_context.next = 49;
298+
_context.next = 56;
297299
break;
298300
}
299301

@@ -408,7 +410,7 @@ var component = function component(_ref) {
408410

409411
case 38:
410412
if (!(customFunc && typeof customFunc === 'function')) {
411-
_context.next = 45;
413+
_context.next = 52;
412414
break;
413415
}
414416

@@ -418,36 +420,60 @@ var component = function component(_ref) {
418420
case 41:
419421
customFuncResult = _context.sent;
420422

423+
if (!(typeof customFuncResult === 'undefined')) {
424+
_context.next = 46;
425+
break;
426+
}
427+
428+
return _context.abrupt("return");
429+
430+
case 46:
431+
if (!(_typeof(customFuncResult) === 'object')) {
432+
_context.next = 49;
433+
break;
434+
}
435+
436+
if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
437+
if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
438+
setSuccessMsg(customFuncResult.message);
439+
}
440+
441+
handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
442+
}
443+
444+
return _context.abrupt("return");
445+
446+
case 49:
421447
if (!(customFuncResult !== true)) {
422-
_context.next = 45;
448+
_context.next = 52;
423449
break;
424450
}
425451

426452
handleCheckEnd(true, customFuncResult, true);
427453
return _context.abrupt("return");
428454

429-
case 45:
455+
case 52:
430456
if (msgOnSuccess) {
431457
setSuccessMsg(msgOnSuccess);
432458
}
433459

434460
handleCheckEnd(false, msgOnSuccess);
435-
_context.next = 50;
461+
_context.next = 57;
436462
break;
437463

438-
case 49:
464+
case 56:
439465
console.error("The valid ".concat(_utils["default"].toCamelCase(TYPE)(true), " \"type\" options in validationOption are [").concat(VALIDATE_OPTION_TYPE_LIST.map(function (i) {
440466
return i;
441467
}), "]"));
442468

443-
case 50:
444-
_context.next = 53;
469+
case 57:
470+
_context.next = 60;
445471
break;
446472

447-
case 52:
473+
case 59:
448474
console.error('Please provide "type" in validationOption');
449475

450-
case 53:
476+
case 60:
451477
case "end":
452478
return _context.stop();
453479
}

‎lib/components/Textbox.js‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
1919

2020
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
2121

22+
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
23+
2224
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
2325

2426
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -318,12 +320,12 @@ var component = function component(_ref) {
318320

319321
case 3:
320322
if (!type) {
321-
_context.next = 80;
323+
_context.next = 87;
322324
break;
323325
}
324326

325327
if (!(VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1)) {
326-
_context.next = 77;
328+
_context.next = 84;
327329
break;
328330
}
329331

@@ -536,7 +538,7 @@ var component = function component(_ref) {
536538

537539
case 66:
538540
if (!(customFunc && typeof customFunc === 'function')) {
539-
_context.next = 73;
541+
_context.next = 80;
540542
break;
541543
}
542544

@@ -546,36 +548,60 @@ var component = function component(_ref) {
546548
case 69:
547549
customFuncResult = _context.sent;
548550

551+
if (!(typeof customFuncResult === 'undefined')) {
552+
_context.next = 74;
553+
break;
554+
}
555+
556+
return _context.abrupt("return");
557+
558+
case 74:
559+
if (!(_typeof(customFuncResult) === 'object')) {
560+
_context.next = 77;
561+
break;
562+
}
563+
564+
if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
565+
if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
566+
setSuccessMsg(customFuncResult.message);
567+
}
568+
569+
handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
570+
}
571+
572+
return _context.abrupt("return");
573+
574+
case 77:
549575
if (!(customFuncResult !== true)) {
550-
_context.next = 73;
576+
_context.next = 80;
551577
break;
552578
}
553579

554580
handleCheckEnd(true, customFuncResult, true);
555581
return _context.abrupt("return");
556582

557-
case 73:
583+
case 80:
558584
if (msgOnSuccess) {
559585
setSuccessMsg(msgOnSuccess);
560586
}
561587

562588
handleCheckEnd(false, msgOnSuccess);
563-
_context.next = 78;
589+
_context.next = 85;
564590
break;
565591

566-
case 77:
592+
case 84:
567593
console.error("The valid ".concat(_utils["default"].toCamelCase(TYPE)(true), " \"type\" options in validationOption are [").concat(VALIDATE_OPTION_TYPE_LIST.map(function (i) {
568594
return i;
569595
}), "]"));
570596

571-
case 78:
572-
_context.next = 81;
597+
case 85:
598+
_context.next = 88;
573599
break;
574600

575-
case 80:
601+
case 87:
576602
console.error('Please provide "type" in validationOption');
577603

578-
case 81:
604+
case 88:
579605
case "end":
580606
return _context.stop();
581607
}

‎lib/react-inputs-validation.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-inputs-validation",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "React form input validation components",
55
"main": "index.js",
66
"repository": {

‎src/js/Inputs/Textarea.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,22 @@ const component: React.FC<Props> = ({
247247
}
248248
if (customFunc && typeof customFunc === 'function') {
249249
const customFuncResult = await customFunc(internalValue);
250-
if (customFuncResult !== true) {
251-
handleCheckEnd(true, customFuncResult, true);
250+
if (typeof customFuncResult === 'undefined') {
252251
return;
252+
} else {
253+
if (typeof customFuncResult === 'object') {
254+
if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
255+
if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
256+
setSuccessMsg(customFuncResult.message);
257+
}
258+
handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
259+
}
260+
return;
261+
}
262+
if (customFuncResult !== true) {
263+
handleCheckEnd(true, customFuncResult, true);
264+
return;
265+
}
253266
}
254267
}
255268
if (msgOnSuccess) {

‎src/js/Inputs/Textbox.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -312,9 +312,22 @@ const component: React.FC<Props> = ({
312312
}
313313
if (customFunc && typeof customFunc === 'function') {
314314
const customFuncResult = await customFunc(internalValue);
315-
if (customFuncResult !== true) {
316-
handleCheckEnd(true, customFuncResult, true);
315+
if (typeof customFuncResult === 'undefined') {
317316
return;
317+
} else {
318+
if (typeof customFuncResult === 'object') {
319+
if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
320+
if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
321+
setSuccessMsg(customFuncResult.message);
322+
}
323+
handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
324+
}
325+
return;
326+
}
327+
if (customFuncResult !== true) {
328+
handleCheckEnd(true, customFuncResult, true);
329+
return;
330+
}
318331
}
319332
}
320333
if (msgOnSuccess) {

0 commit comments

Comments
 (0)