From de75419a296c631ec445ebe84cbb8f67f52a92c3 Mon Sep 17 00:00:00 2001
From: Brian Stone <brians@zillowgroup.com>
Date: Thu, 25 Apr 2019 12:37:55 -0700
Subject: [PATCH] feat: the paging value is now configurable via the `pageFn`
 prop

---
 src/components/ReactSlider/ReactSlider.jsx | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
index 824ae82c..a6ab71f6 100644
--- a/src/components/ReactSlider/ReactSlider.jsx
+++ b/src/components/ReactSlider/ReactSlider.jsx
@@ -85,6 +85,15 @@ class ReactSlider extends React.Component {
          */
         step: PropTypes.number,
 
+        /**
+         * The result of the function is the value to be added or subtracted
+         * when the `Page Up` or `Page Down` keys are pressed.
+         *
+         * The current `step` value will be passed as the only argument.
+         * By default, paging will modify `step` by a factor of 10.
+         */
+        pageFn: PropTypes.func,
+
         /**
          * The minimal distance between any pair of thumbs.
          * Must be positive, but zero means they can sit on top of each other.
@@ -236,6 +245,7 @@ class ReactSlider extends React.Component {
         min: 0,
         max: 100,
         step: 1,
+        pageFn: step => step * 10,
         minDistance: 0,
         defaultValue: 0,
         orientation: 'horizontal',
@@ -378,12 +388,12 @@ class ReactSlider extends React.Component {
             case 'ArrowLeft':
             case 'ArrowDown':
                 e.preventDefault();
-                this.moveDownBySteps();
+                this.moveDownByStep();
                 break;
             case 'ArrowRight':
             case 'ArrowUp':
                 e.preventDefault();
-                this.moveUpBySteps();
+                this.moveUpByStep();
                 break;
             case 'Home':
                 e.preventDefault();
@@ -395,11 +405,11 @@ class ReactSlider extends React.Component {
                 break;
             case 'PageDown':
                 e.preventDefault();
-                this.moveDownBySteps(10);
+                this.moveDownByStep(this.props.pageFn(this.props.step));
                 break;
             case 'PageUp':
                 e.preventDefault();
-                this.moveUpBySteps(10);
+                this.moveUpByStep(this.props.pageFn(this.props.step));
                 break;
             default:
         }
@@ -647,15 +657,15 @@ class ReactSlider extends React.Component {
         }));
     }
 
-    moveUpBySteps(steps = 1) {
+    moveUpByStep(step = this.props.step) {
         const oldValue = this.state.value[this.state.index];
-        const newValue = oldValue + this.props.step * steps;
+        const newValue = oldValue + step;
         this.move(Math.min(newValue, this.props.max));
     }
 
-    moveDownBySteps(steps = 1) {
+    moveDownByStep(step = this.props.step) {
         const oldValue = this.state.value[this.state.index];
-        const newValue = oldValue - this.props.step * steps;
+        const newValue = oldValue - step;
         this.move(Math.max(newValue, this.props.min));
     }