easy-antd-modal/lib/drag-modal/BaseModal.js

二次开发, 简化 Ant Design Modal 的使用方式

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _core = require("@dnd-kit/core");
var _utilities = require("@dnd-kit/utilities");
var _usePrefixCls = _interopRequireDefault(require("../hooks/usePrefixCls"));
var _modal = _interopRequireDefault(require("../modal"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function BaseModal(props) {
  const {
    modalRender,
    title,
    offsetX,
    offsetY,
    className,
    ...resetProps
  } = props;
  const prefixCls = (0, _usePrefixCls.default)('drag-modal', props.prefixCls);
  const {
    attributes,
    isDragging,
    listeners,
    setNodeRef,
    transform
  } = (0, _core.useDraggable)({
    id: 'easy-antd-modal-draggable-modal'
  });
  const mergeModalRender = rawNode => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: setNodeRef,
    style: {
      position: 'relative',
      transform: isDragging ? _utilities.CSS.Transform.toString(transform) : undefined,
      top: offsetY,
      left: offsetX
    },
    className: `${prefixCls}-content__wrapper`,
    children: modalRender?.(rawNode) ?? rawNode
  });

  // Compliance with BEM norms
  const modalCls = [className, isDragging && `${prefixCls}_dragging`].filter(Boolean).join(' ');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
    ...resetProps,
    prefixCls: prefixCls,
    className: modalCls,
    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...listeners,
      ...attributes,
      style: {
        cursor: 'move'
      },
      className: `${prefixCls}-title__inner`,
      children: title
    }),
    modalRender: mergeModalRender
  });
}
var _default = exports.default = BaseModal;