Fix/slider step marks click not working (#494)

* feat(slider): add cursor grabbing style when drag

* fix(slider): slider step dot click not working #323

* chore(slider): update doc

content/input/slider/index-en-US.md

@@ -250,6 +250,7 @@ import { Slider } from '@douyinfe/semi-ui';
 | min            | Minimum value of the slider.                                                               | number        | 0       |- |
 | railStyle | Style for slide rail | CSSProperties | - |0.31.0|
 | range          | Toggle whether it is allow to move slider from both sides                                  | boolean       | false   |- |
+| showBoundary   | Toggle whether show max/min value when hover                                               | boolean       | false   |- |
 | step           | Increment between successive values                                                        | number        | 1       |- |
 | tipFormatter   | Format Tooltip content, by default display current value                                   | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any      | v => v  |- |
 | tooltipVisible | Toggle whether to display tooltip all the time                                             | boolean       | -       |- |

content/input/slider/index.md

@@ -237,6 +237,7 @@ import { Slider } from '@douyinfe/semi-ui';
 | min | 最小值 | number | 0 |-|
 | railStyle | 滑块轨道的样式 | CSSProperties | - |0.31.0|
 | range | 是否支持两边同时可滑动 | boolean | false |-|
+| showBoundary | 是否在 hover 时展示最大值最小值 | boolean | false |-|
 | step | 步长 | number | 1 |-|
 | tipFormatter | 设置Tooltip的展示格式，默认显示当前选值  | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v |-|
 | tooltipVisible | 是否始终显示Tooltip | boolean | 无 |-|

packages/semi-foundation/slider/foundation.ts

@@ -235,7 +235,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
         const scroll = (node: Element) => regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'));
 
-        const scrollParent = (node: Element): Element | boolean => (
+        const scrollParent = (node: Element): Element => (
             !node || node === document.body ? document.body : scroll(node) ? node : scrollParent(node.parentNode as Element)
         );
 
@@ -316,18 +316,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         } else {
             compareValue = currentValue;
         }
-        if (step !== 1) {
-            // Existence step
-            if (stepValue > compareValue && Math.round(stepValue / step) * step >= stepValue) {
-                // Move right
-                stepValue = Math.round(stepValue / step) * step;
-            } else if (stepValue < compareValue && Math.round(stepValue / step) * step <= stepValue) {
-                // Move left
-                stepValue = Math.round(stepValue / step) * step;
-            } else {
-                // Other moves are invalid, click valid
-                stepValue = compareValue;
-            }
+        if (step !== 1) { // Find nearest step point 
+            stepValue = Math.round(stepValue / step) * step;
         }
         if (range && stepValue !== compareValue) {
             if (vertical && verticalReverse) {

packages/semi-foundation/slider/slider.scss

@@ -63,6 +63,7 @@ $module: #{$prefix}-slider;
 
     &-handle-clicked {
         border: solid $width-slider_handle_clicked $color-slider_handle-border-focus;
+        cursor: grabbing;
     }
 
     &-track {

packages/semi-ui/slider/__test__/slider.test.js

@@ -137,6 +137,15 @@ describe('Slider', () => {
         expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-slider-dot`)).toBe(true);
     });
 
+    it('marks clickable', () => {
+        const STYLE = { width: 100, height: 32 }; // it is really hack to mock slider wrapper getBoundingClientRect data
+        let slider = mount(<Slider style={STYLE} marks={{ 20: '20c', 40: '40c' }} defaultValue={[0, 100]} range />);
+        expect(slider.exists(`.${BASE_CLASS_PREFIX}-slider-dot`)).toBe(true);
+        expect(slider.state('currentValue')).toEqual([0, 100])
+        slider.find(`.${BASE_CLASS_PREFIX}-slider-dot`).at(0).simulate('click', {pageX: 20 })
+        expect(slider.state('currentValue')).toEqual([20, 100])
+    });
+
     it('when tooltipVisible is true, tooltip should show always, or should never show', () => {
         let wrapper = mount(<Slider defaultValue={30} tooltipVisible />);
         expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-tooltip-wrapper`)).toBe(true);

packages/semi-ui/slider/index.tsx

@@ -78,6 +78,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
     private chooseMovePos: 'min' | 'max';
+    foundation: SliderFoundation;
 
     constructor(props: SliderProps) {
         super(props);
@@ -462,6 +463,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         return activeResult ? (
                             <span
                                 key={mark}
+                                onClick={e => this.foundation.handleWrapClick(e)}
                                 className={markClass}
                                 style={{ [stylePos]: `calc(${markPercent * 100}% - 2px)` }}
                             />