@tanstack/ranger - npm Package Compare versions

Comparing version 0.0.1 to 0.0.3

build/cjs/index.js

@@ -18,196 +18,195 @@ /**
 class Ranger {
+  sortedValues = [];
+  rangerElement = null;
   constructor(opts) {
-    this.sortedValues = [];
-    this.rangerElement = null;
-    this._willUpdate = () => {
-      const rangerElement = this.options.getRangerElement();
-      if (this.rangerElement !== rangerElement) {
-        this.rangerElement = rangerElement;
-      }
+    this.setOptions(opts);
+  }
+  setOptions(opts) {
+    Object.entries(opts).forEach(([key, value]) => {
+      if (typeof value === 'undefined') delete opts[key];
+    });
+    this.options = {
+      debug: false,
+      tickSize: 10,
+      interpolator: utils.linearInterpolator,
+      onChange: () => {},
+      ...opts
     };
-    this.getValueForClientX = clientX => {
-      const trackDims = utils.getBoundingClientRect(this.rangerElement);
-      return this.options.interpolator.getValueForClientX(clientX, trackDims, this.options.min, this.options.max);
-    };
-    this.getNextStep = (val, direction) => {
+  }
+  _willUpdate = () => {
+    const rangerElement = this.options.getRangerElement();
+    if (this.rangerElement !== rangerElement) {
+      this.rangerElement = rangerElement;
+    }
+  };
+  getValueForClientX = clientX => {
+    const trackDims = utils.getBoundingClientRect(this.rangerElement);
+    return this.options.interpolator.getValueForClientX(clientX, trackDims, this.options.min, this.options.max);
+  };
+  getNextStep = (val, direction) => {
+    const {
+      min,
+      max
+    } = this.options;
+    if ('steps' in this.options) {
       const {
-        min,
-        max
+        steps
       } = this.options;
-      if ('steps' in this.options) {
-        const {
-          steps
-        } = this.options;
-        let currIndex = steps.indexOf(val);
-        let nextIndex = currIndex + direction;
-        if (nextIndex >= 0 && nextIndex < steps.length) {
-          return steps[nextIndex];
-        } else {
-          return val;
-        }
+      let currIndex = steps.indexOf(val);
+      let nextIndex = currIndex + direction;
+      if (nextIndex >= 0 && nextIndex < steps.length) {
+        return steps[nextIndex];
       } else {
-        let nextVal = val + this.options.stepSize * direction;
-        if (nextVal >= min && nextVal <= max) {
-          return nextVal;
-        } else {
-          return val;
+        return val;
+      }
+    } else {
+      let nextVal = val + this.options.stepSize * direction;
+      if (nextVal >= min && nextVal <= max) {
+        return nextVal;
+      } else {
+        return val;
+      }
+    }
+  };
+  roundToStep = val => {
+    const {
+      min,
+      max
+    } = this.options;
+    let left = min;
+    let right = max;
+    if ('steps' in this.options) {
+      this.options.steps.forEach(step => {
+        if (step <= val && step > left) {
+          left = step;
         }
-      }
-    };
-    this.roundToStep = val => {
+        if (step >= val && step < right) {
+          right = step;
+        }
+      });
+    } else {
       const {
-        min,
-        max
+        stepSize
       } = this.options;
-      let left = min;
-      let right = max;
-      if ('steps' in this.options) {
-        this.options.steps.forEach(step => {
-          if (step <= val && step > left) {
-            left = step;
-          }
-          if (step >= val && step < right) {
-            right = step;
-          }
-        });
-      } else {
-        const {
-          stepSize
-        } = this.options;
-        while (left < val && left + stepSize < val) {
-          left += stepSize;
-        }
-        right = Math.min(left + stepSize, max);
+      while (left < val && left + stepSize < val) {
+        left += stepSize;
       }
-      if (val - left < right - val) {
-        return left;
+      right = Math.min(left + stepSize, max);
+    }
+    if (val - left < right - val) {
+      return left;
+    }
+    return right;
+  };
+  handleDrag = e => {
+    if (this.activeHandleIndex === undefined) {
+      return;
+    }
+    const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+    const newValue = this.getValueForClientX(clientX);
+    const newRoundedValue = this.roundToStep(newValue);
+    this.sortedValues = [...this.options.values.slice(0, this.activeHandleIndex), newRoundedValue, ...this.options.values.slice(this.activeHandleIndex + 1)];
+    if (this.options.onDrag) {
+      this.options.onDrag(this);
+    } else {
+      this.tempValues = this.sortedValues;
+      this.options.rerender();
+    }
+  };
+  handleKeyDown = (e, i) => {
+    const {
+      values
+    } = this.options;
+
+    // Left Arrow || Right Arrow
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      this.activeHandleIndex = i;
+      const direction = e.keyCode === 37 ? -1 : 1;
+      const newValue = this.getNextStep(values[i], direction);
+      const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
+      this.sortedValues = utils.sortNumList(newValues);
+      if (this.options.onChange) {
+        this.options.onChange(this);
       }
-      return right;
-    };
-    this.handleDrag = e => {
-      if (this.activeHandleIndex === undefined) {
-        return;
+    }
+  };
+  handlePress = (_e, i) => {
+    this.activeHandleIndex = i;
+    this.options.rerender();
+    const handleRelease = () => {
+      const {
+        tempValues,
+        handleDrag
+      } = this;
+      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('touchmove', handleDrag);
+      document.removeEventListener('mouseup', handleRelease);
+      document.removeEventListener('touchend', handleRelease);
+      this.sortedValues = utils.sortNumList(tempValues || this.options.values);
+      if (this.options.onChange) {
+        this.options.onChange(this);
       }
-      const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
-      const newValue = this.getValueForClientX(clientX);
-      const newRoundedValue = this.roundToStep(newValue);
-      this.sortedValues = [...this.options.values.slice(0, this.activeHandleIndex), newRoundedValue, ...this.options.values.slice(this.activeHandleIndex + 1)];
       if (this.options.onDrag) {
         this.options.onDrag(this);
-      } else {
-        this.tempValues = this.sortedValues;
-        this.options.rerender();
       }
+      this.activeHandleIndex = undefined;
+      this.tempValues = undefined;
+      this.options.rerender();
     };
-    this.handleKeyDown = (e, i) => {
-      const {
-        values
-      } = this.options;
-
-      // Left Arrow || Right Arrow
-      if (e.keyCode === 37 || e.keyCode === 39) {
-        this.activeHandleIndex = i;
-        const direction = e.keyCode === 37 ? -1 : 1;
-        const newValue = this.getNextStep(values[i], direction);
-        const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
-        this.sortedValues = utils.sortNumList(newValues);
-        if (this.options.onChange) {
-          this.options.onChange(this);
-        }
+    const {
+      handleDrag
+    } = this;
+    document.addEventListener('mousemove', handleDrag);
+    document.addEventListener('touchmove', handleDrag);
+    document.addEventListener('mouseup', handleRelease);
+    document.addEventListener('touchend', handleRelease);
+  };
+  getPercentageForValue = val => this.options.interpolator.getPercentageForValue(val, this.options.min, this.options.max);
+  getTicks = () => {
+    let ticks = [];
+    if (this.options.ticks) {
+      ticks = [...this.options.ticks];
+    } else if ('steps' in this.options) {
+      ticks = [...this.options.steps];
+    } else {
+      ticks = [this.options.min];
+      while (ticks[ticks.length - 1] < this.options.max - this.options.tickSize) {
+        ticks.push(ticks[ticks.length - 1] + this.options.tickSize);
       }
-    };
-    this.handlePress = (_e, i) => {
-      this.activeHandleIndex = i;
-      this.options.rerender();
-      const handleRelease = () => {
-        const {
-          tempValues,
-          handleDrag
-        } = this;
-        document.removeEventListener('mousemove', handleDrag);
-        document.removeEventListener('touchmove', handleDrag);
-        document.removeEventListener('mouseup', handleRelease);
-        document.removeEventListener('touchend', handleRelease);
-        this.sortedValues = utils.sortNumList(tempValues || this.options.values);
-        if (this.options.onChange) {
-          this.options.onChange(this);
-        }
-        if (this.options.onDrag) {
-          this.options.onDrag(this);
-        }
-        this.activeHandleIndex = undefined;
-        this.tempValues = undefined;
-        this.options.rerender();
+      ticks.push(this.options.max);
+    }
+    return ticks.map((value, i) => ({
+      value,
+      key: i,
+      percentage: this.getPercentageForValue(value)
+    }));
+  };
+  getSteps = () => {
+    const values = utils.sortNumList(this.tempValues || this.options.values);
+    return [...values, this.options.max].map((value, i) => {
+      const previousValue = values[i - 1];
+      const leftValue = previousValue !== undefined ? previousValue : this.options.min;
+      const left = this.getPercentageForValue(leftValue);
+      const width = this.getPercentageForValue(value) - left;
+      return {
+        left,
+        width
       };
-      const {
-        handleDrag
-      } = this;
-      document.addEventListener('mousemove', handleDrag);
-      document.addEventListener('touchmove', handleDrag);
-      document.addEventListener('mouseup', handleRelease);
-      document.addEventListener('touchend', handleRelease);
-    };
-    this.getPercentageForValue = val => this.options.interpolator.getPercentageForValue(val, this.options.min, this.options.max);
-    this.getTicks = () => {
-      let ticks = [];
-      if (this.options.ticks) {
-        ticks = [...this.options.ticks];
-      } else if ('steps' in this.options) {
-        ticks = [...this.options.steps];
-      } else {
-        ticks = [this.options.min];
-        while (ticks[ticks.length - 1] < this.options.max - this.options.tickSize) {
-          ticks.push(ticks[ticks.length - 1] + this.options.tickSize);
-        }
-        ticks.push(this.options.max);
+    });
+  };
+  handles = () => {
+    return (this.tempValues || this.options.values).map((value, i) => ({
+      value,
+      isActive: i === this.activeHandleIndex,
+      onKeyDownHandler: e => {
+        this.handleKeyDown(e, i);
+      },
+      onMouseDownHandler: e => {
+        this.handlePress(e, i);
+      },
+      onTouchStart: e => {
+        this.handlePress(e, i);
       }
-      return ticks.map((value, i) => ({
-        value,
-        key: i,
-        percentage: this.getPercentageForValue(value)
-      }));
-    };
-    this.getSteps = () => {
-      const values = utils.sortNumList(this.tempValues || this.options.values);
-      return [...values, this.options.max].map((value, i) => {
-        const previousValue = values[i - 1];
-        const leftValue = previousValue !== undefined ? previousValue : this.options.min;
-        const left = this.getPercentageForValue(leftValue);
-        const width = this.getPercentageForValue(value) - left;
-        return {
-          left,
-          width
-        };
-      });
-    };
-    this.handles = () => {
-      return (this.tempValues || this.options.values).map((value, i) => ({
-        value,
-        isActive: i === this.activeHandleIndex,
-        onKeyDownHandler: e => {
-          this.handleKeyDown(e, i);
-        },
-        onMouseDownHandler: e => {
-          this.handlePress(e, i);
-        },
-        onTouchStart: e => {
-          this.handlePress(e, i);
-        }
-      }));
-    };
-    this.setOptions(opts);
-  }
-  setOptions(opts) {
-    Object.entries(opts).forEach(_ref => {
-      let [key, value] = _ref;
-      if (typeof value === 'undefined') delete opts[key];
-    });
-    this.options = {
-      debug: false,
-      tickSize: 10,
-      interpolator: utils.linearInterpolator,
-      onChange: () => {},
-      ...opts
-    };
-  }
+    }));
+  };
 }
@@ -214,0 +213,0 @@

build/esm/index.js

@@ -35,196 +35,195 @@ /**
 class Ranger {
+  sortedValues = [];
+  rangerElement = null;
   constructor(opts) {
-    this.sortedValues = [];
-    this.rangerElement = null;
-    this._willUpdate = () => {
-      const rangerElement = this.options.getRangerElement();
-      if (this.rangerElement !== rangerElement) {
-        this.rangerElement = rangerElement;
-      }
+    this.setOptions(opts);
+  }
+  setOptions(opts) {
+    Object.entries(opts).forEach(([key, value]) => {
+      if (typeof value === 'undefined') delete opts[key];
+    });
+    this.options = {
+      debug: false,
+      tickSize: 10,
+      interpolator: linearInterpolator,
+      onChange: () => {},
+      ...opts
     };
-    this.getValueForClientX = clientX => {
-      const trackDims = getBoundingClientRect(this.rangerElement);
-      return this.options.interpolator.getValueForClientX(clientX, trackDims, this.options.min, this.options.max);
-    };
-    this.getNextStep = (val, direction) => {
+  }
+  _willUpdate = () => {
+    const rangerElement = this.options.getRangerElement();
+    if (this.rangerElement !== rangerElement) {
+      this.rangerElement = rangerElement;
+    }
+  };
+  getValueForClientX = clientX => {
+    const trackDims = getBoundingClientRect(this.rangerElement);
+    return this.options.interpolator.getValueForClientX(clientX, trackDims, this.options.min, this.options.max);
+  };
+  getNextStep = (val, direction) => {
+    const {
+      min,
+      max
+    } = this.options;
+    if ('steps' in this.options) {
       const {
-        min,
-        max
+        steps
       } = this.options;
-      if ('steps' in this.options) {
-        const {
-          steps
-        } = this.options;
-        let currIndex = steps.indexOf(val);
-        let nextIndex = currIndex + direction;
-        if (nextIndex >= 0 && nextIndex < steps.length) {
-          return steps[nextIndex];
-        } else {
-          return val;
-        }
+      let currIndex = steps.indexOf(val);
+      let nextIndex = currIndex + direction;
+      if (nextIndex >= 0 && nextIndex < steps.length) {
+        return steps[nextIndex];
       } else {
-        let nextVal = val + this.options.stepSize * direction;
-        if (nextVal >= min && nextVal <= max) {
-          return nextVal;
-        } else {
-          return val;
+        return val;
+      }
+    } else {
+      let nextVal = val + this.options.stepSize * direction;
+      if (nextVal >= min && nextVal <= max) {
+        return nextVal;
+      } else {
+        return val;
+      }
+    }
+  };
+  roundToStep = val => {
+    const {
+      min,
+      max
+    } = this.options;
+    let left = min;
+    let right = max;
+    if ('steps' in this.options) {
+      this.options.steps.forEach(step => {
+        if (step <= val && step > left) {
+          left = step;
         }
-      }
-    };
-    this.roundToStep = val => {
+        if (step >= val && step < right) {
+          right = step;
+        }
+      });
+    } else {
       const {
-        min,
-        max
+        stepSize
       } = this.options;
-      let left = min;
-      let right = max;
-      if ('steps' in this.options) {
-        this.options.steps.forEach(step => {
-          if (step <= val && step > left) {
-            left = step;
-          }
-          if (step >= val && step < right) {
-            right = step;
-          }
-        });
-      } else {
-        const {
-          stepSize
-        } = this.options;
-        while (left < val && left + stepSize < val) {
-          left += stepSize;
-        }
-        right = Math.min(left + stepSize, max);
+      while (left < val && left + stepSize < val) {
+        left += stepSize;
       }
-      if (val - left < right - val) {
-        return left;
+      right = Math.min(left + stepSize, max);
+    }
+    if (val - left < right - val) {
+      return left;
+    }
+    return right;
+  };
+  handleDrag = e => {
+    if (this.activeHandleIndex === undefined) {
+      return;
+    }
+    const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+    const newValue = this.getValueForClientX(clientX);
+    const newRoundedValue = this.roundToStep(newValue);
+    this.sortedValues = [...this.options.values.slice(0, this.activeHandleIndex), newRoundedValue, ...this.options.values.slice(this.activeHandleIndex + 1)];
+    if (this.options.onDrag) {
+      this.options.onDrag(this);
+    } else {
+      this.tempValues = this.sortedValues;
+      this.options.rerender();
+    }
+  };
+  handleKeyDown = (e, i) => {
+    const {
+      values
+    } = this.options;
+
+    // Left Arrow || Right Arrow
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      this.activeHandleIndex = i;
+      const direction = e.keyCode === 37 ? -1 : 1;
+      const newValue = this.getNextStep(values[i], direction);
+      const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
+      this.sortedValues = sortNumList(newValues);
+      if (this.options.onChange) {
+        this.options.onChange(this);
       }
-      return right;
-    };
-    this.handleDrag = e => {
-      if (this.activeHandleIndex === undefined) {
-        return;
+    }
+  };
+  handlePress = (_e, i) => {
+    this.activeHandleIndex = i;
+    this.options.rerender();
+    const handleRelease = () => {
+      const {
+        tempValues,
+        handleDrag
+      } = this;
+      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('touchmove', handleDrag);
+      document.removeEventListener('mouseup', handleRelease);
+      document.removeEventListener('touchend', handleRelease);
+      this.sortedValues = sortNumList(tempValues || this.options.values);
+      if (this.options.onChange) {
+        this.options.onChange(this);
       }
-      const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
-      const newValue = this.getValueForClientX(clientX);
-      const newRoundedValue = this.roundToStep(newValue);
-      this.sortedValues = [...this.options.values.slice(0, this.activeHandleIndex), newRoundedValue, ...this.options.values.slice(this.activeHandleIndex + 1)];
       if (this.options.onDrag) {
         this.options.onDrag(this);
-      } else {
-        this.tempValues = this.sortedValues;
-        this.options.rerender();
       }
+      this.activeHandleIndex = undefined;
+      this.tempValues = undefined;
+      this.options.rerender();
     };
-    this.handleKeyDown = (e, i) => {
-      const {
-        values
-      } = this.options;
-
-      // Left Arrow || Right Arrow
-      if (e.keyCode === 37 || e.keyCode === 39) {
-        this.activeHandleIndex = i;
-        const direction = e.keyCode === 37 ? -1 : 1;
-        const newValue = this.getNextStep(values[i], direction);
-        const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
-        this.sortedValues = sortNumList(newValues);
-        if (this.options.onChange) {
-          this.options.onChange(this);
-        }
+    const {
+      handleDrag
+    } = this;
+    document.addEventListener('mousemove', handleDrag);
+    document.addEventListener('touchmove', handleDrag);
+    document.addEventListener('mouseup', handleRelease);
+    document.addEventListener('touchend', handleRelease);
+  };
+  getPercentageForValue = val => this.options.interpolator.getPercentageForValue(val, this.options.min, this.options.max);
+  getTicks = () => {
+    let ticks = [];
+    if (this.options.ticks) {
+      ticks = [...this.options.ticks];
+    } else if ('steps' in this.options) {
+      ticks = [...this.options.steps];
+    } else {
+      ticks = [this.options.min];
+      while (ticks[ticks.length - 1] < this.options.max - this.options.tickSize) {
+        ticks.push(ticks[ticks.length - 1] + this.options.tickSize);
       }
-    };
-    this.handlePress = (_e, i) => {
-      this.activeHandleIndex = i;
-      this.options.rerender();
-      const handleRelease = () => {
-        const {
-          tempValues,
-          handleDrag
-        } = this;
-        document.removeEventListener('mousemove', handleDrag);
-        document.removeEventListener('touchmove', handleDrag);
-        document.removeEventListener('mouseup', handleRelease);
-        document.removeEventListener('touchend', handleRelease);
-        this.sortedValues = sortNumList(tempValues || this.options.values);
-        if (this.options.onChange) {
-          this.options.onChange(this);
-        }
-        if (this.options.onDrag) {
-          this.options.onDrag(this);
-        }
-        this.activeHandleIndex = undefined;
-        this.tempValues = undefined;
-        this.options.rerender();
+      ticks.push(this.options.max);
+    }
+    return ticks.map((value, i) => ({
+      value,
+      key: i,
+      percentage: this.getPercentageForValue(value)
+    }));
+  };
+  getSteps = () => {
+    const values = sortNumList(this.tempValues || this.options.values);
+    return [...values, this.options.max].map((value, i) => {
+      const previousValue = values[i - 1];
+      const leftValue = previousValue !== undefined ? previousValue : this.options.min;
+      const left = this.getPercentageForValue(leftValue);
+      const width = this.getPercentageForValue(value) - left;
+      return {
+        left,
+        width
       };
-      const {
-        handleDrag
-      } = this;
-      document.addEventListener('mousemove', handleDrag);
-      document.addEventListener('touchmove', handleDrag);
-      document.addEventListener('mouseup', handleRelease);
-      document.addEventListener('touchend', handleRelease);
-    };
-    this.getPercentageForValue = val => this.options.interpolator.getPercentageForValue(val, this.options.min, this.options.max);
-    this.getTicks = () => {
-      let ticks = [];
-      if (this.options.ticks) {
-        ticks = [...this.options.ticks];
-      } else if ('steps' in this.options) {
-        ticks = [...this.options.steps];
-      } else {
-        ticks = [this.options.min];
-        while (ticks[ticks.length - 1] < this.options.max - this.options.tickSize) {
-          ticks.push(ticks[ticks.length - 1] + this.options.tickSize);
-        }
-        ticks.push(this.options.max);
+    });
+  };
+  handles = () => {
+    return (this.tempValues || this.options.values).map((value, i) => ({
+      value,
+      isActive: i === this.activeHandleIndex,
+      onKeyDownHandler: e => {
+        this.handleKeyDown(e, i);
+      },
+      onMouseDownHandler: e => {
+        this.handlePress(e, i);
+      },
+      onTouchStart: e => {
+        this.handlePress(e, i);
       }
-      return ticks.map((value, i) => ({
-        value,
-        key: i,
-        percentage: this.getPercentageForValue(value)
-      }));
-    };
-    this.getSteps = () => {
-      const values = sortNumList(this.tempValues || this.options.values);
-      return [...values, this.options.max].map((value, i) => {
-        const previousValue = values[i - 1];
-        const leftValue = previousValue !== undefined ? previousValue : this.options.min;
-        const left = this.getPercentageForValue(leftValue);
-        const width = this.getPercentageForValue(value) - left;
-        return {
-          left,
-          width
-        };
-      });
-    };
-    this.handles = () => {
-      return (this.tempValues || this.options.values).map((value, i) => ({
-        value,
-        isActive: i === this.activeHandleIndex,
-        onKeyDownHandler: e => {
-          this.handleKeyDown(e, i);
-        },
-        onMouseDownHandler: e => {
-          this.handlePress(e, i);
-        },
-        onTouchStart: e => {
-          this.handlePress(e, i);
-        }
-      }));
-    };
-    this.setOptions(opts);
-  }
-  setOptions(opts) {
-    Object.entries(opts).forEach(_ref => {
-      let [key, value] = _ref;
-      if (typeof value === 'undefined') delete opts[key];
-    });
-    this.options = {
-      debug: false,
-      tickSize: 10,
-      interpolator: linearInterpolator,
-      onChange: () => {},
-      ...opts
-    };
-  }
+    }));
+  };
 }
@@ -231,0 +230,0 @@

build/stats-react.json

@@ -13,7 +13,7 @@ {
               {
-                "uid": "c893-5",
+                "uid": "0b80-5",
                 "name": "utils.ts"
               },
               {
-                "uid": "c893-7",
+                "uid": "0b80-7",
                 "name": "index.ts"
@@ -29,20 +29,20 @@ }
   "nodeParts": {
-    "c893-5": {
+    "0b80-5": {
       "renderedLength": 688,
       "gzipLength": 338,
       "brotliLength": 0,
-      "metaUid": "c893-4"
+      "metaUid": "0b80-4"
     },
-    "c893-7": {
-      "renderedLength": 6630,
-      "gzipLength": 1531,
+    "0b80-7": {
+      "renderedLength": 6188,
+      "gzipLength": 1526,
       "brotliLength": 0,
-      "metaUid": "c893-6"
+      "metaUid": "0b80-6"
     }
   },
   "nodeMetas": {
-    "c893-4": {
+    "0b80-4": {
       "id": "/packages/ranger/src/utils.ts",
       "moduleParts": {
-        "index.production.js": "c893-5"
+        "index.production.js": "0b80-5"
       },
@@ -52,14 +52,14 @@ "imported": [],
         {
-          "uid": "c893-6"
+          "uid": "0b80-6"
         }
       ]
     },
-    "c893-6": {
+    "0b80-6": {
       "id": "/packages/ranger/src/index.ts",
       "moduleParts": {
-        "index.production.js": "c893-7"
+        "index.production.js": "0b80-7"
       },
       "imported": [
         {
-          "uid": "c893-4"
+          "uid": "0b80-4"
         }
@@ -66,0 +66,0 @@ ],

build/types/index.d.ts

@@ -85,2 +85,2 @@ /**
 
-export { Ranger, RangerConfig, RangerOptions };
+export { Ranger, RangerChangeEvent, RangerClassConfig, RangerConfig, RangerInterpolator, RangerOptions };

build/umd/index.development.js

@@ -41,196 +41,195 @@ /**
   class Ranger {
+    sortedValues = [];
+    rangerElement = null;
     constructor(opts) {
-      this.sortedValues = [];
-      this.rangerElement = null;
-      this._willUpdate = () => {
-        const rangerElement = this.options.getRangerElement();
-        if (this.rangerElement !== rangerElement) {
-          this.rangerElement = rangerElement;
-        }
+      this.setOptions(opts);
+    }
+    setOptions(opts) {
+      Object.entries(opts).forEach(([key, value]) => {
+        if (typeof value === 'undefined') delete opts[key];
+      });
+      this.options = {
+        debug: false,
+        tickSize: 10,
+        interpolator: linearInterpolator,
+        onChange: () => {},
+        ...opts
       };
-      this.getValueForClientX = clientX => {
-        const trackDims = getBoundingClientRect(this.rangerElement);
-        return this.options.interpolator.getValueForClientX(clientX, trackDims, this.options.min, this.options.max);
-      };
-      this.getNextStep = (val, direction) => {
+    }
+    _willUpdate = () => {
+      const rangerElement = this.options.getRangerElement();
+      if (this.rangerElement !== rangerElement) {
+        this.rangerElement = rangerElement;
+      }
+    };
+    getValueForClientX = clientX => {
+      const trackDims = getBoundingClientRect(this.rangerElement);
+      return this.options.interpolator.getValueForClientX(clientX, trackDims, this.options.min, this.options.max);
+    };
+    getNextStep = (val, direction) => {
+      const {
+        min,
+        max
+      } = this.options;
+      if ('steps' in this.options) {
         const {
-          min,
-          max
+          steps
         } = this.options;
-        if ('steps' in this.options) {
-          const {
-            steps
-          } = this.options;
-          let currIndex = steps.indexOf(val);
-          let nextIndex = currIndex + direction;
-          if (nextIndex >= 0 && nextIndex < steps.length) {
-            return steps[nextIndex];
-          } else {
-            return val;
-          }
+        let currIndex = steps.indexOf(val);
+        let nextIndex = currIndex + direction;
+        if (nextIndex >= 0 && nextIndex < steps.length) {
+          return steps[nextIndex];
         } else {
-          let nextVal = val + this.options.stepSize * direction;
-          if (nextVal >= min && nextVal <= max) {
-            return nextVal;
-          } else {
-            return val;
+          return val;
+        }
+      } else {
+        let nextVal = val + this.options.stepSize * direction;
+        if (nextVal >= min && nextVal <= max) {
+          return nextVal;
+        } else {
+          return val;
+        }
+      }
+    };
+    roundToStep = val => {
+      const {
+        min,
+        max
+      } = this.options;
+      let left = min;
+      let right = max;
+      if ('steps' in this.options) {
+        this.options.steps.forEach(step => {
+          if (step <= val && step > left) {
+            left = step;
           }
-        }
-      };
-      this.roundToStep = val => {
+          if (step >= val && step < right) {
+            right = step;
+          }
+        });
+      } else {
         const {
-          min,
-          max
+          stepSize
         } = this.options;
-        let left = min;
-        let right = max;
-        if ('steps' in this.options) {
-          this.options.steps.forEach(step => {
-            if (step <= val && step > left) {
-              left = step;
-            }
-            if (step >= val && step < right) {
-              right = step;
-            }
-          });
-        } else {
-          const {
-            stepSize
-          } = this.options;
-          while (left < val && left + stepSize < val) {
-            left += stepSize;
-          }
-          right = Math.min(left + stepSize, max);
+        while (left < val && left + stepSize < val) {
+          left += stepSize;
         }
-        if (val - left < right - val) {
-          return left;
+        right = Math.min(left + stepSize, max);
+      }
+      if (val - left < right - val) {
+        return left;
+      }
+      return right;
+    };
+    handleDrag = e => {
+      if (this.activeHandleIndex === undefined) {
+        return;
+      }
+      const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+      const newValue = this.getValueForClientX(clientX);
+      const newRoundedValue = this.roundToStep(newValue);
+      this.sortedValues = [...this.options.values.slice(0, this.activeHandleIndex), newRoundedValue, ...this.options.values.slice(this.activeHandleIndex + 1)];
+      if (this.options.onDrag) {
+        this.options.onDrag(this);
+      } else {
+        this.tempValues = this.sortedValues;
+        this.options.rerender();
+      }
+    };
+    handleKeyDown = (e, i) => {
+      const {
+        values
+      } = this.options;
+
+      // Left Arrow || Right Arrow
+      if (e.keyCode === 37 || e.keyCode === 39) {
+        this.activeHandleIndex = i;
+        const direction = e.keyCode === 37 ? -1 : 1;
+        const newValue = this.getNextStep(values[i], direction);
+        const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
+        this.sortedValues = sortNumList(newValues);
+        if (this.options.onChange) {
+          this.options.onChange(this);
         }
-        return right;
-      };
-      this.handleDrag = e => {
-        if (this.activeHandleIndex === undefined) {
-          return;
+      }
+    };
+    handlePress = (_e, i) => {
+      this.activeHandleIndex = i;
+      this.options.rerender();
+      const handleRelease = () => {
+        const {
+          tempValues,
+          handleDrag
+        } = this;
+        document.removeEventListener('mousemove', handleDrag);
+        document.removeEventListener('touchmove', handleDrag);
+        document.removeEventListener('mouseup', handleRelease);
+        document.removeEventListener('touchend', handleRelease);
+        this.sortedValues = sortNumList(tempValues || this.options.values);
+        if (this.options.onChange) {
+          this.options.onChange(this);
         }
-        const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
-        const newValue = this.getValueForClientX(clientX);
-        const newRoundedValue = this.roundToStep(newValue);
-        this.sortedValues = [...this.options.values.slice(0, this.activeHandleIndex), newRoundedValue, ...this.options.values.slice(this.activeHandleIndex + 1)];
         if (this.options.onDrag) {
           this.options.onDrag(this);
-        } else {
-          this.tempValues = this.sortedValues;
-          this.options.rerender();
         }
+        this.activeHandleIndex = undefined;
+        this.tempValues = undefined;
+        this.options.rerender();
       };
-      this.handleKeyDown = (e, i) => {
-        const {
-          values
-        } = this.options;
-
-        // Left Arrow || Right Arrow
-        if (e.keyCode === 37 || e.keyCode === 39) {
-          this.activeHandleIndex = i;
-          const direction = e.keyCode === 37 ? -1 : 1;
-          const newValue = this.getNextStep(values[i], direction);
-          const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
-          this.sortedValues = sortNumList(newValues);
-          if (this.options.onChange) {
-            this.options.onChange(this);
-          }
+      const {
+        handleDrag
+      } = this;
+      document.addEventListener('mousemove', handleDrag);
+      document.addEventListener('touchmove', handleDrag);
+      document.addEventListener('mouseup', handleRelease);
+      document.addEventListener('touchend', handleRelease);
+    };
+    getPercentageForValue = val => this.options.interpolator.getPercentageForValue(val, this.options.min, this.options.max);
+    getTicks = () => {
+      let ticks = [];
+      if (this.options.ticks) {
+        ticks = [...this.options.ticks];
+      } else if ('steps' in this.options) {
+        ticks = [...this.options.steps];
+      } else {
+        ticks = [this.options.min];
+        while (ticks[ticks.length - 1] < this.options.max - this.options.tickSize) {
+          ticks.push(ticks[ticks.length - 1] + this.options.tickSize);
         }
-      };
-      this.handlePress = (_e, i) => {
-        this.activeHandleIndex = i;
-        this.options.rerender();
-        const handleRelease = () => {
-          const {
-            tempValues,
-            handleDrag
-          } = this;
-          document.removeEventListener('mousemove', handleDrag);
-          document.removeEventListener('touchmove', handleDrag);
-          document.removeEventListener('mouseup', handleRelease);
-          document.removeEventListener('touchend', handleRelease);
-          this.sortedValues = sortNumList(tempValues || this.options.values);
-          if (this.options.onChange) {
-            this.options.onChange(this);
-          }
-          if (this.options.onDrag) {
-            this.options.onDrag(this);
-          }
-          this.activeHandleIndex = undefined;
-          this.tempValues = undefined;
-          this.options.rerender();
+        ticks.push(this.options.max);
+      }
+      return ticks.map((value, i) => ({
+        value,
+        key: i,
+        percentage: this.getPercentageForValue(value)
+      }));
+    };
+    getSteps = () => {
+      const values = sortNumList(this.tempValues || this.options.values);
+      return [...values, this.options.max].map((value, i) => {
+        const previousValue = values[i - 1];
+        const leftValue = previousValue !== undefined ? previousValue : this.options.min;
+        const left = this.getPercentageForValue(leftValue);
+        const width = this.getPercentageForValue(value) - left;
+        return {
+          left,
+          width
         };
-        const {
-          handleDrag
-        } = this;
-        document.addEventListener('mousemove', handleDrag);
-        document.addEventListener('touchmove', handleDrag);
-        document.addEventListener('mouseup', handleRelease);
-        document.addEventListener('touchend', handleRelease);
-      };
-      this.getPercentageForValue = val => this.options.interpolator.getPercentageForValue(val, this.options.min, this.options.max);
-      this.getTicks = () => {
-        let ticks = [];
-        if (this.options.ticks) {
-          ticks = [...this.options.ticks];
-        } else if ('steps' in this.options) {
-          ticks = [...this.options.steps];
-        } else {
-          ticks = [this.options.min];
-          while (ticks[ticks.length - 1] < this.options.max - this.options.tickSize) {
-            ticks.push(ticks[ticks.length - 1] + this.options.tickSize);
-          }
-          ticks.push(this.options.max);
+      });
+    };
+    handles = () => {
+      return (this.tempValues || this.options.values).map((value, i) => ({
+        value,
+        isActive: i === this.activeHandleIndex,
+        onKeyDownHandler: e => {
+          this.handleKeyDown(e, i);
+        },
+        onMouseDownHandler: e => {
+          this.handlePress(e, i);
+        },
+        onTouchStart: e => {
+          this.handlePress(e, i);
         }
-        return ticks.map((value, i) => ({
-          value,
-          key: i,
-          percentage: this.getPercentageForValue(value)
-        }));
-      };
-      this.getSteps = () => {
-        const values = sortNumList(this.tempValues || this.options.values);
-        return [...values, this.options.max].map((value, i) => {
-          const previousValue = values[i - 1];
-          const leftValue = previousValue !== undefined ? previousValue : this.options.min;
-          const left = this.getPercentageForValue(leftValue);
-          const width = this.getPercentageForValue(value) - left;
-          return {
-            left,
-            width
-          };
-        });
-      };
-      this.handles = () => {
-        return (this.tempValues || this.options.values).map((value, i) => ({
-          value,
-          isActive: i === this.activeHandleIndex,
-          onKeyDownHandler: e => {
-            this.handleKeyDown(e, i);
-          },
-          onMouseDownHandler: e => {
-            this.handlePress(e, i);
-          },
-          onTouchStart: e => {
-            this.handlePress(e, i);
-          }
-        }));
-      };
-      this.setOptions(opts);
-    }
-    setOptions(opts) {
-      Object.entries(opts).forEach(_ref => {
-        let [key, value] = _ref;
-        if (typeof value === 'undefined') delete opts[key];
-      });
-      this.options = {
-        debug: false,
-        tickSize: 10,
-        interpolator: linearInterpolator,
-        onChange: () => {},
-        ...opts
-      };
-    }
+      }));
+    };
   }
@@ -237,0 +236,0 @@

build/umd/index.production.js

@@ -11,3 +11,3 @@ /**
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Ranger={})}(this,(function(t){"use strict";const e=t=>[...t].map(Number).sort(((t,e)=>t-e)),s={getPercentageForValue:(t,e,s)=>Math.max(0,Math.min(100,(t-e)/(s-e)*100)),getValueForClientX:(t,e,s,i)=>{const{left:n,width:o}=e;return(i-s)*((t-n)/o)+s}};t.Ranger=class{constructor(t){this.sortedValues=[],this.rangerElement=null,this._willUpdate=()=>{const t=this.options.getRangerElement();this.rangerElement!==t&&(this.rangerElement=t)},this.getValueForClientX=t=>{const e=(t=>{const e=t.getBoundingClientRect();return{left:Math.ceil(e.left),width:Math.ceil(e.width)}})(this.rangerElement);return this.options.interpolator.getValueForClientX(t,e,this.options.min,this.options.max)},this.getNextStep=(t,e)=>{const{min:s,max:i}=this.options;if("steps"in this.options){const{steps:s}=this.options;let i=s.indexOf(t)+e;return i>=0&&i<s.length?s[i]:t}{let n=t+this.options.stepSize*e;return n>=s&&n<=i?n:t}},this.roundToStep=t=>{const{min:e,max:s}=this.options;let i=e,n=s;if("steps"in this.options)this.options.steps.forEach((e=>{e<=t&&e>i&&(i=e),e>=t&&e<n&&(n=e)}));else{const{stepSize:e}=this.options;for(;i<t&&i+e<t;)i+=e;n=Math.min(i+e,s)}return t-i<n-t?i:n},this.handleDrag=t=>{if(void 0===this.activeHandleIndex)return;const e="touchmove"===t.type?t.changedTouches[0].clientX:t.clientX,s=this.getValueForClientX(e),i=this.roundToStep(s);this.sortedValues=[...this.options.values.slice(0,this.activeHandleIndex),i,...this.options.values.slice(this.activeHandleIndex+1)],this.options.onDrag?this.options.onDrag(this):(this.tempValues=this.sortedValues,this.options.rerender())},this.handleKeyDown=(t,s)=>{const{values:i}=this.options;if(37===t.keyCode||39===t.keyCode){this.activeHandleIndex=s;const n=37===t.keyCode?-1:1,o=this.getNextStep(i[s],n),h=[...i.slice(0,s),o,...i.slice(s+1)];this.sortedValues=e(h),this.options.onChange&&this.options.onChange(this)}},this.handlePress=(t,s)=>{this.activeHandleIndex=s,this.options.rerender();const i=()=>{const{tempValues:t,handleDrag:s}=this;document.removeEventListener("mousemove",s),document.removeEventListener("touchmove",s),document.removeEventListener("mouseup",i),document.removeEventListener("touchend",i),this.sortedValues=e(t||this.options.values),this.options.onChange&&this.options.onChange(this),this.options.onDrag&&this.options.onDrag(this),this.activeHandleIndex=void 0,this.tempValues=void 0,this.options.rerender()},{handleDrag:n}=this;document.addEventListener("mousemove",n),document.addEventListener("touchmove",n),document.addEventListener("mouseup",i),document.addEventListener("touchend",i)},this.getPercentageForValue=t=>this.options.interpolator.getPercentageForValue(t,this.options.min,this.options.max),this.getTicks=()=>{let t=[];if(this.options.ticks)t=[...this.options.ticks];else if("steps"in this.options)t=[...this.options.steps];else{for(t=[this.options.min];t[t.length-1]<this.options.max-this.options.tickSize;)t.push(t[t.length-1]+this.options.tickSize);t.push(this.options.max)}return t.map(((t,e)=>({value:t,key:e,percentage:this.getPercentageForValue(t)})))},this.getSteps=()=>{const t=e(this.tempValues||this.options.values);return[...t,this.options.max].map(((e,s)=>{const i=t[s-1],n=void 0!==i?i:this.options.min,o=this.getPercentageForValue(n);return{left:o,width:this.getPercentageForValue(e)-o}}))},this.handles=()=>(this.tempValues||this.options.values).map(((t,e)=>({value:t,isActive:e===this.activeHandleIndex,onKeyDownHandler:t=>{this.handleKeyDown(t,e)},onMouseDownHandler:t=>{this.handlePress(t,e)},onTouchStart:t=>{this.handlePress(t,e)}}))),this.setOptions(t)}setOptions(t){Object.entries(t).forEach((e=>{let[s,i]=e;void 0===i&&delete t[s]})),this.options={debug:!1,tickSize:10,interpolator:s,onChange:()=>{},...t}}},Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ranger={})}(this,(function(e){"use strict";const t=e=>[...e].map(Number).sort(((e,t)=>e-t)),s={getPercentageForValue:(e,t,s)=>Math.max(0,Math.min(100,(e-t)/(s-t)*100)),getValueForClientX:(e,t,s,n)=>{const{left:i,width:o}=t;return(n-s)*((e-i)/o)+s}};e.Ranger=class{sortedValues=[];rangerElement=null;constructor(e){this.setOptions(e)}setOptions(e){Object.entries(e).forEach((([t,s])=>{void 0===s&&delete e[t]})),this.options={debug:!1,tickSize:10,interpolator:s,onChange:()=>{},...e}}_willUpdate=()=>{const e=this.options.getRangerElement();this.rangerElement!==e&&(this.rangerElement=e)};getValueForClientX=e=>{const t=(e=>{const t=e.getBoundingClientRect();return{left:Math.ceil(t.left),width:Math.ceil(t.width)}})(this.rangerElement);return this.options.interpolator.getValueForClientX(e,t,this.options.min,this.options.max)};getNextStep=(e,t)=>{const{min:s,max:n}=this.options;if("steps"in this.options){const{steps:s}=this.options;let n=s.indexOf(e)+t;return n>=0&&n<s.length?s[n]:e}{let i=e+this.options.stepSize*t;return i>=s&&i<=n?i:e}};roundToStep=e=>{const{min:t,max:s}=this.options;let n=t,i=s;if("steps"in this.options)this.options.steps.forEach((t=>{t<=e&&t>n&&(n=t),t>=e&&t<i&&(i=t)}));else{const{stepSize:t}=this.options;for(;n<e&&n+t<e;)n+=t;i=Math.min(n+t,s)}return e-n<i-e?n:i};handleDrag=e=>{if(void 0===this.activeHandleIndex)return;const t="touchmove"===e.type?e.changedTouches[0].clientX:e.clientX,s=this.getValueForClientX(t),n=this.roundToStep(s);this.sortedValues=[...this.options.values.slice(0,this.activeHandleIndex),n,...this.options.values.slice(this.activeHandleIndex+1)],this.options.onDrag?this.options.onDrag(this):(this.tempValues=this.sortedValues,this.options.rerender())};handleKeyDown=(e,s)=>{const{values:n}=this.options;if(37===e.keyCode||39===e.keyCode){this.activeHandleIndex=s;const i=37===e.keyCode?-1:1,o=this.getNextStep(n[s],i),h=[...n.slice(0,s),o,...n.slice(s+1)];this.sortedValues=t(h),this.options.onChange&&this.options.onChange(this)}};handlePress=(e,s)=>{this.activeHandleIndex=s,this.options.rerender();const n=()=>{const{tempValues:e,handleDrag:s}=this;document.removeEventListener("mousemove",s),document.removeEventListener("touchmove",s),document.removeEventListener("mouseup",n),document.removeEventListener("touchend",n),this.sortedValues=t(e||this.options.values),this.options.onChange&&this.options.onChange(this),this.options.onDrag&&this.options.onDrag(this),this.activeHandleIndex=void 0,this.tempValues=void 0,this.options.rerender()},{handleDrag:i}=this;document.addEventListener("mousemove",i),document.addEventListener("touchmove",i),document.addEventListener("mouseup",n),document.addEventListener("touchend",n)};getPercentageForValue=e=>this.options.interpolator.getPercentageForValue(e,this.options.min,this.options.max);getTicks=()=>{let e=[];if(this.options.ticks)e=[...this.options.ticks];else if("steps"in this.options)e=[...this.options.steps];else{for(e=[this.options.min];e[e.length-1]<this.options.max-this.options.tickSize;)e.push(e[e.length-1]+this.options.tickSize);e.push(this.options.max)}return e.map(((e,t)=>({value:e,key:t,percentage:this.getPercentageForValue(e)})))};getSteps=()=>{const e=t(this.tempValues||this.options.values);return[...e,this.options.max].map(((t,s)=>{const n=e[s-1],i=void 0!==n?n:this.options.min,o=this.getPercentageForValue(i);return{left:o,width:this.getPercentageForValue(t)-o}}))};handles=()=>(this.tempValues||this.options.values).map(((e,t)=>({value:e,isActive:t===this.activeHandleIndex,onKeyDownHandler:e=>{this.handleKeyDown(e,t)},onMouseDownHandler:e=>{this.handlePress(e,t)},onTouchStart:e=>{this.handlePress(e,t)}})))},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/ranger",
   "author": "Tanner Linsley",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Hooks for building range and multi-range sliders in React",
@@ -32,9 +32,5 @@ "license": "MIT",
   "files": [
-    "build",
+    "build/**",
     "src"
-  ],
-  "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
-  }
-}
+  ]
+}

src/index.ts

 import { linearInterpolator, getBoundingClientRect, sortNumList } from './utils'
 
-type RangerChangeEvent<TTrackElement> = (
+export type RangerChangeEvent<TTrackElement> = (
   instance: Ranger<TTrackElement>,
 ) => void
 
-type RangerInterpolator = {
+export type RangerInterpolator = {
   getPercentageForValue: (val: number, min: number, max: number) => number
@@ -17,3 +17,3 @@ getValueForClientX: (
 
-type RangerClassConfig<TTrackElement = unknown> = {
+export type RangerClassConfig<TTrackElement = unknown> = {
   getRangerElement: () => TTrackElement | null
@@ -20,0 +20,0 @@ values: ReadonlyArray<number>

No alert changes

Improved metrics

Dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

302605

decreased by-1.09%

Number of package files

16

decreased by-11.11%

Lines of code

1164

decreased by-1.27%

No dependency changes