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

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

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-28 14:00:59 +03:00
parent 95a364cdd4
commit 9833ff1056
3 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/ASC.Web.Components/src/components/icon-button/README.md
View File

@ -23,19 +23,20 @@ import { IconButton } from "asc-web-components";
| Props | Type | Required | Values | Default | Description |
| --------------- | :----------------: | :------: | :----: | :-------------: | ----------------------------------------------------- |
| `className` | `string` | - | - | - | Set component class |
| `clickColor` | `string` | - | - | - | Icon color on click action |
| `color` | `string` | - | - | `#d0d5da` | Icon color |
| `hoverColor` | `string` | - | - | - | Icon color on hover action |
| `clickColor` | `string` | - | - | - | Icon color on click action |
| `size` | `number`,`string` | - | - | `25` | Button height and width value |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `iconName` | `string` | ✅ | - | `AZSortingIcon` | Icon name |
| `iconHoverName` | `string` | - | - | - | Icon name on hover action |
| `iconClickName` | `string` | - | - | - | Icon name on click action |
| `iconHoverName` | `string` | - | - | - | Icon name on hover action |
| `iconName` | `string` | ✅ | - | `AZSortingIcon` | Icon name |
| `id` | `string`, `number` | - | - | - | Set component id |
| `isClickable` | `bool` | - | - | `false` | Set cursor value |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isFill` | `bool` | - | - | `true` | Determines if icon fill is needed |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `onMouseEnter` | `func` | - | - | - | What the button will trigger when cursor enter |
| `onMouseDown` | `func` | - | - | - | What the button will trigger when cursor down |
| `onMouseEnter` | `func` | - | - | - | What the button will trigger when cursor enter |
| `onMouseUp` | `func` | - | - | - | What the button will trigger when cursor up |
| `isClickable` | `bool` | - | - | `false` | Set cursor value |
| `className` | `string` | - | - | - | Set component class |
| `id` | `string`, `number` | - | - | - | Set component id |
| `size` | `number`,`string` | - | - | `25` | Button height and width value |
| `style` | `obj`, `array` | - | - | - | Accepts css style |

33
web/ASC.Web.Components/src/components/icon-button/icon-button.test.js
View File

@ -2,12 +2,43 @@ import React from 'react';
import { mount } from 'enzyme';
import IconButton from '.';
const baseProps = {
size:'25',
isDisabled: false,
iconName: "SearchIcon",
isFill: true
}
describe('<IconButton />', () => {
it('renders without error', () => {
const wrapper = mount(
<IconButton size='25' isDisabled={false} onClick={() => alert('Clicked')} iconName={"SearchIcon"} isFill={true} />
<IconButton {...baseProps} />
);
expect(wrapper).toExist();
});
it('accepts id', () => {
const wrapper = mount(
<IconButton {...baseProps} id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<IconButton {...baseProps} className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<IconButton {...baseProps} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});

7
web/ASC.Web.Components/src/components/icon-button/index.js
View File

@ -129,7 +129,8 @@ class IconButton extends React.PureComponent {
isFill,
isClickable,
onClick,
id
id,
style
} = this.props;
return (
@ -145,6 +146,7 @@ class IconButton extends React.PureComponent {
data-tip=""
data-event="click focus"
data-for={id}
style={style}
//{...this.props}
>
{React.createElement(Icons[this.state.currentIconName], {
@ -173,7 +175,8 @@ IconButton.propTypes = {
onMouseEnter: PropTypes.func,
onMouseDown: PropTypes.func,
onMouseUp: PropTypes.func,
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
IconButton.defaultProps = {