feat: add thumb index to on change events

Closes #212
zillow · Jun 3, 2021 · f0c9684 · f0c9684
1 parent 46c01b0
commit f0c9684
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -222,25 +222,26 @@ class ReactSlider extends React.Component {
 
         /**
          * Callback called before starting to move a thumb. The callback will only be called if the
-         * action will result in a change. The function will be called with one argument,
-         * the initial value(s).
+         * action will result in a change. The function will be called with two arguments, the first
+         * being the initial value(s) the second being thumb index.
          */
         // eslint-disable-next-line max-len
         // eslint-disable-next-line zillow/react/require-default-props, zillow/react/no-unused-prop-types
         onBeforeChange: PropTypes.func,
 
         /**
          * Callback called on every value change.
-         * The function will be called with one argument, the new value(s).
+         * The function will be called with two arguments, the first being the new value(s) 
+         * the second being thumb index.
          */
         // eslint-disable-next-line max-len
         // eslint-disable-next-line zillow/react/require-default-props, zillow/react/no-unused-prop-types
         onChange: PropTypes.func,
 
         /**
          * Callback called only after moving a thumb has ended. The callback will only be called if
-         * the action resulted in a change. The function will be called with one argument,
-         * the result value(s).
+         * the action resulted in a change. The function will be called with two arguments, the
+         * first being the result value(s) the second being thumb index.
          */
         // eslint-disable-next-line max-len
         // eslint-disable-next-line zillow/react/require-default-props, zillow/react/no-unused-prop-types
@@ -951,7 +952,7 @@ class ReactSlider extends React.Component {
 
     fireChangeEvent(event) {
         if (this.props[event]) {
-            this.props[event](prepareOutValue(this.state.value));
+            this.props[event](prepareOutValue(this.state.value), this.state.index);
         }
     }
 

diff --git a/src/components/ReactSlider/ReactSlider.md b/src/components/ReactSlider/ReactSlider.md
@@ -114,9 +114,9 @@ Track changes with `onBeforeChange`, `onChange`, and `onAfterChange` event handl
     className="horizontal-slider"
     thumbClassName="example-thumb"
     trackClassName="example-track"
-    onBeforeChange={val => console.log('onBeforeChange value:', val)}
-    onChange={val => console.log('onChange value:', val)}
-    onAfterChange={val => console.log('onAfterChange value:', val)}
+    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
 />
 ```
@@ -128,9 +128,9 @@ const [value, setValue] = React.useState([25, 50]);
 
 <ReactSlider
     value={value}
-    onBeforeChange={val => console.log('onBeforeChange value:', val)}
-    onChange={val => { console.log('onChange value:', val); setValue(val); }}
-    onAfterChange={val => console.log('onAfterChange value:', val)}
+    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
     className="horizontal-slider"
     thumbClassName="example-thumb"
     trackClassName="example-track"

diff --git a/src/components/ReactSlider/__tests__/ReactSlider.test.js b/src/components/ReactSlider/__tests__/ReactSlider.test.js
@@ -114,20 +114,20 @@ describe('<ReactSlider>', () => {
             onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
 
             expect(onBeforeChange).toHaveBeenCalledTimes(1);
-            expect(onBeforeChange).toHaveBeenCalledWith(0);
+            expect(onBeforeChange).toHaveBeenCalledWith(0, 0);
             expect(onBeforeChange.mock.invocationCallOrder[0]).toBeLessThan(
                 onChange.mock.invocationCallOrder[0]
             );
             expect(onChange).toHaveBeenCalledTimes(1);
-            expect(onChange).toHaveBeenCalledWith(1);
+            expect(onChange).toHaveBeenCalledWith(1, 0);
 
             // simulate keydown
             onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
 
             expect(onBeforeChange).toHaveBeenCalledTimes(1);
-            expect(onBeforeChange).toHaveBeenCalledWith(0);
+            expect(onBeforeChange).toHaveBeenCalledWith(0, 0);
             expect(onChange).toHaveBeenCalledTimes(2);
-            expect(onChange).toHaveBeenCalledWith(2);
+            expect(onChange).toHaveBeenCalledWith(2, 0);
         });
 
         it('calls onChange for every change', () => {
@@ -158,13 +158,13 @@ describe('<ReactSlider>', () => {
             onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
 
             expect(onChange).toHaveBeenCalledTimes(1);
-            expect(onChange).toHaveBeenCalledWith(1);
+            expect(onChange).toHaveBeenCalledWith(1, 0);
 
             // simulate keydown
             onKeyDown({ key: 'ArrowLeft', preventDefault: () => {} });
 
             expect(onChange).toHaveBeenCalledTimes(2);
-            expect(onChange).toHaveBeenCalledWith(0);
+            expect(onChange).toHaveBeenCalledWith(0, 0);
         });
 
         it('calls onAfterChange only once after onChange', () => {
@@ -204,22 +204,22 @@ describe('<ReactSlider>', () => {
             onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
 
             expect(onChange).toHaveBeenCalledTimes(1);
-            expect(onChange).toHaveBeenCalledWith(1);
+            expect(onChange).toHaveBeenCalledWith(1, 0);
             expect(onAfterChange).not.toHaveBeenCalled();
 
             // simulate keydown
             onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
 
             expect(onChange).toHaveBeenCalledTimes(2);
-            expect(onChange).toHaveBeenCalledWith(2);
+            expect(onChange).toHaveBeenCalledWith(2, 0);
             expect(onAfterChange).not.toHaveBeenCalled();
 
             // simulate keyup
             onKeyUp();
 
             expect(onChange).toHaveBeenCalledTimes(2);
             expect(onAfterChange).toHaveBeenCalledTimes(1);
-            expect(onAfterChange).toHaveBeenCalledWith(2);
+            expect(onAfterChange).toHaveBeenCalledWith(2, 0);
             expect(onAfterChange.mock.invocationCallOrder[0]).toBeGreaterThan(
                 onChange.mock.invocationCallOrder[1]
             );