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

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

"use strict";

import React from 'react';
import { View, Text, Animated } from 'react-native';
import { DEFAULT_THUMB_SIZE, DEFAULT_TRACK_HEIGHT } from './utils';
import useSlider from './hooks/useSlider';
import styles from './styles';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Slider = ({
  min,
  max,
  step = 1,
  value,
  onChange,
  style,
  showValue = true,
  valuePrefix = '',
  valueSuffix = '',
  trackColor = '#E5E4E2',
  thumbColor = '#22223B',
  trackHeight = DEFAULT_TRACK_HEIGHT,
  trackWidth,
  thumbSize = 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
  } = useSlider({
    value,
    min,
    max,
    step,
    allowDecimal,
    onChange,
    thumbSize
    // orientation,
  });
  const renderThumb = () => {
    if (Thumb) {
      return /*#__PURE__*/_jsx(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__*/_jsx(Animated.View, {
      style: [styles.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__*/_jsx(View, {
          style: [styles.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__*/_jsx(View, {
        style: [styles.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__*/_jsx(Animated.View, {
        style: [styles.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__*/_jsx(FloatingLabel, {
          value: displayValue,
          ...restProps
        })
      });
    }
    return /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.floatingLabel, {
        left: thumbAnim,
        opacity: isDragging ? 1 : 0,
        transform: [{
          scale: isDragging ? 1 : 0.5
        }, {
          translateY: isDragging ? -30 : 0
        }, {
          translateX: -(customThumbRef.current.width || thumbSize)
        }]
      }],
      children: /*#__PURE__*/_jsx(View, {
        style: styles.labelContainer,
        children: /*#__PURE__*/_jsxs(Text, {
          style: styles.labelText,
          children: [valuePrefix, displayValue, valueSuffix]
        })
      })
    });
  };
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.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__*/_jsxs(Text, {
      style: styles.valueText,
      children: [valuePrefix, displayValue, valueSuffix]
    }), /*#__PURE__*/_jsxs(View, {
      style: [styles.trackContainer,
      // isVertical && styles.verticalTrackContainer,
      {
        height: 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__*/_jsx(View, {
        style: [styles.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__*/_jsx(Animated.View, {
        style: [styles.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()]
    })]
  });
};
export default Slider;
//# sourceMappingURL=index.js.map