1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 22:20:06 +02:00

updating radio group component

This commit is contained in:
Alex Windett 2016-12-13 11:01:18 +00:00
parent e490935153
commit 458d792a17
4 changed files with 62 additions and 16 deletions

View File

@ -19,7 +19,7 @@ const RadioGroup = React.createClass({
children: React.PropTypes.node, children: React.PropTypes.node,
className: React.PropTypes.string, className: React.PropTypes.string,
id: React.PropTypes.string, id: React.PropTypes.string,
name: React.PropTypes.string.isRequired, name: React.PropTypes.string,
onChange: React.PropTypes.func, onChange: React.PropTypes.func,
style: React.PropTypes.object style: React.PropTypes.object
}, },
@ -105,6 +105,7 @@ const RadioGroup = React.createClass({
const tabIndex = i + 1; const tabIndex = i + 1;
const disabled = get(child, 'props.disabled'); const disabled = get(child, 'props.disabled');
const value = get(child, 'props.value'); const value = get(child, 'props.value');
const itemContent = get(child, 'props.children');
const _handleChange = (!hasChecked && !disabled) const _handleChange = (!hasChecked && !disabled)
? handleChange(value) ? handleChange(value)
@ -129,6 +130,7 @@ const RadioGroup = React.createClass({
<Item <Item
checked={_checked} checked={_checked}
disabled={disabled} disabled={disabled}
itemContent={itemContent}
onClick={_handleChange} onClick={_handleChange}
tabIndex={tabIndex} tabIndex={tabIndex}
> >

View File

@ -1,31 +1,74 @@
const classNames = require('classnames');
const React = require('react'); const React = require('react');
const styles = require('./style.css'); // const composers = require('../../shared/composers');
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
// const {
// verticallyAlignCenter
// } = composers;
const {
remcalc
} = fns;
const {
boxes
} = constants;
const {
default: styled
} = Styled;
const RadioItem = styled.div`
background: #FFFFFF;
border: ${boxes.border.unchecked};
cursor: pointer;
flaot: left;
margin-bottom: ${remcalc(15)};
padding: ${remcalc(25)};
outline: none;
&:last-child {
margin-bottom: initial;
}
&[aria-checked="true"] {
border: ${boxes.border.checked};
box-shadow: ${remcalc(boxes.borderRadius)};
}
&.disabled {
cursor: default;
}
`;
const ItemContent = styled.div`
display: block;
float: left;
`;
const Item = ({ const Item = ({
children, children,
checked = false, checked = false,
itemContent = '',
disabled = false, disabled = false,
onClick, onClick,
tabIndex tabIndex
}) => { }) => {
const cn = classNames(
styles.item,
disabled ? styles.disabled : '',
checked ? styles.checked : ''
);
return ( return (
<div <RadioItem
aria-checked={checked} aria-checked={checked}
aria-disabled={disabled} aria-disabled={disabled}
className={cn}
onClick={onClick} onClick={onClick}
role='radio' role='radio'
tabIndex={tabIndex} tabIndex={tabIndex}
> >
{children} {children}
</div> <ItemContent>
{itemContent}
</ItemContent>
</RadioItem>
); );
}; };
@ -33,6 +76,7 @@ Item.propTypes = {
checked: React.PropTypes.bool, checked: React.PropTypes.bool,
children: React.PropTypes.node, children: React.PropTypes.node,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
itemContent: React.PropTypes.node,
onClick: React.PropTypes.func, onClick: React.PropTypes.func,
tabIndex: React.PropTypes.number tabIndex: React.PropTypes.number
}; };

View File

@ -121,7 +121,7 @@ Radio.propTypes = {
form: React.PropTypes.string, form: React.PropTypes.string,
id: React.PropTypes.string, id: React.PropTypes.string,
label: React.PropTypes.string, label: React.PropTypes.string,
name: React.PropTypes.string.isRequired, name: React.PropTypes.string,
onChange: React.PropTypes.func, onChange: React.PropTypes.func,
readOnly: React.PropTypes.bool, readOnly: React.PropTypes.bool,
required: React.PropTypes.bool, required: React.PropTypes.bool,

View File

@ -203,13 +203,13 @@ storiesOf('Pagination', module)
storiesOf('Radio Group', module) storiesOf('Radio Group', module)
.add('Default', () => ( .add('Default', () => (
<RadioGroup> <RadioGroup>
<Radio value='default'> <Radio name='hello' value='default'>
Video killed the radio star Video killed the radio star
</Radio> </Radio>
<Radio value='fancy'> <Radio name='hello' value='fancy'>
Video killed the radio star Video killed the radio star
</Radio> </Radio>
<Radio value='none'> <Radio name='hello' value='none'>
Video killed the radio star Video killed the radio star
</Radio> </Radio>
</RadioGroup> </RadioGroup>