Skip to content

Commit 9c92f4d

Browse files
author
Edward Xiao
committed
- Enable async control. i.e. a response from server says the input value is not available. asyncMsgObj 
1 parent 662761c commit 9c92f4d

16 files changed

+389
-30
lines changed

‎example/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -890,6 +890,12 @@ class Index extends Component {
890890
// return true;
891891
// }
892892
}}
893+
// asyncMsgObj={{
894+
// error: false, // Optional.[Bool].Default: false. (Server response) Backend validation result.
895+
// message: '', // Optional.[String].Default: "". (Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'
896+
// showOnError: true, // Optional.[Bool].Default: true. (Server response) Show AJAX error message or not.
897+
// showOnSuccess: false, // Optional.[Bool].Default: false. (Server response) Show AJAX success message or not.
898+
// }}
893899
/>
894900
{/*<div>
895901
<input
@@ -951,6 +957,12 @@ class Index extends Component {
951957
// 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.
952958
// 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.
953959
}}
960+
// asyncMsgObj={{
961+
// error: false, // Optional.[Bool].Default: false. (Server response) Backend validation result.
962+
// message: '', // Optional.[String].Default: "". (Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'
963+
// showOnError: true, // Optional.[Bool].Default: true. (Server response) Show AJAX error message or not.
964+
// showOnSuccess: false, // Optional.[Bool].Default: false. (Server response) Show AJAX success message or not.
965+
// }}
954966
/>
955967
{/*<div
956968
onClick={() => {
@@ -1009,6 +1021,12 @@ class Index extends Component {
10091021
// 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.
10101022
// 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.
10111023
}}
1024+
// asyncMsgObj={{
1025+
// error: false, // Optional.[Bool].Default: false. (Server response) Backend validation result.
1026+
// message: '', // Optional.[String].Default: "". (Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'
1027+
// showOnError: true, // Optional.[Bool].Default: true. (Server response) Show AJAX error message or not.
1028+
// showOnSuccess: false, // Optional.[Bool].Default: false. (Server response) Show AJAX success message or not.
1029+
// }}
10121030
/>
10131031
{/*<div
10141032
onClick={() => {
@@ -1078,6 +1096,12 @@ class Index extends Component {
10781096
// 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.
10791097
// 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.
10801098
}}
1099+
// asyncMsgObj={{
1100+
// error: false, // Optional.[Bool].Default: false. (Server response) Backend validation result.
1101+
// message: '', // Optional.[String].Default: "". (Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'
1102+
// showOnError: true, // Optional.[Bool].Default: true. (Server response) Show AJAX error message or not.
1103+
// showOnSuccess: false, // Optional.[Bool].Default: false. (Server response) Show AJAX success message or not.
1104+
// }}
10811105
/>
10821106
{/*<div
10831107
onClick={() => {
@@ -1152,6 +1176,12 @@ class Index extends Component {
11521176
// return true;
11531177
// }
11541178
}}
1179+
// asyncMsgObj={{
1180+
// error: false, // Optional.[Bool].Default: false. (Server response) Backend validation result.
1181+
// message: '', // Optional.[String].Default: "". (Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'
1182+
// showOnError: true, // Optional.[Bool].Default: true. (Server response) Show AJAX error message or not.
1183+
// showOnSuccess: false, // Optional.[Bool].Default: false. (Server response) Show AJAX success message or not.
1184+
// }}
11551185
/>
11561186
{/*<div>
11571187
<input

‎lib/components/Checkbox.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,23 @@ var getDefaultValidationOption = function getDefaultValidationOption(obj) {
9595
};
9696
};
9797

98+
var getDefaultAsyncObj = function getDefaultAsyncObj(obj) {
99+
var error = obj.error,
100+
message = obj.message,
101+
showOnError = obj.showOnError,
102+
showOnSuccess = obj.showOnSuccess;
103+
error = typeof error !== 'undefined' ? error : false;
104+
message = typeof message !== 'undefined' ? message : '';
105+
showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
106+
showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
107+
return {
108+
error: error,
109+
message: message,
110+
showOnError: showOnError,
111+
showOnSuccess: showOnSuccess
112+
};
113+
};
114+
98115
var component = function component(_ref) {
99116
var _ref$tabIndex = _ref.tabIndex,
100117
tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
@@ -130,6 +147,8 @@ var component = function component(_ref) {
130147
customStyleContainer = _ref$customStyleConta === void 0 ? {} : _ref$customStyleConta,
131148
_ref$validationOption = _ref.validationOption,
132149
validationOption = _ref$validationOption === void 0 ? {} : _ref$validationOption,
150+
_ref$asyncMsgObj = _ref.asyncMsgObj,
151+
asyncMsgObj = _ref$asyncMsgObj === void 0 ? {} : _ref$asyncMsgObj,
133152
_ref$onChange = _ref.onChange,
134153
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
135154
_ref$onBlur = _ref.onBlur,
@@ -163,6 +182,7 @@ var component = function component(_ref) {
163182

164183
var prevInternalChecked = (0, _const.usePrevious)(internalChecked);
165184
var option = getDefaultValidationOption(validationOption);
185+
var asyncObj = getDefaultAsyncObj(asyncMsgObj);
166186
var $input = useRef(null);
167187
var $el = $input;
168188
var handleOnBlur = useCallback(function (e) {
@@ -264,6 +284,19 @@ var component = function component(_ref) {
264284
check();
265285
}
266286
}, [prevInternalChecked, internalChecked]);
287+
useEffect(function () {
288+
if (asyncObj) {
289+
if (asyncObj.message) {
290+
if (asyncObj.showOnError) {
291+
handleCheckEnd(asyncObj.error, asyncObj.message);
292+
}
293+
294+
if (!asyncObj.error && asyncObj.showOnSuccess) {
295+
setSuccessMsg(asyncObj.message);
296+
}
297+
}
298+
}
299+
}, [asyncMsgObj]);
267300
var wrapperClass = "".concat(_const.WRAPPER_CLASS_IDENTITIFIER, " ").concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
268301
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
269302
var boxClass = "".concat(classNameInputBox, " ").concat(reactInputsValidationCss["".concat(TYPE, "__box")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);

‎lib/components/Radiobox.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,23 @@ var getDefaultValidationOption = function getDefaultValidationOption(obj) {
9595
};
9696
};
9797

98+
var getDefaultAsyncObj = function getDefaultAsyncObj(obj) {
99+
var error = obj.error,
100+
message = obj.message,
101+
showOnError = obj.showOnError,
102+
showOnSuccess = obj.showOnSuccess;
103+
error = typeof error !== 'undefined' ? error : false;
104+
message = typeof message !== 'undefined' ? message : '';
105+
showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
106+
showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
107+
return {
108+
error: error,
109+
message: message,
110+
showOnError: showOnError,
111+
showOnSuccess: showOnSuccess
112+
};
113+
};
114+
98115
var isValidValue = function isValidValue(list, value) {
99116
var res = false;
100117

@@ -145,6 +162,8 @@ var component = function component(_ref) {
145162
customStyleOptionListItem = _ref$customStyleOptio === void 0 ? {} : _ref$customStyleOptio,
146163
_ref$validationOption = _ref.validationOption,
147164
validationOption = _ref$validationOption === void 0 ? {} : _ref$validationOption,
165+
_ref$asyncMsgObj = _ref.asyncMsgObj,
166+
asyncMsgObj = _ref$asyncMsgObj === void 0 ? {} : _ref$asyncMsgObj,
148167
_ref$onChange = _ref.onChange,
149168
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
150169
_ref$onBlur = _ref.onBlur,
@@ -178,6 +197,7 @@ var component = function component(_ref) {
178197

179198
var prevInternalValue = (0, _const.usePrevious)(internalValue);
180199
var option = getDefaultValidationOption(validationOption);
200+
var asyncObj = getDefaultAsyncObj(asyncMsgObj);
181201
var $input = useRef(null);
182202
var $el = $input;
183203
var handleOnBlur = useCallback(function (e) {
@@ -278,6 +298,19 @@ var component = function component(_ref) {
278298
check();
279299
}
280300
}, [prevInternalValue, internalValue]);
301+
useEffect(function () {
302+
if (asyncObj) {
303+
if (asyncObj.message) {
304+
if (asyncObj.showOnError) {
305+
handleCheckEnd(asyncObj.error, asyncObj.message);
306+
}
307+
308+
if (!asyncObj.error && asyncObj.showOnSuccess) {
309+
setSuccessMsg(asyncObj.message);
310+
}
311+
}
312+
}
313+
}, [asyncMsgObj]);
281314
var wrapperClass = "".concat(_const.WRAPPER_CLASS_IDENTITIFIER, " ").concat(classNameWrapper, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(disabled && reactInputsValidationCss['disabled']);
282315
var containerClass = "".concat(classNameContainer, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(disabled && reactInputsValidationCss['disabled']);
283316
var inputClass = "".concat(classNameInput, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(disabled && reactInputsValidationCss['disabled']);

‎lib/components/Select.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,23 @@ var getDefaultValidationOption = function getDefaultValidationOption(obj) {
111111
};
112112
};
113113

114+
var getDefaultAsyncObj = function getDefaultAsyncObj(obj) {
115+
var error = obj.error,
116+
message = obj.message,
117+
showOnError = obj.showOnError,
118+
showOnSuccess = obj.showOnSuccess;
119+
error = typeof error !== 'undefined' ? error : false;
120+
message = typeof message !== 'undefined' ? message : '';
121+
showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
122+
showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
123+
return {
124+
error: error,
125+
message: message,
126+
showOnError: showOnError,
127+
showOnSuccess: showOnSuccess
128+
};
129+
};
130+
114131
var isValidValue = function isValidValue(list, value) {
115132
var res = false;
116133

@@ -205,6 +222,8 @@ var component = function component(_ref) {
205222
customStyleDropdownIcon = _ref$customStyleDropd === void 0 ? {} : _ref$customStyleDropd,
206223
_ref$validationOption = _ref.validationOption,
207224
validationOption = _ref$validationOption === void 0 ? {} : _ref$validationOption,
225+
_ref$asyncMsgObj = _ref.asyncMsgObj,
226+
asyncMsgObj = _ref$asyncMsgObj === void 0 ? {} : _ref$asyncMsgObj,
208227
_ref$selectHtml = _ref.selectHtml,
209228
selectHtml = _ref$selectHtml === void 0 ? null : _ref$selectHtml,
210229
_ref$selectOptionList = _ref.selectOptionListItemHtml,
@@ -260,6 +279,7 @@ var component = function component(_ref) {
260279
setKeycodeList = _useState14[1];
261280

262281
var option = getDefaultValidationOption(validationOption);
282+
var asyncObj = getDefaultAsyncObj(asyncMsgObj);
263283
var $wrapper = useRef(null);
264284
var $itemsWrapper = useRef(null);
265285
var $elWrapper = $wrapper;
@@ -596,6 +616,19 @@ var component = function component(_ref) {
596616
check();
597617
}
598618
}, [prevInternalValue, internalValue]);
619+
useEffect(function () {
620+
if (asyncObj) {
621+
if (asyncObj.message) {
622+
if (asyncObj.showOnError) {
623+
handleCheckEnd(asyncObj.error, asyncObj.message);
624+
}
625+
626+
if (!asyncObj.error && asyncObj.showOnSuccess) {
627+
setSuccessMsg(asyncObj.message);
628+
}
629+
}
630+
}
631+
}, [asyncMsgObj]);
599632
var wrapperClass = "".concat(_const.WRAPPER_CLASS_IDENTITIFIER, " ").concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
600633
var containerClass = "".concat(_const.CONTAINER_CLASS_IDENTITIFIER, " ").concat(classNameContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(show && reactInputsValidationCss['show'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
601634
var inputClass = "".concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);

‎lib/components/Textarea.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,23 @@ var getDefaultValidationOption = function getDefaultValidationOption(obj) {
126126
};
127127
};
128128

129+
var getDefaultAsyncObj = function getDefaultAsyncObj(obj) {
130+
var error = obj.error,
131+
message = obj.message,
132+
showOnError = obj.showOnError,
133+
showOnSuccess = obj.showOnSuccess;
134+
error = typeof error !== 'undefined' ? error : false;
135+
message = typeof message !== 'undefined' ? message : '';
136+
showOnError = typeof showOnError !== 'undefined' ? showOnError : true;
137+
showOnSuccess = typeof showOnSuccess !== 'undefined' ? showOnSuccess : false;
138+
return {
139+
error: error,
140+
message: message,
141+
showOnError: showOnError,
142+
showOnSuccess: showOnSuccess
143+
};
144+
};
145+
129146
var component = function component(_ref) {
130147
var _ref$tabIndex = _ref.tabIndex,
131148
tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
@@ -161,6 +178,8 @@ var component = function component(_ref) {
161178
customStyleContainer = _ref$customStyleConta === void 0 ? {} : _ref$customStyleConta,
162179
_ref$validationOption = _ref.validationOption,
163180
validationOption = _ref$validationOption === void 0 ? {} : _ref$validationOption,
181+
_ref$asyncMsgObj = _ref.asyncMsgObj,
182+
asyncMsgObj = _ref$asyncMsgObj === void 0 ? {} : _ref$asyncMsgObj,
164183
_ref$onChange = _ref.onChange,
165184
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
166185
_ref$onBlur = _ref.onBlur,
@@ -196,6 +215,7 @@ var component = function component(_ref) {
196215

197216
var prevInternalValue = (0, _const.usePrevious)(internalValue);
198217
var option = getDefaultValidationOption(validationOption);
218+
var asyncObj = getDefaultAsyncObj(asyncMsgObj);
199219
var $input = useRef(null);
200220
var $el = $input;
201221
var handleOnBlur = useCallback(function (e) {
@@ -370,6 +390,19 @@ var component = function component(_ref) {
370390
useEffect(function () {
371391
setInternalValue(String(value));
372392
}, [value]);
393+
useEffect(function () {
394+
if (asyncObj) {
395+
if (asyncObj.message) {
396+
if (asyncObj.showOnError) {
397+
handleCheckEnd(asyncObj.error, asyncObj.message);
398+
}
399+
400+
if (!asyncObj.error && asyncObj.showOnSuccess) {
401+
setSuccessMsg(asyncObj.message);
402+
}
403+
}
404+
}
405+
}, [asyncMsgObj]);
373406
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
374407
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
375408
var inputClass = "".concat(classNameInput, " ").concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);

0 commit comments

Comments
 (0)