fix: add platform switch ids, use nav controls, handle middle click (#…

…221)
graasp · Feb 7, 2023 · 6d45212 · 6d45212
1 parent ab4cecc
commit 6d45212
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/PlatformSwitch/PlatformSwitch.tsx b/src/PlatformSwitch/PlatformSwitch.tsx
@@ -7,6 +7,8 @@ import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme';
 import { Platform } from './hooks';
 
 export type PlatformSwitchProps = {
+  /** Element ID of the Platform Switch */
+  id?: string;
   /** Size of the icons (default: 32) */
   size?: number;
   /** Spacing in-between icons as well as padding inside the switch frame */
@@ -26,10 +28,17 @@ export type PlatformSwitchProps = {
     Record<
       Platform,
       {
+        /** Element ID of this specific platform button */
+        id?: string;
         /** Whether this platform should be disabled (non-clickable) */
         disabled?: boolean;
         /** Action when this platform button is clicked */
         onClick?: React.MouseEventHandler<HTMLElement>;
+        /**
+         * Action when this platform button is clicked
+         * (any mouse button, use the {@see MouseEvent} parameter to discriminate)
+         */
+        onMouseDown?: React.MouseEventHandler<HTMLElement>;
         /** Style overrides for this platform's icon */
         sx?: SxProps;
       }
@@ -59,6 +68,7 @@ const PlatformIcons: Record<Platform, FC<IconProps>> = {
  * PlatformSwitch allows the user to change between the platforms
  */
 export const PlatformSwitch: FC<PlatformSwitchProps> = ({
+  id,
   spacing = 0.5,
   size = 32,
   color = SECONDARY_COLOR,
@@ -116,16 +126,20 @@ export const PlatformSwitch: FC<PlatformSwitchProps> = ({
 
     // Ordering of the spread props is important: later styles override former ones
     return (
-      <nav
+      <a
+        id={platformProps?.id}
         style={{
           display: 'flex',
           cursor: platformProps?.disabled ? 'default' : 'pointer',
         }}
         {...mouseHoverEvents}
         onClick={platformProps?.disabled ? undefined : platformProps?.onClick}
+        onMouseDown={
+          platformProps?.disabled ? undefined : platformProps?.onMouseDown
+        }
       >
         <Icon {...iconProps} {...hoverStyles} {...disabledStyles} />
-      </nav>
+      </a>
     );
   };
 
@@ -139,6 +153,8 @@ export const PlatformSwitch: FC<PlatformSwitchProps> = ({
 
   return (
     <Box
+      component='nav'
+      id={id}
       sx={{
         p: spacing,
         border: 1,

diff --git a/src/PlatformSwitch/hooks.ts b/src/PlatformSwitch/hooks.ts
@@ -1,5 +1,8 @@
 import { redirect } from '@graasp/sdk';
 
+const MOUSE_MIDDLE_BUTTON = 1;
+const TARGET_BLANK_NEW_TAB = '_blank';
+
 /** Enumeration of available platforms */
 export enum Platform {
   Builder = 'Builder',
@@ -47,14 +50,24 @@ export function defaultHostsMapper(
 /**
  * Hook to create a platform navigator function
  * @param hostsMapper {@see HostsMapper}
- * @returns A navigation function to be applied on a given itemId
+ * @param itemId Optional ID of the item context which will be opened in the target platform
+ * @returns A mouse events factory that will generate left and middle click actions, to be applied to a given platform
  */
 export function usePlatformNavigation(
   hostsMapper: HostsMapper,
   itemId?: string,
 ) {
   return (platform: Platform) => {
-    const url = hostsMapper[platform]?.(itemId) ?? '#';
-    redirect(url);
+    const url = hostsMapper[platform]?.(itemId);
+    const href = url ?? '#';
+    return {
+      onClick: (_event: MouseEvent) => redirect(href),
+      onMouseDown: (event: MouseEvent) => {
+        if (event.button !== MOUSE_MIDDLE_BUTTON || url === undefined) {
+          return;
+        }
+        window.open(href, TARGET_BLANK_NEW_TAB);
+      },
+    };
   };
 }