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.
zillow · Sep 27, 2019 · 8b0615d · 8b0615d
1 parent 3cb3413
commit 8b0615d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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}