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

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

import React from 'react';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import classNames from 'classnames';
import { isNodeWithContent } from 'antd-mobile/es/utils/is-node-with-content';
import { View } from '@tarojs/components';
const classPrefix = `adm-progress-bar`;
const defaultProps = {
  percent: 0,
  rounded: true,
  text: false
};
export const ProgressBar = p => {
  const props = mergeProps(defaultProps, p);
  const fillStyle = {
    width: `${props.percent}%`
  };

  const textElement = (() => {
    if (props.text === true) {
      return `${props.percent}%`;
    }

    if (typeof props.text === 'function') {
      return props.text(props.percent);
    }

    return props.text;
  })();

  return withNativeProps(props, React.createElement(View, {
    className: classNames(classPrefix, props.rounded && `${classPrefix}-rounded`)
  }, React.createElement(View, {
    className: `${classPrefix}-trail`
  }, React.createElement(View, {
    className: `${classPrefix}-fill`,
    style: fillStyle
  })), isNodeWithContent(textElement) && React.createElement(View, {
    className: `${classPrefix}-text`
  }, textElement)));
};