keep pushable when allowCross is false

react-component · Aug 9, 2017 · 93d885f · 93d885f
1 parent caf5866
commit 93d885f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/examples/range.js b/examples/range.js
@@ -48,7 +48,12 @@ class CustomizedRange extends React.Component {
         <br />
         <button onClick={this.handleApply}>Apply</button>
         <br /><br />
-        <Range allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
+        <Range
+          allowCross={false}
+          pushable={10}
+          value={this.state.value}
+          onChange={this.onSliderChange}
+        />
       </div>
     );
   }
@@ -156,11 +161,11 @@ ReactDOM.render(
     </div>
     <div style={style}>
       <p>Multi Range</p>
-      <Range count={3} defaultValue={[20, 40, 60, 80]} pushable />
+      <Range count={3} defaultValue={[20, 40, 60, 80]} />
     </div>
     <div style={style}>
       <p>Multi Range with custom track and handle style</p>
-      <Range count={3} defaultValue={[20, 40, 60, 80]} pushable
+      <Range count={3} defaultValue={[20, 40, 60, 80]} pushable={10}
         trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
         handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
         railStyle={{ backgroundColor: 'black' }}

diff --git a/src/Range.jsx b/src/Range.jsx
@@ -38,7 +38,7 @@ class Range extends React.Component {
             props.defaultValue : initialValue;
     const value = props.value !== undefined ?
             props.value : defaultValue;
-    const bounds = value.map(v => this.trimAlignValue(v));
+    const bounds = value.map((v, i) => this.trimAlignValue(v, i));
     const recent = bounds[0] === max ? 0 : bounds.length - 1;
 
     this.state = {
@@ -55,9 +55,10 @@ class Range extends React.Component {
         shallowEqual(this.props.value, nextProps.value)) {
       return;
     }
+
     const { bounds } = this.state;
     const value = nextProps.value || bounds;
-    const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));
+    const nextBounds = value.map((v, i) => this.trimAlignValue(v, i, nextProps));
     if (nextBounds.length === bounds.length && nextBounds.every((v, i) => v === bounds[i])) return;
 
     this.setState({ bounds: nextBounds });
@@ -204,7 +205,6 @@ class Range extends React.Component {
   pushSurroundingHandles(bounds, handle, originalValue) {
     const { pushable: threshold } = this.props;
     const value = bounds[handle];
-
     let direction = 0;
     if (bounds[handle + 1] - value < threshold) {
       direction = +1; // push to right
@@ -260,23 +260,26 @@ class Range extends React.Component {
     return true;
   }
 
-  trimAlignValue(v, nextProps = {}) {
+  trimAlignValue(v, i, nextProps = {}) {
     const mergedProps = { ...this.props, ...nextProps };
     const valInRange = utils.ensureValueInRange(v, mergedProps);
-    const valNotConflict = this.ensureValueNotConflict(valInRange, mergedProps);
+    const valNotConflict = this.ensureValueNotConflict(i, valInRange, mergedProps);
     return utils.ensureValuePrecision(valNotConflict, mergedProps);
   }
 
-  ensureValueNotConflict(val, { allowCross }) {
+  ensureValueNotConflict(i, val, { allowCross, pushable: thershold }) {
     const state = this.state || {};
     const { handle, bounds } = state;
+    thershold = Number(thershold);
     /* eslint-disable eqeqeq */
     if (!allowCross && handle != null) {
-      if (handle > 0 && val <= bounds[handle - 1]) {
-        return bounds[handle - 1];
-      }
-      if (handle < bounds.length - 1 && val >= bounds[handle + 1]) {
-        return bounds[handle + 1];
+      if (i === undefined || i === handle) {
+        if (handle > 0 && val <= (bounds[handle - 1] + thershold)) {
+          return bounds[handle - 1] + thershold;
+        }
+        if (handle < bounds.length - 1 && val >= (bounds[handle + 1] - thershold)) {
+          return bounds[handle + 1] - thershold;
+        }
       }
     }
     /* eslint-enable eqeqeq */