react-native-epic-slider/lib/commonjs/slider/index.js

  [](https://choosealicense.com/licenses/mit/)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _utils = require("./utils");
var _useSlider = _interopRequireDefault(require("./hooks/useSlider"));
var _styles = _interopRequireDefault(require("./styles"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Slider = ({
  min,
  max,
  step = 1,
  value,
  onChange,
  style,
  showValue = true,
  valuePrefix = '',
  valueSuffix = '',
  trackColor = '#E5E4E2',
  thumbColor = '#22223B',
  trackHeight = _utils.DEFAULT_TRACK_HEIGHT,
  trackWidth,
  thumbSize = _utils.DEFAULT_THUMB_SIZE,
  allowDecimal = false,
  disableTrackTouch = false,
  Thumb,
  points = [],
  showFloatingLabel = false,
  FloatingLabel,
  trackStyles,
  trackProgressStyles,
  // orientation = 'horizontal',
  // verticalHeight = 200,
  ...restProps
}) => {
  const {
    displayValue,
    trackPanResponder,
    currentValue,
    isDragging,
    trackContainerRef,
    panResponder,
    sliderContainerRef,
    customThumbRef,
    sliderRef,
    progressAnim,
    thumbAnim,
    // isVertical,
    getPositionFromValue
  } = (0, _useSlider.default)({
    value,
    min,
    max,
    step,
    allowDecimal,
    onChange,
    thumbSize
    // orientation,
  });
  const renderThumb = () => {
    if (Thumb) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
        onLayout: event => {
          const {
            width,
            height
          } = event.nativeEvent.layout;
          customThumbRef.current.width = width;
          customThumbRef.current.height = height;
        },
        style: [{
          position: 'absolute',
          left: thumbAnim,
          zIndex: 2,
          transform: [{
            scale: isDragging ? 1.2 : 1
          }]
        }],
        ...panResponder.panHandlers,
        children: Thumb
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
      style: [_styles.default.thumb, {
        width: thumbSize,
        height: thumbSize,
        backgroundColor: thumbColor,
        left: thumbAnim,
        transform: [{
          scale: isDragging ? 1.2 : 1
        }]
      }],
      ...panResponder.panHandlers
    });
  };
  const renderPoints = () => {
    return points.map((point, index) => {
      const pointPosition = getPositionFromValue(point.value);
      const pointSize = point.size || 10;
      const isActive = value !== undefined ? point.value <= value : point.value <= (currentValue || 1);
      if (point.customPoint) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: [_styles.default.point, {
            position: 'absolute',
            left: pointPosition,
            top: '50%',
            transform: [{
              translateX: -pointSize / 2
            },
            // Center horizontally
            {
              translateY: -pointSize / 2
            } // Center vertically
            ],
            opacity: isActive ? 1 : 0.5,
            alignItems: 'center',
            justifyContent: 'center',
            width: pointSize,
            height: pointSize
          }],
          children: point.customPoint
        }, `point-${index}`);
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_styles.default.point, {
          width: pointSize,
          height: pointSize,
          backgroundColor: isActive ? thumbColor : point.color || trackColor,
          left: pointPosition - pointSize / 2,
          top: '50%',
          transform: [{
            translateY: -pointSize / 2
          }],
          opacity: isActive ? 1 : 0.5,
          borderWidth: isActive ? 2 : 0,
          borderColor: thumbColor
        }]
      }, `point-${index}`);
    });
  };
  const renderFloatingLabel = () => {
    if (!showFloatingLabel) return null;
    const sliderValue = value !== undefined ? value : currentValue;
    const displayValue = typeof sliderValue === 'number' ? sliderValue : min;
    if (FloatingLabel) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
        style: [_styles.default.floatingLabel, {
          left: thumbAnim,
          opacity: isDragging ? 1 : 0,
          transform: [{
            scale: isDragging ? 1 : 0.5
          }, {
            translateY: isDragging ? -30 : 0
          }, {
            translateX: -(customThumbRef.current.width || thumbSize) / 2
          }]
        }],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLabel, {
          value: displayValue,
          ...restProps
        })
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
      style: [_styles.default.floatingLabel, {
        left: thumbAnim,
        opacity: isDragging ? 1 : 0,
        transform: [{
          scale: isDragging ? 1 : 0.5
        }, {
          translateY: isDragging ? -30 : 0
        }, {
          translateX: -(customThumbRef.current.width || thumbSize)
        }]
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _styles.default.labelContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
          style: _styles.default.labelText,
          children: [valuePrefix, displayValue, valueSuffix]
        })
      })
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [_styles.default.container,
    // isVertical && {
    //   height: verticalHeight,
    //   alignItems: 'center',
    // },
    style],
    onLayout: event => {
      const {
        width,
        height
      } = event.nativeEvent.layout;
      // sliderContainerRef.current.width = isVertical ? height : width;
      sliderContainerRef.current.width = width;
    },
    children: [showValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
      style: _styles.default.valueText,
      children: [valuePrefix, displayValue, valueSuffix]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_styles.default.trackContainer,
      // isVertical && styles.verticalTrackContainer,
      {
        height: _utils.DEFAULT_THUMB_SIZE
      }],
      ref: trackContainerRef,
      ...(!disableTrackTouch ? trackPanResponder.panHandlers : {}),
      onLayout: event => {
        const {
          width,
          height
        } = event.nativeEvent.layout;
        // sliderRef.current.width = isVertical ? height : width;
        sliderRef.current.width = width;
        sliderRef.current.height = height;
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_styles.default.track,
        // isVertical && styles.verticalTrack,
        {
          // height: isVertical ? verticalHeight : trackHeight,
          // width: isVertical ? trackHeight : (trackWidth || sliderContainerRef.current.width),
          height: trackHeight,
          width: trackWidth || sliderContainerRef.current.width,
          backgroundColor: trackColor
        }, trackStyles]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
        style: [_styles.default.progress,
        // isVertical && styles.verticalProgress,
        {
          // height: isVertical ? progressAnim : trackHeight,
          // width: isVertical ? trackHeight : progressAnim,
          height: trackHeight,
          width: progressAnim,
          backgroundColor: thumbColor
        }, trackProgressStyles]
      }), points?.length > 0 && renderPoints(), renderFloatingLabel(), renderThumb()]
    })]
  });
};
var _default = exports.default = Slider;
//# sourceMappingURL=index.js.map