@wener/console
Version:
Base console UI toolkit
314 lines (313 loc) • 11.2 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr))
return arr;
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
}
else {
obj[key] = value;
}
return obj;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null)
return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i)
break;
}
}
catch (err) {
_d = true;
_e = err;
}
finally {
try {
if (!_n && _i["return"] != null)
_i["return"]();
}
finally {
if (_d)
throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _array_like_to_array(o, minLen);
}
import React, { memo, useEffect } from "react";
import { Rnd } from "react-rnd";
import { useEvent } from "@wener/reaction";
import { Closer } from "@wener/utils";
import { clsx } from "clsx";
import { useStore } from "zustand";
import { useShallow } from "zustand/react/shallow";
import { getWindowDragCancelClassname, getWindowDragHandleClassname } from "./const.js";
import { getRootWindow, WindowContext } from "./ReactWindow.js";
import { WindowController } from "./WindowController.js";
import { WindowFrame } from "./WindowFrame.js";
export var WindowGuest = /*#__PURE__*/ memo(function (param) {
var win = param.win;
var store = win.store;
var _useStore = useStore(store, useShallow(function (param) {
var zIndex = param.zIndex, minimized = param.minimized, x = param.x, y = param.y, width = param.width, height = param.height, canResize = param.canResize, maximized = param.maximized, canDrag = param.canDrag, minWidth = param.minWidth, minHeight = param.minHeight, maxWidth = param.maxWidth, maxHeight = param.maxHeight;
return {
zIndex: zIndex,
minimized: minimized,
maximized: maximized,
x: x,
y: y,
width: width,
height: height,
canResize: canResize && !maximized,
canDrag: canDrag && !maximized,
minWidth: minWidth,
minHeight: minHeight,
maxWidth: maxWidth,
maxHeight: maxHeight
};
})), zIndex = _useStore.zIndex, minimized = _useStore.minimized, x = _useStore.x, y = _useStore.y, width = _useStore.width, height = _useStore.height, canResize = _useStore.canResize, canDrag = _useStore.canDrag, minWidth = _useStore.minWidth, minHeight = _useStore.minHeight, maxWidth = _useStore.maxWidth, maxHeight = _useStore.maxHeight, maximized = _useStore.maximized;
// maximized should keep space for dock
// fullscreen should cover dock
var size = maximized ? {
width: "100vw",
height: "100vh"
} : {
width: width,
height: height
};
var position = maximized ? {
x: 0,
y: 0
} : {
x: x,
y: y
};
var props = {
id: "win-".concat(win.id),
"data-dnd-window-id": win.id,
className: clsx(!minimized && "pointer-events-auto", maximized && "h-screen w-screen"),
default: {
x: 0,
y: 0,
width: 320,
height: 200
},
size: size,
position: position,
onDragStop: useEvent(function (e, d) {
if (!maximized) {
store.setState({
x: d.x,
y: d.y
});
}
}),
onResize: useEvent(function (e, direction, ref, delta, position) {
if (!maximized) {
store.setState(_object_spread({
width: ref.offsetWidth,
height: ref.offsetHeight
}, position));
}
}),
dragHandleClassName: getWindowDragHandleClassname(),
cancel: ".".concat(getWindowDragCancelClassname()),
enableResizing: canResize,
disableDragging: !canDrag || maximized,
bounds: maximized ? undefined : document.body,
minWidth: minWidth,
minHeight: minHeight,
maxWidth: maxWidth,
maxHeight: maxHeight,
style: {
zIndex: zIndex
},
ref: useEvent(function (ref) {
var ele = ref === null || ref === void 0 ? void 0 : ref.resizableElement.current;
if (ele && win.state.windowElement !== ele) {
win.store.setState({
windowElement: ele
});
}
})
};
return /*#__PURE__*/ React.createElement(Rnd, props, /*#__PURE__*/ React.createElement(WinContent, {
win: win
}));
});
var WinContent = /*#__PURE__*/ memo(function (param) {
var win = param.win;
var store = win.store;
var _useStore = _sliced_to_array(useStore(store, useShallow(function (param) {
var frameless = param.frameless, fullscreen = param.fullscreen;
// fullscreen always frameless
frameless = frameless || fullscreen;
return [
frameless
];
})), 1), frameless = _useStore[0];
var root = getRootWindow();
useEffect(function () {
var closer = new Closer();
var windowElement;
var handleWindowElement = function (ele) {
if (!ele) {
return;
}
if (ele === windowElement) {
return;
}
ele.addEventListener("mousedown", function () {
root.setActive(win);
});
};
handleWindowElement(store.getState().windowElement);
closer.add(store.subscribe(function (s) {
handleWindowElement(s.windowElement);
}));
return function () {
closer.close();
};
}, []);
return /*#__PURE__*/ React.createElement(WindowContext.Provider, {
value: win
}, frameless ? /*#__PURE__*/ React.createElement(WinFramelessContent, {
win: win
}) : /*#__PURE__*/ React.createElement(WinFrameContent, {
win: win
}));
});
var WinFramelessContent = function (param) {
var win = param.win;
var store = win.store;
var _useStore = _sliced_to_array(useStore(store, useShallow(function (param) {
var minimized = param.minimized, render = param.render;
return [
minimized,
render
];
})), 2), minimized = _useStore[0], render = _useStore[1];
return /*#__PURE__*/ React.createElement("div", _object_spread({
ref: function (ref) {
win.setBody(ref);
},
className: clsx("bg-base-100 @container rounded-lg shadow outline-none focus-within:shadow-lg", minimized && "hidden"),
tabIndex: -1,
inert: minimized
}, getWindowProps(win)), /*#__PURE__*/ React.createElement(WindowContentRenderer, {
render: render
}));
};
var WinFrameContent = function (param) {
var win = param.win;
var store = win.store;
var _useStore = useStore(store, useShallow(function (param) {
var minimized = param.minimized, maximized = param.maximized, canMinimize = param.canMinimize, canMaximize = param.canMaximize, title = param.title, render = param.render;
return {
minimized: minimized,
maximized: maximized,
canMinimize: canMinimize,
canMaximize: canMaximize,
title: title,
render: render
};
})), minimized = _useStore.minimized, maximized = _useStore.maximized, canMinimize = _useStore.canMinimize, canMaximize = _useStore.canMaximize, title = _useStore.title, render = _useStore.render;
return /*#__PURE__*/ React.createElement(WindowFrame, _object_spread({
inert: minimized,
controller: /*#__PURE__*/ React.createElement(WindowController, {
close: {
onClick: function () {
win.close();
}
},
minimize: {
disabled: !canMinimize,
onClick: function () {
win.minimize();
}
},
maximize: _define_property({
disabled: !canMaximize,
onClick: function () {
win.maximize();
}
}, "data-active", maximized || null)
}),
onToggleMaximize: function () {
win.maximize();
},
className: clsx("h-full w-full", minimized && "hidden"),
title: title
}, getWindowProps(win)), /*#__PURE__*/ React.createElement("main", {
className: "relative flex-1 overflow-hidden"
}, /*#__PURE__*/ React.createElement("div", {
className: "@container absolute inset-0 overflow-auto outline-none",
ref: function (ref) {
win.setBody(ref);
},
tabIndex: -1
}, /*#__PURE__*/ React.createElement(WindowContentRenderer, {
render: render
}))));
};
var WindowContentRenderer = function (param) {
var render = param.render;
return render === null || render === void 0 ? void 0 : render();
};
function getWindowProps(win) {
return {};
}