@canvas-components/react-components 0.3.11 → 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 +86 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +86 -14
- 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 */
|
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 */
|
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,9 +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);
|
|
5416
5432
|
const [, setFullscreenRevision] = useState(0);
|
|
5417
5433
|
const panelRef = useRef(null);
|
|
5418
5434
|
const dragRef = useRef(null);
|
|
5435
|
+
const resizeRef = useRef(null);
|
|
5419
5436
|
const restoreFocusRef = useRef(null);
|
|
5420
5437
|
const wasRenderedRef = useRef(false);
|
|
5421
5438
|
const afterOpenChangeRef = useRef(afterOpenChange);
|
|
@@ -5463,10 +5480,49 @@ function ReactModal(props) {
|
|
|
5463
5480
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
5464
5481
|
};
|
|
5465
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]);
|
|
5466
5520
|
useEffect(() => {
|
|
5467
5521
|
if (!open) {
|
|
5468
5522
|
dragRef.current = null;
|
|
5523
|
+
resizeRef.current = null;
|
|
5469
5524
|
setDragOffset({ x: 0, y: 0 });
|
|
5525
|
+
setResizeSize(null);
|
|
5470
5526
|
}
|
|
5471
5527
|
}, [open]);
|
|
5472
5528
|
useEffect(() => {
|
|
@@ -5636,9 +5692,10 @@ function ReactModal(props) {
|
|
|
5636
5692
|
className
|
|
5637
5693
|
),
|
|
5638
5694
|
style: {
|
|
5639
|
-
width,
|
|
5695
|
+
width: !mergedFullscreen ? resizeSize?.width ?? width : width,
|
|
5696
|
+
...!mergedFullscreen && resizeSize ? { height: resizeSize.height } : void 0,
|
|
5640
5697
|
...style,
|
|
5641
|
-
...draggable && !mergedFullscreen ? {
|
|
5698
|
+
...(draggable || resizable) && !mergedFullscreen ? {
|
|
5642
5699
|
position: "relative",
|
|
5643
5700
|
left: dragOffset.x,
|
|
5644
5701
|
top: dragOffset.y
|
|
@@ -5691,16 +5748,7 @@ function ReactModal(props) {
|
|
|
5691
5748
|
"aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
5692
5749
|
"aria-pressed": mergedFullscreen,
|
|
5693
5750
|
onClick: () => setFullscreen(!mergedFullscreen),
|
|
5694
|
-
children: /* @__PURE__ */ jsx(
|
|
5695
|
-
"span",
|
|
5696
|
-
{
|
|
5697
|
-
className: joinClassNames(
|
|
5698
|
-
`${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
|
|
5699
|
-
mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
|
|
5700
|
-
),
|
|
5701
|
-
"aria-hidden": "true"
|
|
5702
|
-
}
|
|
5703
|
-
)
|
|
5751
|
+
children: /* @__PURE__ */ jsx(ModalFullscreenIcon, { exit: mergedFullscreen })
|
|
5704
5752
|
}
|
|
5705
5753
|
) : null,
|
|
5706
5754
|
closable ? /* @__PURE__ */ jsx(
|
|
@@ -5732,7 +5780,31 @@ function ReactModal(props) {
|
|
|
5732
5780
|
children
|
|
5733
5781
|
}
|
|
5734
5782
|
),
|
|
5735
|
-
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
|
|
5736
5808
|
]
|
|
5737
5809
|
}
|
|
5738
5810
|
) })
|