1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +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,
className: React.PropTypes.string,
id: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
style: React.PropTypes.object
},
@ -105,6 +105,7 @@ const RadioGroup = React.createClass({
const tabIndex = i + 1;
const disabled = get(child, 'props.disabled');
const value = get(child, 'props.value');
const itemContent = get(child, 'props.children');
const _handleChange = (!hasChecked && !disabled)
? handleChange(value)
@ -129,6 +130,7 @@ const RadioGroup = React.createClass({
<Item
checked={_checked}
disabled={disabled}
itemContent={itemContent}
onClick={_handleChange}
tabIndex={tabIndex}
>

View File

@ -1,31 +1,74 @@
const classNames = require('classnames');
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 = ({
children,
checked = false,
itemContent = '',
disabled = false,
onClick,
tabIndex
}) => {
const cn = classNames(
styles.item,
disabled ? styles.disabled : '',
checked ? styles.checked : ''
);
return (
<div
<RadioItem
aria-checked={checked}
aria-disabled={disabled}
className={cn}
onClick={onClick}
role='radio'
tabIndex={tabIndex}
>
{children}
</div>
<ItemContent>
{itemContent}
</ItemContent>
</RadioItem>
);
};
@ -33,6 +76,7 @@ Item.propTypes = {
checked: React.PropTypes.bool,
children: React.PropTypes.node,
disabled: React.PropTypes.bool,
itemContent: React.PropTypes.node,
onClick: React.PropTypes.func,
tabIndex: React.PropTypes.number
};

View File

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

View File

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