-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(CustomInput): add custom checkboxes/radios (#985)
- Loading branch information
1 parent
539d35d
commit 312e729
Showing
8 changed files
with
184 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React from 'react'; | ||
import { CustomCheckbox, CustomRadio, Form, FormGroup, Label } from 'reactstrap'; | ||
|
||
export default class Example extends React.Component { | ||
render() { | ||
return ( | ||
<Form> | ||
<FormGroup> | ||
<Label for="exampleCheckbox">Checkboxes</Label> | ||
<div> | ||
<CustomCheckbox id="exampleCustomCheckbox" description="Check this custom checkbox" /> | ||
<CustomCheckbox id="exampleCustomCheckbox2" description="Or this one" /> | ||
<CustomCheckbox id="exampleCustomCheckbox3" description="But not this disabled one" disabled /> | ||
</div> | ||
</FormGroup> | ||
<FormGroup> | ||
<Label for="exampleCheckbox">Radios</Label> | ||
<div> | ||
<CustomRadio id="exampleCustomRadio" name="customRadio" description="Select this custom radio" /> | ||
<CustomRadio id="exampleCustomRadio2" name="customRadio" description="Or this one" /> | ||
<CustomRadio id="exampleCustomRadio3" description="But not this disabled one" disabled /> | ||
</div> | ||
</FormGroup> | ||
<FormGroup> | ||
<Label for="exampleCheckbox">Inline</Label> | ||
<div> | ||
<CustomCheckbox id="exampleCustomInline" description="An inline custom input" inline /> | ||
<CustomCheckbox id="exampleCustomInline2" description="and another one" inline /> | ||
</div> | ||
</FormGroup> | ||
</Form> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react'; | ||
|
||
import CustomCheckboxOrRadio from './CustomCheckboxOrRadio'; | ||
|
||
function CustomCheckbox(props) { | ||
return <CustomCheckboxOrRadio {...props} type="checkbox" />; | ||
} | ||
|
||
export default CustomCheckbox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
import { mapToCssModules } from './utils'; | ||
|
||
const propTypes = { | ||
className: PropTypes.string, | ||
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, | ||
type: PropTypes.string.isRequired, | ||
description: PropTypes.string, | ||
inline: PropTypes.bool, | ||
cssModule: PropTypes.object, | ||
children: PropTypes.oneOfType(PropTypes.node, PropTypes.array, PropTypes.func) | ||
}; | ||
|
||
function CustomCheckboxOrRadio(props) { | ||
const { | ||
className, | ||
id, | ||
description, | ||
type, | ||
inline, | ||
cssModule, | ||
children, | ||
...attributes | ||
} = props; | ||
|
||
const classes = mapToCssModules(classNames( | ||
className, | ||
'custom-control', | ||
`custom-${type}`, | ||
{ 'custom-control-inline': inline } | ||
), cssModule); | ||
|
||
return ( | ||
<div className={classes}> | ||
<input | ||
{...attributes} | ||
id={id} | ||
type={type} | ||
className="custom-control-input" | ||
/> | ||
<label className="custom-control-label" htmlFor={id}>{description}</label> | ||
{children} | ||
</div> | ||
); | ||
} | ||
|
||
CustomCheckboxOrRadio.propTypes = propTypes; | ||
|
||
export default CustomCheckboxOrRadio; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react'; | ||
|
||
import CustomCheckboxOrRadio from './CustomCheckboxOrRadio'; | ||
|
||
function CustomRadio(props) { | ||
return <CustomCheckboxOrRadio {...props} type="radio" />; | ||
} | ||
|
||
export default CustomRadio; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { CustomCheckbox } from '../'; | ||
|
||
describe('CustomCheckbox', () => { | ||
it('should render an optional description', () => { | ||
const checkbox = mount(<CustomCheckbox description="Yo!" />); | ||
expect(checkbox.find('label').text()).toBe('Yo!'); | ||
}); | ||
|
||
it('should render children in the outer div', () => { | ||
const checkbox = mount(<CustomCheckbox><h1>Yo!</h1></CustomCheckbox>); | ||
expect(checkbox.find('h1').parent().type()).toBe('div'); | ||
}); | ||
|
||
it('should pass id to both the input and label nodes', () => { | ||
const checkbox = mount(<CustomCheckbox id="yo" />); | ||
expect(checkbox.find('input').prop('id')).toBe('yo'); | ||
expect(checkbox.find('label').prop('htmlFor')).toBe('yo'); | ||
}); | ||
|
||
it('should pass classNames to the outer div', () => { | ||
const checkbox = mount(<CustomCheckbox className="yo" />); | ||
expect(checkbox.find('.custom-control').prop('className')).toBe( | ||
'yo custom-control custom-checkbox'); | ||
}); | ||
|
||
it('should pass all other props to the input node', () => { | ||
const checkbox = mount(<CustomCheckbox data-testprop="yo" />); | ||
expect(checkbox.find('input').prop('data-testprop')).toBe('yo'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { CustomRadio } from '../'; | ||
|
||
describe('CustomRadio', () => { | ||
it('should render an optional description', () => { | ||
const radio = mount(<CustomRadio description="Yo!" />); | ||
expect(radio.find('label').text()).toBe('Yo!'); | ||
}); | ||
|
||
it('should render children in the outer div', () => { | ||
const radio = mount(<CustomRadio><h1>Yo!</h1></CustomRadio>); | ||
expect(radio.find('h1').parent().type()).toBe('div'); | ||
}); | ||
|
||
it('should pass id to both the input and label nodes', () => { | ||
const radio = mount(<CustomRadio id="yo" />); | ||
expect(radio.find('input').prop('id')).toBe('yo'); | ||
expect(radio.find('label').prop('htmlFor')).toBe('yo'); | ||
}); | ||
|
||
it('should pass classNames to the outer div', () => { | ||
const radio = mount(<CustomRadio className="yo" />); | ||
expect(radio.find('.custom-control').prop('className')).toBe( | ||
'yo custom-control custom-radio'); | ||
}); | ||
|
||
it('should pass all other props to the input node', () => { | ||
const radio = mount(<CustomRadio data-testprop="yo" />); | ||
expect(radio.find('input').prop('data-testprop')).toBe('yo'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters