Support sliders with CSS scale() (#293)

* Fix #279 - Use getBoundingClientRect for proper scaled width of slider * Fix width mocking in tests. Fix mocking of `getBoundingClientRect`.
react-component · Jul 3, 2017 · a499d74 · a499d74
1 parent 7a1bfec
commit a499d74
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/common/createSlider.jsx b/src/common/createSlider.jsx
@@ -169,8 +169,8 @@ export default function createSlider(Component) {
         return 0;
       }
 
-      return this.props.vertical ?
-        slider.clientHeight : slider.clientWidth;
+      const coords = slider.getBoundingClientRect();
+      return this.props.vertical ? coords.height : coords.width;
     }
 
     calcValue(offset) {

diff --git a/tests/common/createSlider.test.js b/tests/common/createSlider.test.js
@@ -4,17 +4,23 @@ import { mount } from 'enzyme';
 import Slider from '../..';
 const { Range } = Slider;
 
-// https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
-const polyfillJsDomApi = property => (object, value) => {
-  Object.defineProperty(object, property, {
-    get() { return value; },
+const setWidth = (object, width) => {
+  // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
+  Object.defineProperty(object, 'getBoundingClientRect', {
+    value: () => ({
+      width,
+      // Let all other values retain the JSDom default of `0`.
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    }),
     enumerable: true,
     configurable: true,
   });
 };
 
-const setClientWidth = polyfillJsDomApi('clientWidth');
-
 describe('createSlider', () => {
   it('should render vertical Slider/Range, when `vertical` is true', () => {
     const sliderWrapper = mount(<Slider vertical />);
@@ -81,7 +87,7 @@ describe('createSlider', () => {
   it('Should remove event listeners if unmounted during drag', () => {
     const wrapper = mount(<Slider />);
 
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const sliderTrack = wrapper.find('.rc-slider-track').get(0);
     wrapper.simulate('touchstart', {
       type: 'touchstart',
@@ -99,7 +105,7 @@ describe('createSlider', () => {
   // TODO: should update the following test cases for it should test API instead implementation
   it('should set `dragOffset` to correct value when the left handle is clicked off-center', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const leftHandle = wrapper.find('.rc-slider-handle').get(0);
     wrapper.simulate('mousedown', {
       type: 'mousedown',
@@ -113,7 +119,7 @@ describe('createSlider', () => {
 
   it('should respect `dragOffset` while dragging the handle via MouseEvents', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const leftHandle = wrapper.find('.rc-slider-handle').get(0);
     wrapper.simulate('mousedown', {
       type: 'mousedown',
@@ -135,7 +141,7 @@ describe('createSlider', () => {
 
   it('should not go to right direction when mouse go to the left', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const leftHandle = wrapper.find('.rc-slider-handle').get(0);
     wrapper.simulate('mousedown', {
       type: 'mousedown',
@@ -157,7 +163,7 @@ describe('createSlider', () => {
 
   it('should set `dragOffset` to 0 when the MouseEvent target isn\'t a handle', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const sliderTrack = wrapper.find('.rc-slider-track').get(0);
     wrapper.simulate('mousedown', {
       type: 'mousedown',
@@ -171,7 +177,7 @@ describe('createSlider', () => {
 
   it('should set `dragOffset` to correct value when the left handle is touched off-center', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const leftHandle = wrapper.find('.rc-slider-handle').get(0);
     wrapper.simulate('touchstart', {
       type: 'touchstart',
@@ -185,7 +191,7 @@ describe('createSlider', () => {
 
   it('should respect `dragOffset` while dragging the handle via TouchEvents', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const leftHandle = wrapper.find('.rc-slider-handle').get(0);
     wrapper.simulate('touchstart', {
       type: 'touchstart',
@@ -207,7 +213,7 @@ describe('createSlider', () => {
 
   it('should set `dragOffset` to 0 when the TouchEvent target isn\'t a handle', () => {
     const wrapper = mount(<Slider />);
-    setClientWidth(wrapper.node.sliderRef, 100);
+    setWidth(wrapper.node.sliderRef, 100);
     const sliderTrack = wrapper.find('.rc-slider-track').get(0);
     wrapper.simulate('touchstart', {
       type: 'touchstart',