namirasoft-site-react 1.4.467 → 1.4.469

package/dist/components/NSTable.module.css

@@ -1,8 +1,8 @@
 .ns_table {
 	display: flex;
 	flex-direction: column;
-	color: rgba(20, 27, 92, 1);
 	overflow-x: auto;
+	color: rgba(20, 27, 92);
 }
 
 .ns_search_input {
@@ -23,7 +23,6 @@
 	z-index: -1;
 }
 
-
 .ns_table thead {
 	clip: rect(0 0 0 0);
 	position: fixed;
@@ -37,12 +36,12 @@
 	transition: all 0.2s ease-in-out;
 }
 
-/* .ns_table th {
-	margin: 8px;
-} */
+.ns_table tbody tr {
+	cursor: pointer;
+}
 
 .ns_table td {
-	display: -webkit-box;
+	display: flex;
 	flex-direction: row;
 	gap: 16px;
 	margin: 8px;
@@ -52,7 +51,7 @@
 	align-items: center;
 	color: #000;
 	height: max-content;
-	max-height: 50px;
+	max-height: 3rem;
 	line-clamp: 2;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
@@ -70,20 +69,20 @@
 	min-width: 30%;
 }
 
-.ns_tbody tr:nth-child(odd):hover {
-	background-color: rgb(184 190 240 / 57%);
+.ns_tbody tr:nth-child(odd) {
+	background-color: #f5f5f5;
 }
 
-.ns_tbody tr:nth-child(even):hover {
-	background-color: rgb(184 190 240 / 57%);
+.ns_tbody tr:nth-child(even) {
+	background-color: #ffffff;
 }
 
-.ns_tbody tr:nth-child(odd) {
-	background-color: #eaeaea;
+.ns_tbody tr:hover {
+	background-color: rgb(184, 190, 240, 0.32);
 }
 
-.ns_tbody tr:nth-child(even) {
-	background-color: #ffffff;
+.ns_tbody tr.ns_selected {
+	background-color: rgb(184, 190, 240, 0.64);
 }
 
 .ns_table_footer {
@@ -150,13 +149,7 @@
 	gap: 16px;
 }
 
-@media screen and (min-width: 992px) {
-	.ns_table tr {
-		border-radius: 8px;
-	}
-}
-
-@media screen and (max-width: 992px) {
+@media screen and (max-width: 991px) {
 	.ns_table td {
 		width: auto;
 	}
@@ -164,48 +157,81 @@
 
 @media screen and (min-width: 992px) {
 	.ns_table {
-		color: #000000;
-		background-color: white;
-		display: flex;
+		border-radius: 0.5rem;
 		justify-content: center;
+		color: #000;
+	}
+
+	.ns_table::-webkit-scrollbar {
+		height: 0.375rem;
+		border-radius: 0.25rem;
+	}
+
+	.ns_table::-webkit-scrollbar-track {
+		border-radius: 0.25rem;
+		background: #f0f0f0;
+	}
+
+	.ns_table::-webkit-scrollbar-thumb {
+		border-radius: 0.25rem;
+		background: #888;
+	}
+
+	.ns_table::-webkit-scrollbar-thumb:hover {
+		background: #555;
 	}
 
 	.ns_table thead {
 		position: static;
-		background-color: rgba(20, 27, 92, 1);
+		min-width: max-content;
 		border-top-left-radius: 8px;
 		border-top-right-radius: 8px;
-		min-width: max-content;
+	}
+
+	.ns_table thead tr {
+		background-color: rgba(20, 27, 92);
 	}
 
 	.ns_table tbody {
-		background-color: rgba(255, 255, 255, 1);
+		max-height: 32rem;
 		min-width: max-content;
+		background-color: #fff;
 	}
 
 	.ns_table tr {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		padding: 16px 8px;
 		margin: 0;
+		border: 1px solid transparent;
 		border-radius: 0;
-		border-bottom: 1px solid rgba(20, 27, 92, 0.3);
-		background-color: transparent;
+		padding: 4px 8px;
+		display: grid;
 		align-items: center;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+	}
+
+	.ns_table tr.ns_selected,
+	.ns_table tr.ns_last_selected {
+		border-color: rgba(20, 27, 92);
+	}
+
+	.ns_table tr.ns_selected+tr,
+	.ns_table tr.ns_last_selected+tr {
+		border-top-color: transparent;
 	}
 
 	.ns_table th {
-		font-size: 16px;
-		font-weight: 300;
-		color: #ffffff;
-		padding: 0;
 		margin: 8px;
+		padding: 0;
+		font-size: 16px;
+		font-weight: 500;
+		line-height: 1.5rem;
+		color: #fff;
 	}
 
 	.ns_table td {
-		text-align: left;
 		align-items: flex-start;
+		line-height: 1.5rem;
+		text-align: left;
 	}
 
 	.ns_table td::before {

package/dist/formatter/BaseURLImageFormatter.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseColumnFormatter } from "./BaseColumnFormatter";
 export class BaseURLImageFormatter extends BaseColumnFormatter {
     constructor(width = "250px") {
@@ -7,8 +7,8 @@ export class BaseURLImageFormatter extends BaseColumnFormatter {
     }
     format(value, _, __, printable) {
         if (!printable) {
-            return (_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [value.image.url &&
-                        _jsxs(_Fragment, { children: ["\u00A0", _jsx("img", { src: value.image.url, alt: value.image.alt, style: { width: "20px", height: "20px" } })] }), _jsx("a", { href: value.href, target: "_blank", rel: "noreferrer", style: { width: "max-content" }, children: value.text })] }));
+            return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [value.image.url &&
+                        _jsx("img", { src: value.image.url, alt: value.image.alt, style: { width: "20px", height: "20px" } }), _jsx("a", { href: value.href, target: "_blank", rel: "noreferrer", style: { width: "max-content" }, children: value.text })] }));
         }
         return value.text;
     }

package/dist/formatter/BaseURLImageFormatter.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseURLImageFormatter.js","sourceRoot":"","sources":["../../src/formatter/BaseURLImageFormatter.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAE1D,YAAY,QAAgB,OAAO;QAE/B,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IACQ,MAAM,CAAC,KAIf,EAAE,CAAmB,EAAE,EAAsB,EAAE,SAAmB;QAE/D,IAAI,CAAC,SAAS,EACd,CAAC;YACG,OAAO,CACH,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAE7C,KAAK,CAAC,KAAK,CAAC,GAAG;wBACf,wCAEI,cAAK,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,IAC9F,EAEP,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,YAAG,KAAK,CAAC,IAAI,GAAK,IACpG,CACV,CAAC;QACN,CAAC;QACD,OAAO,KAAK,CAAC,IAAI,CAAC;IACtB,CAAC;CACJ"}
+{"version":3,"file":"BaseURLImageFormatter.js","sourceRoot":"","sources":["../../src/formatter/BaseURLImageFormatter.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAE1D,YAAY,QAAgB,OAAO;QAE/B,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IACQ,MAAM,CAAC,KAIf,EAAE,CAAmB,EAAE,EAAsB,EAAE,SAAmB;QAE/D,IAAI,CAAC,SAAS,EACd,CAAC;YACG,OAAO,CACH,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,aAEzD,KAAK,CAAC,KAAK,CAAC,GAAG;wBACf,cAAK,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,EAEjG,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,YAAG,KAAK,CAAC,IAAI,GAAK,IACpG,CACV,CAAC;QACN,CAAC;QACD,OAAO,KAAK,CAAC,IAAI,CAAC;IACtB,CAAC;CACJ"}

package/dist/formatter/EmailFormatter.js

@@ -10,7 +10,7 @@ export class EmailFormatter extends BaseColumnFormatter {
     format(value, column, row, printable) {
         return this.formatter.format({
             text: value,
-            href: `email:${value}`,
+            href: `mailto:${value}`,
             image: { url: "https://static.namirasoft.com/image/concept/type/email.png", alt: "phone" }
         }, column, row, printable);
     }

package/dist/formatter/EmailFormatter.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailFormatter.js","sourceRoot":"","sources":["../../src/formatter/EmailFormatter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,OAAO,cAAe,SAAQ,mBAAmB;IAGnD,YAAY,QAAgB,OAAO;QAE/B,KAAK,EAAE,CAAC;QAHJ,cAAS,GAA0B,IAAI,qBAAqB,EAAE,CAAC;QAInE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IACQ,MAAM,CAAC,KAAU,EAAE,MAAuB,EAAE,GAAsB,EAAE,SAAkB;QAE3F,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;YACzB,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,SAAS,KAAK,EAAE;YACtB,KAAK,EAAE,EAAE,GAAG,EAAE,4DAA4D,EAAE,GAAG,EAAE,OAAO,EAAE;SAC7F,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;IAC/B,CAAC;CACJ"}
+{"version":3,"file":"EmailFormatter.js","sourceRoot":"","sources":["../../src/formatter/EmailFormatter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,OAAO,cAAe,SAAQ,mBAAmB;IAGnD,YAAY,QAAgB,OAAO;QAE/B,KAAK,EAAE,CAAC;QAHJ,cAAS,GAA0B,IAAI,qBAAqB,EAAE,CAAC;QAInE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IACQ,MAAM,CAAC,KAAU,EAAE,MAAuB,EAAE,GAAsB,EAAE,SAAkB;QAE3F,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;YACzB,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,UAAU,KAAK,EAAE;YACvB,KAAK,EAAE,EAAE,GAAG,EAAE,4DAA4D,EAAE,GAAG,EAAE,OAAO,EAAE;SAC7F,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;IAC/B,CAAC;CACJ"}

package/package.json

@@ -8,7 +8,7 @@
 	"framework": "npm",
 	"application": "package",
 	"private": false,
-	"version": "1.4.467",
+	"version": "1.4.469",
 	"author": "Amir Abolhasani",
 	"license": "MIT",
 	"main": "./dist/main.js",
@@ -21,7 +21,7 @@
 		"copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
 	},
 	"dependencies": {
-		"@ant-design/charts": "^2.6.4",
+		"@ant-design/charts": "^2.6.5",
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 		"@types/node": "^24.5.2",
 		"@types/react": "^18.3.12",

package/src/App.tsx

@@ -1,17 +1,14 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { Component, createRef } from 'react';
+import { Component } from 'react';
 import './App.css';
-import { NSBoxEntity } from './components/NSBoxEntity';
 import { NSLayout } from './components/NSLayout';
-import { NSSection } from './components/NSSection';
-import { NSButtonBlue, NSColumn } from './main';
+import { EmailFormatter, IntegerFormatter, NSTable, PhoneFormatter, StringFormatter, StringFormatterSizeType } from './main';
+import { NSSplitter } from './components/NSSplitter';
 
 interface AppProps { }
 
 export class App extends Component<AppProps>
 {
-    private Box = createRef<NSBoxEntity<{ id: string, value: string }>>();
-
     override render()
     {
         return (
@@ -34,37 +31,43 @@ export class App extends Component<AppProps>
                 notifier={{} as any}
                 scope=''
             >
-                <NSSection style={{ paddingTop: "3rem" }}>
-                    <NSColumn>
-                        <NSBoxEntity<{ id: string, value: string }>
-                            ref={this.Box}
-                            title="Test Entity Box"
-                            getTitle={item => item.value}
-                            getValue={item => item.value}
-                            multiple
-                            required
-                            table_name="product"
-                            defaultValue={["Mohammad"]}
-                            list={async () => ({
-                                rows: [
-                                    { id: "a1", value: "Amin" },
-                                    { id: "b2", value: "Negar" },
-                                    { id: "c3", value: "Hadis" },
-                                    { id: "d4", value: "Lida" },
-                                ],
-                                count: 4,
-                            })}
-                            getSort={() => null}
-                        />
-                        <NSButtonBlue
-                            title='Set Value'
-                            onClick={{
-                                action: () => this.Box.current?.setValue(["Milad"]),
-                                showLoading: false
+                <NSSplitter
+                    master_content={
+                        <NSTable<{ id: string, first_name: string, last_name: string, age: number, phone: string, email: string, bio: string }>
+                            name='users'
+                            checkbox
+                            getRows={async () =>
+                            {
+                                return {
+                                    count: 10,
+                                    rows: [
+                                        { id: "a1", first_name: "Amin", last_name: "Pasban", age: 27, phone: "09117579093", email: "amin.cj0077@gmail.com", bio: "Loves literature and writing, constantly seeking." },
+                                        { id: "a2", first_name: "Sara", last_name: "Moradi", age: 24, phone: "09123456781", email: "sara.moradi@example.com", bio: "Passionate about design and technology, enjoys." },
+                                        { id: "a3", first_name: "Reza", last_name: "Karimi", age: 31, phone: "09129876542", email: "reza.karimi@example.com", bio: "Software engineer with experience in backend system." },
+                                        { id: "a4", first_name: "Niloofar", last_name: "Ahmadi", age: 29, phone: "09351234567", email: "niloofar.ahmadi@example.com", bio: "Enthusiastic about art and photography." },
+                                        { id: "a5", first_name: "Hossein", last_name: "Bagheri", age: 35, phone: "09134561234", email: "hossein.bagheri@example.com", bio: "Expert in finance and investment, passionate about." },
+                                        { id: "a6", first_name: "Maryam", last_name: "Shahbazi", age: 26, phone: "09141239876", email: "maryam.shahbazi@example.com", bio: "Loves literature and writing, constantly seeking." },
+                                        { id: "a7", first_name: "Ali", last_name: "Rostami", age: 28, phone: "09151237654", email: "ali.rostami@example.com", bio: "Tech enthusiast and full-stack developer, enjoys contributing." },
+                                        { id: "a8", first_name: "Fatemeh", last_name: "Jafari", age: 30, phone: "09361234589", email: "fatemeh.jafari@example.com", bio: "Interested in psychology and self-development, spends." },
+                                        { id: "a9", first_name: "Mohammad", last_name: "Esfandiari", age: 33, phone: "09162348752", email: "mohammad.esfandiari@example.com", bio: "Specialized in marketing strategies, creative thinker." },
+                                        { id: "b1", first_name: "Elham", last_name: "Khosravi", age: 25, phone: "09203456781", email: "elham.khosravi@example.com", bio: "Graphic designer with a flair for modern art." }
+                                    ]
+                                }
                             }}
+                            getRowKey={(item) => item.value.id}
+                            columns={[
+                                { index: 0, name: "id", text: "ID", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.Word) },
+                                { index: 0, name: "first_name", text: "First Name", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.TwoWords) },
+                                { index: 0, name: "last_name", text: "Last Name", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.TwoWords) },
+                                { index: 0, name: "age", text: "Age", table: { name: "users", text: "users" }, formatter: new IntegerFormatter() },
+                                { index: 0, name: "phone", text: "Phone Number", table: { name: "users", text: "users" }, formatter: new PhoneFormatter() },
+                                { index: 0, name: "email", text: "Email Address", table: { name: "users", text: "users" }, formatter: new EmailFormatter() },
+                                { index: 0, name: "bio", text: "Bio", table: { name: "users", text: "users" }, formatter: new StringFormatter(StringFormatterSizeType.Description) },
+                            ]}
                         />
-                    </NSColumn>
-                </NSSection>
+                    }
+                    detail_content={<></>}
+                />
             </NSLayout>
         );
     }

package/src/components/NSSplitter.module.css

@@ -0,0 +1,73 @@
+.ns_splitter_gutter {
+    display: none;
+}
+
+@media only screen and (min-width: 992px) {
+    .ns_splitter {
+        height: calc(100dvh - 5.5rem);
+        min-height: 40rem;
+        border: 1px solid #e1e1e1;
+        border-radius: 1rem;
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+    }
+
+    .ns_splitter.ns_splitter_resizing,
+    .ns_splitter.ns_splitter_resizing * {
+        cursor: row-resize !important;
+    }
+
+    .ns_splitter_master,
+    .ns_splitter_detail {
+        margin: 0.5rem 0;
+        padding: 0 0.5rem;
+        flex-grow: 1;
+        flex-basis: calc(50% - 0.25rem);
+        overflow: auto;
+
+    }
+
+    .ns_splitter_master::-webkit-scrollbar,
+    .ns_splitter_detail::-webkit-scrollbar {
+        width: 0.375rem;
+        border-radius: 0.25rem;
+    }
+
+    .ns_splitter_master::-webkit-scrollbar-track,
+    .ns_splitter_detail::-webkit-scrollbar-track {
+        border-radius: 0.25rem;
+        background: #f0f0f0;
+    }
+
+    .ns_splitter_master::-webkit-scrollbar-thumb,
+    .ns_splitter_detail::-webkit-scrollbar-thumb {
+        border-radius: 0.25rem;
+        background: #888;
+    }
+
+    .ns_splitter_master::-webkit-scrollbar-thumb:hover,
+    .ns_splitter_detail::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    .ns_splitter_gutter {
+        position: relative;
+        width: 100%;
+        height: 0.25rem;
+        outline: none;
+        border: none;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        background-color: #e1e1e1;
+        cursor: row-resize !important;
+    }
+
+    .ns_splitter_gutter_handle {
+        width: 1.5rem;
+        height: 0.25rem;
+        border-radius: 0.125rem;
+        background-color: #9a9a9a;
+    }
+}

package/src/components/NSSplitter.tsx

@@ -0,0 +1,99 @@
+import { Component, createRef, ReactNode } from "react";
+import Styles from "./NSSplitter.module.css";
+
+export interface NSSplitterProps
+{
+    master_content?: ReactNode;
+    detail_content?: ReactNode;
+}
+
+export class NSSplitter extends Component<NSSplitterProps>
+{
+    private SplitterRef = createRef<HTMLElement>();
+    private MasterPaneRef = createRef<HTMLDivElement>();
+    private DetailPaneRef = createRef<HTMLDivElement>();
+    private AnimationFrame: number | null = null;
+
+    constructor(props: NSSplitterProps)
+    {
+        super(props);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+    }
+
+    handleMouseDown()
+    {
+        this.SplitterRef.current?.addEventListener("mousemove", this.handleMouseMove);
+        this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
+        window.addEventListener("mouseup", this.handleMouseUp);
+    }
+
+    handleMouseUp()
+    {
+        this.SplitterRef.current?.removeEventListener("mousemove", this.handleMouseMove);
+        this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
+        window.removeEventListener("mouseup", this.handleMouseUp)
+    }
+
+    handleMouseMove(event: MouseEvent)
+    {
+        if (this.AnimationFrame) return;
+
+        this.AnimationFrame = requestAnimationFrame(() =>
+        {
+            this.AnimationFrame = null;
+
+            let splitter_el = this.SplitterRef.current;
+            let master_el = this.MasterPaneRef.current;
+            let detail_el = this.DetailPaneRef.current;
+
+            if (!splitter_el || !master_el || !detail_el) return;
+
+            let delta = event.clientY - master_el.getBoundingClientRect().bottom;
+
+            let master_el_percent = ((master_el.clientHeight + delta) * 100) / (splitter_el.clientHeight - 16);
+            master_el_percent = Math.max(20, Math.min(master_el_percent, 80));
+            master_el_percent = +master_el_percent.toFixed(2);
+
+            master_el.style.flexBasis = `calc(${master_el_percent}% - 4px)`;
+            detail_el.style.flexBasis = `calc(${100 - master_el_percent}% - 4px)`;
+        });
+    }
+
+    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>
+
+                {
+                    this.props.detail_content &&
+                    <>
+                        <button
+                            className={Styles.ns_splitter_gutter}
+                            onMouseDown={this.handleMouseDown}
+                        >
+                            <span className={Styles.ns_splitter_gutter_handle}></span>
+                        </button>
+
+                        <div
+                            ref={this.DetailPaneRef}
+                            className={Styles.ns_splitter_detail}
+                        >
+                            {this.props.detail_content}
+                        </div>
+                    </>
+                }
+            </section>
+        )
+    }
+}