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:
parent
e490935153
commit
458d792a17
@ -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}
|
||||
>
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user