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

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';
import Svg, { Circle, Defs, G, LinearGradient, Stop } from 'react-native-svg';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import helpers from '../helpers';
import Text from '../text';
import ReText from '../text/ReText';
import useCircleProgress from './useCircleProgress';
const {
  px
} = helpers;
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const CircleProgress = props => {
  const theme = useTheme();
  const {
    width = px(150),
    color = theme.colors.primary200,
    bgColor = theme.colors.gray200,
    strokeWidth = px(8),
    value = 0,
    label,
    showLabel = true,
    labelStyle,
    unit
  } = props;
  const {
    radius,
    textLabel,
    circumference,
    animatedProps
  } = useCircleProgress({
    width,
    strokeWidth,
    unit,
    value
  });
  return /*#__PURE__*/React.createElement(Box, {
    width: width,
    height: width,
    position: 'relative'
  }, /*#__PURE__*/React.createElement(Svg, {
    width: width,
    height: width
  }, /*#__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(G, {
    rotation: "-90",
    origin: `${width / 2}, ${width / 2}`
  }, /*#__PURE__*/React.createElement(Circle, {
    cx: width / 2,
    cy: width / 2,
    r: radius,
    stroke: bgColor,
    strokeWidth: strokeWidth,
    strokeOpacity: 1,
    fill: "none"
  }), /*#__PURE__*/React.createElement(AnimatedCircle, {
    cx: width / 2,
    cy: width / 2,
    r: radius,
    stroke: "url(#grad)",
    fill: "none",
    strokeLinecap: "round",
    strokeWidth: strokeWidth,
    strokeDasharray: `${circumference} ${circumference}`,
    animatedProps: animatedProps
  }))), showLabel ? /*#__PURE__*/React.createElement(Box, {
    style: [StyleSheet.absoluteFillObject, {
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center'
    }, 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);
};
CircleProgress.displayName = 'CircleProgress';
export default CircleProgress;
//# sourceMappingURL=CircleProgress.js.map