fix(mark-label-onclick): add click handler to mark in order to change…

… the slider value to mark value when the mark label is clicked
react-component · Dec 7, 2017 · d0cbd7f · d0cbd7f
1 parent db32618
commit d0cbd7f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/common/Marks.jsx b/src/common/Marks.jsx
@@ -9,6 +9,7 @@ const Marks = ({
   upperBound,
   lowerBound,
   max, min,
+  onClickLabel,
 }) => {
   const marksKeys = Object.keys(marks);
   const marksCount = marksKeys.length;
@@ -51,6 +52,8 @@ const Marks = ({
         className={markClassName}
         style={markStyle}
         key={point}
+        onMouseDown={(e) => onClickLabel(e, point)}
+        onTouchStart={(e) => onClickLabel(e, point)}
       >
         {markLabel}
       </span>

diff --git a/src/common/createSlider.jsx b/src/common/createSlider.jsx
@@ -257,6 +257,11 @@ export default function createSlider(Component) {
       this.handlesRefs[index] = handle;
     }
 
+    onClickMarkLabel = (e, value) => {
+      e.stopPropagation();
+      this.onChange({ value });
+    }
+
     render() {
       const {
         prefixCls,
@@ -321,6 +326,7 @@ export default function createSlider(Component) {
           {handles}
           <Marks
             className={`${prefixCls}-mark`}
+            onClickLabel={disabled ? noop : this.onClickMarkLabel}
             vertical={vertical}
             marks={marks}
             included={included}