Web: components: RadioButtonGroup: added isDisabledGroup prop

This commit is contained in:
Daniil Senkiv 2019-07-26 10:42:21 +03:00
parent 8db94c83d3
commit 55f457fb87
3 changed files with 6 additions and 2 deletions

View File

@ -5,6 +5,7 @@ import styled from 'styled-components';
const StyledDiv = styled.div`
display: flex;
flex-wrap: wrap;
`;
class RadioButtonGroup extends React.Component {
@ -38,7 +39,7 @@ class RadioButtonGroup extends React.Component {
value={option.value}
checked={this.state.selectedOption === option.value}
onChange={this.handleOptionChange}
disabled={option.disabled}
disabled={this.props.isDisabledGroup || option.disabled}
label={option.label}
spaceBtwnElems={this.props.spaceBtwnElems}
/>
@ -52,6 +53,7 @@ class RadioButtonGroup extends React.Component {
};
RadioButtonGroup.propTypes = {
isDisabledGroup: PropTypes.bool,
name: PropTypes.string.isRequired,
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string.isRequired,
@ -63,6 +65,7 @@ RadioButtonGroup.propTypes = {
}
RadioButtonGroup.defaultProps = {
isDisabledGroup: false,
selected: undefined,
spaceBtwnElems: 33
}

View File

@ -31,6 +31,7 @@ import { RadioButtonGroup } from 'asc-web-components';
| `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`
| `spaceBtwnElems` | `number` | - | - | 33 | Margin (in px) between radiobuttons
| `isDisabledGroup` | `bool` | - | - | `false` | Disabling all radiobuttons in group
#### Prop `options`

View File

@ -13,7 +13,7 @@ storiesOf('Components|Input', module)
return (
<Section>
<>
<RadioButtonGroup selected={text('selected radio button(value)', 'second')} spaceBtwnElems={number('spaceBtwnElems', 33)} name={text('name of your group', 'group')} options={
<RadioButtonGroup isDisabledGroup={boolean('isDisabledGroup', false)} selected={text('selected radio button(value)', 'second')} spaceBtwnElems={number('spaceBtwnElems', 33)} name={text('name of your group', 'group')} options={
[
{ value: text('value 1st radiobutton', 'first'), label: text('label 1st radiobutton', 'First radiobtn'), disabled: boolean('isDisabled 1st radiobutton', false) },
{ value: text('value 2nd radiobutton', 'second'), label: text('label 2nd radiobutton', 'Second radiobtn'), disabled: boolean('isDisabled 2nd radiobutton', true) },