ant_modal扩展使其拖拽

官方没有提供拖拽功能，项目需要，就自己按照网上的列子写了下，在此做一下记录

import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React, {useState, useEffect, useRef} from 'react';
import {connect, useDispatch} from 'dva'
import {useHistory} from 'react-router-dom'
import ProTable from '@ant-design/pro-table';
import {
  Modal,
} from 'antd';

import {ModalProps} from 'antd/lib/modal';

interface IndexProps extends ModalProps {
  //关闭的时候清空表单
  closeResetForm?: Boolean,
}


const Index: React.FC<IndexProps> = ({
                                       maskClosable = false,
                                       destroyOnClose = false,
                                       getContainer = false,
                                       title = "",
                                       closeResetForm = true,
                                       ...props
                                     }) => {
  //记录初始化样式
  const initStyle = useRef<{ left: any, top: any }>({left: 0, top: 100});

  //记录样式
  const [style, setStyle] = useState<{ left: any, top: any }>(() => {
    const initStyle_ = {
      left: (props.style && props.style.hasOwnProperty('left')) ? props.style.left : 0,
      top: (props.style && props.style.hasOwnProperty('top')) ? props.style.top : 100
    }
    initStyle.current = initStyle_;
    return initStyle_
  });

  useEffect(() => {
    if (!props.visible) {
      //加个延迟效果为了不让关闭的时候先还原位置再关闭弹框造成的短暂跳动的视觉不好的效果
      setTimeout(() => {
        setStyle(initStyle.current)
        //清空表单判断逻辑
        //@ts-ignore
        if (closeResetForm && props.children&&props.children.props && props.children.props.form && props.children.props.form.hasOwnProperty("resetFields")) {
          //@ts-ignore
          props.children.props.form.resetFields()
        }
      }, 300)
    }
    return () => {

    }
  }, [props.visible])

  //计算是否超出屏幕;超出后
  const inWindow = (left: number, top: number, startPosX: number, startPosY: number): boolean => {
    let H = document.body.clientHeight;
    let W = document.body.clientWidth;
    if ((left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) ||
      (top < 20 && startPosY > top) || ((top > H - 20 && startPosY < top))) {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
      return false;
    }
    return true;
  }

  const onMouseDown = (e: any) => {
    e.preventDefault();
    //记录初始移动的鼠标位置
    let startPosX = e.clientX;
    let startPosY = e.clientY;
    //添加鼠标移动事件
    document.body.onmousemove = e => {
      let left = e.clientX - startPosX + style.left;
      let top = e.clientY - startPosY + style.top;
      if (inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
        setStyle({
          left,
          top,
        })
      }
    };
    //鼠标放开时去掉移动事件
    document.body.onmouseup = function () {
      document.body.onmousemove = null;
    };
  };
  return (
    <Modal
      title={<div style={{width: "100%", cursor: "move"}}
                  onMouseDown={onMouseDown}>{title}</div>}
      maskClosable={maskClosable}
      destroyOnClose={destroyOnClose}
      getContainer={getContainer}
      {...props}
      style={style}
    >
      {props.children}
    </Modal>
  );
};
export default Index