Skip to content

Commit d8eecbe

Browse files
author
Edward Xiao
committed
- Give the message returns from customFunc higher priority then msgOnError in <Textbox/> and <Textarea/>.
- Disable check when value is changing from keyup in ```<Textbox/>``` and ```<Textarea/>``` to avoid the error message jumping while typing the words.
1 parent 52c1a9f commit d8eecbe

File tree

10 files changed

+21
-45
lines changed

10 files changed

+21
-45
lines changed

‎example/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -881,7 +881,7 @@ class Index extends Component {
881881
// reg: /^\d{18}|\d{15}$/, // Optional.[Bool].Default: "" Custom regex.
882882
// regMsg: 'failed in reg.test(${value})', // Optional.[String].Default: "" Custom regex error message.
883883
// locale: 'en-US', // Optional.[String].Default: "en-US". For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'.
884-
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", // Optional.[String].Default: "" Show your custom error message no matter what when it has error if it is provied.
884+
// 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.
885885
// 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.
886886
// customFunc: res => { // Optional.[Func].Default: none. Custom function. Returns true or err message
887887
// if (res != 'milk') {
@@ -1143,7 +1143,7 @@ class Index extends Component {
11431143
// length: 2, // Optional.[Number].Default: 0. Validation of exact length of the value.
11441144
// reg: /^\d{18}|\d{15}$/, // Optional.[Bool].Default: "". Custom regex.
11451145
// regMsg: 'failed in reg.test(${value})', // Optional.[String].Default: "". Custom regex error message.
1146-
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", // Optional.[String].Default: "". Show your custom error message no matter what when it has error if it is provied.
1146+
// 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.
11471147
// 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.
11481148
// customFunc: res => { // Optional.[Func].Default: none. Custom function. Returns true or err message
11491149
// if (res != 'banana') {

‎lib/components/Textarea.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ var component = function component(_ref) {
320320
var customFuncResult = customFunc(internalValue);
321321

322322
if (customFuncResult !== true) {
323-
handleCheckEnd(true, customFuncResult);
323+
handleCheckEnd(true, customFuncResult, true);
324324
return;
325325
}
326326
}
@@ -340,10 +340,11 @@ var component = function component(_ref) {
340340
}
341341
}, [internalValue]);
342342
var handleCheckEnd = useCallback(function (err, message) {
343+
var fromCustomFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
343344
var msg = message;
344345
var msgOnError = option.msgOnError;
345346

346-
if (err && msgOnError) {
347+
if (err && msgOnError && !fromCustomFunc) {
347348
msg = msgOnError;
348349
}
349350

@@ -369,11 +370,6 @@ var component = function component(_ref) {
369370
useEffect(function () {
370371
setInternalValue(String(value));
371372
}, [value]);
372-
useEffect(function () {
373-
if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
374-
check();
375-
}
376-
}, [prevInternalValue, internalValue]);
377373
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
378374
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
379375
var inputClass = "".concat(classNameInput, " ").concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);

‎lib/components/Textbox.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@ var component = function component(_ref) {
397397
var customFuncResult = customFunc(internalValue);
398398

399399
if (customFuncResult !== true) {
400-
handleCheckEnd(true, customFuncResult);
400+
handleCheckEnd(true, customFuncResult, true);
401401
return;
402402
}
403403
}
@@ -417,10 +417,11 @@ var component = function component(_ref) {
417417
}
418418
}, [internalValue]);
419419
var handleCheckEnd = useCallback(function (err, message) {
420+
var fromCustomFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
420421
var msg = message;
421422
var msgOnError = option.msgOnError;
422423

423-
if (err && msgOnError) {
424+
if (err && msgOnError && !fromCustomFunc) {
424425
msg = msgOnError;
425426
}
426427

@@ -446,11 +447,6 @@ var component = function component(_ref) {
446447
useEffect(function () {
447448
setInternalValue(String(value));
448449
}, [value]);
449-
useEffect(function () {
450-
if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
451-
check();
452-
}
453-
}, [prevInternalValue, internalValue]);
454450
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
455451
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
456452
var inputClass = "".concat(classNameInput, " ").concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);

‎lib/react-inputs-validation.js‎

Lines changed: 2 additions & 2 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: 2 additions & 2 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.0.5",
3+
"version": "3.1.0",
44
"description": "React form input validation components",
55
"main": "index.js",
66
"repository": {

‎src/js/Inputs/Textarea.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const component: React.FC<Props> = ({
228228
if (customFunc && typeof customFunc === 'function') {
229229
const customFuncResult = customFunc(internalValue);
230230
if (customFuncResult !== true) {
231-
handleCheckEnd(true, customFuncResult);
231+
handleCheckEnd(true, customFuncResult, true);
232232
return;
233233
}
234234
}
@@ -245,10 +245,10 @@ const component: React.FC<Props> = ({
245245
},
246246
[internalValue],
247247
);
248-
const handleCheckEnd = useCallback((err: boolean, message: string) => {
248+
const handleCheckEnd = useCallback((err: boolean, message: string, fromCustomFunc: boolean = false) => {
249249
let msg = message;
250250
const { msgOnError } = option;
251-
if (err && msgOnError) {
251+
if (err && msgOnError && !fromCustomFunc) {
252252
msg = msgOnError;
253253
}
254254
setErr(err);
@@ -278,14 +278,6 @@ const component: React.FC<Props> = ({
278278
},
279279
[value],
280280
);
281-
useEffect(
282-
() => {
283-
if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
284-
check();
285-
}
286-
},
287-
[prevInternalValue, internalValue],
288-
);
289281
const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${err && reactInputsValidationCss['error']} ${successMsg !== '' &&
290282
!err &&
291283
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

‎src/js/Inputs/Textbox.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ const component: React.FC<Props> = ({
291291
if (customFunc && typeof customFunc === 'function') {
292292
const customFuncResult = customFunc(internalValue);
293293
if (customFuncResult !== true) {
294-
handleCheckEnd(true, customFuncResult);
294+
handleCheckEnd(true, customFuncResult, true);
295295
return;
296296
}
297297
}
@@ -308,10 +308,10 @@ const component: React.FC<Props> = ({
308308
},
309309
[internalValue],
310310
);
311-
const handleCheckEnd = useCallback((err: boolean, message: string) => {
311+
const handleCheckEnd = useCallback((err: boolean, message: string, fromCustomFunc: boolean = false) => {
312312
let msg = message;
313313
const { msgOnError } = option;
314-
if (err && msgOnError) {
314+
if (err && msgOnError && !fromCustomFunc) {
315315
msg = msgOnError;
316316
}
317317
setErr(err);
@@ -341,14 +341,6 @@ const component: React.FC<Props> = ({
341341
},
342342
[value],
343343
);
344-
useEffect(
345-
() => {
346-
if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
347-
check();
348-
}
349-
},
350-
[prevInternalValue, internalValue],
351-
);
352344
const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${err && reactInputsValidationCss['error']} ${successMsg !== '' &&
353345
!err &&
354346
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

0 commit comments

Comments
 (0)