Only show trashcan when it will do something

openstax · Sep 18, 2024 · c6f5135 · c6f5135
1 parent 20b7c5c
commit c6f5135
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
@@ -115,6 +115,7 @@ const ColorPicker = ({className, ...props}: Props) => {
     },
     [color]
   );
+  const hasOnRemove = 'onRemove' in props && props.onRemove;
 
   React.useEffect(focusOnSelected, [focusOnSelected]);
 
@@ -142,10 +143,10 @@ const ColorPicker = ({className, ...props}: Props) => {
             ? props.onRemove ? props.onRemove() : null
             : props.onChange(style.label)}
       />)}
-      { props.size === 'small' ? null :
+      { (!hasOnRemove || props.size === 'small') ? null :
         <TrashButton
           size={props.size}
-          onClick={() => 'onRemove' in props && props.onRemove ? props.onRemove() : null}
+          onClick={props.onRemove}
         />
       }
     </fieldset>

diff --git a/src/app/content/highlights/components/EditCard.tsx b/src/app/content/highlights/components/EditCard.tsx
@@ -251,13 +251,17 @@ function ActiveEditCard({
 function useOnRemove(props: EditCardProps, pendingAnnotation: string) {
   const onRemove = props.onRemove;
   const trackDeleteHighlight = useAnalyticsEvent('deleteHighlight');
+  const removeAndTrack = React.useCallback(
+    () => {
+      if (props.data) {
+        onRemove();
+        trackDeleteHighlight(props.data.color);
+      }
+    },
+    [onRemove, props.data, trackDeleteHighlight]
+  );
 
-  return React.useCallback(() => {
-    if (props.data && !props.data.annotation && !pendingAnnotation) {
-      onRemove();
-      trackDeleteHighlight(props.data.color);
-    }
-  }, [onRemove, pendingAnnotation, props.data, trackDeleteHighlight]);
+  return props.data && !props.data.annotation && !pendingAnnotation && props.data.color ? removeAndTrack : null;
 }
 
 function AnnotationEditor({