IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
Andrey Savihin 2019-07-26 14:39:26 +03:00
commit e74772cb2e
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/ASC.Web.Storybook/stories/input/radio-button-group/README.md
View File

@ -14,8 +14,7 @@ import { RadioButtonGroup } from 'asc-web-components';
selected='banana'
options={
[
{ value: 'apple', label: 'Sweet apple', disabled: true },
{ value: 'mandarin', label: 'Mandarin'},
{ value: 'apple', label: 'Sweet apple'},
{ value: 'banana', label: 'Banana'},
{ value: 'Mandarin'}
]
@ -29,15 +28,7 @@ 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`
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component
| `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`
| Name | Type | Required | Values | Default | Description |
| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used
| `disabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `<input>` tag
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component

43
web/ASC.Web.Storybook/stories/input/radio-button-group/radio-button-group.stories.js
View File

@ -6,13 +6,42 @@ import Section from '../../../.storybook/decorators/section';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
import Readme from './README.md';
import { action } from '@storybook/addon-actions';
import { optionsKnob as options } from '@storybook/addon-knobs';
const values = ['first', 'second', 'third'];
storiesOf('Components|Input', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('radio-button-group', () => {
.add('radio button group', () => {
const values = ['first', 'second', 'third'];
const valuesMultiSelect = {
radio1: 'radio1',
radio2: 'radio2',
radio3: 'radio3'
};
const optionsMultiSelect = options('options', valuesMultiSelect, ['radio1'], {
display: 'multi-select',
});
let children = [];
optionsMultiSelect.forEach(function (item, i) {
switch (item) {
case 'radio1':
children.push({ value: values[0], label: text('label 1', 'First radiobtn') });
break;
case 'radio2':
children.push({ value: values[1], label: text('label 2', 'Second radiobtn') });
break;
case 'radio3':
children.push({ value: values[2], label: text('label 3', 'Third radiobtn') });
break;
default:
break;
}
});
return (
<Section>
<>
@ -24,14 +53,8 @@ storiesOf('Components|Input', module)
isDisabled={boolean('isDisabled', false)}
selected={values[0]}
spacing={number('spacing', 33)}
name={text('name of your group', 'group')}
options={
[
{ value: values[0], label: text('label 1st radiobutton', '1st button'), disabled: boolean('disabled 1st radiobutton', true) },
{ value: values[1], label: text('label 2nd radiobutton', '2nd button'), },
{ value: values[2], label: text('label 3rd radiobutton', '3rd button') },
]
}
name={text('name', 'group')}
options={children}
/>
</>
</Section>