DragModal.js 4.09 KB
Newer Older
1
/* eslint-disable */
李纪文's avatar
李纪文 committed
2 3
import React, { useContext } from 'react';
import { Modal, ConfigProvider } from 'antd';
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

class DragModal extends React.Component {
  constructor() {
    super();
    this.simpleClass = Math.random().toString(36).substring(2);
    this.init = false;
  }

  move = (event) => {
    const { top, left, right, bottom, width, height } = this.contain.getBoundingClientRect();
    const { limit = false } = this.props;
    this.contain.style.top = `${top + event.movementY}px`;
    this.contain.style.left = `${left + event.movementX}px`;
    if (limit) {
      if (bottom + event.movementY > window.innerHeight)
        this.contain.style.top = `${window.innerHeight - height}px`;
      if (top + event.movementY < 0) this.contain.style.top = 0;
      if (right + event.movementX > window.innerWidth)
        this.contain.style.left = `${window.innerWidth - width}px`;
      if (left + event.movementX < 0) this.contain.style.left = 0;
    }
  };

  removeMove = () => {
    window.removeEventListener('mousemove', this.move, false);
  };

  removeUp = () => {
    document.body.onselectstart = () => true;
    this.removeMove();
  };

  // eslint-disable-next-line consistent-return
  toTop = () => {
    const autoIndexArr = document.getElementsByClassName('autoIndex');
    if (autoIndexArr.length < 1) return false;
    let max = 0;
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < autoIndexArr.length; i++) {
      // eslint-disable-next-line radix
      const zIndex = parseInt(autoIndexArr[i].style.zIndex || 1000);
      if (zIndex > max) max = zIndex;
    }
    this.contain.style.zIndex = max + 1;
  };

  // eslint-disable-next-line consistent-return
  create = (visible) => {
    if (this.init) return false;
李纪文's avatar
李纪文 committed
53
    const { title, dragable = true, autoIndex = true, style = {}, componentPrefix } = this.props;
54 55 56 57 58 59 60
    if (title && dragable && visible) {
      this.init = true;
      setTimeout(() => {
        // eslint-disable-next-line prefer-destructuring
        this.contain = document.getElementsByClassName(this.simpleClass)[0];
        if (!autoIndex) {
          // eslint-disable-next-line prefer-destructuring
李纪文's avatar
李纪文 committed
61
          this.contain = this.contain.getElementsByClassName(`${componentPrefix}-modal`)[0];
62 63 64 65 66 67 68 69 70 71 72 73
          this.contain.style.paddingBottom = 0;
          this.contain.style.display = 'inline-block';
        } else {
          this.contain.style.right = 'auto';
          this.contain.style.overflow = 'visible';
          this.contain.style.bottom = 'auto';
          this.contain.style.left = typeof style.left === 'number' ? `${style.left}px` : style.left;
          this.contain.style.top = typeof style.top === 'number' ? `${style.top}px` : style.top;
          this.contain.addEventListener('mousedown', this.toTop, false);
          this.toTop();
        }
        // eslint-disable-next-line prefer-destructuring
李纪文's avatar
李纪文 committed
74
        this.header = this.contain.getElementsByClassName(`${componentPrefix}-modal-header`)[0];
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
        this.header.style.cursor = 'all-scroll';
        this.header.onmousedown = () => {
          document.body.onselectstart = () => false;
          window.addEventListener('mousemove', this.move, false);
        };
        window.addEventListener('mouseup', this.removeUp, false);
      }, 0);
    }
  };

  componentDidMount() {
    this.create(this.props.visible);
  }

  componentWillReceiveProps({ visible }) {
    if (visible && visible !== this.props.visible) {
      this.create(visible);
      // eslint-disable-next-line no-unused-expressions
      this.contain && this.toTop();
    }
  }

  componentWillUnmount() {
    this.removeMove();
    window.removeEventListener('mouseup', this.removeUp, false);
  }

  render() {
    // eslint-disable-next-line no-unused-vars
    const {
      children,
      wrapClassName = '',
      limit = false,
      dragable = true,
      mask,
      autoIndex = false,
      style,
      ...other
    } = this.props;
    return (
      <Modal
        {...this.props}
        wrapClassName={`${wrapClassName} ${this.simpleClass} ${(autoIndex && 'autoIndex') || ''}`}
        mask={autoIndex ? false : mask}
      ></Modal>
    );
  }
}
export default DragModal;