Skip to content

Commit

Permalink
Extract useSliderTrack and account for offset in getFingerNewValue
Browse files Browse the repository at this point in the history
  • Loading branch information
mj12albert committed May 10, 2024
1 parent e91d3a8 commit b4723a8
Show file tree
Hide file tree
Showing 4 changed files with 323 additions and 201 deletions.
12 changes: 8 additions & 4 deletions packages/mui-base/src/Slider2/SliderTrack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { resolveClassName } from '../utils/resolveClassName';
import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
import { useSliderContext } from './SliderContext';
import { TrackProps } from './Slider.types';
import { useSliderTrack } from '../useSlider2/useSliderTrack';

function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
return <div {...props} />;
Expand All @@ -18,12 +19,15 @@ const SliderTrack = React.forwardRef(function SliderTrack(

const render = renderProp ?? defaultRender;

const { getTrackProps, ownerState } = useSliderContext('Track');

const mergedRef = useRenderPropForkRef(render, forwardedRef);

const trackProps = getTrackProps({
ref: mergedRef,
const { ownerState } = useSliderContext('Track');

const { getRootProps } = useSliderTrack({
rootRef: mergedRef,
});

const trackProps = getRootProps({
className: resolveClassName(className, ownerState),
...otherProps,
});
Expand Down
20 changes: 17 additions & 3 deletions packages/mui-base/src/useSlider2/useSlider.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,6 @@ export interface UseSliderReturnValue {
getRootProps: (
externalProps?: React.ComponentPropsWithRef<'div'>,
) => React.ComponentPropsWithRef<'div'>;
getTrackProps: (
externalProps?: React.ComponentPropsWithRef<'div'>,
) => React.ComponentPropsWithRef<'div'>;
getOutputProps: (
externalProps?: React.ComponentPropsWithRef<'output'>,
) => React.ComponentPropsWithRef<'output'>;
Expand All @@ -161,6 +158,17 @@ export interface UseSliderReturnValue {
compoundComponentContextValue: CompoundComponentContextValue<any, ThumbMetadata>;
dragging: boolean;
disabled: boolean;
getFingerNewValue: (args: {
finger: { x: number; y: number };
move?: boolean;
offset?: number;
referenceRef?: React.RefObject<HTMLElement>;
}) => { newValue: number | number[]; activeIndex: number; newValuePercent: number };
handleValueChange: (
value: number | number[],
activeThumb: number,
event: React.SyntheticEvent | Event,
) => void;
isRtl: boolean;
largeStep: number;
/**
Expand All @@ -172,15 +180,21 @@ export interface UseSliderReturnValue {
*/
min: number;
name?: string;
onValueCommitted?: (value: number | number[], event: React.SyntheticEvent | Event) => void;
/**
* The thumb index for the current value when in hover state.
*/
open: number;
orientation: 'horizontal' | 'vertical';
scale: (value: number) => number;
setActive: (activeIndex: number) => void;
setDragging: (isDragging: boolean) => void;
setOpen: (index: number) => void;
setValueState: (newValue: number | number[]) => void;
step?: number | null;
tabIndex?: number;
thumbRefs: (HTMLElement | null)[];
valueState: number | readonly number[];
value: ReadonlyArray<number>;
}

Expand Down
Loading

0 comments on commit b4723a8

Please sign in to comment.