@netless/telebox-insider 0.2.4 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.4",
+    "version": "0.2.8",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -75,6 +75,6 @@
         "shallowequal": "^1.1.0",
         "side-effect-manager": "^0.1.5",
         "stylefire": "^7.0.3",
-        "value-enhancer": "^0.0.7"
+        "value-enhancer": "^0.0.8"
     }
 }

package/src/TeleBox/constants.ts

@@ -1,3 +1,9 @@
+export enum TELE_BOX_COLOR_SCHEME {
+    Light = "light",
+    Dark = "dark",
+    Auto = "auto",
+}
+
 export enum TELE_BOX_STATE {
     Normal = "normal",
     Minimized = "minimized",
@@ -5,6 +11,8 @@ export enum TELE_BOX_STATE {
 }
 
 export enum TELE_BOX_EVENT {
+    DarkMode = "dark_mode",
+    PrefersColorScheme = "prefers_color_scheme",
     Close = "close",
     Focus = "focus",
     Blur = "blur",

package/src/TeleBox/index.ts

@@ -26,6 +26,7 @@ import {
     TELE_BOX_STATE,
     TELE_BOX_RESIZE_HANDLE,
     TELE_BOX_DELEGATE_EVENT,
+    TELE_BOX_COLOR_SCHEME,
 } from "./constants";
 import type {
     TeleBoxConfig,
@@ -36,12 +37,15 @@ import type {
     TeleBoxDelegateEvents,
     TeleBoxCoord,
     TeleBoxSize,
+    TeleBoxColorScheme,
 } from "./typings";
 
 export * from "./constants";
 export * from "./typings";
 
 type ValConfig = {
+    prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
+    darkMode: Val<boolean, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
     collectorRect: Val<TeleBoxRect | undefined, boolean>;
     /** Box title. Default empty. */
@@ -74,6 +78,8 @@ export class TeleBox {
     public constructor({
         id = genUniqueKey(),
         title = getBoxDefaultName(),
+        prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
+        darkMode,
         visible = true,
         width = 0.5,
         height = 0.5,
@@ -112,6 +118,58 @@ export class TeleBox {
         this.events = new EventEmitter();
         this._delegateEvents = new EventEmitter();
 
+        const prefersColorScheme$ = createVal<TeleBoxColorScheme, boolean>(
+            prefersColorScheme
+        );
+        prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(
+                    TELE_BOX_EVENT.PrefersColorScheme,
+                    prefersColorScheme
+                );
+            }
+        });
+
+        const darkMode$ = createVal(Boolean(darkMode));
+
+        if (darkMode == null) {
+            prefersColorScheme$.subscribe(
+                (prefersColorScheme, _, skipUpdate) => {
+                    this._sideEffect.add(() => {
+                        if (prefersColorScheme === "auto") {
+                            const prefersDark = window.matchMedia(
+                                "(prefers-color-scheme: dark)"
+                            );
+                            darkMode$.setValue(prefersDark.matches, skipUpdate);
+                            const handler = (
+                                evt: MediaQueryListEvent
+                            ): void => {
+                                darkMode$.setValue(evt.matches, skipUpdate);
+                            };
+                            prefersDark.addEventListener("change", handler);
+                            return () =>
+                                prefersDark.removeEventListener(
+                                    "change",
+                                    handler
+                                );
+                        } else {
+                            darkMode$.setValue(
+                                prefersColorScheme === "dark",
+                                skipUpdate
+                            );
+                            return () => {};
+                        }
+                    }, "prefers-color-scheme");
+                }
+            );
+        }
+
+        darkMode$.reaction((darkMode, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.DarkMode, darkMode);
+            }
+        });
+
         const containerRect$ = createVal(containerRect, shallowequal);
         const collectorRect$ = createVal(collectorRect, shallowequal);
 
@@ -354,6 +412,8 @@ export class TeleBox {
         const $userStyles$ = createVal(styles);
 
         const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
+            darkMode: darkMode$,
             containerRect: containerRect$,
             collectorRect: collectorRect$,
             title: title$,
@@ -417,6 +477,10 @@ export class TeleBox {
     public _coord$: Val<TeleBoxCoord, boolean>;
     public _intrinsicCoord$: Val<TeleBoxCoord, boolean>;
 
+    public get darkMode(): boolean {
+        return this._darkMode$.value;
+    }
+
     public _state$: Val<TeleBoxState, boolean>;
 
     public get state(): TeleBoxState {
@@ -690,6 +754,9 @@ export class TeleBox {
     /** DOM of the box content */
     public $content!: HTMLElement;
 
+    /** DOM of the box title bar */
+    public $titleBar!: HTMLElement;
+
     /** DOM of the box footer */
     public $footer!: HTMLElement;
 
@@ -732,6 +799,13 @@ export class TeleBox {
         bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
         bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
         bindClassName(this.$box, this._focus$, "blur", isFalsy);
+        bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
+        bindClassName(
+            this.$box,
+            this._darkMode$,
+            "color-scheme-light",
+            isFalsy
+        );
 
         this._renderSideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");
@@ -833,6 +907,7 @@ export class TeleBox {
         const $titleBar = document.createElement("div");
         $titleBar.className = this.wrapClassName("titlebar-wrap");
         $titleBar.appendChild(this.titleBar.render());
+        this.$titleBar = $titleBar;
 
         const $contentWrap = document.createElement("div");
         $contentWrap.className = this.wrapClassName("content-wrap");

package/src/TeleBox/style.scss

@@ -202,3 +202,11 @@
         pointer-events: none !important;
     }
 }
+
+.#{$namespace}-color-scheme-dark {
+    .#{$namespace}-box-main {
+        color: #e9e9e9;
+        background: #212126;
+        border-color: #43434d;
+    }
+}

package/src/TeleBox/typings.ts

@@ -6,8 +6,11 @@ import type {
     TELE_BOX_DELEGATE_EVENT,
     TELE_BOX_RESIZE_HANDLE,
     TELE_BOX_STATE,
+    TELE_BOX_COLOR_SCHEME,
 } from "./constants";
 
+export type TeleBoxColorScheme = `${TELE_BOX_COLOR_SCHEME}`;
+
 export type TeleBoxCoord = { x: number; y: number };
 
 export type TeleBoxSize = { width: number; height: number };
@@ -26,6 +29,10 @@ export interface TeleBoxConfig {
     readonly id?: string;
     /** Box title. Default empty. */
     readonly title?: string;
+    /** Prefers Box color scheme. Default light. */
+    readonly prefersColorScheme?: TeleBoxColorScheme;
+    /** Actual Box Dark Mode */
+    readonly darkMode?: boolean;
     /** Box visible. Default true. */
     readonly visible?: boolean;
     /** Box width relative to root element. 0~1. Default 0.5. */
@@ -79,6 +86,8 @@ export interface TeleBoxConfig {
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 
 export type TeleBoxEventConfig = CheckTeleBoxConfig<{
+    dark_mode: boolean;
+    prefers_color_scheme: TeleBoxColorScheme;
     close: void;
     focus: void;
     blur: void;

package/src/TeleBoxManager/constants.ts

@@ -10,4 +10,6 @@ export enum TELE_BOX_MANAGER_EVENT {
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
     VisualResize = "visual_resize",
+    PrefersColorScheme = "prefers_color_scheme",
+    DarkMode = "dark_mode",
 }

package/src/TeleBoxManager/index.ts

@@ -17,7 +17,11 @@ import type {
     TeleBoxManagerUpdateConfig,
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
-import { TELE_BOX_DELEGATE_EVENT } from "..";
+import {
+    TeleBoxColorScheme,
+    TELE_BOX_COLOR_SCHEME,
+    TELE_BOX_DELEGATE_EVENT,
+} from "..";
 import { SideEffectManager } from "side-effect-manager";
 import {
     createSideEffectBinder,
@@ -30,6 +34,7 @@ export * from "./typings";
 export * from "./constants";
 
 type ValConfig = {
+    prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
     collector: Val<TeleBoxCollector | null>;
     readonly: Val<boolean, boolean>;
@@ -42,6 +47,7 @@ export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
 export class TeleBoxManager {
     public constructor({
         root = document.body,
+        prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
         minimized = false,
         maximized = false,
         fence = true,
@@ -63,6 +69,43 @@ export class TeleBoxManager {
         this.namespace = namespace;
         this.zIndex = zIndex;
 
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+        const prefersDark$ = createVal(prefersDark.matches);
+        this._sideEffect.add(() => {
+            const handler = (evt: MediaQueryListEvent): void => {
+                prefersDark$.setValue(evt.matches);
+            };
+            prefersDark.addEventListener("change", handler);
+            return () => prefersDark.removeEventListener("change", handler);
+        });
+
+        const prefersColorScheme$ = createVal(prefersColorScheme);
+        prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
+            this.boxes.forEach((box) =>
+                box.setPrefersColorScheme(prefersColorScheme, skipUpdate)
+            );
+            if (!skipUpdate) {
+                this.events.emit(
+                    TELE_BOX_MANAGER_EVENT.PrefersColorScheme,
+                    prefersColorScheme
+                );
+            }
+        });
+
+        this._darkMode$ = combine(
+            [prefersDark$, prefersColorScheme$],
+            ([prefersDark, prefersColorScheme]) =>
+                prefersColorScheme === "auto"
+                    ? prefersDark
+                    : prefersColorScheme === "dark"
+        );
+        this._darkMode$.reaction((darkMode, _, skipUpdate) => {
+            this.boxes.forEach((box) => box.setDarkMode(darkMode, skipUpdate));
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+            }
+        });
+
         const readonly$ = createVal(readonly);
         readonly$.reaction((readonly, _, skipUpdate) => {
             this.boxes.forEach((box) => box.setReadonly(readonly, skipUpdate));
@@ -246,6 +289,7 @@ export class TeleBoxManager {
         );
 
         const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
             containerRect: containerRect$,
             collector: collector$,
             readonly: readonly$,
@@ -271,6 +315,12 @@ export class TeleBoxManager {
 
     public zIndex: number;
 
+    public _darkMode$: Val<boolean, boolean>;
+
+    public get darkMode(): boolean {
+        return this._darkMode$.value;
+    }
+
     public _state$: Val<TeleBoxState, boolean>;
 
     public get state(): TeleBoxState {
@@ -385,11 +435,11 @@ export class TeleBoxManager {
             const box = boxes[0];
             this.focusBox({ focus: false, box });
             box.destroy();
-            if (this.boxes.length <= 0) {
-                this.setMaximized(false);
-                this.setMinimized(false);
-            }
             if (!skipUpdate) {
+                if (this.boxes.length <= 0) {
+                    this.setMaximized(false);
+                    this.setMinimized(false);
+                }
                 this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
             }
             return box;
@@ -412,11 +462,11 @@ export class TeleBoxManager {
         const boxes = this.boxes.splice(0, this.boxes.length);
         this.maxTitleBar.setBoxes(this.boxes);
         boxes.forEach((box) => box.destroy());
-        if (this.boxes.length <= 0) {
-            this.setMaximized(false);
-            this.setMinimized(false);
-        }
         if (!skipUpdate) {
+            if (this.boxes.length <= 0) {
+                this.setMaximized(false);
+                this.setMinimized(false);
+            }
             this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
         }
         return boxes;
@@ -614,6 +664,8 @@ export class TeleBoxManager {
             y,
             width,
             height,
+            darkMode: this.darkMode,
+            prefersColorScheme: this.prefersColorScheme,
             maximized: this.maximized,
             minimized: this.minimized,
             fence: this.fence,

package/src/TeleBoxManager/typings.ts

@@ -1,4 +1,5 @@
 import type EventEmitter from "eventemitter3";
+import { TeleBoxColorScheme } from "..";
 import type { ReadonlyTeleBox, TeleBoxState } from "../TeleBox";
 import type { TeleBoxConfig } from "../TeleBox/typings";
 import type { TeleBoxCollector } from "../TeleBoxCollector";
@@ -7,6 +8,7 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 export interface TeleBoxManagerConfig
     extends Pick<
         TeleBoxConfig,
+        | "prefersColorScheme"
         | "fence"
         | "containerRect"
         | "maximized"
@@ -67,6 +69,8 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     intrinsic_move: [ReadonlyTeleBox];
     intrinsic_resize: [ReadonlyTeleBox];
     visual_resize: [ReadonlyTeleBox];
+    prefers_color_scheme: [TeleBoxColorScheme];
+    dark_mode: [boolean];
 }>;
 
 export type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;

package/src/TeleBoxReact/index.tsx

@@ -16,6 +16,12 @@ export type TeleBoxReactProps = TeleBoxConfig & {
 export const TeleBoxReact: FC<TeleBoxReactProps> = (props) => {
     const [teleBox] = useState(() => new TeleBox(props));
 
+    useUpdateEffect(() => {
+        if (props.prefersColorScheme != null) {
+            teleBox.setPrefersColorScheme(props.prefersColorScheme);
+        }
+    }, [teleBox, props.prefersColorScheme]);
+
     useUpdateEffect(() => {
         if (props.minWidth != null) {
             teleBox.setMinWidth(props.minWidth);
@@ -52,6 +58,18 @@ export const TeleBoxReact: FC<TeleBoxReactProps> = (props) => {
         }
     }, [teleBox, props.visible]);
 
+    useUpdateEffect(() => {
+        if (props.minimized != null) {
+            teleBox.setMinimized(props.minimized, true);
+        }
+    }, [teleBox, props.minimized]);
+
+    useUpdateEffect(() => {
+        if (props.maximized != null) {
+            teleBox.setMaximized(props.maximized, true);
+        }
+    }, [teleBox, props.maximized]);
+
     useUpdateEffect(() => {
         if (props.state != null) {
             teleBox.setState(props.state, true);

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -71,3 +71,15 @@
 .#{$namespace}-titlebar-icon-close {
     background: center / cover no-repeat url("./icons/close.svg");
 }
+
+.#{$namespace}-color-scheme-dark {
+    .#{$namespace}-title {
+        color: #e9e9e9;
+    }
+
+    .#{$namespace}-titlebar {
+        color: #e9e9e9;
+        background: #43434d;
+        border-bottom: none;
+    }
+}