Rename onPointerDown/onPointerUp to onFocus/onBlur in slider components

Author: adamwych

packages/ui/components/color-wheel/channel-slider.tsx

@@ -21,8 +21,8 @@ export default function ColorWheelChannelSlider(props: {
                 value={props.value}
                 color={props.color}
                 onChange={props.onChange}
-                onPointerDown={props.onFocus}
-                onPointerUp={props.onBlur}
+                onFocus={props.onFocus}
+                onBlur={props.onBlur}
             />
 
             <span class="text-center text-sm" style={{ width: "30px" }}>

packages/ui/components/grayscale-slider/grayscale-slider.tsx

@@ -33,8 +33,8 @@ export default function GrayscaleSlider(props: Props) {
                     max={1}
                     value={props.value}
                     onChange={props.onChange}
-                    onPointerDown={props.onFocus}
-                    onPointerUp={props.onBlur}
+                    onFocus={props.onFocus}
+                    onBlur={props.onBlur}
                 />
             </div>
             <div class="w-[26px] text-center">{Math.round(props.value * 255)}</div>

packages/ui/components/slider/horizontalSlider.tsx

@@ -29,12 +29,12 @@ export default function HorizontalSlider(props: SliderProps) {
             }
         },
         () => {
-            props.onPointerUp?.();
+            props.onBlur?.();
         },
     );
 
     function onPointerDown(ev: PointerEvent) {
-        props.onPointerDown?.();
+        props.onFocus?.();
         registerDragListener(ev);
     }
 

packages/ui/components/slider/props.ts

@@ -17,8 +17,8 @@ export type SliderProps = {
 
     disabled?: boolean;
 
-    onPointerDown?(): void;
-    onPointerUp?(): void;
+    onFocus?(): void;
+    onBlur?(): void;
 
     /**
      * Called whenever the value is changed.

packages/ui/components/slider/verticalSlider.tsx

@@ -29,12 +29,12 @@ export default function VerticalSlider(props: SliderProps) {
             }
         },
         () => {
-            props.onPointerUp?.();
+            props.onBlur?.();
         },
     );
 
     function onPointerDown(ev: PointerEvent) {
-        props.onPointerDown?.();
+        props.onFocus?.();
         registerDragListener(ev);
     }
 

packages/ui/editor/inspector/inputs/number.tsx

@@ -49,8 +49,8 @@ export default function MaterialNodeInspectorNumberInput(
                     step={props.parameter.inputProps.step ?? 0.01}
                     value={value()}
                     onChange={(value) => onChange(isFloat ? value : Math.round(value))}
-                    onPointerDown={props.onFocus}
-                    onPointerUp={props.onBlur}
+                    onFocus={props.onFocus}
+                    onBlur={props.onBlur}
                 />
             </div>
         );

packages/ui/editor/inspector/node-texture-size-param.tsx

@@ -29,8 +29,8 @@ export default function HorizontalTextureSizeSlider(props: Props) {
                 step={props.value < 128 ? 16 : 32}
                 value={props.value}
                 onChange={props.onChange}
-                onPointerDown={onFocus}
-                onPointerUp={onBlur}
+                onFocus={onFocus}
+                onBlur={onBlur}
             />
         </div>
     );