<Slider/>- adding startPoint feature (#5011)

Author: TalZa1810

package.json

@@ -219,7 +219,7 @@
     "omit": "^1.0.1",
     "popper.js": "^1.14.5",
     "prop-types": "^15.5.8",
-    "rc-slider": "^8.0.2",
+    "rc-slider": "^9.2.0",
     "react-collapse": "^4.0.3",
     "react-day-picker": "^7.0.7",
     "react-dnd": "^2.5.1",

src/Slider/Slider.js

@@ -100,6 +100,7 @@ export default class Slider extends Component {
       allowCross,
       value,
       displayMarks,
+      startPoint,
       dataHook,
       id,
       ...rest
@@ -116,6 +117,7 @@ export default class Slider extends Component {
     ) : (
       <Slide
         {...rest}
+        startPoint={startPoint}
         handle={this._renderHandle}
         marks={displayMarks ? this._getMarks() : {}}
         value={Array.isArray(value) ? value[0] : value}
@@ -185,18 +187,22 @@ Slider.propTypes = {
 
   /** Make it disabled */
   disabled: PropTypes.bool,
+
+  /** Track starts from this value. If undefined, min is used. */
+  startPoint: PropTypes.number,
 };
 
 Slider.defaultProps = {
   min: 1,
   max: 20,
   step: 1,
-  value: [2, 7],
+  value: 3,
   allowCross: true,
   id: generateID(),
   displayTooltip: true,
   displayMarks: true,
   marks: {},
   rtl: false,
   disabled: false,
+  startPoint: undefined,
 };

src/Slider/Slider.spec.js

@@ -31,20 +31,6 @@ describe('Slider', () => {
       expect(await driver.isDotSelected(3)).toBe(true);
     });
 
-    it('should render slider with multi-range', async () => {
-      const onChange = jest.fn(value => this.setState({ value }));
-      const props = { value: [3, 5, 7], min: 1, max: 10, onChange };
-
-      const { driver } = render(<Slider {...props} />);
-
-      expect(await driver.numOfSliderDots()).toBe(10);
-      expect(await driver.numOfSliderHandles()).toBe(3);
-
-      props.value.forEach(async selectedValue => {
-        expect(await driver.isDotSelected(selectedValue)).toBe(true);
-      });
-    });
-
     it('should show correct value on hover', async () => {
       const onChange = jest.fn(value => this.setState({ value }));
       const props = { value: [3, 5, 7], min: 1, max: 10, onChange };
@@ -76,7 +62,7 @@ describe('Slider', () => {
 
     it('should display a disabled slider', async () => {
       const onChange = jest.fn(value => this.setState({ value }));
-      const props = { value: [3], onChange, disabled: true };
+      const props = { value: 3, onChange, disabled: true };
 
       const { driver } = render(<Slider {...props} />);
 
@@ -146,11 +132,31 @@ describe('Slider', () => {
     });
 
     describe(`Range mode`, () => {
+      const multiRangeValue = [3, 5, 7];
+
+      it('should render slider with multi-range', async () => {
+        const onChange = jest.fn(value => this.setState({ value }));
+        const props = { value: multiRangeValue, min: 1, max: 10, onChange };
+
+        const { driver } = render(<Slider {...props} />);
+
+        expect(await driver.numOfSliderDots()).toBe(10);
+        expect(await driver.numOfSliderHandles()).toBe(3);
+
+        props.value.forEach(async selectedValue => {
+          expect(await driver.isDotSelected(selectedValue)).toBe(true);
+        });
+      });
+
       it('should be enabled when array is given to value prop', async () => {
         const onChange = jest.fn();
-        const props = { value: [2, 4, 6], displayTooltip: false, onChange };
+        const props = {
+          value: multiRangeValue,
+          displayTooltip: false,
+          onChange,
+        };
         const { driver } = render(<Slider {...props} />);
-        expect(await driver.numOfSliderHandles()).toBe(3);
+        expect(await driver.numOfSliderHandles()).toBe(props.value.length);
       });
     });
 
@@ -161,6 +167,7 @@ describe('Slider', () => {
         const { driver } = render(<Slider {...props} />);
         expect(await driver.numOfSliderHandles()).toBe(1);
       });
+
       it('should be enabled when array with 1 item given to value', async () => {
         const onChange = jest.fn();
         const props = { value: [2], displayTooltip: false, onChange };

src/Slider/docs/examples.js

@@ -150,3 +150,28 @@ class SliderWithState extends React.Component {
 }
 
 `;
+
+export const startPoint = `
+class SliderWithState extends React.Component {
+  state = { value: 3 };
+
+  change = value => this.setState({ value })
+
+  render() {
+    const { value } = this.state;
+    const marks = {
+          [-4]: '-4',
+          [-3]: '-3',
+          [-2]: '-2',
+          [-1]: '-1',
+          0: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+    };
+
+    return (<Slider marks={marks} startPoint={0} onChange={this.change} min={-4} max={4} value={value} displayTooltip={false} />);
+  }
+}
+`;

src/Slider/docs/index.story.js

@@ -100,6 +100,11 @@ export default {
               text: 'Slider supports showing marking values under the slider.',
               source: examples.plainSliderMarks,
             },
+            {
+              title: 'Custom Marks',
+              text: 'Slider custom marks',
+              source: examples.customMarks,
+            },
             {
               title: 'Multi Value',
               text: 'Usually used for user to select the range.',
@@ -117,9 +122,9 @@ export default {
               source: examples.states,
             },
             {
-              title: 'Custom Marks',
-              text: 'Slider custom marks',
-              source: examples.customMarks,
+              title: 'Start Point',
+              text: `Slider supports having a Start Point`,
+              source: examples.startPoint,
             },
           ].map(example),
         ],

src/Slider/tests/Slider.visual.js

@@ -53,6 +53,10 @@ const tests = [
           displayMarks: true,
         },
       },
+      {
+        it: 'start point',
+        props: { startPoint: 4 },
+      },
     ],
   },
 ];