Web: components: RadioButtonGroup: rename props

This commit is contained in:
Daniil Senkiv 2019-07-26 12:42:30 +03:00
parent 3136c99e6b
commit 3c8b01e29e
4 changed files with 12 additions and 12 deletions

View File

@ -47,9 +47,9 @@ class RadioButtonGroup extends React.Component {
this.props.onClick && this.props.onClick(e);
}}
disabled={this.props.isDisabledGroup || option.disabled}
disabled={this.props.isDisabled || option.disabled}
label={option.label}
radiobuttonSpacing={this.props.radiobuttonSpacing}
spacing={this.props.spacing}
/>
)
}
@ -61,7 +61,7 @@ class RadioButtonGroup extends React.Component {
};
RadioButtonGroup.propTypes = {
isDisabledGroup: PropTypes.bool,
isDisabled: PropTypes.bool,
name: PropTypes.string.isRequired,
onClick: PropTypes.func,
options: PropTypes.arrayOf(PropTypes.shape({
@ -70,13 +70,13 @@ RadioButtonGroup.propTypes = {
disabled: PropTypes.bool
})).isRequired,
selected: PropTypes.string.isRequired,
radiobuttonSpacing: PropTypes.number
spacing: PropTypes.number
}
RadioButtonGroup.defaultProps = {
isDisabledGroup: false,
isDisabled: false,
selected: undefined,
radiobuttonSpacing: 33
spacing: 33
}
export default RadioButtonGroup;

View File

@ -84,7 +84,7 @@ const StyledText = styled(TextBody)`
const StyledSpan = styled.span`
&:not(:first-child) {
margin-left: ${props => props.radiobuttonSpacing}px;
margin-left: ${props => props.spacing}px;
}
`;
@ -96,7 +96,7 @@ class RadioButton extends React.Component {
(this.props.disabled ? ' disabled' : '');
return (
<StyledSpan radiobuttonSpacing={this.props.radiobuttonSpacing}>
<StyledSpan spacing={this.props.spacing}>
<Label>
<span>
<Input type='radio'

View File

@ -30,8 +30,8 @@ import { RadioButtonGroup } from 'asc-web-components';
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton
| `options` | `arrayOf` | ✅ | - | - | Radiobuttons data: it is array of objects, each of this can include next information: `value` (required), `label`, `disabled`
| `radiobuttonSpacing` | `number` | - | - | 33 | Margin (in px) between radiobuttons
| `isDisabledGroup` | `bool` | - | - | `false` | Disabling all radiobuttons in group
| `spacing` | `number` | - | - | 33 | Margin (in px) between radiobuttons
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobuttons in group
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on radiobuttons
#### Prop `options`

View File

@ -17,9 +17,9 @@ storiesOf('Components|Input', module)
onClick={e => {
console.log('Value of selected radiobutton: ', e.target.value);
}}
isDisabledGroup={boolean('isDisabledGroup', false)}
isDisabled={boolean('isDisabled', false)}
selected={text('selected radio button(value)', 'second')}
radiobuttonSpacing={number('radiobuttonSpacing', 33)}
spacing={number('spacing', 33)}
name={text('name of your group', 'group')}
options={
[