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

2021SC@SDUSC

Element部分

导入需要的模块

import * as React from 'react';
import classNames from 'classnames';

element接口

export interface SkeletonElementProps {
  //  前缀
  prefixCls?: string;
  // 类名
  className?: string;
  // 样式表
  style?: React.CSSProperties;
  // 大小尺寸
  size?: 'large' | 'small' | 'default' | number;
  // 形状：圆圈、方角、圆角
  shape?: 'circle' | 'square' | 'round';
  // 是否显示动画
  active?: boolean;
}

const Element = (props: SkeletonElementProps) => {
  const { prefixCls, className, style, size, shape } = props;

  const sizeCls = classNames({
    // 根据前缀展示尺寸
    [`${prefixCls}-lg`]: size === 'large',
    [`${prefixCls}-sm`]: size === 'small',
  });

  const shapeCls = classNames({
    // 根据前缀展示形状
    [`${prefixCls}-circle`]: shape === 'circle',
    [`${prefixCls}-square`]: shape === 'square',
    [`${prefixCls}-round`]: shape === 'round',
  });

  const sizeStyle: React.CSSProperties =
    // 非默认的尺寸
    typeof size === 'number'
      ? {
          width: size,
          height: size,
          lineHeight: `${size}px`,
        }
      : {};

  return (
    // 返回组件内容
    <span
      className={classNames(prefixCls, sizeCls, shapeCls, className)}
      style={{ ...sizeStyle, ...style }}
    />
  );
};

export default Element;

Avatar部分（表示头像的部分）

import * as React from 'react';
import omit from 'rc-util/lib/omit';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import Element, { SkeletonElementProps } from './Element';

export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
  // 头像展示是方框还是圆圈
  shape?: 'circle' | 'square';
}

const SkeletonAvatar = (props: AvatarProps) => {
  // avatar 只有是否演示动画
  const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
    const { prefixCls: customizePrefixCls, className, active } = props;
    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
    const otherProps = omit(props, ['prefixCls', 'className']);
    const cls = classNames(
      prefixCls,
      `${prefixCls}-element`,
      {
        [`${prefixCls}-active`]: active,
      },
      className,
    );
    return (
      // 返回组件
      <div className={cls}>
        <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
      </div>
    );
  };
  return <ConfigConsumer>{renderSkeletonAvatar}</ConfigConsumer>;
};

Button部分  骨架框的按钮部分

接口部分

export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
  // 大小
  size?: 'large' | 'small' | 'default';
  // 是否锁定
  block?: boolean;
}

const SkeletonButton = (props: SkeletonButtonProps) => {
  // 根据前缀信息展示是否锁定以及演示动画
  const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
    const { prefixCls: customizePrefixCls, className, active, block = false } = props;
    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
    const otherProps = omit(props, ['prefixCls']);
    const cls = classNames(
      prefixCls,
      `${prefixCls}-element`,
      {
        [`${prefixCls}-active`]: active,
        [`${prefixCls}-block`]: block,
      },
      className,
    );
    return (
      // 返回一个组件
      <div className={cls}>
        <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
      </div>
    );
  };
  return <ConfigConsumer>{renderSkeletonButton}</ConfigConsumer>;
};

Input部分同按钮部分类似

export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
  size?: 'large' | 'small' | 'default';
}

const SkeletonInput = (props: SkeletonInputProps) => {
  const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
    const { prefixCls: customizePrefixCls, className, active } = props;
    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
    const otherProps = omit(props, ['prefixCls']);
    const cls = classNames(
      prefixCls,
      `${prefixCls}-element`,
      {
        [`${prefixCls}-active`]: active,
      },
      className,
    );
    return (
      <div className={cls}>
        <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
      </div>
    );
  };
  return <ConfigConsumer>{renderSkeletonInput}</ConfigConsumer>;
};