utils/react: add pointerEventsNone helper

This should prevent some unnecessary rerendering by not creating a new
inline object.

src/toolbar/ActionButton.tsx

@@ -13,7 +13,7 @@ import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useEffect, useMemo, useState } from 'react';
 import { tooltipDelay } from '../app/constants';
-import { preventFocusOnClick } from '../utils/react';
+import { pointerEventsNone, preventFocusOnClick } from '../utils/react';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
@@ -108,9 +108,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
                     onMouseDown={preventFocusOnClick}
                     onClick={props.onAction}
                     disabled={props.enabled === false}
-                    style={
-                        props.enabled === false ? { pointerEvents: 'none' } : undefined
-                    }
+                    style={props.enabled === false ? pointerEventsNone : undefined}
                 >
                     {props.showProgress ? (
                         <Spinner
@@ -124,7 +122,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
                             height={`${buttonSize}px`}
                             src={props.icon}
                             alt={props.id}
-                            style={{ pointerEvents: 'none' }}
+                            style={pointerEventsNone}
                         />
                     )}
                 </Button>

src/toolbar/OpenFileButton.tsx

@@ -7,7 +7,7 @@ import { useI18n } from '@shopify/react-i18n';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { tooltipDelay } from '../app/constants';
-import { preventFocusOnClick } from '../utils/react';
+import { pointerEventsNone, preventFocusOnClick } from '../utils/react';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
@@ -120,10 +120,7 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                         ...tooltipTargetProps,
                         intent: Intent.PRIMARY,
                         disabled: props.enabled === false,
-                        style:
-                            props.enabled === false
-                                ? { pointerEvents: 'none' }
-                                : undefined,
+                        style: props.enabled === false ? pointerEventsNone : undefined,
                         onMouseDown: preventFocusOnClick,
                         onClick: props.onClick,
                     })}
@@ -141,7 +138,7 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                             height={`${buttonSize}px`}
                             src={props.icon}
                             alt={props.id}
-                            style={{ pointerEvents: 'none' }}
+                            style={pointerEventsNone}
                         />
                     )}
                 </Button>

src/utils/react.ts

@@ -14,3 +14,6 @@ export const preventFocusOnClick: React.MouseEventHandler = (e) => e.preventDefa
  */
 export const preventBrowserNativeContextMenu: React.MouseEventHandler = (e) =>
     e.preventDefault();
+
+/** Style to disable pointer events. */
+export const pointerEventsNone: React.CSSProperties = { pointerEvents: 'none' };