slider

ZhongAnTech · Oct 3, 2017 · d46abd9 · d46abd9
1 parent aafc712
commit d46abd9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/components/Slider/Slider.jsx b/components/Slider/Slider.jsx
@@ -23,7 +23,6 @@ class Slider extends PureComponent {
       offset: 0,
       tooltip: false,
     };
-    this.allowDrag = false;
     this.offsetStart = 0;
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragMove = this.onDragMove.bind(this);
@@ -42,23 +41,32 @@ class Slider extends PureComponent {
     }
   }
 
-  onDragStart(event) {
-    event.preventDefault();
+  onDragStart() {
     const { disabled } = this.props;
     if (disabled) return;
-
-    this.allowDrag = true;
     this.setState({ tooltip: true });
   }
 
   onDragMove(event, { offsetX }) {
-    if (!this.allowDrag) return;
+    const { disabled } = this.props;
+    if (disabled) return;
 
     event.preventDefault();
 
     let offset = this.offsetStart + offsetX;
-    offset = (offset < 0) ? 0 : offset;
-    offset = (offset > this.maxOffset()) ? this.maxOffset() : offset;
+    if (offset < 0) {
+      offset = 0;
+      const value = this.getValueByOffset(offset);
+      this.setState({ offset, value });
+      return false;
+    }
+
+    if (offset > this.maxOffset()) {
+      offset = this.maxOffset();
+      const value = this.getValueByOffset(offset);
+      this.setState({ offset, value });
+      return false;
+    }
 
     const value = this.getValueByOffset(offset);
     offset = this.getOffsetByValue(value);
@@ -67,9 +75,10 @@ class Slider extends PureComponent {
   }
 
   onDragEnd(event, { offsetX }) {
-    this.offsetStart += offsetX;
-    this.allowDrag = false;
     this.setState({ tooltip: false });
+    if (isNaN(offsetX)) return;
+
+    this.offsetStart += offsetX;
 
     const { onChange } = this.props;
     typeof onChange === 'function' && onChange();
@@ -83,7 +92,8 @@ class Slider extends PureComponent {
   getValueByOffset(offset) {
     const { min, max, step } = this.props;
     const percent = offset / this.maxOffset();
-    return Math.round(((max - min) * percent) / step) * step;
+    const value = Math.round((min + ((max - min) * percent)) / step) * step;
+    return Math.max(Math.min(value, max), min);
   }
 
   /**
@@ -93,7 +103,7 @@ class Slider extends PureComponent {
    */
   getOffsetByValue(value) {
     const { min, max } = this.props;
-    return this.maxOffset() * (value / (max - min));
+    return this.maxOffset() * ((value - min) / (max - min));
   }
 
   /**

diff --git a/components/Tooltip/Tooltip.jsx b/components/Tooltip/Tooltip.jsx
@@ -34,9 +34,10 @@ class Tooltip extends PureComponent {
 
     // eslint-disable-next-line
     const rect = findDOMNode(this.child).getBoundingClientRect();
+    const scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
     const style = {
       left: rect.left,
-      top: rect.top,
+      top: rect.top + scrollTop,
       width: rect.width,
     };
 

diff --git a/examples/pages/CellPage.jsx b/examples/pages/CellPage.jsx
@@ -19,6 +19,7 @@ class Page extends Component {
             <Panel.Body>
               <Cell title="标题文字" />
               <Cell title="标题文字"><Slider defaultValue={10} /></Cell>
+              <Cell title="标题文字"><Slider min={-100} max={100} step={15} defaultValue={15} /></Cell>
             </Panel.Body>
           </Panel>