ywana-core8 0.2.17 → 0.2.19
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.css +231 -0
- package/dist/index.js +245 -2
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +245 -2
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +245 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/desktop/Desktop.stories.jsx +522 -14
- package/src/desktop/index.js +1 -0
- package/src/desktop/window.css +231 -0
- package/src/desktop/window.js +341 -8
package/dist/index.modern.js
CHANGED
@@ -32418,7 +32418,7 @@ const Window = ({
|
|
32418
32418
|
isResizing && "window--resizing",
|
32419
32419
|
className
|
32420
32420
|
].filter(Boolean).join(" ");
|
32421
|
-
return /* @__PURE__ */ React.createElement(
|
32421
|
+
return /* @__PURE__ */ React.createElement(WindowInstanceProvider, { windowId: id }, /* @__PURE__ */ React.createElement(
|
32422
32422
|
"div",
|
32423
32423
|
{
|
32424
32424
|
ref: windowRef,
|
@@ -32514,8 +32514,244 @@ const Window = ({
|
|
32514
32514
|
className: "window__resize-handle window__resize-handle--sw",
|
32515
32515
|
onMouseDown: (e) => handleResizeStart(e, "sw")
|
32516
32516
|
}
|
32517
|
+
)),
|
32518
|
+
/* @__PURE__ */ React.createElement(FloatingElementsRenderer, null)
|
32519
|
+
));
|
32520
|
+
};
|
32521
|
+
const WindowInstanceContext = createContext(null);
|
32522
|
+
const WindowInstanceProvider = ({ windowId, children }) => {
|
32523
|
+
const [dialogs, setDialogs] = useState([]);
|
32524
|
+
const [notifications, setNotifications] = useState([]);
|
32525
|
+
const [tooltips, setTooltips] = useState([]);
|
32526
|
+
const [contextMenus, setContextMenus] = useState([]);
|
32527
|
+
const [overlays, setOverlays] = useState([]);
|
32528
|
+
const idCounterRef = useRef(0);
|
32529
|
+
const generateId = useCallback(() => {
|
32530
|
+
return `${windowId}-element-${++idCounterRef.current}`;
|
32531
|
+
}, [windowId]);
|
32532
|
+
const showDialog = useCallback((config) => {
|
32533
|
+
const id = generateId();
|
32534
|
+
const dialog = {
|
32535
|
+
id,
|
32536
|
+
type: "dialog",
|
32537
|
+
...config,
|
32538
|
+
createdAt: Date.now(),
|
32539
|
+
onClose: () => hideDialog(id)
|
32540
|
+
};
|
32541
|
+
setDialogs((prev) => [...prev, dialog]);
|
32542
|
+
return id;
|
32543
|
+
}, [generateId]);
|
32544
|
+
const hideDialog = useCallback((id) => {
|
32545
|
+
setDialogs((prev) => prev.filter((dialog) => dialog.id !== id));
|
32546
|
+
}, []);
|
32547
|
+
const hideAllDialogs = useCallback(() => {
|
32548
|
+
setDialogs([]);
|
32549
|
+
}, []);
|
32550
|
+
const showNotification = useCallback((config) => {
|
32551
|
+
const id = generateId();
|
32552
|
+
const notification = {
|
32553
|
+
id,
|
32554
|
+
type: "notification",
|
32555
|
+
duration: 5e3,
|
32556
|
+
...config,
|
32557
|
+
createdAt: Date.now(),
|
32558
|
+
onClose: () => hideNotification(id)
|
32559
|
+
};
|
32560
|
+
setNotifications((prev) => [...prev, notification]);
|
32561
|
+
if (notification.duration > 0) {
|
32562
|
+
setTimeout(() => hideNotification(id), notification.duration);
|
32563
|
+
}
|
32564
|
+
return id;
|
32565
|
+
}, [generateId]);
|
32566
|
+
const hideNotification = useCallback((id) => {
|
32567
|
+
setNotifications((prev) => prev.filter((notification) => notification.id !== id));
|
32568
|
+
}, []);
|
32569
|
+
const hideAllNotifications = useCallback(() => {
|
32570
|
+
setNotifications([]);
|
32571
|
+
}, []);
|
32572
|
+
const showTooltip = useCallback((config) => {
|
32573
|
+
const id = generateId();
|
32574
|
+
const tooltip = { id, type: "tooltip", ...config, createdAt: Date.now() };
|
32575
|
+
setTooltips((prev) => [...prev, tooltip]);
|
32576
|
+
return id;
|
32577
|
+
}, [generateId]);
|
32578
|
+
const hideTooltip = useCallback((id) => {
|
32579
|
+
setTooltips((prev) => prev.filter((tooltip) => tooltip.id !== id));
|
32580
|
+
}, []);
|
32581
|
+
const hideAllTooltips = useCallback(() => {
|
32582
|
+
setTooltips([]);
|
32583
|
+
}, []);
|
32584
|
+
const showContextMenu = useCallback((config) => {
|
32585
|
+
setContextMenus([]);
|
32586
|
+
const id = generateId();
|
32587
|
+
const contextMenu = {
|
32588
|
+
id,
|
32589
|
+
type: "contextMenu",
|
32590
|
+
...config,
|
32591
|
+
createdAt: Date.now(),
|
32592
|
+
onClose: () => hideContextMenu(id)
|
32593
|
+
};
|
32594
|
+
setContextMenus([contextMenu]);
|
32595
|
+
return id;
|
32596
|
+
}, [generateId]);
|
32597
|
+
const hideContextMenu = useCallback((id) => {
|
32598
|
+
setContextMenus((prev) => prev.filter((menu) => menu.id !== id));
|
32599
|
+
}, []);
|
32600
|
+
const hideAllContextMenus = useCallback(() => {
|
32601
|
+
setContextMenus([]);
|
32602
|
+
}, []);
|
32603
|
+
const showOverlay = useCallback((config) => {
|
32604
|
+
const id = generateId();
|
32605
|
+
const overlay = {
|
32606
|
+
id,
|
32607
|
+
type: "overlay",
|
32608
|
+
...config,
|
32609
|
+
createdAt: Date.now(),
|
32610
|
+
onClose: () => hideOverlay(id)
|
32611
|
+
};
|
32612
|
+
setOverlays((prev) => [...prev, overlay]);
|
32613
|
+
return id;
|
32614
|
+
}, [generateId]);
|
32615
|
+
const hideOverlay = useCallback((id) => {
|
32616
|
+
setOverlays((prev) => prev.filter((overlay) => overlay.id !== id));
|
32617
|
+
}, []);
|
32618
|
+
const hideAllOverlays = useCallback(() => {
|
32619
|
+
setOverlays([]);
|
32620
|
+
}, []);
|
32621
|
+
const clearAll = useCallback(() => {
|
32622
|
+
setDialogs([]);
|
32623
|
+
setNotifications([]);
|
32624
|
+
setTooltips([]);
|
32625
|
+
setContextMenus([]);
|
32626
|
+
setOverlays([]);
|
32627
|
+
}, []);
|
32628
|
+
const value = {
|
32629
|
+
windowId,
|
32630
|
+
dialogs,
|
32631
|
+
notifications,
|
32632
|
+
tooltips,
|
32633
|
+
contextMenus,
|
32634
|
+
overlays,
|
32635
|
+
showDialog,
|
32636
|
+
hideDialog,
|
32637
|
+
hideAllDialogs,
|
32638
|
+
showNotification,
|
32639
|
+
hideNotification,
|
32640
|
+
hideAllNotifications,
|
32641
|
+
showTooltip,
|
32642
|
+
hideTooltip,
|
32643
|
+
hideAllTooltips,
|
32644
|
+
showContextMenu,
|
32645
|
+
hideContextMenu,
|
32646
|
+
hideAllContextMenus,
|
32647
|
+
showOverlay,
|
32648
|
+
hideOverlay,
|
32649
|
+
hideAllOverlays,
|
32650
|
+
clearAll,
|
32651
|
+
generateId
|
32652
|
+
};
|
32653
|
+
return /* @__PURE__ */ React.createElement(WindowInstanceContext.Provider, { value }, children);
|
32654
|
+
};
|
32655
|
+
const useWindowInstance = () => {
|
32656
|
+
const context = useContext(WindowInstanceContext);
|
32657
|
+
if (!context) {
|
32658
|
+
throw new Error("useWindowInstance must be used within a WindowInstanceProvider");
|
32659
|
+
}
|
32660
|
+
return context;
|
32661
|
+
};
|
32662
|
+
const useWindowDialogs = () => {
|
32663
|
+
const { dialogs, showDialog, hideDialog, hideAllDialogs } = useWindowInstance();
|
32664
|
+
return { dialogs, showDialog, hideDialog, hideAllDialogs };
|
32665
|
+
};
|
32666
|
+
const useWindowNotifications = () => {
|
32667
|
+
const { notifications, showNotification, hideNotification, hideAllNotifications } = useWindowInstance();
|
32668
|
+
return { notifications, showNotification, hideNotification, hideAllNotifications };
|
32669
|
+
};
|
32670
|
+
const useWindowTooltips = () => {
|
32671
|
+
const { tooltips, showTooltip, hideTooltip, hideAllTooltips } = useWindowInstance();
|
32672
|
+
return { tooltips, showTooltip, hideTooltip, hideAllTooltips };
|
32673
|
+
};
|
32674
|
+
const useWindowContextMenus = () => {
|
32675
|
+
const { contextMenus, showContextMenu, hideContextMenu, hideAllContextMenus } = useWindowInstance();
|
32676
|
+
return { contextMenus, showContextMenu, hideContextMenu, hideAllContextMenus };
|
32677
|
+
};
|
32678
|
+
const useWindowOverlays = () => {
|
32679
|
+
const { overlays, showOverlay, hideOverlay, hideAllOverlays } = useWindowInstance();
|
32680
|
+
return { overlays, showOverlay, hideOverlay, hideAllOverlays };
|
32681
|
+
};
|
32682
|
+
const FloatingElementsRenderer = () => {
|
32683
|
+
const { dialogs, notifications, tooltips, contextMenus, overlays } = useWindowInstance();
|
32684
|
+
return /* @__PURE__ */ React.createElement("div", { className: "window-floating-elements" }, overlays.map((overlay) => /* @__PURE__ */ React.createElement("div", { key: overlay.id, className: "window-overlay" }, /* @__PURE__ */ React.createElement("div", { className: "window-overlay__content" }, overlay.content, overlay.showCloseButton !== false && /* @__PURE__ */ React.createElement(
|
32685
|
+
"button",
|
32686
|
+
{
|
32687
|
+
className: "window-dialog__close",
|
32688
|
+
onClick: () => overlay.onClose && overlay.onClose(),
|
32689
|
+
style: { position: "absolute", top: "8px", right: "8px" }
|
32690
|
+
},
|
32691
|
+
"×"
|
32692
|
+
)))), dialogs.map((dialog) => /* @__PURE__ */ React.createElement("div", { key: dialog.id, className: "window-dialog" }, /* @__PURE__ */ React.createElement("div", { className: "window-dialog__content" }, dialog.title && /* @__PURE__ */ React.createElement("div", { className: "window-dialog__header" }, /* @__PURE__ */ React.createElement("h3", { className: "window-dialog__title" }, dialog.title), /* @__PURE__ */ React.createElement(
|
32693
|
+
"button",
|
32694
|
+
{
|
32695
|
+
className: "window-dialog__close",
|
32696
|
+
onClick: () => dialog.onClose && dialog.onClose()
|
32697
|
+
},
|
32698
|
+
"×"
|
32699
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "window-dialog__body" }, dialog.content), dialog.actions && /* @__PURE__ */ React.createElement("div", { className: "window-dialog__footer" }, dialog.actions)))), notifications.map((notification) => /* @__PURE__ */ React.createElement(
|
32700
|
+
"div",
|
32701
|
+
{
|
32702
|
+
key: notification.id,
|
32703
|
+
className: `window-notification window-notification--${notification.type || "info"}`,
|
32704
|
+
style: {
|
32705
|
+
top: `${16 + notifications.indexOf(notification) * 80}px`
|
32706
|
+
}
|
32707
|
+
},
|
32708
|
+
notification.icon && /* @__PURE__ */ React.createElement("div", { style: { fontSize: "18px", flexShrink: 0 } }, notification.icon),
|
32709
|
+
/* @__PURE__ */ React.createElement("div", { className: "window-notification__content" }, notification.title && /* @__PURE__ */ React.createElement("div", { className: "window-notification__title" }, notification.title), /* @__PURE__ */ React.createElement("div", { className: "window-notification__message" }, notification.message)),
|
32710
|
+
/* @__PURE__ */ React.createElement(
|
32711
|
+
"button",
|
32712
|
+
{
|
32713
|
+
className: "window-notification__close",
|
32714
|
+
onClick: () => notification.onClose && notification.onClose()
|
32715
|
+
},
|
32716
|
+
"×"
|
32717
|
+
)
|
32718
|
+
)), tooltips.map((tooltip) => /* @__PURE__ */ React.createElement(
|
32719
|
+
"div",
|
32720
|
+
{
|
32721
|
+
key: tooltip.id,
|
32722
|
+
className: "window-tooltip",
|
32723
|
+
style: {
|
32724
|
+
left: tooltip.x,
|
32725
|
+
top: tooltip.y,
|
32726
|
+
transform: tooltip.position === "top" ? "translateX(-50%) translateY(-100%)" : "translateX(-50%)"
|
32727
|
+
}
|
32728
|
+
},
|
32729
|
+
tooltip.text
|
32730
|
+
)), contextMenus.map((menu) => /* @__PURE__ */ React.createElement(
|
32731
|
+
"div",
|
32732
|
+
{
|
32733
|
+
key: menu.id,
|
32734
|
+
className: "window-context-menu",
|
32735
|
+
style: {
|
32736
|
+
left: menu.x,
|
32737
|
+
top: menu.y
|
32738
|
+
}
|
32739
|
+
},
|
32740
|
+
menu.items && menu.items.map((item, index) => /* @__PURE__ */ React.createElement(
|
32741
|
+
"div",
|
32742
|
+
{
|
32743
|
+
key: index,
|
32744
|
+
className: "window-context-menu__item",
|
32745
|
+
onClick: () => {
|
32746
|
+
item.onClick && item.onClick();
|
32747
|
+
menu.onClose && menu.onClose();
|
32748
|
+
}
|
32749
|
+
},
|
32750
|
+
item.icon && /* @__PURE__ */ React.createElement("span", null, item.icon),
|
32751
|
+
/* @__PURE__ */ React.createElement("span", null, item.label),
|
32752
|
+
item.shortcut && /* @__PURE__ */ React.createElement("span", { style: { marginLeft: "auto", fontSize: "11px", color: "#999" } }, item.shortcut)
|
32517
32753
|
))
|
32518
|
-
);
|
32754
|
+
)));
|
32519
32755
|
};
|
32520
32756
|
const ApplicationMenu = ({ isOpen, onClose }) => {
|
32521
32757
|
console.log("ApplicationMenu render - isOpen:", isOpen, "onClose:", onClose);
|
@@ -43183,6 +43419,7 @@ export {
|
|
43183
43419
|
ViewerTest,
|
43184
43420
|
WaitScreen,
|
43185
43421
|
Window,
|
43422
|
+
WindowInstanceProvider,
|
43186
43423
|
WindowManager,
|
43187
43424
|
WindowProvider,
|
43188
43425
|
Wizard,
|
@@ -43196,7 +43433,13 @@ export {
|
|
43196
43433
|
useCreateWindow,
|
43197
43434
|
useHashPage,
|
43198
43435
|
useWindow,
|
43436
|
+
useWindowContextMenus,
|
43437
|
+
useWindowDialogs,
|
43438
|
+
useWindowInstance,
|
43439
|
+
useWindowNotifications,
|
43440
|
+
useWindowOverlays,
|
43199
43441
|
useWindowStats,
|
43442
|
+
useWindowTooltips,
|
43200
43443
|
useWindows,
|
43201
43444
|
validatePassword
|
43202
43445
|
};
|