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