@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.cjs
CHANGED
|
@@ -5377,9 +5377,23 @@ function useCompatibleId(prefix = "canvas-react-id") {
|
|
|
5377
5377
|
}
|
|
5378
5378
|
return nativeUseId ? nativeUseId() : fallbackIdRef.current;
|
|
5379
5379
|
}
|
|
5380
|
+
function ModalFullscreenIcon({ exit }) {
|
|
5381
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5382
|
+
"svg",
|
|
5383
|
+
{
|
|
5384
|
+
"aria-hidden": "true",
|
|
5385
|
+
viewBox: "64 64 896 896",
|
|
5386
|
+
width: "18",
|
|
5387
|
+
height: "18",
|
|
5388
|
+
fill: "currentColor",
|
|
5389
|
+
focusable: "false",
|
|
5390
|
+
children: exit ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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" })
|
|
5391
|
+
}
|
|
5392
|
+
);
|
|
5393
|
+
}
|
|
5380
5394
|
|
|
5381
5395
|
// src/components/modal/style.css
|
|
5382
|
-
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-
|
|
5396
|
+
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');
|
|
5383
5397
|
var MODAL_MOTION_DURATION = 200;
|
|
5384
5398
|
var FOCUSABLE_SELECTOR = [
|
|
5385
5399
|
"a[href]",
|
|
@@ -5421,6 +5435,7 @@ function ReactModal(props) {
|
|
|
5421
5435
|
onOk,
|
|
5422
5436
|
open,
|
|
5423
5437
|
rootClassName,
|
|
5438
|
+
resizable = false,
|
|
5424
5439
|
style,
|
|
5425
5440
|
title,
|
|
5426
5441
|
width = 520,
|
|
@@ -5434,9 +5449,11 @@ function ReactModal(props) {
|
|
|
5434
5449
|
const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
|
|
5435
5450
|
const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
|
|
5436
5451
|
const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
|
|
5452
|
+
const [resizeSize, setResizeSize] = React.useState(null);
|
|
5437
5453
|
const [, setFullscreenRevision] = React.useState(0);
|
|
5438
5454
|
const panelRef = React.useRef(null);
|
|
5439
5455
|
const dragRef = React.useRef(null);
|
|
5456
|
+
const resizeRef = React.useRef(null);
|
|
5440
5457
|
const restoreFocusRef = React.useRef(null);
|
|
5441
5458
|
const wasRenderedRef = React.useRef(false);
|
|
5442
5459
|
const afterOpenChangeRef = React.useRef(afterOpenChange);
|
|
@@ -5484,10 +5501,49 @@ function ReactModal(props) {
|
|
|
5484
5501
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
5485
5502
|
};
|
|
5486
5503
|
}, [draggable, transition.rendered]);
|
|
5504
|
+
React.useEffect(() => {
|
|
5505
|
+
if (!resizable || !transition.rendered) return;
|
|
5506
|
+
const handleMouseMove = (event) => {
|
|
5507
|
+
const resize = resizeRef.current;
|
|
5508
|
+
if (!resize) return;
|
|
5509
|
+
const deltaX = event.clientX - resize.startX;
|
|
5510
|
+
const deltaY = event.clientY - resize.startY;
|
|
5511
|
+
const west = resize.direction.includes("w");
|
|
5512
|
+
const east = resize.direction.includes("e");
|
|
5513
|
+
const north = resize.direction.includes("n");
|
|
5514
|
+
const south = resize.direction.includes("s");
|
|
5515
|
+
const nextWidth = Math.min(
|
|
5516
|
+
Math.max(resize.width + (west ? -deltaX : east ? deltaX : 0), 360),
|
|
5517
|
+
Math.max(window.innerWidth - 48, 360)
|
|
5518
|
+
);
|
|
5519
|
+
const nextHeight = Math.min(
|
|
5520
|
+
Math.max(resize.height + (north ? -deltaY : south ? deltaY : 0), 260),
|
|
5521
|
+
Math.max(window.innerHeight - 48, 260)
|
|
5522
|
+
);
|
|
5523
|
+
const widthDelta = nextWidth - resize.width;
|
|
5524
|
+
const heightDelta = nextHeight - resize.height;
|
|
5525
|
+
setResizeSize({ width: nextWidth, height: nextHeight });
|
|
5526
|
+
setDragOffset({
|
|
5527
|
+
x: resize.offsetX + (west ? -widthDelta / 2 : east ? widthDelta / 2 : 0),
|
|
5528
|
+
y: resize.offsetY + (centered ? north ? -heightDelta / 2 : south ? heightDelta / 2 : 0 : north ? -heightDelta : 0)
|
|
5529
|
+
});
|
|
5530
|
+
};
|
|
5531
|
+
const handleMouseUp = () => {
|
|
5532
|
+
resizeRef.current = null;
|
|
5533
|
+
};
|
|
5534
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
5535
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
5536
|
+
return () => {
|
|
5537
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
5538
|
+
window.removeEventListener("mouseup", handleMouseUp);
|
|
5539
|
+
};
|
|
5540
|
+
}, [centered, resizable, transition.rendered]);
|
|
5487
5541
|
React.useEffect(() => {
|
|
5488
5542
|
if (!open) {
|
|
5489
5543
|
dragRef.current = null;
|
|
5544
|
+
resizeRef.current = null;
|
|
5490
5545
|
setDragOffset({ x: 0, y: 0 });
|
|
5546
|
+
setResizeSize(null);
|
|
5491
5547
|
}
|
|
5492
5548
|
}, [open]);
|
|
5493
5549
|
React.useEffect(() => {
|
|
@@ -5657,9 +5713,10 @@ function ReactModal(props) {
|
|
|
5657
5713
|
className
|
|
5658
5714
|
),
|
|
5659
5715
|
style: {
|
|
5660
|
-
width,
|
|
5716
|
+
width: !mergedFullscreen ? resizeSize?.width ?? width : width,
|
|
5717
|
+
...!mergedFullscreen && resizeSize ? { height: resizeSize.height } : void 0,
|
|
5661
5718
|
...style,
|
|
5662
|
-
...draggable && !mergedFullscreen ? {
|
|
5719
|
+
...(draggable || resizable) && !mergedFullscreen ? {
|
|
5663
5720
|
position: "relative",
|
|
5664
5721
|
left: dragOffset.x,
|
|
5665
5722
|
top: dragOffset.y
|
|
@@ -5712,16 +5769,7 @@ function ReactModal(props) {
|
|
|
5712
5769
|
"aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
5713
5770
|
"aria-pressed": mergedFullscreen,
|
|
5714
5771
|
onClick: () => setFullscreen(!mergedFullscreen),
|
|
5715
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5716
|
-
"span",
|
|
5717
|
-
{
|
|
5718
|
-
className: joinClassNames(
|
|
5719
|
-
`${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
|
|
5720
|
-
mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
|
|
5721
|
-
),
|
|
5722
|
-
"aria-hidden": "true"
|
|
5723
|
-
}
|
|
5724
|
-
)
|
|
5772
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ModalFullscreenIcon, { exit: mergedFullscreen })
|
|
5725
5773
|
}
|
|
5726
5774
|
) : null,
|
|
5727
5775
|
closable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5753,7 +5801,31 @@ function ReactModal(props) {
|
|
|
5753
5801
|
children
|
|
5754
5802
|
}
|
|
5755
5803
|
),
|
|
5756
|
-
footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter })
|
|
5804
|
+
footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter }),
|
|
5805
|
+
resizable && !mergedFullscreen ? ["n", "s", "e", "w", "ne", "nw", "se", "sw"].map((direction) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5806
|
+
"div",
|
|
5807
|
+
{
|
|
5808
|
+
className: `${REACT_COMPONENT_PREFIX}-modal-resize-handle ${REACT_COMPONENT_PREFIX}-modal-resize-${direction}`,
|
|
5809
|
+
"aria-hidden": "true",
|
|
5810
|
+
onMouseDown: (event) => {
|
|
5811
|
+
if (event.button !== 0 || !panelRef.current) return;
|
|
5812
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
5813
|
+
dragRef.current = null;
|
|
5814
|
+
resizeRef.current = {
|
|
5815
|
+
direction,
|
|
5816
|
+
startX: event.clientX,
|
|
5817
|
+
startY: event.clientY,
|
|
5818
|
+
width: rect.width,
|
|
5819
|
+
height: rect.height,
|
|
5820
|
+
offsetX: dragOffset.x,
|
|
5821
|
+
offsetY: dragOffset.y
|
|
5822
|
+
};
|
|
5823
|
+
event.preventDefault();
|
|
5824
|
+
event.stopPropagation();
|
|
5825
|
+
}
|
|
5826
|
+
},
|
|
5827
|
+
direction
|
|
5828
|
+
)) : null
|
|
5757
5829
|
]
|
|
5758
5830
|
}
|
|
5759
5831
|
) })
|