diff --git a/web/ASC.Web.Components/src/components/radio-button-group/index.js b/web/ASC.Web.Components/src/components/radio-button-group/index.js
index 318185f4ae..875162adc6 100644
--- a/web/ASC.Web.Components/src/components/radio-button-group/index.js
+++ b/web/ASC.Web.Components/src/components/radio-button-group/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import RadioButton from './radio-button';
+import RadioButton from '../radio-button';
import styled from 'styled-components';
const StyledDiv = styled.div`
@@ -41,13 +41,13 @@ class RadioButtonGroup extends React.Component {
key={option.value}
name={this.props.name}
value={option.value}
- checked={this.state.selectedOption === option.value}
+ isChecked={this.state.selectedOption === option.value}
onChange={(e) => {
this.handleOptionChange(e);
this.props.onClick && this.props.onClick(e);
}}
- disabled={this.props.isDisabled || option.disabled}
+ isDisabled={this.props.isDisabled || option.disabled}
label={option.label}
spacing={this.props.spacing}
/>
diff --git a/web/ASC.Web.Components/src/components/radio-button-group/radio-button.js b/web/ASC.Web.Components/src/components/radio-button/index.js
similarity index 75%
rename from web/ASC.Web.Components/src/components/radio-button-group/radio-button.js
rename to web/ASC.Web.Components/src/components/radio-button/index.js
index 975a4956e2..fd089282b2 100644
--- a/web/ASC.Web.Components/src/components/radio-button-group/radio-button.js
+++ b/web/ASC.Web.Components/src/components/radio-button/index.js
@@ -75,11 +75,11 @@ const Input = styled.input`
opacity: 0.0001;
`;
-const TextBody = ({disabled, ...props}) => ;
+const TextBody = ({ isDisabled, ...props }) => ;
const StyledText = styled(TextBody)`
margin-left: 4px;
- color: ${props => props.disabled ? disableColor : activeColor};
+ color: ${props => props.isDisabled ? disableColor : activeColor};
`;
const StyledSpan = styled.span`
@@ -90,10 +90,26 @@ const StyledSpan = styled.span`
class RadioButton extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isChecked: this.props.isChecked
+
+ };
+ }
+
+ componentDidUpdate(prevProps) {
+ if (this.props.isChecked !== prevProps.isChecked) {
+ this.setState({ isChecked: this.props.isChecked });
+ }
+ };
+
+
render() {
const rbtnClassName = 'radiobutton' +
- (this.props.checked ? ' checked' : '') +
- (this.props.disabled ? ' disabled' : '');
+ (this.state.isChecked ? ' checked' : '') +
+ (this.props.isDisabled ? ' disabled' : '');
return (
@@ -102,12 +118,15 @@ class RadioButton extends React.Component {
+ checked={this.props.isChecked}
+ onChange={this.props.onChange ? this.props.onChange : () => {
+ this.setState({ isChecked: true })
+ this.props.onClick && this.props.onClick(true);
+ }}
+ disabled={this.props.isDisabled} />
- {this.props.label || this.props.value}
+ {this.props.label || this.props.value}
@@ -116,16 +135,17 @@ class RadioButton extends React.Component {
};
RadioButton.propTypes = {
- name: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
- disabled: PropTypes.bool,
- checked: PropTypes.bool,
- onChange: PropTypes.func,
+ isChecked: PropTypes.bool,
+ isDisabled: PropTypes.bool,
label: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func,
+ value: PropTypes.string.isRequired,
}
RadioButton.defaultProps = {
- disabled: false
+ isChecked: false,
+ isDisabled: false,
}
export default RadioButton;
diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js
index 93e839748a..ac2a3c494f 100644
--- a/web/ASC.Web.Components/src/index.js
+++ b/web/ASC.Web.Components/src/index.js
@@ -36,3 +36,4 @@ export { default as Paging } from './components/paging'
export { default as FilterInput } from './components/filter-input'
export { default as ToggleContent } from './components/toggle-content'
export { default as RadioButtonGroup } from './components/radio-button-group'
+export { default as RadioButton } from './components/radio-button'
diff --git a/web/ASC.Web.Storybook/stories/input/radio-button/README.md b/web/ASC.Web.Storybook/stories/input/radio-button/README.md
new file mode 100644
index 0000000000..17762afceb
--- /dev/null
+++ b/web/ASC.Web.Storybook/stories/input/radio-button/README.md
@@ -0,0 +1,29 @@
+# RadioButton
+
+#### Description
+
+RadioButton allow you to add radiobutton
+
+#### Usage
+
+```js
+import { RadioButton } from 'asc-web-components';
+
+
+```
+
+#### Properties
+`` props supersede RadioButton props
+
+| Props | Type | Required | Values | Default | Description |
+| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `` tag. Used for identification each radiobutton
+| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `` tag.
+| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used
+| `isChecked` | `bool` | - | - | `false` | Used as HTML `checked` property for each `` tag
+| `isDisabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `` tag
+| `onChange` | `func` | - | - | - | Allow you to handle changing events on component
diff --git a/web/ASC.Web.Storybook/stories/input/radio-button/radio-button.stories.js b/web/ASC.Web.Storybook/stories/input/radio-button/radio-button.stories.js
new file mode 100644
index 0000000000..d2f58aa2f1
--- /dev/null
+++ b/web/ASC.Web.Storybook/stories/input/radio-button/radio-button.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+import { RadioButton } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs/react';
+import Readme from './README.md';
+
+
+storiesOf('Components|Input', module)
+ .addDecorator(withKnobs)
+ .addDecorator(withReadme(Readme))
+ .add('radio button', () => {
+ return (
+
+ <>
+ {
+ window.__STORYBOOK_ADDONS.channel.emit('storybookjs/knobs/change', {
+ name: 'isChecked',
+ value: checked
+ });
+ }
+ }
+ />
+ >
+
+ );
+ });