Ant-Design源码分析——Popconfirm

2021SC@SDUSC

首先是导入相应的模块

import * as React from 'react';
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import KeyCode from 'rc-util/lib/KeyCode';
import Tooltip, { AbstractTooltipProps } from '../tooltip';
import Button from '../button';
import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import { ConfigContext } from '../config-provider';
import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
import { cloneElement } from '../_util/reactNode';
import { getTransitionName } from '../_util/motion';
import ActionButton from '../_util/ActionButton';

声明接口类，继承了AbstractTooltipProps，属性说明见注释

export interface PopconfirmProps extends AbstractTooltipProps {
  //确认框的描述
  title: React.ReactNode | RenderFunction;
  //阻止点击 Popconfirm 子元素时弹出确认框
  disabled?: boolean;
  //点击确认的回调
  onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
  //点击取消的回调
  onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
  //确认按钮文字
  okText?: React.ReactNode;
  //确认按钮类型
  okType?: LegacyButtonType;
  //取消按钮文字
  cancelText?: React.ReactNode;
  //ok 按钮 props
  okButtonProps?: ButtonProps;
  //cancel 按钮 props
  cancelButtonProps?: ButtonProps;
  //自定义弹出气泡 Icon 图标
  icon?: React.ReactNode;
  //可视性变化，根据事件变化
  onVisibleChange?: (
    visible: boolean,
    e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
  ) => void;
}

获取前缀信息

const { getPrefixCls } = React.useContext(ConfigContext);

函数设置是否可视

const settingVisible = (//传入两个参数，一个是期望的是否可见，另一个是事件。
    value: boolean,
    e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
  ) => {
    setVisible(value);
    //根据事件决定是否可视
    props.onVisibleChange?.(value, e);
  };

关闭弹窗

const close = (e: React.MouseEvent<HTMLButtonElement>) => {
    settingVisible(false, e);
  };

确认

const onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => props.onConfirm?.call(this, e);

取消

const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
    settingVisible(false, e);
    props.onCancel?.call(this, e);
  };

键盘esc关闭弹窗

const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.keyCode === KeyCode.ESC && visible) {
      settingVisible(false, e);
    }
  };

改变其可视属性，通过传入true或false

 const onVisibleChange = (value: boolean) => {
    const { disabled } = props;
    if (disabled) {
      return;
    }
    settingVisible(value);
  };

通过传入前缀字符串与一个类实例对象返回一个前端组件

const renderOverlay = (prefixCls: string, popconfirmLocale: PopconfirmLocale) => {
    const { okButtonProps, cancelButtonProps, title, cancelText, okText, okType, icon } = props;
    return (
      <div className={`${prefixCls}-inner-content`}>
        <div className={`${prefixCls}-message`}>
          {icon}
          <div className={`${prefixCls}-message-title`}>{getRenderPropValue(title)}</div>
        </div>
        <div className={`${prefixCls}-buttons`}>
          <Button onClick={onCancel} size="small" {...cancelButtonProps}>
            {cancelText || popconfirmLocale.cancelText}
          </Button>
          <ActionButton
            buttonProps={{ size: 'small', ...convertLegacyProps(okType), ...okButtonProps }}
            actionFn={onConfirm}
            close={close}
            prefixCls={getPrefixCls('btn')}
            quitOnNullishReturnValue
            emitEvent
          >
            {okText || popconfirmLocale.okText}
          </ActionButton>
        </div>
      </div>
    );
  };