refactor(utils): add noOp (empty func) for onTouchStart hack

Author: arturbien

src/components/Button/Button.js

@@ -13,6 +13,7 @@ import {
   createHatchedBackground,
   focusOutline
 } from '../common';
+import { noOp } from '../common/utils';
 import { blockSizes } from '../common/system';
 
 const commonButtonStyles = css`
@@ -132,8 +133,6 @@ const Button = React.forwardRef(function Button(props, ref) {
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
       isDisabled={disabled}
-      // onTouchStart below to enable button :active style on iOS
-      onTouchStart={() => ''}
       ref={ref}
       {...otherProps}
     >
@@ -150,6 +149,8 @@ Button.defaultProps = {
   size: 'md',
   square: false,
   active: false,
+  // onTouchStart below to enable button :active style on iOS
+  onTouchStart: noOp,
   primary: false,
   variant: 'default'
 };
@@ -162,6 +163,7 @@ Button.propTypes = {
   size: propTypes.oneOf(['sm', 'md', 'lg']),
   square: propTypes.bool,
   active: propTypes.bool,
+  onTouchStart: propTypes.func,
   primary: propTypes.bool,
   variant: propTypes.oneOf(['default', 'menu', 'flat']),
   // eslint-disable-next-line react/require-default-props

src/components/TableHeadCell/TableHeadCell.js

@@ -3,6 +3,7 @@ import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
 import { createBorderStyles, createDisabledTextStyles } from '../common';
+import { noOp } from '../common/utils';
 
 const StyledHeadCell = styled.th`
 position: relative;
@@ -62,7 +63,6 @@ const TableHeadCell = React.forwardRef(function TableHeadCell(props, ref) {
       isDisabled={disabled}
       aria-disabled={disabled}
       onClick={disabled ? undefined : onClick}
-      onTouchStart={() => ''}
       {...otherProps}
     >
       <div>{children}</div>
@@ -71,15 +71,18 @@ const TableHeadCell = React.forwardRef(function TableHeadCell(props, ref) {
 });
 
 TableHeadCell.defaultProps = {
-  onClick: () => {},
   children: null,
-  disabled: false
+  disabled: false,
+  onClick: null,
+  // onTouchStart below to enable :active style on iOS
+  onTouchStart: noOp
 };
 
 TableHeadCell.propTypes = {
-  onClick: propTypes.func,
   children: propTypes.node,
-  disabled: propTypes.bool
+  disabled: propTypes.bool,
+  onClick: propTypes.func,
+  onTouchStart: propTypes.func
 };
 
 export default TableHeadCell;

src/components/common/utils/index.js

@@ -1,3 +1,5 @@
+export const noOp = () => {};
+
 export function clamp(value, min, max) {
   if (min !== null && value > max) {
     return max;