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

web: Components: Added id, className and style property for GroupButton component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-28 10:57:50 +03:00
parent 5f44fba8ce
commit 6e0007f183
3 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,19 +28,22 @@ For health of checkbox, button inherits part of properties of this component.
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------- | :------: | :------: | :----: | :------------: | ----------------------------------------------------- |
| `label` | `string` | - | - | `Group button` | Value of the group button |
| `disabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isDropdown` | `bool` | - | - | `false` | Tells when the button should present a dropdown state |
| `isSeparator` | `bool` | - | - | `false` | Tells when the button should contain separator |
| `opened` | `bool` | - | - | `false` | Tells when the button should be opened by default |
| ------------------- | :------------: | :------: | :----: | :------------: | ----------------------------------------------------- |
| `action` | `func` | - | - | - | What the button will trigger when clicked |
| `tabIndex` | `number` | - | - | `-1` | Value of tab index |
| `onClick` | `func` | - | - | - | Property for onClick action |
| `fontWeight` | `string` | - | - | `600` | Value of font weight |
| `onSelect` | `func` | - | - | - | Called when value is selected in selector |
| `selected` | `string` | - | - | - | Selected value label |
| `onChange` | `func` | - | - | - | Called when checkbox is checked |
| `isIndeterminate` | `bool` | - | - | `false` | Initial value of Indeterminate checkbox |
| `checked` | `bool` | - | - | `false` | Initial value of checkbox |
| `className` | `string` | - | - | - | Accepts class |
| `disabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `dropDownMaxHeight` | `number` | - | - | - | Selected height value of DropDown |
| `fontWeight` | `string` | - | - | `600` | Value of font weight |
| `id` | `string` | - | - | - | Accepts id |
| `isDropdown` | `bool` | - | - | `false` | Tells when the button should present a dropdown state |
| `isIndeterminate` | `bool` | - | - | `false` | Initial value of Indeterminate checkbox |
| `isSeparator` | `bool` | - | - | `false` | Tells when the button should contain separator |
| `label` | `string` | - | - | `Group button` | Value of the group button |
| `onChange` | `func` | - | - | - | Called when checkbox is checked |
| `onClick` | `func` | - | - | - | Property for onClick action |
| `onSelect` | `func` | - | - | - | Called when value is selected in selector |
| `opened` | `bool` | - | - | `false` | Tells when the button should be opened by default |
| `selected` | `string` | - | - | - | Selected value label |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Value of tab index |

24
web/ASC.Web.Components/src/components/group-button/group-button.test.js
View File

@ -160,6 +160,30 @@ describe('<GroupButton />', () => {
expect(wrapper.state('isOpen')).toBe(false);
});
it('accepts id', () => {
const wrapper = mount(
<GroupButton {...baseProps} id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<GroupButton {...baseProps} className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<GroupButton {...baseProps} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});

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

@ -153,14 +153,14 @@ class GroupButton extends React.PureComponent {
render() {
//console.log("GroupButton render");
const { label, isDropdown, disabled, isSeparator, isSelect, isIndeterminate, children, checked, dropDownMaxHeight } = this.props;
const { label, isDropdown, disabled, isSeparator, isSelect, isIndeterminate, children, checked, dropDownMaxHeight, id, className, style } = this.props;
const color = disabled ? disabledTextColor : textColor;
const itemLabel = !isSelect ? label : this.state.selected;
const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } : {};
return (
<StyledGroupButton ref={this.ref}>
<StyledGroupButton ref={this.ref} id={id} className={className} style={style}>
{isDropdown
? <>
{isSelect &&
@ -226,7 +226,10 @@ GroupButton.propTypes = {
isIndeterminate: PropTypes.bool,
children: PropTypes.any,
checked: PropTypes.bool,
dropDownMaxHeight: PropTypes.number
dropDownMaxHeight: PropTypes.number,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
GroupButton.defaultProps = {