modal.confirm支持拖拽 about ant-design HOT 13 CLOSED

确实会有闭包问题，把 Draggable 封装到另一个组件里，不要在 confirm 的 function 里传入 onStart 这些 handler

from ant-design.

这样是可以的

import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Modal } from "antd";
import Draggable from "react-draggable";
import "antd/dist/reset.css";
import "./index.css";

const Comp = ({ modal }: any) => {
  const draggleRef = useRef(null);

  const [bounds, setBounds] = useState({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  });

  const onStart = (_event: any, uiData: any) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    console.log({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
    <Draggable
      bounds={bounds}
      nodeRef={draggleRef}
      onStart={(event, uiData) => onStart(event, uiData)}
    >
      <div ref={draggleRef}>{modal}</div>
    </Draggable>
  );
};

const useMergeModal = () => {
  const { confirm } = Modal;

  const showMergeModal = () => {
    const current = confirm({
      onOk: () => {
        current.destroy();
      },
      modalRender: (modal) => <Comp modal={modal} />,
    });
  };

  return {
    showMergeModal,
  };
};

const App = () => {
  const { showMergeModal } = useMergeModal();
  return (
    <div>
      <button onClick={showMergeModal}>api modal</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

from ant-design.

from ant-design.

Hello @lgz5689. Please provide a online reproduction by forking codesandbox of [email protected] or [email protected], or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @lgz5689，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [email protected] 或 [email protected] 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

什么是最小化重现，为什么这是必需的？

from ant-design.

https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-q44yy4?file=%2Findex.js

from ant-design.

应该是拖拽的逻辑有问题哈

from ant-design.

https://ant-design.antgroup.com/components/modal-cn#components-modal-demo-modal-render

我是参考官网的写法 拖拽相关的逻辑是一样 只是使用了api来进行打开Modal

from ant-design.

这样修改后，可以发现每次执行onStart，都只会打印上一次的uiData，这里是否产生了闭包陷阱？

from ant-design.

可以仔细看下 https://github.com/react-grid-layout/react-draggable 的文档，onStart 的触发时机就是这样的

from ant-design.

https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-q44yy4?file=%2Findex.js%3A12%2C41
我最终发现 打开modal之后 使用的一直是打开modal时的state 这个我该如何解决

from ant-design.

这个问题跟 modal 没关系，你应该去看看拖拽相关的文章

from ant-design.

这样是可以的

import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Modal } from "antd";
import Draggable from "react-draggable";
import "antd/dist/reset.css";
import "./index.css";

const Comp = ({ modal }: any) => {
  const draggleRef = useRef(null);

  const [bounds, setBounds] = useState({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  });

  const onStart = (_event: any, uiData: any) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    console.log({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
    <Draggable
      bounds={bounds}
      nodeRef={draggleRef}
      onStart={(event, uiData) => onStart(event, uiData)}
    >
      <div ref={draggleRef}>{modal}</div>
    </Draggable>
  );
};

const useMergeModal = () => {
  const { confirm } = Modal;

  const showMergeModal = () => {
    const current = confirm({
      onOk: () => {
        current.destroy();
      },
      modalRender: (modal) => <Comp modal={modal} />,
    });
  };

  return {
    showMergeModal,
  };
};

const App = () => {
  const { showMergeModal } = useMergeModal();
  return (
    <div>
      <button onClick={showMergeModal}>api modal</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

请问用这样的示例代码，如何做到 disable 的状态，想做成类似官方示例中点击标题拖拽，不点击标题按照浏览器正常事件处理

from ant-design.

i see...
Draggable 有个入参数是 handler ，会比antd官方的用起来好一点

like

 <Draggable handle='.handler' bounds={bounds} onStart={(event, uiData) => onStart(event, uiData)}>
        <div ref={draggleRef}>{content}</div>
</Draggable>

在content 的div中确保 classname 存在 handler

from ant-design.