Web: components: RadioButtonGroup: rename props
This commit is contained in:
parent
3136c99e6b
commit
3c8b01e29e
@ -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;
|
||||
|
@ -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'
|
||||
|
@ -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`
|
||||
|
@ -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={
|
||||
[
|
||||
|
Loading…
Reference in New Issue
Block a user