feat: add valueNow to state objects of ariaValuetext and `renderT…

…humb` for easier access to the current value
zillow · Sep 27, 2019 · 94712f2 · 94712f2
1 parent 669dcdb
commit 94712f2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -219,6 +219,7 @@ class ReactSlider extends React.Component {
          *
          * - `state.index` {`number`} the index of the thumb
          * - `state.value` {`number` | `array`} the current value state
+         * - `state.valueNow` {`number`} the value of the thumb (i.e. aria-valuenow)
          */
         // eslint-disable-next-line zillow/react/require-default-props
         ariaValuetext: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
@@ -248,6 +249,7 @@ class ReactSlider extends React.Component {
          * - `props` {`object`} props to be spread into your thumb node
          * - `state.index` {`number`} the index of the thumb
          * - `state.value` {`number` | `array`} the current value state
+         * - `state.valueNow` {`number`} the value of the thumb (i.e. aria-valuenow)
          */
         // eslint-disable-next-line zillow/react/require-default-props
         renderThumb: PropTypes.func,
@@ -877,21 +879,19 @@ class ReactSlider extends React.Component {
                 : this.props.ariaLabel,
         };
 
+        const state = {
+            index: i,
+            value: undoEnsureArray(this.state.value),
+            valueNow: this.state.value[i],
+        };
+
         if (this.props.ariaValuetext) {
             props['aria-valuetext'] =
                 typeof this.props.ariaValuetext === 'string'
                     ? this.props.ariaValuetext
-                    : this.props.ariaValuetext({
-                          value: this.state.value,
-                          index: i,
-                      });
+                    : this.props.ariaValuetext(state);
         }
 
-        const state = {
-            index: i,
-            value: undoEnsureArray(this.state.value),
-        };
-
         return this.props.renderThumb(props, state);
     };
 

diff --git a/src/components/ReactSlider/ReactSlider.md b/src/components/ReactSlider/ReactSlider.md
@@ -5,7 +5,7 @@ Single slider, similar to `<input type="range" defaultValue={0} />`
     className="horizontal-slider"
     thumbClassName="example-thumb"
     trackClassName="example-track"
-    renderThumb={(props, state) => <div {...props}>{state.value}</div>}
+    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
 />
 ```
 
@@ -18,8 +18,8 @@ Double slider
     trackClassName="example-track"
     defaultValue={[0, 100]}
     ariaLabel={['Lower thumb', 'Upper thumb']}
-    ariaValuetext={({ index, value }) => `Thumb value ${value[index]}`}
-    renderThumb={(props, state) => <div {...props}>{state.value[state.index]}</div>}
+    ariaValuetext={state => `Thumb value ${state.valueNow}`}
+    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     pearling
     minDistance={10}
 />
@@ -34,7 +34,7 @@ Multi slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Leftmost thumb', 'Middle thumb', 'Rightmost thumb']}
-    renderThumb={(props, state) => <div {...props}>{state.value[state.index]}</div>}
+    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     pearling
     minDistance={10}
 />
@@ -49,7 +49,7 @@ Vertical slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
-    renderThumb={(props, state) => <div {...props}>{state.value[state.index]}</div>}
+    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     orientation="vertical"
     invert
     pearling
@@ -78,7 +78,7 @@ const StyledThumb = styled.div`
     cursor: grab;
 `;
 
-const Thumb = (props, state) => <StyledThumb {...props}>{state.value[state.index]}</StyledThumb>;
+const Thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}</StyledThumb>;
 
 const StyledTrack = styled.div`
     top: 0;