From 6e0007f183b3a039aff84a2b00125014f5849b11 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Thu, 28 Nov 2019 10:57:50 +0300 Subject: [PATCH] web: Components: Added id, className and style property for GroupButton component. Added tests. --- .../src/components/group-button/README.md | 37 ++++++++++--------- .../group-button/group-button.test.js | 24 ++++++++++++ .../src/components/group-button/index.js | 9 +++-- 3 files changed, 50 insertions(+), 20 deletions(-) diff --git a/web/ASC.Web.Components/src/components/group-button/README.md b/web/ASC.Web.Components/src/components/group-button/README.md index 11bb4d2905..cdbabb7e00 100644 --- a/web/ASC.Web.Components/src/components/group-button/README.md +++ b/web/ASC.Web.Components/src/components/group-button/README.md @@ -27,20 +27,23 @@ 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 | -| `dropDownMaxHeight` | `number` | - | - | - | Selected height value of DropDown | +| Props | Type | Required | Values | Default | Description | +| ------------------- | :------------: | :------: | :----: | :------------: | ----------------------------------------------------- | +| `action` | `func` | - | - | - | What the button will trigger when clicked | +| `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 | diff --git a/web/ASC.Web.Components/src/components/group-button/group-button.test.js b/web/ASC.Web.Components/src/components/group-button/group-button.test.js index 97441db9d8..318ce23a55 100644 --- a/web/ASC.Web.Components/src/components/group-button/group-button.test.js +++ b/web/ASC.Web.Components/src/components/group-button/group-button.test.js @@ -160,6 +160,30 @@ describe('', () => { expect(wrapper.state('isOpen')).toBe(false); }); + it('accepts id', () => { + const wrapper = mount( + + ); + + expect(wrapper.prop('id')).toEqual('testId'); + }); + + it('accepts className', () => { + const wrapper = mount( + + ); + + expect(wrapper.prop('className')).toEqual('test'); + }); + + it('accepts style', () => { + const wrapper = mount( + + ); + + expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red'); + }); + }); diff --git a/web/ASC.Web.Components/src/components/group-button/index.js b/web/ASC.Web.Components/src/components/group-button/index.js index 597be5af84..ee8b8adfb4 100644 --- a/web/ASC.Web.Components/src/components/group-button/index.js +++ b/web/ASC.Web.Components/src/components/group-button/index.js @@ -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 ( - + {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 = {