[Slider] Improve RTL support (#20851)

mui · May 2, 2020 · ab026b1 · ab026b1
1 parent 9897189
commit ab026b1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 36 deletions.
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
@@ -425,13 +425,17 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setOpen(-1);
   });
 
+  const isRtl = theme.direction === 'rtl';
+
   const handleKeyDown = useEventCallback((event) => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
     const value = values[index];
     const tenPercents = (max - min) / 10;
     const marksValues = marks.map((mark) => mark.value);
     const marksIndex = marksValues.indexOf(value);
     let newValue;
+    const increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
 
     switch (event.key) {
       case 'Home':
@@ -450,15 +454,15 @@ const Slider = React.forwardRef(function Slider(props, ref) {
           newValue = value - tenPercents;
         }
         break;
-      case 'ArrowRight':
+      case increaseKey:
       case 'ArrowUp':
         if (step) {
           newValue = value + step;
         } else {
           newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
         }
         break;
-      case 'ArrowLeft':
+      case decreaseKey:
       case 'ArrowDown':
         if (step) {
           newValue = value - step;
@@ -503,7 +507,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
 
   const previousIndex = React.useRef();
   let axis = orientation;
-  if (theme.direction === 'rtl' && orientation === 'horizontal') {
+  if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';
   }
 

diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
@@ -129,39 +129,6 @@ describe('<Slider />', () => {
     });
   });
 
-  // TODO: use fireEvent for all the events.
-  // describe.skip('when mouse reenters window', () => {
-  //   it('should update if mouse is still clicked', () => {
-  //     const handleChange = spy();
-  //     const { container } = render(<Slider onChange={handleChange} value={50} />);
-
-  //     fireEvent.mouseDown(container.firstChild);
-  //     document.body.dispatchEvent(new window.MouseEvent('mouseleave'));
-  //     const mouseEnter = new window.Event('mouseenter');
-  //     mouseEnter.buttons = 1;
-  //     document.body.dispatchEvent(mouseEnter);
-  //     expect(handleChange.callCount).to.equal(1);
-
-  //     document.body.dispatchEvent(new window.MouseEvent('mousemove'));
-  //     expect(handleChange.callCount).to.equal(2);
-  //   });
-
-  //   it('should not update if mouse is not clicked', () => {
-  //     const handleChange = spy();
-  //     const { container } = render(<Slider onChange={handleChange} value={50} />);
-
-  //     fireEvent.mouseDown(container.firstChild);
-  //     document.body.dispatchEvent(new window.MouseEvent('mouseleave'));
-  //     const mouseEnter = new window.Event('mouseenter');
-  //     mouseEnter.buttons = 0;
-  //     document.body.dispatchEvent(mouseEnter);
-  //     expect(handleChange.callCount).to.equal(1);
-
-  //     document.body.dispatchEvent(new window.MouseEvent('mousemove'));
-  //     expect(handleChange.callCount).to.equal(1);
-  //   });
-  // });
-
   describe('range', () => {
     it('should support keyboard', () => {
       const { getAllByRole } = render(<Slider defaultValue={[20, 30]} />);
@@ -391,6 +358,25 @@ describe('<Slider />', () => {
       fireEvent.keyDown(document.activeElement, moveLeftEvent);
       expect(thumb).to.have.attribute('aria-valuenow', '-3e-8');
     });
+
+    it('should handle RTL', () => {
+      const { getByRole } = render(
+        <ThemeProvider
+          theme={createMuiTheme({
+            direction: 'rtl',
+          })}
+        >
+          <Slider defaultValue={30} />
+        </ThemeProvider>,
+      );
+      const thumb = getByRole('slider');
+      thumb.focus();
+
+      fireEvent.keyDown(document.activeElement, moveLeftEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '31');
+      fireEvent.keyDown(document.activeElement, moveRightEvent);
+      expect(thumb).to.have.attribute('aria-valuenow', '30');
+    });
   });
 
   describe('prop: valueLabelDisplay', () => {