@td-design/react-native/lib/module/slider/index.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import ReText from '../text/ReText';
import useSlider from './useSlider';
const {
  px
} = helpers;
const SLIDER_HEIGHT = px(20);
const Slider = props => {
  const theme = useTheme();
  const {
    min = 0,
    max = 100,
    value = 0,
    onChange,
    width = px(250),
    labelWidth = px(40),
    height = SLIDER_HEIGHT,
    backgroundColor = theme.colors.gray200,
    foregroundColor = theme.colors.primary200,
    handleBackground = theme.colors.white,
    showText = true,
    textPosition = 'top',
    textStyle
  } = props;
  const KNOB_WIDTH = height;
  const sliderRange = width - KNOB_WIDTH;
  const oneStepValue = Math.ceil(sliderRange / (max - min)) || 1;
  const {
    progressStyle,
    knobStyle,
    onGestureEvent,
    label
  } = useSlider({
    min,
    max,
    value,
    onChange,
    oneStepValue,
    knobWidth: KNOB_WIDTH
  });
  const styles = StyleSheet.create({
    progress: {
      backgroundColor: foregroundColor,
      borderRadius: KNOB_WIDTH
    },
    knob: {
      height: KNOB_WIDTH,
      width: KNOB_WIDTH,
      borderRadius: KNOB_WIDTH,
      borderColor: foregroundColor,
      borderWidth: 1,
      backgroundColor: handleBackground,
      justifyContent: 'center',
      alignItems: 'center'
    },
    content: {
      borderRadius: KNOB_WIDTH,
      backgroundColor
    }
  });
  const SliderContent = /*#__PURE__*/React.createElement(Box, {
    width: width,
    height: KNOB_WIDTH,
    style: styles.content
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [StyleSheet.absoluteFillObject, styles.progress, progressStyle]
  }), /*#__PURE__*/React.createElement(PanGestureHandler, {
    onGestureEvent: onGestureEvent
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.knob, knobStyle]
  })));
  const Label = /*#__PURE__*/React.createElement(ReText, {
    style: {
      fontSize: px(14),
      color: theme.colors.gray500,
      ...textStyle
    },
    text: label
  });
  if (!showText) return SliderContent;
  if (textPosition === 'top' || textPosition === 'bottom') return /*#__PURE__*/React.createElement(Box, null, textPosition === 'top' && /*#__PURE__*/React.createElement(Box, {
    marginBottom: "x1"
  }, Label), SliderContent, textPosition === 'bottom' && /*#__PURE__*/React.createElement(Box, {
    marginTop: "x1"
  }, Label));
  return /*#__PURE__*/React.createElement(Flex, {
    position: 'relative'
  }, textPosition === 'left' && /*#__PURE__*/React.createElement(Box, {
    width: labelWidth,
    alignItems: 'flex-start'
  }, Label), SliderContent, textPosition === 'right' && /*#__PURE__*/React.createElement(Box, {
    width: labelWidth,
    alignItems: 'flex-end'
  }, Label));
};
Slider.displayName = 'Slider';
export default Slider;
//# sourceMappingURL=index.js.map