@wener/console/lib/window/WindowTest.js

Base console UI toolkit

import React from "react";
import { useStore } from "zustand";
import { useShallow } from "zustand/react/shallow";
import { cn } from "../utils/cn.js";
import { getWindowDragHandleClassname } from "./const.js";
import { useWindow } from "./ReactWindow.js";
var ToggleControl = function (param) {
    var label = param.label, checked = param.checked, onChange = param.onChange;
    return /*#__PURE__*/ React.createElement("div", {
        className: "form-control"
    }, /*#__PURE__*/ React.createElement("label", {
        className: "label cursor-pointer"
    }, /*#__PURE__*/ React.createElement("span", {
        className: "label-text"
    }, label), /*#__PURE__*/ React.createElement("input", {
        type: "checkbox",
        className: "toggle",
        checked: checked,
        onChange: function (e) {
            return onChange(e.target.checked);
        }
    })));
};
export var WindowTest = function () {
    var win = useWindow();
    var store = win.store;
    var _useStore = useStore(store, useShallow(function (param) {
        var canMaximize = param.canMaximize, canMinimize = param.canMinimize, canResize = param.canResize, frameless = param.frameless;
        return {
            canMaximize: canMaximize,
            canMinimize: canMinimize,
            canResize: canResize,
            frameless: frameless
        };
    })), canMaximize = _useStore.canMaximize, canMinimize = _useStore.canMinimize, canResize = _useStore.canResize, frameless = _useStore.frameless;
    return /*#__PURE__*/ React.createElement("div", {
        className: "flex flex-col p-2"
    }, /*#__PURE__*/ React.createElement("h2", null, "Window Test"), /*#__PURE__*/ React.createElement("div", {
        className: "flex flex-col gap-1"
    }, /*#__PURE__*/ React.createElement(ToggleControl, {
        label: "Can Maximize",
        checked: canMaximize,
        onChange: function (checked) {
            return store.setState({
                canMaximize: checked
            });
        }
    }), /*#__PURE__*/ React.createElement(ToggleControl, {
        label: "Can Minimize",
        checked: canMinimize,
        onChange: function (checked) {
            return store.setState({
                canMinimize: checked
            });
        }
    }), /*#__PURE__*/ React.createElement(ToggleControl, {
        label: "Can Resize",
        checked: canResize,
        onChange: function (checked) {
            return store.setState({
                canResize: checked
            });
        }
    }), /*#__PURE__*/ React.createElement(ToggleControl, {
        label: "Frameless",
        checked: frameless,
        onChange: function (checked) {
            return store.setState({
                frameless: checked
            });
        }
    }), /*#__PURE__*/ React.createElement("div", {
        className: cn("size-10 cursor-pointer rounded-md border", getWindowDragHandleClassname())
    }, "H")), /*#__PURE__*/ React.createElement("hr", {
        className: "my-4"
    }), /*#__PURE__*/ React.createElement("input", {
        type: "text",
        className: "input input-bordered",
        placeholder: "Can focus and input"
    }));
};