Skip to content

Commit b82f5eb

Browse files
author
Edward Xiao
committed
- Make <Checkbox/> props checked controlled by outer.
1 parent 3629833 commit b82f5eb

17 files changed

+79
-74
lines changed

‎example/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import { Textbox } from 'react-inputs-validation';
6868
tabIndex="1" // Optional.[String or Number].Default: -1.
6969
id={'Number'} // Optional.[String].Default: "". Input ID.
7070
name="Number" // Optional.[String].Default: "". Input name.
71-
type="number" // Optional.[String].Default: "text". Input type [text, password, number].
71+
type="text" // Optional.[String].Default: "text". Input type [text, password, number]. NOTE: provide "text" for better performance since different browsers run differently with "number".
7272
value={number} // Optional.[String].Default: "".
7373
placeholder="Place your number here ^-^" // Optional.[String].Default: "".
7474
onChange={(number, e) => {
@@ -639,7 +639,7 @@ class Index extends Component {
639639
tabIndex="1" // Optional.[String or Number].Default: -1.
640640
id={'Number'} // Optional.[String].Default: "". Input ID.
641641
name="Number" // Optional.[String].Default: "". Input name.
642-
type="number" // Optional.[String].Default: "text". Input type [text, password, number].
642+
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
643643
value={number} // Optional.[String].Default: "".
644644
placeholder="Place your number here ^-^" // Optional.[String].Default: "".
645645
onChange={(number, e) => {
@@ -719,6 +719,7 @@ class Index extends Component {
719719
tabIndex="5" // Optional.[String or Number].Default: -1.
720720
id={'agreement'} // Optional.[String].Default: "". Input ID.
721721
name={'agreement'} // Optional.[String].Default: "". Input name
722+
checked={isAgreementChecked} // Required.[Bool].Default: false.
722723
value={agreement} // Required.[String].Default: "".
723724
onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
724725
onChange={(isAgreementChecked, e) => {
@@ -959,7 +960,7 @@ class Index extends Component {
959960
id={'agreement'} // Optional.[String].Default: "". Input ID.
960961
name={'agreement'} // Optional.[String].Default: "". Input name
961962
value={agreement} // Required.[String].Default: "".
962-
checked={false} // Required.[Bool].Default: false.
963+
checked={isAgreementChecked} // Required.[Bool].Default: false.
963964
disabled={false} // Optional.[Bool].Default: false.
964965
validate={validate} // Optional.[Bool].Default: false. If you have a submit button and trying to validate all the inputs of your form at onece, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.
965966
validationCallback={res => {

‎lib/components/Checkbox.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -280,10 +280,10 @@ function (_React$Component) {
280280
msg = _this$state.msg,
281281
checked = _this$state.checked,
282282
successMsg = _this$state.successMsg;
283-
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['checkbox__wrapper'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
284-
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['checkbox__container'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
285-
var boxClass = "".concat(classNameInputBox, " ").concat(reactInputsValidationCss['checkbox__box'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
286-
var labelClass = "".concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
283+
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['checkbox__wrapper'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
284+
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['checkbox__container'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
285+
var boxClass = "".concat(classNameInputBox, " ").concat(reactInputsValidationCss['checkbox__box'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(checked && reactInputsValidationCss['checked'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
286+
var labelClass = "".concat(checked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
287287
var errMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
288288
var successMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
289289
var msgHtml;
@@ -297,7 +297,7 @@ function (_React$Component) {
297297
}, msg);
298298
}
299299

300-
if (showMsg && !err && successMsg) {
300+
if (showMsg && !err && typeof successMsg !== 'undefined') {
301301
msgHtml = React.createElement("div", {
302302
className: successMsgClass
303303
}, successMsg);
@@ -324,7 +324,7 @@ function (_React$Component) {
324324
type: "checkbox",
325325
className: reactInputsValidationCss['checkbox__input'],
326326
value: String(value),
327-
checked: checked,
327+
defaultChecked: checked,
328328
disabled: disabled,
329329
onChange: this.onChange,
330330
ref: this.input
@@ -335,16 +335,18 @@ function (_React$Component) {
335335
}], [{
336336
key: "getDerivedStateFromProps",
337337
value: function getDerivedStateFromProps(nextProps, prevState) {
338-
// TODO: This was from componentWillReceiveProps()
339-
// if (this.props.checked != nextProps.checked) {
340-
// this.setState({ checked: nextProps.checked });
341-
// }
342338
if (nextProps.validate === true && prevState.validate === false) {
343339
return {
344340
validate: nextProps.validate
345341
};
346342
}
347343

344+
if (nextProps.checked !== prevState.checked) {
345+
return {
346+
checked: nextProps.checked
347+
};
348+
}
349+
348350
return null;
349351
}
350352
}]);

‎lib/components/Radiobox.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -268,11 +268,11 @@ function (_React$Component) {
268268
err = _this$state.err,
269269
msg = _this$state.msg,
270270
successMsg = _this$state.successMsg;
271-
var wrapperClass = "".concat(classNameWrapper, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__wrapper'], " ").concat(disabled && reactInputsValidationCss['disabled']);
272-
var containerClass = "".concat(classNameContainer, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__container'], " ").concat(disabled && reactInputsValidationCss['disabled']);
273-
var inputClass = "".concat(classNameInput, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__input'], " ").concat(disabled && reactInputsValidationCss['disabled']);
274-
var labelClass = "".concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__label'], " ").concat(disabled && reactInputsValidationCss['disabled']);
275-
var optionListItemClass = "".concat(classNameOptionListItem, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__item'], " ").concat(disabled && reactInputsValidationCss['disabled']);
271+
var wrapperClass = "".concat(classNameWrapper, " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__wrapper'], " ").concat(disabled && reactInputsValidationCss['disabled']);
272+
var containerClass = "".concat(classNameContainer, " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__container'], " ").concat(disabled && reactInputsValidationCss['disabled']);
273+
var inputClass = "".concat(classNameInput, " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__input'], " ").concat(disabled && reactInputsValidationCss['disabled']);
274+
var labelClass = "".concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__label'], " ").concat(disabled && reactInputsValidationCss['disabled']);
275+
var optionListItemClass = "".concat(classNameOptionListItem, " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss['radiobox__item'], " ").concat(disabled && reactInputsValidationCss['disabled']);
276276
var errMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
277277
var successMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
278278
var msgHtml;
@@ -286,7 +286,7 @@ function (_React$Component) {
286286
}, msg);
287287
}
288288

289-
if (showMsg && !err && successMsg) {
289+
if (showMsg && !err && typeof successMsg !== 'undefined') {
290290
msgHtml = React.createElement("div", {
291291
className: successMsgClass
292292
}, successMsg);

‎lib/components/Select.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -617,12 +617,12 @@ function (_React$Component) {
617617
show = _this$state2.show,
618618
successMsg = _this$state2.successMsg,
619619
isTyping = _this$state2.isTyping;
620-
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['select__wrapper'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
621-
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['select__container'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(show && reactInputsValidationCss['show'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
622-
var inputClass = "".concat(reactInputsValidationCss['select__input'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
623-
var selectClass = "".concat(classNameSelect, " ").concat(reactInputsValidationCss['ellipsis'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
624-
var selectOptionListContainerClass = "".concat(classNameOptionListContainer, " ").concat(reactInputsValidationCss['select__options-container'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(show && reactInputsValidationCss['show'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
625-
var selectOptionListItemClass = "".concat(!isTyping && reactInputsValidationCss['select__options-item-show-cursor'], " ").concat(classNameOptionListItem, " ").concat(reactInputsValidationCss['select__options-item'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
620+
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['select__wrapper'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
621+
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['select__container'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(show && reactInputsValidationCss['show'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
622+
var inputClass = "".concat(reactInputsValidationCss['select__input'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
623+
var selectClass = "".concat(classNameSelect, " ").concat(reactInputsValidationCss['ellipsis'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
624+
var selectOptionListContainerClass = "".concat(classNameOptionListContainer, " ").concat(reactInputsValidationCss['select__options-container'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(show && reactInputsValidationCss['show'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
625+
var selectOptionListItemClass = "".concat(!isTyping && reactInputsValidationCss['select__options-item-show-cursor'], " ").concat(classNameOptionListItem, " ").concat(reactInputsValidationCss['select__options-item'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled'], ";");
626626
var dropdownIconClass = "".concat(classNameDropdownIconOptionListItem, " ").concat(reactInputsValidationCss['select__dropdown-icon']);
627627
var errMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
628628
var successMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
@@ -637,7 +637,7 @@ function (_React$Component) {
637637
}, msg);
638638
}
639639

640-
if (showMsg && !err && successMsg) {
640+
if (showMsg && !err && typeof successMsg !== 'undefined') {
641641
msgHtml = React.createElement("div", {
642642
className: successMsgClass
643643
}, successMsg);

‎lib/components/Textarea.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -382,9 +382,9 @@ function (_React$Component) {
382382
err = _this$state.err,
383383
msg = _this$state.msg,
384384
successMsg = _this$state.successMsg;
385-
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['textarea__wrapper'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
386-
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['textarea__container'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
387-
var inputClass = "".concat(classNameInput, " ").concat(reactInputsValidationCss['textarea__input'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
385+
var wrapperClass = "".concat(classNameWrapper, " ").concat(reactInputsValidationCss['textarea__wrapper'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
386+
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss['textarea__container'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
387+
var inputClass = "".concat(classNameInput, " ").concat(reactInputsValidationCss['textarea__input'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
388388
var errmsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
389389
var successMsgClass = "".concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
390390
var msgHtml;
@@ -398,7 +398,7 @@ function (_React$Component) {
398398
}, msg);
399399
}
400400

401-
if (showMsg && !err && successMsg) {
401+
if (showMsg && !err && typeof successMsg !== 'undefined') {
402402
msgHtml = React.createElement("div", {
403403
className: successMsgClass
404404
}, successMsg);

0 commit comments

Comments
 (0)