Skip to content

Commit

Permalink
- Make <Checkbox/> props checked controlled by outter
Browse files Browse the repository at this point in the history
  • Loading branch information
Edward Xiao committed Jan 16, 2019
1 parent 2ab0f91 commit 16b0a9c
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 32 deletions.
3 changes: 2 additions & 1 deletion example/index.js
View file
Expand Up @@ -719,6 +719,7 @@ class Index extends Component {
tabIndex="5" // Optional.[String or Number].Default: -1.
id={'agreement'} // Optional.[String].Default: "". Input ID.
name={'agreement'} // Optional.[String].Default: "". Input name
checked={isAgreementChecked} // Required.[Bool].Default: false.
value={agreement} // Required.[String].Default: "".
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.
onChange={(isAgreementChecked, e) => {
Expand Down Expand Up @@ -959,7 +960,7 @@ class Index extends Component {
id={'agreement'} // Optional.[String].Default: "". Input ID.
name={'agreement'} // Optional.[String].Default: "". Input name
value={agreement} // Required.[String].Default: "".
checked={false} // Required.[Bool].Default: false.
checked={isAgreementChecked} // Required.[Bool].Default: false.
disabled={false} // Optional.[Bool].Default: false.
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.
validationCallback={res => {
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/Checkbox.js
View file
Expand Up @@ -136,6 +136,7 @@ describe('Checkbox component', () => {
it('[successMsg]: Should setState successMsg to msgOnSuccess', () => {
const wrapper = mount(
<Checkbox
checked={true}
onBlur={() => {}}
validationOption={{
msgOnSuccess: 'msgOnSuccess',
Expand Down
21 changes: 11 additions & 10 deletions src/js/Inputs/Checkbox.tsx
View file
Expand Up @@ -127,15 +127,16 @@ class Index extends React.Component<Props, State> {
this.input = React.createRef();
}
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
// TODO: This was from componentWillReceiveProps()
// if (this.props.checked != nextProps.checked) {
// this.setState({ checked: nextProps.checked });
// }
if (nextProps.validate === true && prevState.validate === false) {
return {
validate: nextProps.validate,
};
}
if (nextProps.checked !== prevState.checked) {
return {
checked: nextProps.checked,
};
}
return null;
}
componentDidUpdate(prevProps: Props, prevState: State) {
Expand Down Expand Up @@ -237,16 +238,16 @@ class Index extends React.Component<Props, State> {
const { err, msg, checked, successMsg } = this.state;

const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['checkbox__wrapper']} ${checked && reactInputsValidationCss['checked']} ${err &&
reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const containerClass = `${classNameContainer} ${reactInputsValidationCss['checkbox__container']} ${checked && reactInputsValidationCss['checked']} ${err &&
reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;
reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const boxClass = `${classNameInputBox} ${reactInputsValidationCss['checkbox__box']} ${err && reactInputsValidationCss['error']} ${checked && reactInputsValidationCss['checked']} ${successMsg &&
const boxClass = `${classNameInputBox} ${reactInputsValidationCss['checkbox__box']} ${err && reactInputsValidationCss['error']} ${checked && reactInputsValidationCss['checked']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const labelClass = `${checked && reactInputsValidationCss['checked']} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled &&
const labelClass = `${checked && reactInputsValidationCss['checked']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled &&
reactInputsValidationCss['disabled']}`;

const errMsgClass = `${reactInputsValidationCss['msg']} ${err && reactInputsValidationCss['error']}`;
Expand All @@ -257,7 +258,7 @@ class Index extends React.Component<Props, State> {
if (showMsg && err && msg) {
msgHtml = <div className={errMsgClass}>{msg}</div>;
}
if (showMsg && !err && successMsg) {
if (showMsg && !err && typeof successMsg !== 'undefined') {
msgHtml = <div className={successMsgClass}>{successMsg}</div>;
}
return (
Expand All @@ -271,7 +272,7 @@ class Index extends React.Component<Props, State> {
type="checkbox"
className={reactInputsValidationCss['checkbox__input']}
value={String(value)}
checked={checked}
defaultChecked={checked}
disabled={disabled}
onChange={this.onChange}
ref={this.input}
Expand Down
12 changes: 6 additions & 6 deletions src/js/Inputs/Radiobox.tsx
View file
Expand Up @@ -245,22 +245,22 @@ class Index extends React.Component<Props, State> {

const { err, msg, successMsg } = this.state;

const wrapperClass = `${classNameWrapper} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${
const wrapperClass = `${classNameWrapper} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${
reactInputsValidationCss['radiobox__wrapper']
} ${disabled && reactInputsValidationCss['disabled']}`;

const containerClass = `${classNameContainer} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${
const containerClass = `${classNameContainer} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${
reactInputsValidationCss['radiobox__container']
} ${disabled && reactInputsValidationCss['disabled']}`;

const inputClass = `${classNameInput} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${
const inputClass = `${classNameInput} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${
reactInputsValidationCss['radiobox__input']
} ${disabled && reactInputsValidationCss['disabled']}`;

const labelClass = `${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${reactInputsValidationCss['radiobox__label']} ${disabled &&
const labelClass = `${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${reactInputsValidationCss['radiobox__label']} ${disabled &&
reactInputsValidationCss['disabled']}`;

const optionListItemClass = `${classNameOptionListItem} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${
const optionListItemClass = `${classNameOptionListItem} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${
reactInputsValidationCss['radiobox__item']
} ${disabled && reactInputsValidationCss['disabled']}`;

Expand All @@ -272,7 +272,7 @@ class Index extends React.Component<Props, State> {
if (showMsg && err && msg) {
msgHtml = <div className={errMsgClass}>{msg}</div>;
}
if (showMsg && !err && successMsg) {
if (showMsg && !err && typeof successMsg !== 'undefined') {
msgHtml = <div className={successMsgClass}>{successMsg}</div>;
}

Expand Down
14 changes: 7 additions & 7 deletions src/js/Inputs/Select.tsx
View file
Expand Up @@ -512,26 +512,26 @@ class Index extends React.Component<Props, State> {

const { value, err, msg, show, successMsg, isTyping } = this.state;

const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['select__wrapper']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['select__wrapper']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;

const containerClass = `${classNameContainer} ${reactInputsValidationCss['select__container']} ${err && reactInputsValidationCss['error']} ${show &&
reactInputsValidationCss['show']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;
reactInputsValidationCss['show']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;

const inputClass = `${reactInputsValidationCss['select__input']} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled &&
const inputClass = `${reactInputsValidationCss['select__input']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled &&
reactInputsValidationCss['disabled']};`;

const selectClass = `${classNameSelect} ${reactInputsValidationCss['ellipsis']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const selectClass = `${classNameSelect} ${reactInputsValidationCss['ellipsis']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;

const selectOptionListContainerClass = `${classNameOptionListContainer} ${reactInputsValidationCss['select__options-container']} ${err && reactInputsValidationCss['error']} ${show &&
reactInputsValidationCss['show']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;
reactInputsValidationCss['show']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;

const selectOptionListItemClass = `${!isTyping && reactInputsValidationCss['select__options-item-show-cursor']} ${classNameOptionListItem} ${
reactInputsValidationCss['select__options-item']
} ${err && reactInputsValidationCss['error']} ${successMsg && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;
} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' && !err && reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']};`;

const dropdownIconClass = `${classNameDropdownIconOptionListItem} ${reactInputsValidationCss['select__dropdown-icon']}`;

Expand All @@ -544,7 +544,7 @@ class Index extends React.Component<Props, State> {
if (showMsg && err && msg) {
msgHtml = <div className={errMsgClass}>{msg}</div>;
}
if (showMsg && !err && successMsg) {
if (showMsg && !err && typeof successMsg !== 'undefined') {
msgHtml = <div className={successMsgClass}>{successMsg}</div>;
}
let optionListHtml;
Expand Down
8 changes: 4 additions & 4 deletions src/js/Inputs/Textarea.tsx
View file
Expand Up @@ -325,15 +325,15 @@ class Index extends React.Component<Props, State> {

const { err, msg, successMsg } = this.state;

const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['textarea__wrapper']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['textarea__wrapper']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const containerClass = `${classNameContainer} ${reactInputsValidationCss['textarea__container']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const containerClass = `${classNameContainer} ${reactInputsValidationCss['textarea__container']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const inputClass = `${classNameInput} ${reactInputsValidationCss['textarea__input']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const inputClass = `${classNameInput} ${reactInputsValidationCss['textarea__input']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

Expand All @@ -345,7 +345,7 @@ class Index extends React.Component<Props, State> {
if (showMsg && err && msg) {
msgHtml = <div className={errmsgClass}>{msg}</div>;
}
if (showMsg && !err && successMsg) {
if (showMsg && !err && typeof successMsg !== 'undefined') {
msgHtml = <div className={successMsgClass}>{successMsg}</div>;
}
return (
Expand Down
8 changes: 4 additions & 4 deletions src/js/Inputs/Textbox.tsx
View file
Expand Up @@ -402,15 +402,15 @@ class Index extends React.Component<Props, State> {

const { err, msg, successMsg } = this.state;

const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['textbox__wrapper']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss['textbox__wrapper']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const containerClass = `${classNameContainer} ${reactInputsValidationCss['textbox__container']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const containerClass = `${classNameContainer} ${reactInputsValidationCss['textbox__container']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

const inputClass = `${classNameInput} ${reactInputsValidationCss['textbox__input']} ${err && reactInputsValidationCss['error']} ${successMsg &&
const inputClass = `${classNameInput} ${reactInputsValidationCss['textbox__input']} ${err && reactInputsValidationCss['error']} ${typeof successMsg !== 'undefined' &&
!err &&
reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;

Expand All @@ -422,7 +422,7 @@ class Index extends React.Component<Props, State> {
if (showMsg && err && msg) {
msgHtml = <div className={errmsgClass}>{msg}</div>;
}
if (showMsg && !err && successMsg) {
if (showMsg && !err && typeof successMsg !== 'undefined') {
msgHtml = <div className={successMsgClass}>{successMsg}</div>;
}
return (
Expand Down

0 comments on commit 16b0a9c

Please sign in to comment.