feat(resize-handle): support viewport units (#372)

Author: layershifter

change/@fluentui-contrib-react-resize-handle-8fb0ac31-88c6-48df-a613-d24193a28c82.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat:  support viewport units",
+  "packageName": "@fluentui-contrib/react-resize-handle",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-resize-handle/src/hooks/useKeyboardHandler.ts

@@ -1,21 +1,23 @@
 import { useEventCallback, useFluent } from '@fluentui/react-components';
+import type { EventHandler } from '@fluentui/react-utilities';
 import * as React from 'react';
+
 import {
   EVENTS,
   GrowDirection,
   ResizeHandleUpdateEventData,
   SupportedKeys,
 } from '../types';
-import type { EventHandler } from '@fluentui/react-utilities';
+import type { UnitHandle } from './useUnitHandle';
 
 export type UseKeyboardHandlerOptions = {
   onValueChange: EventHandler<ResizeHandleUpdateEventData>;
   growDirection: GrowDirection;
+
   getCurrentValue: () => number;
+  unitHandle: UnitHandle;
 };
 
-const DEFAULT_STEP = 20;
-
 const multipliers: Record<
   GrowDirection,
   Partial<Record<SupportedKeys, number>>
@@ -49,26 +51,27 @@ function isSupportedKey(
 }
 
 export const useKeyboardHandler = (options: UseKeyboardHandlerOptions) => {
-  const { onValueChange, growDirection, getCurrentValue } = options;
+  const { onValueChange, growDirection, getCurrentValue, unitHandle } = options;
   const { dir } = useFluent();
 
   const onKeyDown = useEventCallback((event: KeyboardEvent) => {
     if (!isSupportedKey(growDirection, event.key)) {
       return;
     }
 
-    let newValue = getCurrentValue();
+    const currentValue = getCurrentValue();
 
     const multiplier = multipliers[growDirection][event.key] ?? 1;
     const directionMultiplier =
       dir === 'rtl' && ['start', 'end'].includes(growDirection) ? -1 : 1;
-
-    newValue += multiplier * DEFAULT_STEP * directionMultiplier;
+    const offset =
+      multiplier * unitHandle.getOffsetStep() * directionMultiplier;
 
     onValueChange(event, {
       event,
-      value: Math.round(newValue),
+      value: unitHandle.roundValue(currentValue + offset),
       type: EVENTS.keyboard,
+      unit: unitHandle.name,
     });
   });
 

packages/react-resize-handle/src/hooks/useMouseHandler.ts

@@ -1,29 +1,32 @@
 import { useFluent, useEventCallback } from '@fluentui/react-components';
-
-import type { EventHandler } from '@fluentui/react-utilities';
 import {
   getEventClientCoords,
-  NativeTouchOrMouseEvent,
   isMouseEvent,
   isTouchEvent,
+  type NativeTouchOrMouseEvent,
+  type EventHandler,
 } from '@fluentui/react-utilities';
 import * as React from 'react';
+
 import { EVENTS, GrowDirection, ResizeHandleUpdateEventData } from '../types';
+import type { UnitHandle } from './useUnitHandle';
 
 export type UseMouseHandlerParams = {
   growDirection: GrowDirection;
   onValueChange: EventHandler<ResizeHandleUpdateEventData>;
   onDragEnd?: EventHandler<Omit<ResizeHandleUpdateEventData, 'value'>>;
   onDragStart?: EventHandler<Omit<ResizeHandleUpdateEventData, 'value'>>;
+
   getCurrentValue: () => number;
+  unitHandle: UnitHandle;
 };
 
 export function useMouseHandler(params: UseMouseHandlerParams) {
   const { targetDocument, dir } = useFluent();
   const targetWindow = targetDocument?.defaultView;
 
   const dragStartOriginCoords = React.useRef({ clientX: 0, clientY: 0 });
-  const { growDirection, onValueChange, getCurrentValue } = params;
+  const { growDirection, getCurrentValue, onValueChange, unitHandle } = params;
 
   const startValue = React.useRef(0);
 
@@ -39,21 +42,26 @@ export function useMouseHandler(params: UseMouseHandlerParams) {
 
       switch (growDirection) {
         case 'end':
-          newValue += deltaCoords[0] * (dir === 'rtl' ? -1 : 1);
+          newValue += unitHandle.fromPxToValue(
+            deltaCoords[0] * (dir === 'rtl' ? -1 : 1)
+          );
           break;
         case 'start':
-          newValue -= deltaCoords[0] * (dir === 'rtl' ? -1 : 1);
+          newValue -= unitHandle.fromPxToValue(
+            deltaCoords[0] * (dir === 'rtl' ? -1 : 1)
+          );
           break;
         case 'up':
-          newValue -= deltaCoords[1];
+          newValue -= unitHandle.fromPxToValue(deltaCoords[1]);
           break;
         case 'down':
-          newValue += deltaCoords[1];
+          newValue += unitHandle.fromPxToValue(deltaCoords[1]);
           break;
       }
 
       onValueChange(event, {
-        value: Math.round(newValue),
+        value: unitHandle.roundValue(newValue),
+        unit: unitHandle.name,
         ...(isTouchEvent(event)
           ? { event, type: EVENTS.touch }
           : { event, type: EVENTS.mouse }),
@@ -95,8 +103,8 @@ export function useMouseHandler(params: UseMouseHandlerParams) {
     params.onDragEnd?.(
       event,
       isTouchEvent(event)
-        ? { event, type: EVENTS.touch }
-        : { event, type: EVENTS.mouse }
+        ? { event, type: EVENTS.touch, unit: unitHandle.name }
+        : { event, type: EVENTS.mouse, unit: unitHandle.name }
     );
   });
 
@@ -127,8 +135,8 @@ export function useMouseHandler(params: UseMouseHandlerParams) {
     params.onDragStart?.(
       event,
       isTouchEvent(event)
-        ? { event, type: EVENTS.touch }
-        : { event, type: EVENTS.mouse }
+        ? { event, type: EVENTS.touch, unit: unitHandle.name }
+        : { event, type: EVENTS.mouse, unit: unitHandle.name }
     );
   });