Skip to content

Commit

Permalink
[Slider][base] Convert code to TypeScript (mui#35445)
Browse files Browse the repository at this point in the history 
Co-authored-by: ZeeshanTamboli <[email protected]>
  • Loading branch information
@sai6855 @ZeeshanTamboli
sai6855 and ZeeshanTamboli authored Jan 16, 2023
1 parent 2eba366 commit 2b575e2
Show file tree
Hide file tree
Showing 14 changed files with 185 additions and 103 deletions.
6 changes: 3 additions & 3 deletions docs/pages/base/api/slider-unstyled.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
"default": "'horizontal'"
},
"scale": { "type": { "name": "func" }, "default": "(x) => x" },
"scale": { "type": { "name": "func" }, "default": "function Identity(x) {\n return x;\n}" },
"slotProps": {
"type": {
"name": "shape",
Expand Down Expand Up @@ -62,7 +62,7 @@
},
"valueLabelFormat": {
"type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
"default": "(x) => x"
"default": "function Identity(x) {\n return x;\n}"
}
},
"name": "SliderUnstyled",
Expand Down Expand Up @@ -115,7 +115,7 @@
},
"spread": true,
"forwardsRefTo": "HTMLSpanElement",
"filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js",
"filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx",
"inheritance": null,
"demos": "<ul><li><a href=\"/base/react-slider/\">Unstyled Slider</a></li></ul>",
"cssComponent": false
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/material-ui/api/slider.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
"default": "'horizontal'"
},
"scale": { "type": { "name": "func" }, "default": "(x) => x" },
"scale": { "type": { "name": "func" }, "default": "function Identity(x) {\n return x;\n}" },
"size": {
"type": {
"name": "union",
Expand Down Expand Up @@ -94,7 +94,7 @@
},
"valueLabelFormat": {
"type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
"default": "(x) => x"
"default": "function Identity(x) {\n return x;\n}"
}
},
"name": "Slider",
Expand Down
2 changes: 1 addition & 1 deletion docs/translations/api-docs/slider-unstyled/slider-unstyled.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: Event, value: number | Array&lt;number&gt;, activeThumb: number) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.<br><em>activeThumb:</em> Index of the currently moved thumb.",
"onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
"orientation": "The component orientation.",
"scale": "A transformation function, to change the scale of the slider.",
"scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
"slotProps": "The props used for each slot inside the Slider.",
"slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component.",
"step": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",
Expand Down
2 changes: 1 addition & 1 deletion docs/translations/api-docs/slider/slider.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: Event, value: number | Array&lt;number&gt;, activeThumb: number) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.<br><em>activeThumb:</em> Index of the currently moved thumb.",
"onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
"orientation": "The component orientation.",
"scale": "A transformation function, to change the scale of the slider.",
"scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
"size": "The size of the slider.",
"slotProps": "The props used for each slot inside the Slider.",
"slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component.",
Expand Down
16 changes: 0 additions & 16 deletions packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts
View file

This file was deleted.

103 changes: 73 additions & 30 deletions ...src/SliderUnstyled/SliderUnstyled.test.js → ...rc/SliderUnstyled/SliderUnstyled.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import SliderUnstyled, { sliderUnstyledClasses as classes } from '@mui/base/SliderUnstyled';
import SliderUnstyled, {
sliderUnstyledClasses as classes,
SliderUnstyledRootSlotProps,
} from '@mui/base/SliderUnstyled';
import { expect } from 'chai';
import * as React from 'react';
import { spy, stub } from 'sinon';
Expand All @@ -10,7 +13,9 @@ import {
screen,
} from 'test/utils';

function createTouches(touches) {
type Touches = Array<Pick<Touch, 'identifier' | 'clientX' | 'clientY'>>;

function createTouches(touches: Touches) {
return {
changedTouches: touches.map(
(touch) =>
Expand Down Expand Up @@ -61,10 +66,19 @@ describe('<SliderUnstyled />', () => {
let theme = null;

const Root = React.forwardRef(
({ ownerState: ownerStateProp, theme: themeProp, ...other }, ref) => {
(
{
ownerState: ownerStateProp,
theme: themeProp,
...other
}: SliderUnstyledRootSlotProps & {
theme: any;
},
ref: React.ForwardedRef<HTMLSpanElement>,
) => {
ownerState = ownerStateProp;
theme = themeProp;
return <span ref={ref} {...other} />;
return <span {...other} ref={ref} />;
},
);

Expand All @@ -75,7 +89,7 @@ describe('<SliderUnstyled />', () => {
});

it('does not forward style props as DOM attributes if component slot is primitive', () => {
const elementRef = React.createRef();
const elementRef = React.createRef<HTMLSpanElement>();
render(
<SliderUnstyled
slots={{
Expand All @@ -86,8 +100,10 @@ describe('<SliderUnstyled />', () => {
);

const { current: element } = elementRef;
expect(element.getAttribute('ownerState')).to.equal(null);
expect(element.getAttribute('theme')).to.equal(null);
if (element !== null) {
expect(element.getAttribute('ownerState')).to.equal(null);
expect(element.getAttribute('theme')).to.equal(null);
}
});

describe('prop: marks', () => {
Expand Down Expand Up @@ -136,28 +152,47 @@ describe('<SliderUnstyled />', () => {
});
});

[
type Values = Array<[string, number[]]>;

const values = [
['readonly range', Object.freeze([2, 1])],
['range', [2, 1]],
].forEach(([valueLabel, value]) => {
] as Values;
values.forEach(([valueLabel, value]) => {
it(`calls onChange even if the ${valueLabel} did not change`, () => {
const handleChange = spy();
const { container } = render(
<SliderUnstyled min={0} max={5} onChange={handleChange} value={value} />,

render(
<SliderUnstyled
min={0}
max={5}
onChange={handleChange}
value={value}
data-testid="slider-root"
/>,
);
stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({

const sliderRoot = screen.getByTestId('slider-root');

stub(sliderRoot, 'getBoundingClientRect').callsFake(() => ({
width: 100,
height: 10,
bottom: 10,
left: 0,
x: 0,
y: 0,
right: 0,
top: 0,
toJSON() {},
}));

// pixel: 0 20 40 60 80 100
// slider: |---|---|---|---|---|
// values: 0 1 2 3 4 5
// value: ↑ ↑
// mouse: ↑
fireEvent.mouseDown(container.firstChild, {

fireEvent.mouseDown(sliderRoot, {
buttons: 1,
clientX: 41,
});
Expand All @@ -181,19 +216,24 @@ describe('<SliderUnstyled />', () => {
this.skip();
}

const { getByRole, setProps, container } = render(<SliderUnstyled defaultValue={0} />);
const { getByRole, setProps, getByTestId } = render(
<SliderUnstyled defaultValue={0} data-testid="slider-root" />,
);

const sliderRoot = getByTestId('slider-root');

stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
stub(sliderRoot, 'getBoundingClientRect').callsFake(() => ({
width: 100,
height: 10,
bottom: 10,
left: 0,
x: 0,
y: 0,
top: 0,
right: 0,
toJSON() {},
}));

fireEvent.touchStart(
container.firstChild,
createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
);
fireEvent.touchStart(sliderRoot, createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]));

const thumb = getByRole('slider');

Expand All @@ -204,10 +244,7 @@ describe('<SliderUnstyled />', () => {
expect(thumb).not.toHaveFocus();
expect(thumb).not.to.have.class(classes.active);

fireEvent.touchMove(
container.firstChild,
createTouches([{ identifier: 1, clientX: 30, clientY: 0 }]),
);
fireEvent.touchMove(sliderRoot, createTouches([{ identifier: 1, clientX: 30, clientY: 0 }]));

expect(thumb).to.have.attribute('aria-valuenow', '21');
});
Expand All @@ -218,20 +255,26 @@ describe('<SliderUnstyled />', () => {
this.skip();
}

const { getByRole, container } = render(<SliderUnstyled disabled defaultValue={21} />);
const { getByRole, getByTestId } = render(
<SliderUnstyled disabled defaultValue={21} data-testid="slider-root" />,
);

const thumb = getByRole('slider');
const sliderRoot = getByTestId('slider-root');

stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
stub(sliderRoot, 'getBoundingClientRect').callsFake(() => ({
width: 100,
height: 10,
bottom: 10,
left: 0,
x: 0,
y: 0,
top: 0,
right: 0,
toJSON() {},
}));

fireEvent.touchStart(
container.firstChild,
createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
);
fireEvent.touchStart(sliderRoot, createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]));

fireEvent.touchMove(
document.body,
Expand Down
Loading

0 comments on commit 2b575e2

Please sign in to comment.