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

2021SC@SDUSC

progress一共有3种类型，分别为“line”、“circle”、“dashboard”

line

 circle

 dashboard

 本组件内容较多，本文章先只介绍“progress”整体部分

progress部分

首先是导入相应的模块

import * as React from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import CheckOutlined from '@ant-design/icons/CheckOutlined';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { tuple } from '../_util/type';
import devWarning from '../_util/devWarning';
import { validProgress, getSuccessPercent } from './utils';

定义的一些变量，分析已写在注释里

// 首先定义了progress的三种类型，并标记了其对应的名字，分别对应0，1，2
const ProgressTypes = tuple('line', 'circle', 'dashboard');
export type ProgressType = typeof ProgressTypes[number];
// 定义了进度条的状态分别为“普通状态”、“错误状态”、“活跃状态”（仅限line）、“成功状态”
const ProgressStatuses = tuple('normal', 'exception', 'active', 'success');
// 定义了进度条的大小，分为默认和缩小版
export type ProgressSize = 'default' | 'small';
// 提供渐变色进度条
export type StringGradients = { [percentage: string]: string };
type FromToGradients = { from: string; to: string };
// 渐变色progress，参数为角度，起始颜色、末尾颜色
export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);

定义进度条接口，以及一些配置的说明在注释中标出

export interface ProgressProps {
  // 前缀，用于区分progress
  prefixCls?: string;
  // 类名
  className?: string;
  // progress 的类型
  type?: ProgressType;
  // progress已经完成的百分比
  percent?: number;
  // 内容的模板函数，可以对进度条的内容进行修改
  format?: (percent?: number, successPercent?: number) => React.ReactNode;
  // progress 的状态
  status?: typeof ProgressStatuses[number];
  // 是否显示进度条的信息，如完成度等
  showInfo?: boolean;
  // 进度条线宽度
  strokeWidth?: number;
  // 进度条样式 圆角/方角边缘
  strokeLinecap?: 'butt' | 'square' | 'round';
  // 进度条颜色
  strokeColor?: string | ProgressGradient;
  // 未完成部分的颜色
  trailColor?: string;
  // circle与dashboard的宽度
  width?: number;
  // 成功部分的属性配置
  success?: SuccessProps;
  // 样式
  style?: React.CSSProperties;
  // dashboard的缺口角度
  gapDegree?: number;
  // dashboard的缺口位置
  gapPosition?: 'top' | 'bottom' | 'left' | 'right';
  // 进度条大小
  size?: ProgressSize;
  // line 进度条的步数
  steps?: number;
  /** @deprecated Use `success` instead */
  // 完成部分占比
  successPercent?: number;
}

Progress类继承了React.Component<ProgressProps>

下面是Progress类的一些属性以及方法

static defaultProps = {
    // 默认为line类型
    type: 'line' as ProgressProps['type'],
    // 默认进度为0
    percent: 0,
    // 默认显示信息
    showInfo: true,
    // 默认未完成部分无颜色
    trailColor: null,
    // 默认大小
    size: 'default' as ProgressProps['size'],
    // 默认无缺口（即circle类型）
    gapDegree: undefined,
    // 默认圆角
    strokeLinecap: 'round' as ProgressProps['strokeLinecap'],
  };

 // 函数，功能为获取完成的进度
  getPercentNumber() {
    const { percent = 0 } = this.props;
    const successPercent = getSuccessPercent(this.props);
    return parseInt(// 返回完成的进度
      successPercent !== undefined ? successPercent.toString() : percent.toString(),
      10,// 将字符转换为数字时候采用十进制
    );
  }

// 函数，返回进度条状态
  getProgressStatus() {
    const { status } = this.props;
    // 若状态代表数字小于零或完成度达到百分之一百返回“success”，否则返回普通状态
    if (ProgressStatuses.indexOf(status!) < 0 && this.getPercentNumber() >= 100) {
      return 'success';
    }
    return status || 'normal';
  }

// 函数，根据进度条的状态来返回提示信息
  renderProcessInfo(prefixCls: string, progressStatus: typeof ProgressStatuses[number]) {
    const { showInfo, format, type, percent } = this.props;
    const successPercent = getSuccessPercent(this.props);
    if (!showInfo) {// 若showInfo为false则返回null
      return null;
    }
    let text;// 定义变量text
    const textFormatter = format || (percentNumber => `${percentNumber}%`);// 定义变量text的模板
    const isLineType = type === 'line';
    // 将状态分为三种情况 "exception"错误/“success”成功/其他
    if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {// 其他，返回完成度以及成功的部分（存在分段进度条）
      text = textFormatter(validProgress(percent), validProgress(successPercent));
    } else if (progressStatus === 'exception') {// 错误状态返回错误信息
      text = isLineType ? <CloseCircleFilled /> : <CloseOutlined />;
    } else if (progressStatus === 'success') {// 成功状态返回成功信息
      text = isLineType ? <CheckCircleFilled /> : <CheckOutlined />;
    }
    return (// 将text 放入<span>中并返回<span>
      <span className={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
        {text}
      </span>
    );
  }

// 函数，渲染进度条
  renderProgress = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
    const { props } = this;
    const {// 定义一些属性
      prefixCls: customizePrefixCls,
      className,
      size,
      type,
      steps,
      showInfo,
      strokeColor,
      ...restProps
    } = props;
    // 获取前缀信息、进度条状态、进度条信息
    const prefixCls = getPrefixCls('progress', customizePrefixCls);
    const progressStatus = this.getProgressStatus();
    const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);

    devWarning(
      !('successPercent' in props),
      'Progress',
      '`successPercent` is deprecated. Please use `success.percent` instead.',
    );

    let progress;
    // 渲染进度条的形状
    if (type === 'line') {// line类型
      progress = steps ? (
        <Steps
          {...this.props}
          strokeColor={typeof strokeColor === 'string' ? strokeColor : undefined}
          prefixCls={prefixCls}
          steps={steps}
        >
          {progressInfo}
        </Steps>
      ) : (
        <Line {...this.props} prefixCls={prefixCls} direction={direction}>
          {progressInfo}
        </Line>
      );
    } else if (type === 'circle' || type === 'dashboard') {
      progress = (
        <Circle {...this.props} prefixCls={prefixCls} progressStatus={progressStatus}>
          {progressInfo}
        </Circle>
      );
    }

最后返回进度条

return (
      <div
        {...omit(restProps, [
          'status',
          'format',
          'trailColor',
          'strokeWidth',
          'width',
          'gapDegree',
          'gapPosition',
          'strokeLinecap',
          'percent',
          'success',
          'successPercent',
        ])}
        className={classString}
      >
        {progress}
      </div>
    );