Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Slider] Narrow onChange value type #44777

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open
4 changes: 2 additions & 2 deletions docs/pages/material-ui/api/slider.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@
"onChange": {
"type": { "name": "func" },
"signature": {
"type": "function(event: Event, value: number | Array<number>, activeThumb: number) => void",
"type": "function(event: Event, value: Value, activeThumb: number) => void",
"describedArgs": ["event", "value", "activeThumb"]
}
},
"onChangeCommitted": {
"type": { "name": "func" },
"signature": {
"type": "function(event: React.SyntheticEvent | Event, value: number | Array<number>) => void",
"type": "function(event: React.SyntheticEvent | Event, value: Value) => void",
"describedArgs": ["event", "value"]
}
},
Expand Down
48 changes: 38 additions & 10 deletions packages/mui-material/src/Slider/Slider.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { OverridableStringUnion } from '@mui/types';
import { Mark } from './useSlider.types';
import { SlotComponentProps } from '../utils/types';
import { Theme } from '../styles';
import { OverrideProps, OverridableComponent } from '../OverridableComponent';
import { OverrideProps, DefaultComponentProps } from '../OverridableComponent';
import SliderValueLabelComponent from './SliderValueLabel';
import { SliderClasses } from './sliderClasses';

Expand All @@ -20,7 +20,7 @@ export interface SliderOwnerState extends SliderProps {
focusedThumbIndex: number;
}

export interface SliderOwnProps {
export interface SliderOwnProps<Value extends number | number[]> {
/**
* The label of the slider.
*/
Expand Down Expand Up @@ -93,7 +93,7 @@ export interface SliderOwnProps {
/**
* The default value. Use when the component is not controlled.
*/
defaultValue?: number | number[];
defaultValue?: Value;
/**
* If `true`, the component is disabled.
* @default false
Expand Down Expand Up @@ -148,17 +148,17 @@ export interface SliderOwnProps {
* @param {Event} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (any).
* **Warning**: This is a generic event not a change event.
* @param {number | number[]} value The new value.
* @param {Value} value The new value.
* @param {number} activeThumb Index of the currently moved thumb.
*/
onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
onChange?: (event: Event, value: Value, activeThumb: number) => void;
/**
* Callback function that is fired when the `mouseup` is triggered.
*
* @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {number | number[]} value The new value.
* @param {Value} value The new value.
*/
onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
onChangeCommitted?: (event: React.SyntheticEvent | Event, value: Value) => void;
/**
* The component orientation.
* @default 'horizontal'
Expand Down Expand Up @@ -246,7 +246,7 @@ export interface SliderOwnProps {
* The value of the slider.
* For ranged sliders, provide an array with two values.
*/
value?: number | number[];
value?: Value;
/**
* Controls when the value label is displayed:
*
Expand Down Expand Up @@ -275,11 +275,39 @@ export interface SliderOwnProps {
export interface SliderTypeMap<
RootComponent extends React.ElementType = 'span',
AdditionalProps = {},
Value extends number | number[] = number | number[],
> {
props: AdditionalProps & SliderOwnProps;
props: AdditionalProps & SliderOwnProps<Value>;
defaultComponent: RootComponent;
}

type SliderTypeMapNumber<
RootComponent extends React.ElementType = 'span',
AdditionalProps = {},
> = SliderTypeMap<RootComponent, AdditionalProps, number>;

type SliderTypeMapNumberArray<
RootComponent extends React.ElementType = 'span',
AdditionalProps = {},
> = SliderTypeMap<RootComponent, AdditionalProps, number[]>;

interface SliderType {
<RootComponent extends React.ElementType>(
props: OverrideProps<SliderTypeMapNumber, RootComponent>,
): React.JSX.Element | null;
(props: DefaultComponentProps<SliderTypeMapNumber>): React.JSX.Element | null;

<RootComponent extends React.ElementType>(
props: OverrideProps<SliderTypeMapNumberArray, RootComponent>,
): React.JSX.Element | null;
(props: DefaultComponentProps<SliderTypeMapNumberArray>): React.JSX.Element | null;

<RootComponent extends React.ElementType>(
props: OverrideProps<SliderTypeMap, RootComponent>,
): React.JSX.Element | null;
(props: DefaultComponentProps<SliderTypeMap>): React.JSX.Element | null;
}

export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
children: React.ReactElement<unknown>;
index: number;
Expand Down Expand Up @@ -312,7 +340,7 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
*
* - [Slider API](https://mui.com/material-ui/api/slider/)
*/
declare const Slider: OverridableComponent<SliderTypeMap>;
declare const Slider: SliderType;

export type SliderProps<
RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'],
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Slider/Slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -1037,15 +1037,15 @@ Slider.propTypes /* remove-proptypes */ = {
* @param {Event} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (any).
* **Warning**: This is a generic event not a change event.
* @param {number | number[]} value The new value.
* @param {Value} value The new value.
* @param {number} activeThumb Index of the currently moved thumb.
*/
onChange: PropTypes.func,
/**
* Callback function that is fired when the `mouseup` is triggered.
*
* @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {number | number[]} value The new value.
* @param {Value} value The new value.
*/
onChangeCommitted: PropTypes.func,
/**
Expand Down
Loading