namirasoft-site-react 1.5.27 → 1.5.29

package/src/components/NSSplitter.tsx

@@ -1,212 +1,245 @@
-import { Component, createRef, MouseEvent as ReactMouseEvent, ReactNode } from "react";
-import { IStorageLocal } from "namirasoft-core";
-import Styles from "./NSSplitter.module.css";
-
-const MIN_MASTER_HEIGHT = 240;
-
-export interface NSSplitterProps
-{
-    master_content?: ReactNode;
-    detail_content?: ReactNode;
-    storage_key?: string;
-}
-
-export class NSSplitter extends Component<NSSplitterProps>
-{
-    private SplitterRef = createRef<HTMLElement>();
-    private MasterPaneRef = createRef<HTMLDivElement>();
-    private GutterRef = createRef<HTMLButtonElement>();
-    private AnimationFrame: number | null = null;
-    private DragOffset = 0;
-    private HasUserResized = false;
-    private MediaQuery: MediaQueryList | null = null;
-    private Storage = new IStorageLocal();
-
-    constructor(props: NSSplitterProps)
-    {
-        super(props);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleViewportChange = this.handleViewportChange.bind(this);
-    }
-
-    override componentDidMount()
-    {
-        this.MediaQuery = window.matchMedia("(min-width: 992px)");
-        this.MediaQuery.addEventListener("change", this.handleViewportChange);
-        window.addEventListener("resize", this.handleViewportChange);
-
-        if (this.loadStoredHeight() !== null)
-            this.HasUserResized = true;
-
-        this.updateLayout(true);
-    }
-
-    override componentDidUpdate(prevProps: NSSplitterProps)
-    {
-        let had_detail = !!prevProps.detail_content;
-        let has_detail = !!this.props.detail_content;
-
-        if (had_detail !== has_detail)
-        {
-            this.HasUserResized = false;
-            this.updateLayout(true);
-        }
-    }
-
-    override componentWillUnmount()
-    {
-        this.MediaQuery?.removeEventListener("change", this.handleViewportChange);
-        window.removeEventListener("resize", this.handleViewportChange);
-        window.removeEventListener("mousemove", this.handleMouseMove);
-        window.removeEventListener("mouseup", this.handleMouseUp);
-
-        if (this.AnimationFrame) cancelAnimationFrame(this.AnimationFrame);
-    }
-
-    handleViewportChange()
-    {
-        this.updateLayout(false);
-    }
-
-    updateLayout(force: boolean)
-    {
-        let master_el = this.MasterPaneRef.current;
-
-        if (!master_el || !this.MediaQuery)
-            return;
-
-        if (this.MediaQuery.matches)
-        {
-            let stored = this.loadStoredHeight();
-
-            if (stored !== null)
-                this.applyHeight(Math.max(MIN_MASTER_HEIGHT, stored));
-            else if (force || !this.HasUserResized)
-                this.adjustMasterToViewport();
-        }
-        else
-        {
-            master_el.style.height = "";
-            master_el.style.minHeight = "";
-        }
-    }
-
-    applyHeight(height: number)
-    {
-        let master_el = this.MasterPaneRef.current;
-
-        if (master_el)
-        {
-            master_el.style.height = height + "px";
-            master_el.style.minHeight = height + "px";
-        }
-    }
-
-    loadStoredHeight(): number | null
-    {
-        let key = this.props.storage_key;
-
-        if (!key)
-            return null;
-
-        let raw = this.Storage.get(key, "");
-
-        if (!raw)
-            return null;
-
-        let value = parseInt(raw, 10);
-
-        if (isNaN(value))
-            return null;
-
-        return value;
-    }
-
-    saveStoredHeight(height: number)
-    {
-        let key = this.props.storage_key;
-
-        if (!key) return;
-
-        this.Storage.set(key, String(height));
-    }
-
-    adjustMasterToViewport()
-    {
-        let master_el = this.MasterPaneRef.current;
-
-        if (!master_el) return;
-
-        let master_top = master_el.getBoundingClientRect().top;
-        let gutter_height = this.GutterRef.current?.offsetHeight ?? 0;
-        let height = Math.max(MIN_MASTER_HEIGHT, window.innerHeight - master_top - gutter_height);
-
-        this.applyHeight(height);
-    }
-
-    handleMouseDown(event: ReactMouseEvent)
-    {
-        let master_el = this.MasterPaneRef.current;
-
-        if (!master_el) return;
-
-        this.DragOffset = event.clientY - master_el.getBoundingClientRect().bottom;
-
-        window.addEventListener("mousemove", this.handleMouseMove);
-        window.addEventListener("mouseup", this.handleMouseUp);
-        this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
-    }
-
-    handleMouseUp()
-    {
-        window.removeEventListener("mousemove", this.handleMouseMove);
-        window.removeEventListener("mouseup", this.handleMouseUp);
-        this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
-
-        let master_el = this.MasterPaneRef.current;
-
-        if (master_el)
-            this.saveStoredHeight(master_el.offsetHeight);
-    }
-
-    handleMouseMove(event: MouseEvent)
-    {
-        if (this.AnimationFrame) return;
-
-        this.AnimationFrame = requestAnimationFrame(() =>
-        {
-            this.AnimationFrame = null;
-
-            let master_el = this.MasterPaneRef.current;
-
-            if (!master_el) return;
-
-            let master_top = master_el.getBoundingClientRect().top;
-            let height = Math.max(MIN_MASTER_HEIGHT, event.clientY - this.DragOffset - master_top);
-
-            this.applyHeight(height);
-            this.HasUserResized = true;
-        });
-    }
-
-    override render()
-    {
-        return (
-            <section ref={this.SplitterRef} className={Styles.ns_splitter}>
-                <div ref={this.MasterPaneRef} className={Styles.ns_splitter_master}                >
-                    {this.props.master_content}
-                </div>
-
-                <button ref={this.GutterRef} className={Styles.ns_splitter_gutter} onMouseDown={this.handleMouseDown}>
-                    <span className={Styles.ns_splitter_gutter_handle}></span>
-                </button>
-
-                <div className={Styles.ns_splitter_detail}>
-                    {this.props.detail_content}
-                </div>
-            </section>
-        )
-    }
+import { Component, createRef, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { IStorageLocal } from "namirasoft-core";
+import Styles from "./NSSplitter.module.css";
+
+const MIN_MASTER_HEIGHT = 240;
+
+export interface NSSplitterProps
+{
+    master_content?: ReactNode;
+    detail_content?: ReactNode;
+    storage_key?: string;
+}
+
+export class NSSplitter extends Component<NSSplitterProps>
+{
+    private SplitterRef = createRef<HTMLElement>();
+    private MasterPaneRef = createRef<HTMLDivElement>();
+    private GutterRef = createRef<HTMLButtonElement>();
+    private ContentObserver: MutationObserver | null = null;
+    private AnimationFrame: number | null = null;
+    private DragOffset = 0;
+    private IsDragging = false;
+    private HasUserResized = false;
+    private MediaQuery: MediaQueryList | null = null;
+    private Storage = new IStorageLocal();
+
+    constructor(props: NSSplitterProps)
+    {
+        super(props);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleViewportChange = this.handleViewportChange.bind(this);
+    }
+
+    override componentDidMount()
+    {
+        this.MediaQuery = window.matchMedia("(min-width: 992px)");
+        this.MediaQuery.addEventListener("change", this.handleViewportChange);
+        window.addEventListener("resize", this.handleViewportChange);
+
+        if (this.loadStoredHeight() !== null)
+            this.HasUserResized = true;
+
+        this.ContentObserver = new MutationObserver(this.handleViewportChange);
+
+        if (this.MasterPaneRef.current)
+            this.ContentObserver.observe(this.MasterPaneRef.current, { childList: true, subtree: true });
+
+        this.updateLayout(true);
+    }
+
+    override componentDidUpdate(prevProps: NSSplitterProps)
+    {
+        let had_detail = !!prevProps.detail_content;
+        let has_detail = !!this.props.detail_content;
+
+        if (had_detail !== has_detail)
+        {
+            this.HasUserResized = false;
+            this.updateLayout(true);
+        }
+    }
+
+    override componentWillUnmount()
+    {
+        this.MediaQuery?.removeEventListener("change", this.handleViewportChange);
+        window.removeEventListener("resize", this.handleViewportChange);
+        window.removeEventListener("mousemove", this.handleMouseMove);
+        window.removeEventListener("mouseup", this.handleMouseUp);
+        this.ContentObserver?.disconnect();
+        this.ContentObserver = null;
+
+        if (this.AnimationFrame) cancelAnimationFrame(this.AnimationFrame);
+    }
+
+    handleViewportChange()
+    {
+        if (this.IsDragging)
+            return;
+
+        this.updateLayout(false);
+    }
+
+    updateLayout(force: boolean)
+    {
+        let master_el = this.MasterPaneRef.current;
+
+        if (!master_el || !this.MediaQuery)
+            return;
+
+        if (this.MediaQuery.matches)
+        {
+            let stored = this.loadStoredHeight();
+
+            if (stored !== null)
+                this.applyHeight(Math.max(MIN_MASTER_HEIGHT, stored));
+            else if (force || !this.HasUserResized)
+                this.adjustMasterToViewport();
+        }
+        else
+        {
+            master_el.style.height = "";
+            master_el.style.minHeight = "";
+        }
+    }
+
+    applyHeight(height: number)
+    {
+        let master_el = this.MasterPaneRef.current;
+
+        if (master_el)
+        {
+            master_el.style.height = height + "px";
+            master_el.style.minHeight = height + "px";
+        }
+    }
+
+    loadStoredHeight(): number | null
+    {
+        let key = this.props.storage_key;
+
+        if (!key)
+            return null;
+
+        let raw = this.Storage.get(key, "");
+
+        if (!raw)
+            return null;
+
+        let value = parseInt(raw, 10);
+
+        if (isNaN(value))
+            return null;
+
+        return value;
+    }
+
+    saveStoredHeight(height: number)
+    {
+        let key = this.props.storage_key;
+
+        if (!key) return;
+
+        this.Storage.set(key, String(height));
+    }
+
+    adjustMasterToViewport()
+    {
+        let master_el = this.MasterPaneRef.current;
+
+        if (!master_el) return;
+
+        let master_top = master_el.getBoundingClientRect().top;
+        let gutter_height = this.GutterRef.current?.offsetHeight ?? 0;
+        let available_height = Math.max(MIN_MASTER_HEIGHT, window.innerHeight - master_top - gutter_height);
+        let content_height = this.measureContentHeight(master_el);
+        let height = Math.max(MIN_MASTER_HEIGHT, Math.min(available_height, content_height));
+
+        this.applyHeight(height);
+    }
+
+    measureContentHeight(master_el: HTMLDivElement): number
+    {
+        let previous_height = master_el.style.height;
+        let previous_min_height = master_el.style.minHeight;
+
+        master_el.style.height = "";
+        master_el.style.minHeight = "";
+
+        let content_height = master_el.offsetHeight;
+
+        master_el.style.height = previous_height;
+        master_el.style.minHeight = previous_min_height;
+
+        return content_height;
+    }
+
+    handleMouseDown(event: ReactMouseEvent)
+    {
+        let master_el = this.MasterPaneRef.current;
+
+        if (!master_el) return;
+
+        this.DragOffset = event.clientY - master_el.getBoundingClientRect().bottom;
+        this.IsDragging = true;
+
+        window.addEventListener("mousemove", this.handleMouseMove);
+        window.addEventListener("mouseup", this.handleMouseUp);
+        this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
+    }
+
+    handleMouseUp()
+    {
+        this.IsDragging = false;
+
+        window.removeEventListener("mousemove", this.handleMouseMove);
+        window.removeEventListener("mouseup", this.handleMouseUp);
+        this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
+
+        let master_el = this.MasterPaneRef.current;
+
+        if (master_el)
+            this.saveStoredHeight(master_el.offsetHeight);
+    }
+
+    handleMouseMove(event: MouseEvent)
+    {
+        if (this.AnimationFrame) return;
+
+        this.AnimationFrame = requestAnimationFrame(() =>
+        {
+            this.AnimationFrame = null;
+
+            let master_el = this.MasterPaneRef.current;
+
+            if (!master_el) return;
+
+            let master_top = master_el.getBoundingClientRect().top;
+            let height = Math.max(MIN_MASTER_HEIGHT, event.clientY - this.DragOffset - master_top);
+
+            this.applyHeight(height);
+            this.HasUserResized = true;
+        });
+    }
+
+    override render()
+    {
+        return (
+            <section ref={this.SplitterRef} className={Styles.ns_splitter}>
+                <div ref={this.MasterPaneRef} className={Styles.ns_splitter_master}                >
+                    {this.props.master_content}
+                </div>
+
+                <button ref={this.GutterRef} className={Styles.ns_splitter_gutter} onMouseDown={this.handleMouseDown}>
+                    <span className={Styles.ns_splitter_gutter_handle}></span>
+                </button>
+
+                <div className={Styles.ns_splitter_detail}>
+                    {this.props.detail_content}
+                </div>
+            </section>
+        )
+    }
 }

package/src/components/NSTabPage.module.css

@@ -1,60 +1,60 @@
-.ns_tab_page_panel {
-    border-radius: 8px;
-    overflow: hidden;
-    background: #141B5C;
-    padding: 16px;
-    width: 100%;
-}
-
-.ns_tab_page_panel ul.ns_tab_page_titles_container {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    overflow-x: auto;
-}
-
-.ns_tab_page_panel li.ns_tab_page_title {
-    text-align: center;
-    padding: 0px 16px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    border-right: 1px solid #fff;
-    margin: 14px 0;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
-    border-right: none;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
-    background-color: #fff;
-    border-radius: 8px 8px 0 0;
-    color: #141B5C;
-    margin: 0;
-    padding: 14px 16px;
-    box-shadow: 0px 2px 2px 2px #141B5C;
-}
-
-.ns_tab_content_column {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    gap: 0;
-    border-right: 1px solid #ccc;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-}
-
-/* .ns_tab_content_grid {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    display: grid !important;
-    gap: 0;
-    border-right: 1px solid #ccc;
+.ns_tab_page_panel {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C;
+    padding: 16px;
+    width: 100%;
+}
+
+.ns_tab_page_panel ul.ns_tab_page_titles_container {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow-x: auto;
+}
+
+.ns_tab_page_panel li.ns_tab_page_title {
+    text-align: center;
+    padding: 0px 16px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    border-right: 1px solid #fff;
+    margin: 14px 0;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
+    border-right: none;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
+    background-color: #fff;
+    border-radius: 8px 8px 0 0;
+    color: #141B5C;
+    margin: 0;
+    padding: 14px 16px;
+    box-shadow: 0px 2px 2px 2px #141B5C;
+}
+
+.ns_tab_content_column {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    gap: 0;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow-y: auto;
+}
+
+/* .ns_tab_content_grid {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    display: grid !important;
+    gap: 0;
+    border-right: 1px solid #ccc;
 } */