antd-drag-modal

A draggable modal based on antd modal.

Installation

$ npm i --save antd-drag-modal

Usage

import React from "react";
import { Button } from "antd";
import AntdDragModal from "antd-drag-modal";

class MyComponent extends React.Component<{}, { visible: boolean }> {
  state = {
    visible: false,
  };

  render() {
    const { visible } = this.state;
    return (
      <div style={{ width: "100vw", height: "100vh", textAlign: "center" }}>
        <Button
          onClick={() => {
            this.setState({ visible: true });
          }}
        >
          showModal
        </Button>
        <AntdDragModal
          title="title"
          visible={visible}
          centered
          width={500}
          maskClosable={true}
          onCancel={() => {
            this.setState({ visible: false });
          }}
          onOk={() => {
            this.setState({ visible: false });
          }}
        >
          <div>ModalContent</div>
        </AntdDragModal>
      </div>
    );
  }
}

export default MyComponent;

Props

Prop	Type	Need	Description
contentDraggable	boolean	no	Whether the content area of the modal can trigger dragging or not, the default is true.

Notes

1. The modal has tow default styles set via bodystyle:maxHeight: 'calc(100vh - 100px)、overflow: 'auto'.
2. To identify the modal, the className of the mod is set via wrapClassName, with the following rule: ${wrapClassName} ${Math.random().toString(36).substring(2)}
3. See Antd:https://ant.design/components/modal-cn/ for details of other props