antd-mobile-taro-ui/es/components/progress-circle/progress-circle.js

以antd-mobile为设计标准，基于taro框架的微信小程序组件库

import React, { useMemo } from 'react';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import { View } from '@tarojs/components';
const classPrefix = `adm-progress-circle`;
export const ProgressCircle = p => {
  const props = mergeProps({
    percent: 0
  }, p);
  const l = useMemo(() => Math.max(props.percent - 50, 0) === 0 ? '-135' : `${props.percent * 3.6 - 315}`, [props.percent]);
  const lPercent = {
    '--percent': `${l}deg`
  };
  const r = useMemo(() => Math.min(props.percent, 50) === 50 ? '45' : `${props.percent * 3.6 - 135}`, [props.percent]);
  const rPercent = {
    '--percent': `${r}deg`
  };
  return withNativeProps(props, React.createElement(View, {
    className: `${classPrefix}`
  }, React.createElement(View, {
    className: `${classPrefix}-content`
  }, React.createElement(View, {
    className: `${classPrefix}-wrapper`
  }, React.createElement(View, {
    className: `${classPrefix}-percent`
  }, React.createElement(View, {
    className: `${classPrefix}-circle ${classPrefix}-left`
  }, React.createElement(View, {
    className: `${classPrefix}-left-circle`,
    style: lPercent
  })), React.createElement(View, {
    className: `${classPrefix}-circle ${classPrefix}-right`
  }, React.createElement(View, {
    className: `${classPrefix}-right-circle`,
    style: rPercent
  }))), React.createElement(View, {
    className: `${classPrefix}-default-circle`
  })), React.createElement(View, {
    className: `${classPrefix}-info`
  }, props.children))));
};