Ant-Design源码分析——Progress（二）

最新推荐文章于 2023-07-07 15:42:43 发布

Nine-Theta

最新推荐文章于 2023-07-07 15:42:43 发布

阅读量916

点赞数

文章标签： react.js javascript typescript

本文链接：https://blog.csdn.net/qq_46025739/article/details/121482045

版权

本文详细介绍了React组件中用于进度展示的Line和Circle两种形式，它们都继承自Progress。Line组件主要展示了渐变色的设置方法，包括处理渐变色的函数及组件的样式定义。Circle组件则涉及圆环形进度条的实现，包括获取完成度、进度条颜色的函数，以及组件的样式配置。这两个组件提供了灵活的进度条展示方式，适用于各种UI设计需求。

摘要由CSDN通过智能技术生成

2021SC@SDUSC今天接着介绍progress的另外两部分“line”与“circle”

line

首先line与circle都继承progress

/** 用于设置渐变色
 *  例子
 *   {
 *     "0%": "#afc163",
 *     "75%": "#009900",
 *     "50%": "green", // ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
 *     "25%": "#66FF00",
 *     "100%": "#ffffff"
 *   }
 */
export const sortGradient = (gradients: StringGradients) => {
  let tempArr: any[] = [];
  Object.keys(gradients).forEach(key => {
    const formattedKey = parseFloat(key.replace(/%/g, ''));
    if (!isNaN(formattedKey)) {
      tempArr.push({
        key: formattedKey,
        value: gradients[key],
      });
    }
  });
  tempArr = tempArr.sort((a, b) => a.key - b.key);
  return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
};

const Line: React.FC<LineProps> = props => {
  const {// line的一些属性，在progress中也已介绍
    prefixCls,
    direction: directionConfig,
    percent,
    strokeWidth,
    size,
    strokeColor,
    strokeLinecap,
    children,
    trailColor,
    success,
  } = props;
  // 背景，为进度条的颜色
  const backgroundProps =
    strokeColor && typeof strokeColor !== 'string'
      ? handleGradient(strokeColor, directionConfig)
      : {
          background: strokeColor,
        };
  // 未完成部分颜色
  const trailStyle = trailColor
    ? {
        backgroundColor: trailColor,
      }
    : undefined;
  // 百分比样式
  const percentStyle = {// 长宽以及是否为圆角
    width: `${validProgress(percent)}%`,
    height: strokeWidth || (size === 'small' ? 6 : 8),
    borderRadius: strokeLinecap === 'square' ? 0 : '',
    ...backgroundProps,
  } as React.CSSProperties;
  
  // 完成了多少以及完成多少所显示的样式
  const successPercent = getSuccessPercent(props);

  const successPercentStyle = {
    width: `${validProgress(successPercent)}%`,
    height: strokeWidth || (size === 'small' ? 6 : 8),
    borderRadius: strokeLinecap === 'square' ? 0 : '',
    backgroundColor: success?.strokeColor,
  } as React.CSSProperties;

  const successSegment =
    successPercent !== undefined ? (
      <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
    ) : null;
  
  //最后返回一个组件
  return (
    <>
      <div className={`${prefixCls}-outer`}>
        <div className={`${prefixCls}-inner`} style={trailStyle}>
          <div className={`${prefixCls}-bg`} style={percentStyle} />
          {successSegment}
        </div>
      </div>
      {children}
    </>
  );
};

export default Line;

circle

circle也继承了progress，dashboard就是带有缺口的circle

两个全局函数分别为获取完成度和进度条颜色

function getPercentage({ percent, success, successPercent }: CircleProps) {
  const realSuccessPercent = validProgress(getSuccessPercent({ success, successPercent }));
  return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
}

function getStrokeColor({ success = {}, strokeColor }: Partial<CircleProps>) {
  const { strokeColor: successColor } = success;
  return [successColor || presetPrimaryColors.green, strokeColor || null];
}

const Circle: React.FC<CircleProps> = props => {
  const {
    prefixCls,
    width,
    strokeWidth,
    trailColor,
    strokeLinecap,
    gapPosition,
    gapDegree,
    type,
    children,
    success,
  } = props;
  // 圆圈大小，默认120
  const circleSize = width || 120;
  // 圆圈样式
  const circleStyle = {
    width: circleSize,
    height: circleSize,
    fontSize: circleSize * 0.15 + 6,
  } as React.CSSProperties;
  // 宽度，默认为6
  const circleWidth = strokeWidth || 6;
  // 缺口位置，默认为上方
  const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
  // 获取缺口的角度，若为dashboard默认为75，circle默认为0
  const getGapDegree = () => {
    // Support gapDeg = 0 when type = 'dashboard'
    if (gapDegree || gapDegree === 0) {
      return gapDegree;
    }
    if (type === 'dashboard') {
      return 75;
    }
    return undefined;
  };

  // using className to style stroke color
  const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
  const strokeColor = getStrokeColor({ success, strokeColor: props.strokeColor });

  const wrapperClassName = classNames(`${prefixCls}-inner`, {
    [`${prefixCls}-circle-gradient`]: isGradient,
  });
  
  // 最后返回组件
  return (
    <div className={wrapperClassName} style={circleStyle}>
      <RCCircle
        percent={getPercentage(props)}
        strokeWidth={circleWidth}
        trailWidth={circleWidth}
        strokeColor={strokeColor}
        strokeLinecap={strokeLinecap}
        trailColor={trailColor}
        prefixCls={prefixCls}
        gapDegree={getGapDegree()}
        gapPosition={gapPos}
      />
      {children}
    </div>
  );
};