From 8b0615df5f3ec8252896cf8662eb7fa7a7873a01 Mon Sep 17 00:00:00 2001
From: Brian Stone <brians@zillowgroup.com>
Date: Wed, 24 Apr 2019 17:47:13 -0700
Subject: [PATCH] feat: pass `value` state to render props

BREAKING CHANGE: `renderThumb` was previously given the indexed handle value
which now needs to be derived from `value` and `index.
---
 src/components/ReactSlider/ReactSlider.jsx                | 6 ++++--
 src/components/ReactSlider/ReactSlider.md                 | 8 ++++----
 .../__tests__/__snapshots__/ReactSlider.test.js.snap      | 2 ++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
index fe2eeec6..c3555b19 100644
--- a/src/components/ReactSlider/ReactSlider.jsx
+++ b/src/components/ReactSlider/ReactSlider.jsx
@@ -213,6 +213,7 @@ class ReactSlider extends React.Component {
          *
          * - `index` {`number`} the index of the track
          * - `key` {`string`} a unique key for the track
+         * - 'value' {`number` | `array`} the current value state
          * - `style` {`object`} positioning styles that should be applied to the node
          * - `className` {`string`} default classNames for the track
          */
@@ -225,7 +226,7 @@ class ReactSlider extends React.Component {
          *
          * - `index` {`number`} the index of the thumb
          * - `key` {`string`} a unique key for the thumb
-         * - `value` {`number`} the value of the thumb
+         * - 'value' {`number` | `array`} the current value state
          */
         // eslint-disable-next-line zillow/react/require-default-props
         renderThumb: PropTypes.func,
@@ -864,7 +865,7 @@ class ReactSlider extends React.Component {
                 const child = this.props.renderThumb({
                     index: i,
                     key: `${this.props.thumbClassName}-${i}`,
-                    value: this.state.value[i],
+                    value: undoEnsureArray(this.state.value),
                 });
                 res[i] = this.renderThumb(styles[i], child, i);
             }
@@ -880,6 +881,7 @@ class ReactSlider extends React.Component {
         this.props.renderTrack({
             index: i,
             key: `${this.props.trackClassName}-${i}`,
+            value: undoEnsureArray(this.state.value),
             className: `${this.props.trackClassName} ${this.props.trackClassName}-${i}`,
             style: this.buildTrackStyle(offsetFrom, this.state.upperBound - offsetTo),
         });
diff --git a/src/components/ReactSlider/ReactSlider.md b/src/components/ReactSlider/ReactSlider.md
index 2ba12dd2..84ef011a 100644
--- a/src/components/ReactSlider/ReactSlider.md
+++ b/src/components/ReactSlider/ReactSlider.md
@@ -18,7 +18,7 @@ Double slider
     trackClassName="example-track"
     defaultValue={[0, 100]}
     ariaLabel={['Lower thumb', 'Upper thumb']}
-    renderThumb={({ value }) => value}
+    renderThumb={({ index, value }) => value[index]}
     pearling
     minDistance={10}
 />
@@ -33,7 +33,7 @@ Multi slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Leftmost thumb', 'Middle thumb', 'Rightmost thumb']}
-    renderThumb={({ value }) => value}
+    renderThumb={({ index, value }) => value[index]}
     pearling
     minDistance={10}
 />
@@ -48,7 +48,7 @@ Vertical slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
-    renderThumb={({ value }) => value}
+    renderThumb={({ index, value }) => value[index]}
     orientation="vertical"
     invert
     pearling
@@ -77,7 +77,7 @@ const StyledThumb = styled.div`
     cursor: grab;
 `;
 
-const Thumb = ({ value, ...props }) => <StyledThumb {...props}>{value}</StyledThumb>;
+const Thumb = ({ index, value, ...props }) => <StyledThumb {...props}>{value[index]}</StyledThumb>;
 
 const StyledTrack = styled.div`
     top: 0;
diff --git a/src/components/ReactSlider/__tests__/__snapshots__/ReactSlider.test.js.snap b/src/components/ReactSlider/__tests__/__snapshots__/ReactSlider.test.js.snap
index ec485ab7..fdf305c4 100644
--- a/src/components/ReactSlider/__tests__/__snapshots__/ReactSlider.test.js.snap
+++ b/src/components/ReactSlider/__tests__/__snapshots__/ReactSlider.test.js.snap
@@ -22,6 +22,7 @@ exports[`<ReactSlider> can render 1`] = `
         "willChange": "",
       }
     }
+    value={0}
   />
   <div
     className="track track-1"
@@ -34,6 +35,7 @@ exports[`<ReactSlider> can render 1`] = `
         "willChange": "",
       }
     }
+    value={0}
   />
   <div
     aria-valuemax={100}