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

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

import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import usePrefixCls from "../hooks/usePrefixCls";
import Modal from "../modal";
import { jsx as _jsx } from "react/jsx-runtime";
function BaseModal(props) {
  const {
    modalRender,
    title,
    offsetX,
    offsetY,
    className,
    ...resetProps
  } = props;
  const prefixCls = usePrefixCls('drag-modal', props.prefixCls);
  const {
    attributes,
    isDragging,
    listeners,
    setNodeRef,
    transform
  } = useDraggable({
    id: 'easy-antd-modal-draggable-modal'
  });
  const mergeModalRender = rawNode => /*#__PURE__*/_jsx("div", {
    ref: setNodeRef,
    style: {
      position: 'relative',
      transform: isDragging ? 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__*/_jsx(Modal, {
    ...resetProps,
    prefixCls: prefixCls,
    className: modalCls,
    title: /*#__PURE__*/_jsx("div", {
      ...listeners,
      ...attributes,
      style: {
        cursor: 'move'
      },
      className: `${prefixCls}-title__inner`,
      children: title
    }),
    modalRender: mergeModalRender
  });
}
export default BaseModal;