refactor(Button): convert button to use hooks

reactstrap · May 27, 2022 · 19f85d3 · 19f85d3
1 parent 24ea80b
commit 19f85d3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 60 deletions.
diff --git 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 (
-      <Tag
-        type={(Tag === 'button' && attributes.onClick) ? 'button' : undefined}
-        {...attributes}
-        className={classes}
-        ref={innerRef}
-        onClick={this.onClick}
-        aria-label={ariaLabel || defaultAriaLabel}
-      />
-    );
+  if (attributes.href && Tag === 'button') {
+    Tag = 'a';
   }
+
+  const defaultAriaLabel = close ? 'Close' : null;
+
+  return (
+    <Tag
+      type={(Tag === 'button' && attributes.onClick) ? 'button' : undefined}
+      {...attributes}
+      className={classes}
+      ref={innerRef}
+      onClick={onClick}
+      aria-label={ariaLabel || defaultAriaLabel}
+    />
+  );
 }
 
 Button.propTypes = propTypes;

diff --git 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(<Button>Testing Click</Button>);
-
-      wrapper.instance().onClick(e);
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const onClick = jest.fn();
+      const wrapper = mount(<Button onClick={onClick} disabled>Testing Click</Button>);
 
-      wrapper.setProps({ disabled: true });
-      wrapper.instance().onClick(e);
-      expect(e.preventDefault).toHaveBeenCalled();
+      wrapper.find('button').hostNodes().simulate('click');
+      expect(onClick).not.toHaveBeenCalled();
     });
   });
 });