@td-design/react-native/lib/module/progress/LineProgress.js

react-native UI组件库

import React from 'react';
import Animated from 'react-native-reanimated';
import Svg, { Defs, Line, LinearGradient, Stop } from 'react-native-svg';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Text from '../text';
import ReText from '../text/ReText';
import useLineProgress from './useLineProgress';
const {
  px
} = helpers;
const AnimatedLine = Animated.createAnimatedComponent(Line);
const LineProgress = props => {
  const theme = useTheme();
  const {
    width = px(250),
    color = theme.colors.primary200,
    bgColor = theme.colors.gray200,
    strokeWidth = theme.spacing.x2,
    value = 0,
    showLabel = true,
    labelPosition = 'right',
    unit,
    label,
    labelStyle
  } = props;
  const {
    animatedProps,
    textLabel
  } = useLineProgress({
    width,
    strokeWidth,
    unit,
    value
  });
  const SvgComp = /*#__PURE__*/React.createElement(Svg, {
    width: width,
    height: strokeWidth
  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
    id: "grad",
    x1: "0",
    y1: "0",
    x2: "1",
    y2: "0"
  }, /*#__PURE__*/React.createElement(Stop, {
    offset: "0",
    stopColor: typeof color === 'string' ? color : color[0],
    stopOpacity: "1"
  }), /*#__PURE__*/React.createElement(Stop, {
    offset: "1",
    stopColor: typeof color === 'string' ? color : color[1],
    stopOpacity: "1"
  }))), /*#__PURE__*/React.createElement(Line, {
    x1: strokeWidth / 2,
    x2: width - strokeWidth / 2,
    y1: strokeWidth / 2,
    y2: strokeWidth / 2,
    fill: "none",
    stroke: bgColor,
    strokeWidth: strokeWidth,
    strokeLinecap: "round"
  }), /*#__PURE__*/React.createElement(AnimatedLine, {
    x1: strokeWidth / 2,
    y1: strokeWidth / 2,
    y2: strokeWidth / 2,
    fill: "none",
    stroke: "url(#grad)",
    strokeLinecap: "round",
    strokeWidth: strokeWidth,
    animatedProps: animatedProps
  }));
  const LabelComp = showLabel ? /*#__PURE__*/React.createElement(Box, {
    style: labelStyle
  }, typeof label === 'string' ? /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "primary_text"
  }, label) : label, /*#__PURE__*/React.createElement(ReText, {
    text: textLabel,
    style: [{
      fontSize: px(14),
      color: typeof color === 'string' ? color : theme.colors.primary200,
      fontWeight: '500',
      textAlign: 'center'
    }]
  })) : null;
  if (labelPosition === 'top') return /*#__PURE__*/React.createElement(Box, {
    width: width
  }, LabelComp, SvgComp);
  return /*#__PURE__*/React.createElement(Flex, {
    width: width
  }, SvgComp, LabelComp);
};
LineProgress.displayName = 'LineProgress';
export default LineProgress;
//# sourceMappingURL=LineProgress.js.map