Move pointerDown from root to track

mj12albert · May 6, 2024 · 198c2b1 · 198c2b1
1 parent b44be46
commit 198c2b1
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 26 deletions.
diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
@@ -45,23 +45,26 @@ export default function App() {
   const [val2, setVal2] = React.useState([40, 60]);
   const [val3, setVal3] = React.useState([20, 40, 60, 80]);
   return (
-    <div style={{ width: 320, padding: 16 }}>
+    <div className="SliderDemo" style={{ width: 320, padding: 16 }}>
       <h3>Uncontrolled</h3>
       <Slider.Root className="MySlider" defaultValue={50}>
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track" render={<span />}>
           <TrackFillSingleThumb className="MySlider-track-fill" />
           <Slider.Thumb className="MySlider-thumb one" />
         </Slider.Track>
       </Slider.Root>
 
       <Slider.Root className="MySlider" defaultValue={30} disabled render={<span />}>
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track">
           <TrackFillSingleThumb className="MySlider-track-fill" />
           <Slider.Thumb className="MySlider-thumb one" />
         </Slider.Track>
       </Slider.Root>
 
       <Slider.Root className="MySlider" defaultValue={[40, 60]} render={<span />}>
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track">
           <TrackFillRange className="MySlider-track-fill" />
           <Slider.Thumb className="MySlider-thumb one" />
@@ -70,6 +73,7 @@ export default function App() {
       </Slider.Root>
 
       <Slider.Root className="MySlider" defaultValue={[40, 60, 80]} render={<span />}>
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track">
           <Slider.Thumb className="MySlider-thumb one" />
           <Slider.Thumb className="MySlider-thumb two" />
@@ -78,43 +82,43 @@ export default function App() {
       </Slider.Root>
 
       <h3 style={{ marginTop: 32 }}>Controlled</h3>
-      <pre>{val1}</pre>
       <Slider.Root
         className="MySlider"
         value={val1}
         onValueChange={(newValue) => {
           setVal1(newValue as number);
         }}
       >
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track" render={<span />}>
           <TrackFillSingleThumb className="MySlider-track-fill" />
           <Slider.Thumb className="MySlider-thumb" />
         </Slider.Track>
       </Slider.Root>
 
-      <pre>{val2.join('-')}</pre>
       <Slider.Root
         className="MySlider"
         value={val2}
         onValueChange={(newValue) => {
           setVal2(newValue as number[]);
         }}
       >
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track" render={<span />}>
           <TrackFillRange className="MySlider-track-fill" />
           <Slider.Thumb className="MySlider-thumb" />
           <Slider.Thumb className="MySlider-thumb" />
         </Slider.Track>
       </Slider.Root>
 
-      <pre>{`[${val3.toString()}]`}</pre>
       <Slider.Root
         className="MySlider"
         value={val3}
         onValueChange={(newValue) => {
           setVal3(newValue as number[]);
         }}
       >
+        <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track" render={<span />}>
           {val3.map((_val, idx) => (
             <Slider.Thumb key={`thumb-${idx}`} className="MySlider-thumb" />
@@ -161,27 +165,37 @@ function Styles() {
   const isDarkMode = useIsDarkMode();
   return (
     <style>{`
+    .SliderDemo {
+      font-family: system-ui, sans-serif;
+    }
+
     .MySlider {
       color: ${isDarkMode ? cyan[300] : cyan[500]};
-      height: 4px;
       width: 100%;
       padding: 16px 0;
-      display: inline-flex;
       align-items: center;
       position: relative;
-      cursor: pointer;
       touch-action: none;
       -webkit-tap-highlight-color: transparent;
-      margin-bottom: 32px;
+      margin-bottom: 2rem;
+      display: grid;
+      grid-auto-rows: 1.5rem auto;
+      grid-gap: 1rem;
+    }
+
+    .MySlider-output {
+      text-align: right;
+      font-size: .875rem;
     }
 
     .MySlider-track {
       display: block;
-      position: absolute;
+      position: relative;
       width: 100%;
       height: 4px;
       border-radius: 6px;
       background-color: color-mix(in srgb, currentColor 30%, transparent);
+      cursor: pointer;
     }
 
     .MySlider-track-fill {

diff --git a/packages/mui-base/src/Slider2/SliderRoot.tsx b/packages/mui-base/src/Slider2/SliderRoot.tsx
@@ -43,14 +43,18 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   const ownerState: SliderOwnerState = React.useMemo(
     () => ({
       disabled,
+      dragging: slider.dragging,
       max: slider.max,
       min: slider.min,
       value: slider.value,
     }),
-    [disabled, slider.max, slider.min, slider.value],
+    [disabled, slider.dragging, slider.max, slider.min, slider.value],
   );
 
-  const styleHooks = React.useMemo(() => getStyleHookProps({ disabled }), [disabled]);
+  const styleHooks = React.useMemo(
+    () => getStyleHookProps({ disabled, dragging: slider.dragging }),
+    [disabled, slider.dragging],
+  );
 
   const rootProps = slider.getRootProps({
     ...styleHooks,

diff --git a/packages/mui-base/src/Slider2/SliderTrack.tsx b/packages/mui-base/src/Slider2/SliderTrack.tsx
@@ -26,11 +26,6 @@ const SliderTrack = React.forwardRef(function SliderTrack(
     ref: mergedRef,
     className: resolveClassName(className, ownerState),
     ...otherProps,
-    // style: {
-    //   ...otherProps.style,
-    //   ...axisProps[axis].offset(trackOffset),
-    //   ...axisProps[axis].leap(trackLeap),
-    // },
   });
 
   return evaluateRenderProp(render, trackProps, ownerState);

diff --git a/packages/mui-base/src/useSlider2/useSlider.types.ts b/packages/mui-base/src/useSlider2/useSlider.types.ts
@@ -159,6 +159,7 @@ export interface UseSliderReturnValue {
     event: React.KeyboardEvent | React.ChangeEvent,
   ) => void;
   compoundComponentContextValue: CompoundComponentContextValue<any, ThumbMetadata>;
+  dragging: boolean;
   disabled: boolean;
   isRtl: boolean;
   largeStep: number;

diff --git a/packages/mui-base/src/useSlider2/useSlider2.ts b/packages/mui-base/src/useSlider2/useSlider2.ts
@@ -250,7 +250,6 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
 
   const changeValue = React.useCallback(
     (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => {
-      // const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
       const marksIndex = marksValues.indexOf(value);
       let newValue: number | number[] = valueInput;
@@ -512,6 +511,13 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
     (externalProps = {}) =>
       mergeReactProps(externalProps, {
         ref: handleRef,
+      }),
+    [handleRef],
+  );
+
+  const getTrackProps: UseSliderReturnValue['getTrackProps'] = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
         onPointerDown(event: React.PointerEvent<HTMLSpanElement>) {
           if (disabled) {
             return;
@@ -550,21 +556,13 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
       disabled,
       getFingerNewValue,
       handleValueChange,
-      handleRef,
       handleTouchEnd,
       handleTouchMove,
       setValueState,
       valueState,
     ],
   );
 
-  const getTrackProps: UseSliderReturnValue['getTrackProps'] = React.useCallback(
-    (externalProps = {}) => ({
-      ...externalProps,
-    }),
-    [],
-  );
-
   const outputFor = Array.from(subitems.values()).reduce((acc, item) => {
     return `${acc} ${item.id}`;
   }, '');
@@ -592,6 +590,7 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
       axisProps,
       changeValue,
       compoundComponentContextValue,
+      dragging,
       disabled,
       isRtl,
       largeStep,
@@ -617,6 +616,7 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
       axis,
       changeValue,
       compoundComponentContextValue,
+      dragging,
       disabled,
       isRtl,
       largeStep,

diff --git a/packages/mui-base/src/useSlider2/useSliderThumb.ts b/packages/mui-base/src/useSlider2/useSliderThumb.ts
@@ -105,7 +105,6 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
           changeValue(event.target.valueAsNumber, index, event);
         },
         onFocus() {
-          // const index = Number(event.currentTarget.getAttribute('data-index'));
           setOpen(index);
         },
         onBlur() {
@@ -144,6 +143,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
         },
         tabIndex,
         type: 'range',
+        value: thumbValue ?? '',
       });
     },
     [