Move mouse event to slider

zendeskgarden · Apr 24, 2020 · 673c91b · 673c91b
1 parent b0e4783
commit 673c91b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/packages/forms/.size-snapshot.json b/packages/forms/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 103453,
-    "minified": 68750,
-    "gzipped": 13144
+    "bundled": 103605,
+    "minified": 68827,
+    "gzipped": 13165
   },
   "dist/index.esm.js": {
-    "bundled": 99765,
-    "minified": 65130,
-    "gzipped": 12999,
+    "bundled": 99898,
+    "minified": 65188,
+    "gzipped": 13019,
     "treeshaked": {
       "rollup": {
-        "code": 51886,
+        "code": 51925,
         "import_statements": 614
       },
       "webpack": {
-        "code": 58088
+        "code": 58156
       }
     }
   }

diff --git a/packages/forms/src/elements/MultiThumbRange.spec.tsx b/packages/forms/src/elements/MultiThumbRange.spec.tsx
@@ -79,33 +79,33 @@ describe('MultiThumbRange', () => {
     });
   });
 
-  describe('Track selection', () => {
-    it('updates min value if track is clicked near min thumb', () => {
+  describe('Slider selection', () => {
+    it('updates min value if slider is clicked near min thumb', () => {
       const onChangeSpy = jest.fn();
       const { getByTestId } = render(
         <MultiThumbRange minValue={15} maxValue={75} step={5} onChange={onChangeSpy} />
       );
 
-      const track = getByTestId('track');
-      const mouseEvent = createEvent.mouseDown(track);
+      const slider = getByTestId('slider');
+      const mouseEvent = createEvent.mouseDown(slider);
 
       (mouseEvent as any).pageX = 45;
-      fireEvent(track, mouseEvent);
+      fireEvent(slider, mouseEvent);
 
       expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 25, maxValue: 75 });
     });
 
-    it('updates max value if track is clicked near max thumb', () => {
+    it('updates max value if slider is clicked near max thumb', () => {
       const onChangeSpy = jest.fn();
       const { getByTestId } = render(
         <MultiThumbRange minValue={15} maxValue={75} step={5} onChange={onChangeSpy} />
       );
 
-      const track = getByTestId('track');
-      const mouseEvent = createEvent.mouseDown(track);
+      const slider = getByTestId('slider');
+      const mouseEvent = createEvent.mouseDown(slider);
 
       (mouseEvent as any).pageX = 100;
-      fireEvent(track, mouseEvent);
+      fireEvent(slider, mouseEvent);
 
       expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 80 });
     });

diff --git a/packages/forms/src/elements/MultiThumbRange.tsx b/packages/forms/src/elements/MultiThumbRange.tsx
@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { KEY_CODES } from '@zendeskgarden/container-utilities';
+import { KEY_CODES, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import { withTheme, useDocument, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import {
   StyledSlider,
@@ -55,6 +55,7 @@ const MultiThumbRange: React.FC<IMultiThumbRangeProps & ThemeProps<DefaultTheme>
   step,
   onChange,
   theme,
+  onMouseDown,
   ...props
 }) => {
   const themedDocument = useDocument(theme);
@@ -351,14 +352,20 @@ const MultiThumbRange: React.FC<IMultiThumbRangeProps & ThemeProps<DefaultTheme>
   const maxPosition = calculateMaxPosition(MIN_DISTANCE);
   const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
 
+  const onSliderMouseDown = composeEventHandlers(onMouseDown, onTrackMouseDown);
+
   return (
-    <StyledSlider data-test-id="slider" isDisabled={disabled} {...props}>
+    <StyledSlider
+      data-test-id="slider"
+      isDisabled={disabled}
+      onMouseDown={onSliderMouseDown}
+      {...props}
+    >
       <StyledSliderTrack
         backgroundSize={sliderBackgroundSize}
         backgroundPosition={theme.rtl ? railWidth - maxPosition : minPosition}
         data-test-id="track"
         isDisabled={disabled}
-        onMouseDown={onTrackMouseDown}
       >
         <StyledSliderTrackRail data-test-id="rail" ref={trackRailRef}>
           <StyledSliderThumb