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

Web.components: RadioButtonGroup: added new props: width, orientation, changed proptype spacing from number to string, applied changes to other components

Browse Source
This commit is contained in:
Daniil Senkiv 2019-12-10 09:28:45 +03:00
parent d9d50ee364
commit b0b1b45127
9 changed files with 76 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
View File

@ -52,6 +52,7 @@ class PasswordField extends React.Component {
isDisabled={radioIsDisabled}
onClick={radioOnChange}
className="radio-group"
spacing='33px'
/>
<PasswordInput
inputName={inputName}

1
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js
View File

@ -40,6 +40,7 @@ class RadioField extends React.Component {
isDisabled={radioIsDisabled}
onClick={radioOnChange}
className="radio-group"
spacing='33px'
/>
</FieldContainer>
);

11
web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/modules.js
View File

@ -11,14 +11,6 @@ const ProjectsContainer = styled.div`
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
.display-block {
display: block;
}
div label:not(:first-child) {
margin: 0;
}
`;
const RadioButtonContainer = styled.div`
@ -104,7 +96,8 @@ class PureModulesSettings extends Component {
})
}
]}
className="display-block"
orientation='vertical'
spacing='10px'
/>
</RadioButtonContainer>
<ProjectsBody>

11
web/ASC.Web.Components/src/components/filter-input/sort-combobox.js
View File

@ -16,9 +16,6 @@ const StyledComboBox = styled(ComboBox)`
float: left;
width: 20%;
margin-left: 8px;
.display-block{
display: block;
}
@media ${mobile} {
width: 50px;
@ -90,11 +87,11 @@ class SortComboBox extends React.Component {
<>
<DropDownItem noHover >
<RadioButtonGroup
className="display-block"
orientation='vertical'
onClick={this.onChangeSortDirection}
isDisabled={this.props.isDisabled}
selected={this.state.sortDirection.toString()}
spacing={0}
spacing='0px'
name={'direction'}
options={sortDirectionArray}
/>
@ -102,11 +99,11 @@ class SortComboBox extends React.Component {
<DropDownItem isSeparator />
<DropDownItem noHover >
<RadioButtonGroup
className="display-block"
orientation='vertical'
onClick={this.onChangeSortId}
isDisabled={this.props.isDisabled}
selected={this.props.selectedOption.key}
spacing={0}
spacing='0px'
name={'sort'}
options={sortArray}
/>

24
web/ASC.Web.Components/src/components/radio-button-group/README.md
View File

@ -22,14 +22,16 @@ import { RadioButtonGroup } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :----: | :-----: | ---------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| Props | Type | Required | Values | Default | Description |
| ------------- | :------------: | :------: | :----------------------: | :----------: | ---------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |

27
web/ASC.Web.Components/src/components/radio-button-group/index.js
View File

@ -1,11 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import RadioButton from '../radio-button';
import styled from 'styled-components';
import styled, { css } from 'styled-components';
const StyledDiv = styled.div`
display: flex;
`;
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearDiv = ({ orientation, width, ...props }) => <div {...props} />
const StyledDiv = styled(ClearDiv)`
${props =>
(props.orientation === 'horizontal' && css`display: flex;`) ||
(props.orientation === 'vertical' && css`display: block;`)};
width: ${props => props.width};
`;
class RadioButtonGroup extends React.Component {
@ -38,6 +44,8 @@ class RadioButtonGroup extends React.Component {
id={this.props.id}
className={this.props.className}
style={this.props.style}
orientation={this.props.orientation}
width={this.props.width}
>
{options.map(option => {
return (
@ -54,6 +62,7 @@ class RadioButtonGroup extends React.Component {
isDisabled={this.props.isDisabled || option.disabled}
label={option.label}
spacing={this.props.spacing}
orientation={this.props.orientation}
/>
)
}
@ -74,16 +83,20 @@ RadioButtonGroup.propTypes = {
disabled: PropTypes.bool
})).isRequired,
selected: PropTypes.string.isRequired,
spacing: PropTypes.number,
spacing: PropTypes.string,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
width: PropTypes.string,
}
RadioButtonGroup.defaultProps = {
isDisabled: false,
selected: undefined,
spacing: 33
spacing: '15px',
orientation: 'horizontal',
width: '100%'
}
export default RadioButtonGroup;

15
web/ASC.Web.Components/src/components/radio-button-group/radio-button-group.stories.js
View File

@ -3,17 +3,18 @@ import { storiesOf } from '@storybook/react';
import withReadme from 'storybook-readme/with-readme';
import RadioButtonGroup from '.';
import Section from '../../../.storybook/decorators/section';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs/react';
import Readme from './README.md';
import { action } from '@storybook/addon-actions';
import { optionsKnob as options } from '@storybook/addon-knobs';
storiesOf('Components|Input', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('radio button group', () => {
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('radio button group', () => {
const orientation = ['horizontal', 'vertical'];
const values = ['first', 'second', 'third'];
const valuesMultiSelect = {
radio1: 'radio1',
@ -50,9 +51,11 @@ storiesOf('Components|Input', module)
action('onChange')(e);
console.log('Value of selected radiobutton: ', e.target.value);
}}
orientation={select('orientation', orientation, 'horizontal')}
width={text('width', '100%')}
isDisabled={boolean('isDisabled', false)}
selected={values[0]}
spacing={number('spacing', 33)}
spacing={text('spacing', '15px')}
name={text('name', 'group')}
options={children}
/>

25
web/ASC.Web.Components/src/components/radio-button/README.md
View File

@ -16,14 +16,17 @@ import { RadioButton } from "asc-web-components";
`<RadioButtonGroup />` props supersede RadioButton props
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :----: | :-----: | ----------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isChecked` | `bool` | - | - | `false` | Used as HTML `checked` property for each `<input>` tag |
| `isDisabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `<input>` tag |
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton |
| Props | Type | Required | Values | Default | Description |
| ------------- | :------------: | :------: | :----------------------: | :----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isChecked` | `bool` | - | - | `false` | Used as HTML `checked` property for each `<input>` tag |
| `isDisabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `<input>` tag |
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton |
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |

16
web/ASC.Web.Components/src/components/radio-button/index.js
View File

@ -10,7 +10,7 @@ const internalCircleDisabledColor = '#D0D5DA';
const externalCircleDisabledColor = '#eceef1';
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearLabel = ({ spacing, isDisabled, ...props }) => <label {...props} />
const ClearLabel = ({ spacing, isDisabled, orientation, ...props }) => <label {...props} />
const Label = styled(ClearLabel)`
display: flex;
align-items: center;
@ -47,7 +47,13 @@ const Label = styled(ClearLabel)`
`}
&:not(:first-child) {
margin-left: ${props => props.spacing}px;
${props =>
(props.orientation === 'horizontal' && css`margin-left: ${props.spacing};`)};
}
&:not(:last-child) {
${props =>
(props.orientation === 'vertical' && css`margin-bottom: ${props.spacing};`)};
}
`;
@ -99,6 +105,7 @@ class RadioButton extends React.Component {
return (
<Label
orientation={this.props.orientation}
spacing={this.props.spacing}
isDisabled={this.props.isDisabled}
id={this.props.id}
@ -133,10 +140,11 @@ RadioButton.propTypes = {
onChange: PropTypes.func,
onClick: PropTypes.func,
value: PropTypes.string.isRequired,
spacing: PropTypes.number,
spacing: PropTypes.string,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
orientation: PropTypes.oneOf(['horizontal', 'vertical'])
}
RadioButton.defaultProps = {