@canvas-components/react-components 0.3.10 → 0.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +100 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +100 -15
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -390,6 +390,8 @@ interface ReactModalProps {
|
|
|
390
390
|
fullscreenable?: boolean;
|
|
391
391
|
/** 是否允许拖拽标题栏移动 Modal。@default false */
|
|
392
392
|
draggable?: boolean;
|
|
393
|
+
/** 是否允许拖拽边缘调整 Modal 尺寸。@default false */
|
|
394
|
+
resizable?: boolean;
|
|
393
395
|
/** 当前是否全屏，传入后进入受控模式。 */
|
|
394
396
|
fullscreen?: boolean;
|
|
395
397
|
/** 默认是否全屏。@default false */
|
|
@@ -430,7 +432,7 @@ interface ReactModalProps {
|
|
|
430
432
|
bodyStyle?: CSSProperties;
|
|
431
433
|
/** 遮罩样式。 */
|
|
432
434
|
maskStyle?: CSSProperties;
|
|
433
|
-
/** 指定 Modal
|
|
435
|
+
/** 指定 Modal 挂载容器；默认使用当前浏览器全屏节点，否则使用 document.body。 */
|
|
434
436
|
getContainer?: HTMLElement | (() => HTMLElement);
|
|
435
437
|
}
|
|
436
438
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -390,6 +390,8 @@ interface ReactModalProps {
|
|
|
390
390
|
fullscreenable?: boolean;
|
|
391
391
|
/** 是否允许拖拽标题栏移动 Modal。@default false */
|
|
392
392
|
draggable?: boolean;
|
|
393
|
+
/** 是否允许拖拽边缘调整 Modal 尺寸。@default false */
|
|
394
|
+
resizable?: boolean;
|
|
393
395
|
/** 当前是否全屏，传入后进入受控模式。 */
|
|
394
396
|
fullscreen?: boolean;
|
|
395
397
|
/** 默认是否全屏。@default false */
|
|
@@ -430,7 +432,7 @@ interface ReactModalProps {
|
|
|
430
432
|
bodyStyle?: CSSProperties;
|
|
431
433
|
/** 遮罩样式。 */
|
|
432
434
|
maskStyle?: CSSProperties;
|
|
433
|
-
/** 指定 Modal
|
|
435
|
+
/** 指定 Modal 挂载容器；默认使用当前浏览器全屏节点，否则使用 document.body。 */
|
|
434
436
|
getContainer?: HTMLElement | (() => HTMLElement);
|
|
435
437
|
}
|
|
436
438
|
/**
|
package/dist/index.js
CHANGED
|
@@ -5356,9 +5356,23 @@ function useCompatibleId(prefix = "canvas-react-id") {
|
|
|
5356
5356
|
}
|
|
5357
5357
|
return nativeUseId ? nativeUseId() : fallbackIdRef.current;
|
|
5358
5358
|
}
|
|
5359
|
+
function ModalFullscreenIcon({ exit }) {
|
|
5360
|
+
return /* @__PURE__ */ jsx(
|
|
5361
|
+
"svg",
|
|
5362
|
+
{
|
|
5363
|
+
"aria-hidden": "true",
|
|
5364
|
+
viewBox: "64 64 896 896",
|
|
5365
|
+
width: "18",
|
|
5366
|
+
height: "18",
|
|
5367
|
+
fill: "currentColor",
|
|
5368
|
+
focusable: "false",
|
|
5369
|
+
children: exit ? /* @__PURE__ */ jsx("path", { d: "M391 240.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L280 333.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L401 410c5.1.6 9.5-3.7 8.9-8.9L391 240.9zm10.1 373.2L240.8 633c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824a8.03 8.03 0 000 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7A8.01 8.01 0 00391 783l18.9-160.1c.6-5.1-3.7-9.4-8.8-8.8zm221.8-204.2L783.2 391c6.6-.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3a8.03 8.03 0 00-11.3 0L690.3 279.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L614.1 401c-.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L623 614c-5.1-.6-9.5 3.7-8.9 8.9L633 783.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z" }) : /* @__PURE__ */ jsx("path", { d: "M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" })
|
|
5370
|
+
}
|
|
5371
|
+
);
|
|
5372
|
+
}
|
|
5359
5373
|
|
|
5360
5374
|
// src/components/modal/style.css
|
|
5361
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-modal-root,\n.canvas-react-modal-root * {\n box-sizing: border-box;\n}\n.canvas-react-modal-root {\n position: fixed;\n inset: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-modal-root-passthrough {\n pointer-events: none;\n}\n.canvas-react-modal-root-passthrough .canvas-react-modal {\n pointer-events: auto;\n}\n.canvas-react-modal-mask {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n}\n.canvas-react-modal-wrap {\n position: absolute;\n inset: 0;\n overflow: auto;\n padding: 100px 24px 24px;\n pointer-events: none;\n}\n.canvas-react-modal-root-centered .canvas-react-modal-wrap {\n display: flex;\n align-items: center;\n padding-top: 24px;\n}\n.canvas-react-modal-root-fullscreen .canvas-react-modal-wrap {\n padding: 0;\n overflow: hidden;\n}\n.canvas-react-modal {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 520px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 124px);\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);\n outline: none;\n pointer-events: auto;\n}\n.canvas-react-modal-root-centered .canvas-react-modal {\n max-height: calc(100vh - 48px);\n}\n.canvas-react-modal.canvas-react-modal-fullscreen {\n width: 100% !important;\n max-width: none;\n height: 100%;\n max-height: none;\n border-radius: 0;\n}\n.canvas-react-modal-header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n min-height: 56px;\n padding: 0 16px 0 24px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-header-draggable {\n cursor: move;\n user-select: none;\n}\n.canvas-react-modal-title {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n overflow-wrap: anywhere;\n}\n.canvas-react-modal-tools {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 4px;\n margin-left: 16px;\n}\n.canvas-react-modal-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-modal-tool:hover {\n background: var(--canvas-react-color-bg-hover);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-modal-tool:focus-visible,\n.canvas-react-modal-button:focus-visible {\n outline: 2px solid var(--canvas-react-color-primary);\n outline-offset: 2px;\n}\n.canvas-react-modal-
|
|
5375
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-modal-root,\n.canvas-react-modal-root * {\n box-sizing: border-box;\n}\n.canvas-react-modal-root {\n position: fixed;\n inset: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-modal-root-passthrough {\n pointer-events: none;\n}\n.canvas-react-modal-root-passthrough .canvas-react-modal {\n pointer-events: auto;\n}\n.canvas-react-modal-mask {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n}\n.canvas-react-modal-wrap {\n position: absolute;\n inset: 0;\n overflow: auto;\n padding: 100px 24px 24px;\n pointer-events: none;\n}\n.canvas-react-modal-root-centered .canvas-react-modal-wrap {\n display: flex;\n align-items: center;\n padding-top: 24px;\n}\n.canvas-react-modal-root-fullscreen .canvas-react-modal-wrap {\n padding: 0;\n overflow: hidden;\n}\n.canvas-react-modal {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 520px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 124px);\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);\n outline: none;\n pointer-events: auto;\n}\n.canvas-react-modal-root-centered .canvas-react-modal {\n max-height: calc(100vh - 48px);\n}\n.canvas-react-modal.canvas-react-modal-fullscreen {\n width: 100% !important;\n max-width: none;\n height: 100%;\n max-height: none;\n border-radius: 0;\n}\n.canvas-react-modal-resize-handle {\n position: absolute;\n z-index: 2;\n touch-action: none;\n}\n.canvas-react-modal-resize-n,\n.canvas-react-modal-resize-s {\n right: 12px;\n left: 12px;\n height: 6px;\n cursor: ns-resize;\n}\n.canvas-react-modal-resize-n {\n top: 0;\n}\n.canvas-react-modal-resize-s {\n bottom: 0;\n}\n.canvas-react-modal-resize-e,\n.canvas-react-modal-resize-w {\n top: 12px;\n bottom: 12px;\n width: 6px;\n cursor: ew-resize;\n}\n.canvas-react-modal-resize-e {\n right: 0;\n}\n.canvas-react-modal-resize-w {\n left: 0;\n}\n.canvas-react-modal-resize-ne,\n.canvas-react-modal-resize-nw,\n.canvas-react-modal-resize-se,\n.canvas-react-modal-resize-sw {\n width: 12px;\n height: 12px;\n}\n.canvas-react-modal-resize-ne {\n top: 0;\n right: 0;\n cursor: nesw-resize;\n}\n.canvas-react-modal-resize-nw {\n top: 0;\n left: 0;\n cursor: nwse-resize;\n}\n.canvas-react-modal-resize-se {\n bottom: 0;\n right: 0;\n cursor: nwse-resize;\n}\n.canvas-react-modal-resize-sw {\n bottom: 0;\n left: 0;\n cursor: nesw-resize;\n}\n.canvas-react-modal-header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n min-height: 56px;\n padding: 0 16px 0 24px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-header-draggable {\n cursor: move;\n user-select: none;\n}\n.canvas-react-modal-title {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n overflow-wrap: anywhere;\n}\n.canvas-react-modal-tools {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 4px;\n margin-left: 16px;\n}\n.canvas-react-modal-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-modal-tool:hover {\n background: var(--canvas-react-color-bg-hover);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-modal-tool:focus-visible,\n.canvas-react-modal-button:focus-visible {\n outline: 2px solid var(--canvas-react-color-primary);\n outline-offset: 2px;\n}\n.canvas-react-modal-close-icon {\n position: relative;\n display: block;\n width: 16px;\n height: 16px;\n}\n.canvas-react-modal-close-icon::before,\n.canvas-react-modal-close-icon::after {\n position: absolute;\n top: 7px;\n left: 1px;\n width: 14px;\n height: 1.5px;\n border-radius: 1px;\n background: currentColor;\n content: "";\n}\n.canvas-react-modal-close-icon::before {\n transform: rotate(45deg);\n}\n.canvas-react-modal-close-icon::after {\n transform: rotate(-45deg);\n}\n.canvas-react-modal-body {\n min-height: 0;\n flex: 1 1 auto;\n overflow: auto;\n padding: 20px 24px;\n}\n.canvas-react-modal-footer {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 24px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: var(--canvas-react-control-height, 32px);\n min-width: 64px;\n padding: 0 var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-modal-button:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-modal-button-primary {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-modal-button-primary:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n color: #ffffff;\n}\n.canvas-react-modal-button:disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-modal-loading {\n width: 14px;\n height: 14px;\n border: 2px solid rgba(255, 255, 255, 0.45);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: canvas-react-modal-loading 0.8s linear infinite;\n}\n.canvas-react-modal-motion-enter-active,\n.canvas-react-modal-motion-leave-active {\n transition: opacity 0.2s ease;\n}\n.canvas-react-modal-motion-enter-active .canvas-react-modal,\n.canvas-react-modal-motion-leave-active .canvas-react-modal {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-modal-motion-enter-from,\n.canvas-react-modal-motion-leave-to {\n opacity: 0;\n}\n.canvas-react-modal-motion-enter-from .canvas-react-modal,\n.canvas-react-modal-motion-leave-to .canvas-react-modal {\n opacity: 0;\n transform: scale(0.96) translateY(-8px);\n}\n@keyframes canvas-react-modal-loading {\n to {\n transform: rotate(360deg);\n }\n}\n@media (max-width: 575px) {\n .canvas-react-modal-wrap {\n padding: 24px 12px;\n }\n .canvas-react-modal {\n max-width: calc(100vw - 24px);\n max-height: calc(100vh - 48px);\n }\n .canvas-react-modal-header {\n padding-right: 12px;\n padding-left: 16px;\n }\n .canvas-react-modal-body {\n padding: 16px;\n }\n .canvas-react-modal-footer {\n padding: 12px 16px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-modal-motion-enter-active,\n .canvas-react-modal-motion-leave-active,\n .canvas-react-modal-motion-enter-active .canvas-react-modal,\n .canvas-react-modal-motion-leave-active .canvas-react-modal {\n transition-duration: 0.01ms;\n }\n}\n');
|
|
5362
5376
|
var MODAL_MOTION_DURATION = 200;
|
|
5363
5377
|
var FOCUSABLE_SELECTOR = [
|
|
5364
5378
|
"a[href]",
|
|
@@ -5400,6 +5414,7 @@ function ReactModal(props) {
|
|
|
5400
5414
|
onOk,
|
|
5401
5415
|
open,
|
|
5402
5416
|
rootClassName,
|
|
5417
|
+
resizable = false,
|
|
5403
5418
|
style,
|
|
5404
5419
|
title,
|
|
5405
5420
|
width = 520,
|
|
@@ -5413,8 +5428,11 @@ function ReactModal(props) {
|
|
|
5413
5428
|
const [innerFullscreen, setInnerFullscreen] = useState(defaultFullscreen);
|
|
5414
5429
|
const [innerConfirmLoading, setInnerConfirmLoading] = useState(false);
|
|
5415
5430
|
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
|
5431
|
+
const [resizeSize, setResizeSize] = useState(null);
|
|
5432
|
+
const [, setFullscreenRevision] = useState(0);
|
|
5416
5433
|
const panelRef = useRef(null);
|
|
5417
5434
|
const dragRef = useRef(null);
|
|
5435
|
+
const resizeRef = useRef(null);
|
|
5418
5436
|
const restoreFocusRef = useRef(null);
|
|
5419
5437
|
const wasRenderedRef = useRef(false);
|
|
5420
5438
|
const afterOpenChangeRef = useRef(afterOpenChange);
|
|
@@ -5425,6 +5443,16 @@ function ReactModal(props) {
|
|
|
5425
5443
|
const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
|
|
5426
5444
|
const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
|
|
5427
5445
|
const hasTitle = title !== null && title !== void 0 && title !== false;
|
|
5446
|
+
useEffect(() => {
|
|
5447
|
+
if (!transition.rendered || typeof document === "undefined") return;
|
|
5448
|
+
const handleFullscreenChange = () => {
|
|
5449
|
+
setFullscreenRevision((revision) => revision + 1);
|
|
5450
|
+
};
|
|
5451
|
+
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
|
5452
|
+
return () => {
|
|
5453
|
+
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
|
5454
|
+
};
|
|
5455
|
+
}, [transition.rendered]);
|
|
5428
5456
|
useEffect(() => {
|
|
5429
5457
|
if (previousOpenRef.current === open) {
|
|
5430
5458
|
return;
|
|
@@ -5452,10 +5480,49 @@ function ReactModal(props) {
|
|
|
5452
5480
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
5453
5481
|
};
|
|
5454
5482
|
}, [draggable, transition.rendered]);
|
|
5483
|
+
useEffect(() => {
|
|
5484
|
+
if (!resizable || !transition.rendered) return;
|
|
5485
|
+
const handleMouseMove = (event) => {
|
|
5486
|
+
const resize = resizeRef.current;
|
|
5487
|
+
if (!resize) return;
|
|
5488
|
+
const deltaX = event.clientX - resize.startX;
|
|
5489
|
+
const deltaY = event.clientY - resize.startY;
|
|
5490
|
+
const west = resize.direction.includes("w");
|
|
5491
|
+
const east = resize.direction.includes("e");
|
|
5492
|
+
const north = resize.direction.includes("n");
|
|
5493
|
+
const south = resize.direction.includes("s");
|
|
5494
|
+
const nextWidth = Math.min(
|
|
5495
|
+
Math.max(resize.width + (west ? -deltaX : east ? deltaX : 0), 360),
|
|
5496
|
+
Math.max(window.innerWidth - 48, 360)
|
|
5497
|
+
);
|
|
5498
|
+
const nextHeight = Math.min(
|
|
5499
|
+
Math.max(resize.height + (north ? -deltaY : south ? deltaY : 0), 260),
|
|
5500
|
+
Math.max(window.innerHeight - 48, 260)
|
|
5501
|
+
);
|
|
5502
|
+
const widthDelta = nextWidth - resize.width;
|
|
5503
|
+
const heightDelta = nextHeight - resize.height;
|
|
5504
|
+
setResizeSize({ width: nextWidth, height: nextHeight });
|
|
5505
|
+
setDragOffset({
|
|
5506
|
+
x: resize.offsetX + (west ? -widthDelta / 2 : east ? widthDelta / 2 : 0),
|
|
5507
|
+
y: resize.offsetY + (centered ? north ? -heightDelta / 2 : south ? heightDelta / 2 : 0 : north ? -heightDelta : 0)
|
|
5508
|
+
});
|
|
5509
|
+
};
|
|
5510
|
+
const handleMouseUp = () => {
|
|
5511
|
+
resizeRef.current = null;
|
|
5512
|
+
};
|
|
5513
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
5514
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
5515
|
+
return () => {
|
|
5516
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
5517
|
+
window.removeEventListener("mouseup", handleMouseUp);
|
|
5518
|
+
};
|
|
5519
|
+
}, [centered, resizable, transition.rendered]);
|
|
5455
5520
|
useEffect(() => {
|
|
5456
5521
|
if (!open) {
|
|
5457
5522
|
dragRef.current = null;
|
|
5523
|
+
resizeRef.current = null;
|
|
5458
5524
|
setDragOffset({ x: 0, y: 0 });
|
|
5525
|
+
setResizeSize(null);
|
|
5459
5526
|
}
|
|
5460
5527
|
}, [open]);
|
|
5461
5528
|
useEffect(() => {
|
|
@@ -5625,9 +5692,10 @@ function ReactModal(props) {
|
|
|
5625
5692
|
className
|
|
5626
5693
|
),
|
|
5627
5694
|
style: {
|
|
5628
|
-
width,
|
|
5695
|
+
width: !mergedFullscreen ? resizeSize?.width ?? width : width,
|
|
5696
|
+
...!mergedFullscreen && resizeSize ? { height: resizeSize.height } : void 0,
|
|
5629
5697
|
...style,
|
|
5630
|
-
...draggable && !mergedFullscreen ? {
|
|
5698
|
+
...(draggable || resizable) && !mergedFullscreen ? {
|
|
5631
5699
|
position: "relative",
|
|
5632
5700
|
left: dragOffset.x,
|
|
5633
5701
|
top: dragOffset.y
|
|
@@ -5680,16 +5748,7 @@ function ReactModal(props) {
|
|
|
5680
5748
|
"aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
5681
5749
|
"aria-pressed": mergedFullscreen,
|
|
5682
5750
|
onClick: () => setFullscreen(!mergedFullscreen),
|
|
5683
|
-
children: /* @__PURE__ */ jsx(
|
|
5684
|
-
"span",
|
|
5685
|
-
{
|
|
5686
|
-
className: joinClassNames(
|
|
5687
|
-
`${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
|
|
5688
|
-
mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
|
|
5689
|
-
),
|
|
5690
|
-
"aria-hidden": "true"
|
|
5691
|
-
}
|
|
5692
|
-
)
|
|
5751
|
+
children: /* @__PURE__ */ jsx(ModalFullscreenIcon, { exit: mergedFullscreen })
|
|
5693
5752
|
}
|
|
5694
5753
|
) : null,
|
|
5695
5754
|
closable ? /* @__PURE__ */ jsx(
|
|
@@ -5721,7 +5780,31 @@ function ReactModal(props) {
|
|
|
5721
5780
|
children
|
|
5722
5781
|
}
|
|
5723
5782
|
),
|
|
5724
|
-
footer === false ? null : /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter })
|
|
5783
|
+
footer === false ? null : /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter }),
|
|
5784
|
+
resizable && !mergedFullscreen ? ["n", "s", "e", "w", "ne", "nw", "se", "sw"].map((direction) => /* @__PURE__ */ jsx(
|
|
5785
|
+
"div",
|
|
5786
|
+
{
|
|
5787
|
+
className: `${REACT_COMPONENT_PREFIX}-modal-resize-handle ${REACT_COMPONENT_PREFIX}-modal-resize-${direction}`,
|
|
5788
|
+
"aria-hidden": "true",
|
|
5789
|
+
onMouseDown: (event) => {
|
|
5790
|
+
if (event.button !== 0 || !panelRef.current) return;
|
|
5791
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
5792
|
+
dragRef.current = null;
|
|
5793
|
+
resizeRef.current = {
|
|
5794
|
+
direction,
|
|
5795
|
+
startX: event.clientX,
|
|
5796
|
+
startY: event.clientY,
|
|
5797
|
+
width: rect.width,
|
|
5798
|
+
height: rect.height,
|
|
5799
|
+
offsetX: dragOffset.x,
|
|
5800
|
+
offsetY: dragOffset.y
|
|
5801
|
+
};
|
|
5802
|
+
event.preventDefault();
|
|
5803
|
+
event.stopPropagation();
|
|
5804
|
+
}
|
|
5805
|
+
},
|
|
5806
|
+
direction
|
|
5807
|
+
)) : null
|
|
5725
5808
|
]
|
|
5726
5809
|
}
|
|
5727
5810
|
) })
|
|
@@ -5735,7 +5818,9 @@ function resolveContainer(getContainer) {
|
|
|
5735
5818
|
if (typeof document === "undefined") {
|
|
5736
5819
|
return null;
|
|
5737
5820
|
}
|
|
5738
|
-
|
|
5821
|
+
if (typeof getContainer === "function") return getContainer();
|
|
5822
|
+
if (getContainer) return getContainer;
|
|
5823
|
+
return document.fullscreenElement instanceof HTMLElement ? document.fullscreenElement : document.body;
|
|
5739
5824
|
}
|
|
5740
5825
|
function trapFocus(event, panel) {
|
|
5741
5826
|
if (!panel) {
|