diff --git a/src/Button.js b/src/Button.js
index 7170d5a39..8d24b37b1 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType } from './utils';
@@ -25,69 +25,63 @@ const defaultProps = {
tag: 'button',
};
-class Button extends React.Component {
- constructor(props) {
- super(props);
- this.onClick = this.onClick.bind(this);
- }
-
- onClick(e) {
- if (this.props.disabled) {
+function Button(props) {
+ const onClick = useCallback((e) => {
+ if (props.disabled) {
e.preventDefault();
return;
}
- if (this.props.onClick) {
- return this.props.onClick(e);
+ if (props.onClick) {
+ return props.onClick(e);
}
- }
+ }, [props.onClick, props.disabled])
- render() {
- let {
- active,
- 'aria-label': ariaLabel,
- block,
- className,
- close,
- cssModule,
- color,
- outline,
- size,
- tag: Tag,
- innerRef,
- ...attributes
- } = this.props;
- const btnOutlineColor = `btn${outline ? '-outline' : ''}-${color}`;
+ let {
+ active,
+ 'aria-label': ariaLabel,
+ block,
+ className,
+ close,
+ cssModule,
+ color,
+ outline,
+ size,
+ tag: Tag,
+ innerRef,
+ ...attributes
+ } = props;
- const classes = mapToCssModules(classNames(
- className,
- close && 'btn-close',
- close || 'btn',
- close || btnOutlineColor,
- size ? `btn-${size}` : false,
- block ? 'd-block w-100' : false,
- { active, disabled: this.props.disabled }
- ), cssModule);
+ const btnOutlineColor = `btn${outline ? '-outline' : ''}-${color}`;
- if (attributes.href && Tag === 'button') {
- Tag = 'a';
- }
+ const classes = mapToCssModules(classNames(
+ className,
+ close && 'btn-close',
+ close || 'btn',
+ close || btnOutlineColor,
+ size ? `btn-${size}` : false,
+ block ? 'd-block w-100' : false,
+ { active, disabled: props.disabled }
+ ), cssModule);
- const defaultAriaLabel = close ? 'Close' : null;
-
- return (
-
- );
+ if (attributes.href && Tag === 'button') {
+ Tag = 'a';
}
+
+ const defaultAriaLabel = close ? 'Close' : null;
+
+ return (
+
+ );
}
Button.propTypes = propTypes;
diff --git a/src/__tests__/Button.spec.js b/src/__tests__/Button.spec.js
index 8dbc5a305..a818d3653 100644
--- a/src/__tests__/Button.spec.js
+++ b/src/__tests__/Button.spec.js
@@ -123,15 +123,11 @@ describe('Button', () => {
});
it('is not called when disabled', () => {
- const e = createSpyObj('e', ['preventDefault']);
- const wrapper = mount();
-
- wrapper.instance().onClick(e);
- expect(e.preventDefault).not.toHaveBeenCalled();
+ const onClick = jest.fn();
+ const wrapper = mount();
- wrapper.setProps({ disabled: true });
- wrapper.instance().onClick(e);
- expect(e.preventDefault).toHaveBeenCalled();
+ wrapper.find('button').hostNodes().simulate('click');
+ expect(onClick).not.toHaveBeenCalled();
});
});
});