react-native-sticky-range-slider/lib/commonjs/hooks/index.js

[React Native | TypeScript] A pure TypeScript component offering a customizable range slider optimized for performance. It supports dragging functionalities for selecting a range of values, with values that smoothly follow the thumb. This component is ful

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useWidthLayout = exports.useSelectedRail = exports.useLowHigh = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _helpers = require("../utils/helpers");
const useLowHigh = (lowProp, highProp, min, max, step) => {
  const validLowProp = lowProp === undefined ? min : (0, _helpers.clamp)(lowProp, min, max);
  const validHighProp = highProp === undefined ? max : (0, _helpers.clamp)(highProp, min, max);
  const inPropsRef = (0, _react.useRef)({
    low: validLowProp,
    high: validHighProp,
    step,
    min: validLowProp,
    max: validHighProp
  });
  const {
    low: lowState,
    high: highState
  } = inPropsRef.current;
  const inPropsRefPrev = {
    lowPrev: lowState,
    highPrev: highState
  };
  const low = (0, _helpers.clamp)(lowProp === undefined ? lowState : lowProp, min, max);
  const high = (0, _helpers.clamp)(highProp === undefined ? highState : highProp, min, max);
  Object.assign(inPropsRef.current, {
    low,
    high,
    min,
    max
  });
  const setLow = value => inPropsRef.current.low = value;
  const setHigh = value => inPropsRef.current.high = value;
  return {
    inPropsRef,
    inPropsRefPrev,
    setLow,
    setHigh
  };
};
exports.useLowHigh = useLowHigh;
const useWidthLayout = (widthRef, callback) => {
  return (0, _react.useCallback)(({
    nativeEvent
  }) => {
    const {
      layout: {
        width
      }
    } = nativeEvent;
    const {
      current: w
    } = widthRef;
    if (w !== width) {
      widthRef.current = width;
      if (callback) {
        callback(width);
      }
    }
  }, [callback, widthRef]);
};
exports.useWidthLayout = useWidthLayout;
const useSelectedRail = (inPropsRef, containerWidthRef, thumbWidth, disableRange) => {
  const {
    current: left
  } = (0, _react.useRef)(new _reactNative.Animated.Value(0));
  const {
    current: right
  } = (0, _react.useRef)(new _reactNative.Animated.Value(0));
  const updateSelectedRail = (0, _react.useCallback)(() => {
    const {
      low,
      high,
      min,
      max
    } = inPropsRef.current;
    const {
      current: containerWidth
    } = containerWidthRef;
    const fullScale = (max - min) / (containerWidth - thumbWidth);
    const leftValue = (low - min) / fullScale;
    const rightValue = (max - high) / fullScale;
    left.setValue(disableRange ? 0 : leftValue);
    right.setValue(disableRange ? containerWidth - thumbWidth - leftValue : rightValue);
  }, [containerWidthRef, disableRange, inPropsRef, left, right, thumbWidth]);
  const selectedRailStyle = (0, _react.useMemo)(() => ({
    position: 'absolute',
    left,
    right
  }), [left, right]);
  return {
    selectedRailStyle,
    updateSelectedRail
  };
};
exports.useSelectedRail = useSelectedRail;
//# sourceMappingURL=index.js.map