From a2ccd3afdbf2d20f561959e2269f4b4f95983f02 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sat, 12 Mar 2022 15:26:48 -0600
Subject: [PATCH] utils/react: add pointerEventsNone helper

This should prevent some unnecessary rerendering by not creating a new
inline object.
---
 src/toolbar/ActionButton.tsx   | 8 +++-----
 src/toolbar/OpenFileButton.tsx | 9 +++------
 src/utils/react.ts             | 3 +++
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx
index f394d32b..516e0880 100644
--- a/src/toolbar/ActionButton.tsx
+++ b/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>
diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx
index 73a1a5c4..19d17e3a 100644
--- a/src/toolbar/OpenFileButton.tsx
+++ b/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>
diff --git a/src/utils/react.ts b/src/utils/react.ts
index 1bc7ea70..82aa1221 100644
--- a/src/utils/react.ts
+++ b/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' };