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

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

import { DndContext } from '@dnd-kit/core';
import { restrictToWindowEdges } from '@dnd-kit/modifiers';
import * as React from 'react';
import BaseModal from "./BaseModal";
import { jsx as _jsx } from "react/jsx-runtime";
const defaultCoordinates = {
  x: 0,
  y: 0
};

/** @see [easy-antd-modal#DragModal](https://github.com/Wxh16144/easy-antd-modal/blob/master/src/drag-modal/index.tsx) */
function DragModal(props) {
  const [{
    x,
    y
  }, setCoordinates] = React.useState(defaultCoordinates);
  const handleOpenChange = open => {
    if (!open) {
      setCoordinates(defaultCoordinates);
    }
    props.afterOpenChange?.(open);
  };
  return /*#__PURE__*/_jsx(DndContext, {
    modifiers: [restrictToWindowEdges],
    onDragEnd: ({
      delta
    }) => setCoordinates(({
      x,
      y
    }) => ({
      x: x + delta.x,
      y: y + delta.y
    })),
    children: /*#__PURE__*/_jsx(BaseModal, {
      ...props,
      afterOpenChange: handleOpenChange,
      offsetX: x,
      offsetY: y
    })
  });
}
export default DragModal;