@forchange/aui/es/progress/index.js

ai-boss 业务 ui 组件库

import * as React from 'react';

const Progress = ({
  percent,
  className,
  strokeWidth: width = '100%',
  strokeHeight: height = 10,
  backgroundColor = '#e6e8f7',
  strokeColor = '#707cff',
  extraColor = '#fdaf00',
  borderRadius = 4,
  strokeMode
}) => {
  const minWidth = '10px';
  return strokeMode === 'fixedWidth' ? React.createElement("div", {
    style: {
      display: 'flex',
      width: '100%'
    },
    className: className ? `container--progress-component ${className}` : 'container--progress-component'
  }, percent < 100 && React.createElement("div", {
    className: "wrapper--progress-component",
    style: {
      minWidth,
      width: percent > 100 ? `${100 - (percent - 100)}%` : '100%',
      height,
      borderRadius: `${borderRadius}px`,
      backgroundColor
    }
  }, React.createElement("div", {
    className: "section--less-bar",
    style: {
      minWidth,
      width: percent > 100 ? `100%` : `${percent}%`,
      height,
      zIndex: 1,
      borderRadius: `${borderRadius}px`,
      backgroundColor: strokeColor
    }
  })), percent > 100 && React.createElement(React.Fragment, null, React.createElement("div", {
    className: "section--less-bar",
    style: {
      minWidth,
      width: percent > 100 ? `100%` : `${percent}%`,
      height,
      zIndex: 1,
      borderRadius: `${borderRadius}px`,
      backgroundColor: strokeColor
    }
  }), React.createElement("div", {
    className: "section--more-bar",
    style: {
      minWidth,
      width: percent > 100 ? `${percent - 100}%` : 0,
      height,
      marginLeft: `-${borderRadius + 2}px`,
      borderRadius: `${borderRadius}px`,
      backgroundColor: extraColor
    }
  }))) : React.createElement("div", {
    style: {
      display: 'flex',
      width: '100%'
    },
    className: className ? `container--progress-component ${className}` : 'container--progress-component'
  }, React.createElement("div", {
    className: "wrapper--progress-component",
    style: {
      position: 'relative',
      width,
      height,
      borderRadius: `${borderRadius}px`,
      backgroundColor
    }
  }, React.createElement("div", {
    className: "section--less-bar",
    style: {
      position: 'absolute',
      top: 0,
      left: 0,
      minWidth,
      width: percent > 100 ? `100%` : `${percent}%`,
      height,
      zIndex: 1,
      borderRadius: `${borderRadius}px`,
      backgroundColor: strokeColor
    }
  }), React.createElement("div", {
    className: "section--more-bar",
    style: {
      position: 'absolute',
      top: 0,
      right: `-${percent - 100}%`,
      minWidth,
      width: percent > 100 ? `calc(${percent - 100}% + ${borderRadius + 2}px)` : 0,
      height,
      zIndex: 0,
      borderRadius: `${borderRadius}px`,
      backgroundColor: extraColor
    }
  })));
};

export default Progress;