knk
Version:
react components based on react
73 lines • 2.48 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
// 可拖动模态框
import React, { useState } from 'react';
import Draggable from 'react-draggable';
import PropTypes from 'prop-types';
function calcZIndex() {
var index = 1000;
return function () {
if (index === 1050) {
return index;
}
return index++;
};
}
var getzIndex = calcZIndex();
var DragbleModal = function DragbleModal(props) {
var _useState = useState(getzIndex()),
_useState2 = _slicedToArray(_useState, 2),
zIndex = _useState2[0],
setZIndex = _useState2[1];
var handleChangeZindex = function handleChangeZindex() {
setZIndex(getzIndex());
};
var children = props.children,
onCancel = props.onCancel,
title = props.title;
return /*#__PURE__*/React.createElement(Draggable, {
handle: ".ant-modal-header"
}, /*#__PURE__*/React.createElement("span", {
style: {
position: 'fixed',
zIndex: zIndex,
top: 100
},
onClick: handleChangeZindex
}, /*#__PURE__*/React.createElement("div", {
className: "ant-modal-content",
style: {
width: '800px'
}
}, /*#__PURE__*/React.createElement("button", {
"aria-label": "Close",
className: "ant-modal-close",
onClick: onCancel
}, /*#__PURE__*/React.createElement("span", {
className: "ant-modal-close-x"
}, /*#__PURE__*/React.createElement("i", {
className: "anticon anticon-close ant-modal-close-icon"
}, /*#__PURE__*/React.createElement("svg", {
viewBox: "64 64 896 896",
className: "",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true"
}, /*#__PURE__*/React.createElement("path", {
d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
}))))), /*#__PURE__*/React.createElement("div", {
className: "ant-modal-header"
}, /*#__PURE__*/React.createElement("div", {
className: "ant-modal-title",
id: "rcDialogTitle0"
}, title)), /*#__PURE__*/React.createElement("div", {
className: "ant-modal-body"
}, children))));
};
DragbleModal.propTypes = {
onCancel: PropTypes.func,
title: PropTypes.string,
children: PropTypes.any
};
export default DragbleModal;