/* eslint-disable */ import React, { useContext } from 'react'; import { Modal, ConfigProvider } from 'antd'; 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; const { title, dragable = true, autoIndex = true, style = {}, componentPrefix } = this.props; 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 this.contain = this.contain.getElementsByClassName(`${componentPrefix}-modal`)[0]; 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 this.header = this.contain.getElementsByClassName(`${componentPrefix}-modal-header`)[0]; 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;