@apdesign/web-react 1.1.3 → 1.2.0

package/es/DatePicker/picker-range.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { RangePickerHandle } from './interface';
-declare const PickerComponent: React.ForwardRefExoticComponent<import("./interface").BaseRangePickerProps & import("../_util/type").Omit<import("./interface").PickerProps, "onChange" | "onSelect" | "onOk" | "defaultPickerValue" | "pickerValue" | "onPickerValueChange" | "inputProps"> & React.RefAttributes<RangePickerHandle>>;
+declare const PickerComponent: React.ForwardRefExoticComponent<import("./interface").BaseRangePickerProps & import("../_util/type").Omit<import("./interface").PickerProps, "onChange" | "onSelect" | "inputProps" | "onOk" | "defaultPickerValue" | "pickerValue" | "onPickerValueChange"> & React.RefAttributes<RangePickerHandle>>;
 export default PickerComponent;

package/es/Menu/context.d.ts

@@ -6,7 +6,7 @@ export declare type HotkeyInfo = {
     type: 'sibling' | 'generation' | 'enter';
 };
 export declare type ResetHotkeyInfo = (activeKey?: string) => void;
-declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "inDropdown" | "theme" | "mode" | "levelIndent" | "icons" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "triggerProps" | "tooltipProps"> & {
+declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "mode" | "triggerProps" | "inDropdown" | "theme" | "levelIndent" | "icons" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "tooltipProps"> & {
     id?: string;
     prefixCls?: string;
     onClickMenuItem?: (key: string, event: any) => void;

package/es/Modal/interface.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { DraggableCoreProps } from 'react-draggable';
 import { ButtonProps } from '../Button';
 import { ConfirmProps } from './confirm';
 /**
@@ -171,6 +172,17 @@ export interface ModalProps {
      */
     modalRender?: (modalNode: ReactNode) => ReactNode;
     prefixCls?: string;
+    /**
+     * @zh 是否可以拖动弹窗
+     * @en Whether the Modal can be dragged
+     * @defaultValue true
+     */
+    draggable?: boolean;
+    /**
+     * @zh 拖动弹窗额外参数
+     * @en The extra parameters of the Modal
+     */
+    draggableProps?: Partial<DraggableCoreProps>;
 }
 export declare type ModalReturnProps = {
     update: Function;

package/es/Modal/modal.js

@@ -37,6 +37,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import React, { useState, forwardRef, useContext, useRef, useEffect, useCallback, } from 'react';
+import Draggable from 'react-draggable';
 import FocusLock from 'react-focus-lock';
 import IconClose from '../../icon/react-icon/IconClose';
 import cs from '../_util/classNames';
@@ -77,13 +78,14 @@ var defaultProps = {
     escToExit: true,
     getPopupContainer: function () { return document.body; },
     alignCenter: true,
+    draggable: true,
 };
 function Modal(baseProps, ref) {
     var _a, _b;
     var _c;
     var context = useContext(ConfigContext);
     var props = useMergeProps(baseProps, defaultProps, (_c = context.componentConfig) === null || _c === void 0 ? void 0 : _c.Modal);
-    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon"]);
+    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, draggable = props.draggable, draggableProps = props.draggableProps, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon", "draggable", "draggableProps"]);
     var modalWrapperRef = useRef(null);
     var contentWrapper = useRef(null);
     var modalRef = useRef(null);
@@ -200,7 +202,7 @@ function Modal(baseProps, ref) {
                 ? getChildrenPopupContainer(node)
                 : contentWrapper.current;
         } }),
-        title && (React.createElement("div", { className: prefixCls + "-header" },
+        title && (React.createElement("div", { className: prefixCls + "-header", style: { cursor: draggable ? 'move' : null } },
             React.createElement("div", { className: prefixCls + "-title", id: "arco-dialog-" + dialogIndex.current }, title))),
         React.createElement("div", { ref: contentWrapper, className: prefixCls + "-content" }, children),
         renderFooter(),
@@ -211,10 +213,21 @@ function Modal(baseProps, ref) {
     var modalDom = (React.createElement("div", __assign({ role: "dialog", "aria-modal": "true" }, ariaProps, { className: cs(prefixCls, (_a = {},
             _a[prefixCls + "-simple"] = simple,
             _a[prefixCls + "-rtl"] = rtl,
-            _a), className), style: style, ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: __assign({ display: draggable ? 'block' : null }, style), ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (React.createElement(React.Fragment, null, element))));
+    var modalWithMouseEventsDom = React.cloneElement(modalDom, {
+        onMouseDown: function () {
+            maskClickRef.current = false;
+        },
+        onMouseUp: function () {
+            maskClickRef.current = false;
+        },
+    });
+    // 包装在Draggable中的modal
+    var wrappedModalDom = draggable && title ? (React.createElement(Draggable, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps),
+        React.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block' } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;
@@ -252,6 +265,8 @@ function Modal(baseProps, ref) {
                 'onConfirm',
                 'closable',
                 'prefixCls',
+                'draggable',
+                'draggableProps',
             ]), { tabIndex: !innerFocusLock || !innerAutoFocus ? -1 : null, ref: function (node) {
                     modalWrapperRef.current = node;
                     initPopupZIndex();
@@ -292,14 +307,7 @@ function Modal(baseProps, ref) {
                         if (unmountOnExit) {
                             modalRef.current = null;
                         }
-                    } }, React.cloneElement((isFunction(modalRender) ? modalRender(modalDom) : modalDom), {
-                    onMouseDown: function () {
-                        maskClickRef.current = false;
-                    },
-                    onMouseUp: function () {
-                        maskClickRef.current = false;
-                    },
-                })))))) : null;
+                    } }, isFunction(modalRender) ? modalRender(wrappedModalDom) : wrappedModalDom))))) : null;
 }
 var ExportedModalComponent = forwardRef(Modal);
 ExportedModalComponent.displayName = 'Modal';

package/es/index.d.ts

@@ -139,4 +139,4 @@ export type { WatermarkProps } from './Watermark/interface';
 export { default as Watermark } from './Watermark';
 export type { ImageProps, ImagePreviewProps, ImagePreviewActionProps, ImagePreviewGroupProps } from './Image/interface';
 export { default as Image } from './Image';
-export declare const version = "1.1.3";
+export declare const version = "1.2.0";

package/es/index.js

@@ -69,4 +69,4 @@ export { default as Upload } from './Upload';
 export { default as Mentions } from './Mentions';
 export { default as Watermark } from './Watermark';
 export { default as Image } from './Image';
-export var version = '1.1.3';
+export var version = '1.2.0';

package/lib/Modal/interface.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { DraggableCoreProps } from 'react-draggable';
 import { ButtonProps } from '../Button';
 import { ConfirmProps } from './confirm';
 /**
@@ -171,6 +172,17 @@ export interface ModalProps {
      */
     modalRender?: (modalNode: ReactNode) => ReactNode;
     prefixCls?: string;
+    /**
+     * @zh 是否可以拖动弹窗
+     * @en Whether the Modal can be dragged
+     * @defaultValue true
+     */
+    draggable?: boolean;
+    /**
+     * @zh 拖动弹窗额外参数
+     * @en The extra parameters of the Modal
+     */
+    draggableProps?: Partial<DraggableCoreProps>;
 }
 export declare type ModalReturnProps = {
     update: Function;

package/lib/Modal/modal.js

@@ -61,6 +61,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var react_draggable_1 = __importDefault(require("react-draggable"));
 var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 var IconClose_1 = __importDefault(require("../../icon/react-icon-cjs/IconClose"));
 var classNames_1 = __importDefault(require("../_util/classNames"));
@@ -101,13 +102,14 @@ var defaultProps = {
     escToExit: true,
     getPopupContainer: function () { return document.body; },
     alignCenter: true,
+    draggable: true,
 };
 function Modal(baseProps, ref) {
     var _a, _b;
     var _c;
     var context = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     var props = (0, useMergeProps_1.default)(baseProps, defaultProps, (_c = context.componentConfig) === null || _c === void 0 ? void 0 : _c.Modal);
-    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon"]);
+    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, draggable = props.draggable, draggableProps = props.draggableProps, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon", "draggable", "draggableProps"]);
     var modalWrapperRef = (0, react_1.useRef)(null);
     var contentWrapper = (0, react_1.useRef)(null);
     var modalRef = (0, react_1.useRef)(null);
@@ -224,7 +226,7 @@ function Modal(baseProps, ref) {
                 ? getChildrenPopupContainer(node)
                 : contentWrapper.current;
         } }),
-        title && (react_1.default.createElement("div", { className: prefixCls + "-header" },
+        title && (react_1.default.createElement("div", { className: prefixCls + "-header", style: { cursor: draggable ? 'move' : null } },
             react_1.default.createElement("div", { className: prefixCls + "-title", id: "arco-dialog-" + dialogIndex.current }, title))),
         react_1.default.createElement("div", { ref: contentWrapper, className: prefixCls + "-content" }, children),
         renderFooter(),
@@ -235,10 +237,21 @@ function Modal(baseProps, ref) {
     var modalDom = (react_1.default.createElement("div", __assign({ role: "dialog", "aria-modal": "true" }, ariaProps, { className: (0, classNames_1.default)(prefixCls, (_a = {},
             _a[prefixCls + "-simple"] = simple,
             _a[prefixCls + "-rtl"] = rtl,
-            _a), className), style: style, ref: modalRef }), innerFocusLock ? (react_1.default.createElement(react_focus_lock_1.default, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: __assign({ display: draggable ? 'block' : null }, style), ref: modalRef }), innerFocusLock ? (react_1.default.createElement(react_focus_lock_1.default, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (react_1.default.createElement(react_1.default.Fragment, null, element))));
+    var modalWithMouseEventsDom = react_1.default.cloneElement(modalDom, {
+        onMouseDown: function () {
+            maskClickRef.current = false;
+        },
+        onMouseUp: function () {
+            maskClickRef.current = false;
+        },
+    });
+    // 包装在Draggable中的modal
+    var wrappedModalDom = draggable && title ? (react_1.default.createElement(react_draggable_1.default, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps),
+        react_1.default.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block' } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;
@@ -276,6 +289,8 @@ function Modal(baseProps, ref) {
                 'onConfirm',
                 'closable',
                 'prefixCls',
+                'draggable',
+                'draggableProps',
             ]), { tabIndex: !innerFocusLock || !innerAutoFocus ? -1 : null, ref: function (node) {
                     modalWrapperRef.current = node;
                     initPopupZIndex();
@@ -316,14 +331,7 @@ function Modal(baseProps, ref) {
                         if (unmountOnExit) {
                             modalRef.current = null;
                         }
-                    } }, react_1.default.cloneElement(((0, is_1.isFunction)(modalRender) ? modalRender(modalDom) : modalDom), {
-                    onMouseDown: function () {
-                        maskClickRef.current = false;
-                    },
-                    onMouseUp: function () {
-                        maskClickRef.current = false;
-                    },
-                })))))) : null;
+                    } }, (0, is_1.isFunction)(modalRender) ? modalRender(wrappedModalDom) : wrappedModalDom))))) : null;
 }
 var ExportedModalComponent = (0, react_1.forwardRef)(Modal);
 ExportedModalComponent.displayName = 'Modal';

package/lib/index.d.ts

@@ -139,4 +139,4 @@ export type { WatermarkProps } from './Watermark/interface';
 export { default as Watermark } from './Watermark';
 export type { ImageProps, ImagePreviewProps, ImagePreviewActionProps, ImagePreviewGroupProps } from './Image/interface';
 export { default as Image } from './Image';
-export declare const version = "1.1.3";
+export declare const version = "1.2.0";

package/lib/index.js

@@ -147,4 +147,4 @@ var Watermark_1 = require("./Watermark");
 Object.defineProperty(exports, "Watermark", { enumerable: true, get: function () { return __importDefault(Watermark_1).default; } });
 var Image_1 = require("./Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
-exports.version = '1.1.3';
+exports.version = '1.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apdesign/web-react",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "AP Design React UI Library.",
   "module": "./es/index.js",
   "main": "./lib/index.js",
@@ -126,6 +126,7 @@
     "dayjs": "^1.10.5",
     "lodash": "^4.17.21",
     "number-precision": "^1.3.1",
+    "react-draggable": "^4.4.6",
     "react-focus-lock": "^2.12.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.3.0",