namirasoft-site-react 1.4.557 → 1.4.559
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,6 +2,7 @@ import { Component, MouseEvent as ReactMouseEvent, ReactNode } from "react";
|
|
|
2
2
|
export interface NSSplitterProps {
|
|
3
3
|
master_content?: ReactNode;
|
|
4
4
|
detail_content?: ReactNode;
|
|
5
|
+
storage_key?: string;
|
|
5
6
|
}
|
|
6
7
|
export declare class NSSplitter extends Component<NSSplitterProps> {
|
|
7
8
|
private SplitterRef;
|
|
@@ -11,12 +12,16 @@ export declare class NSSplitter extends Component<NSSplitterProps> {
|
|
|
11
12
|
private DragOffset;
|
|
12
13
|
private HasUserResized;
|
|
13
14
|
private MediaQuery;
|
|
15
|
+
private Storage;
|
|
14
16
|
constructor(props: NSSplitterProps);
|
|
15
17
|
componentDidMount(): void;
|
|
16
18
|
componentDidUpdate(prevProps: NSSplitterProps): void;
|
|
17
19
|
componentWillUnmount(): void;
|
|
18
20
|
handleViewportChange(): void;
|
|
19
21
|
updateLayout(force: boolean): void;
|
|
22
|
+
applyHeight(height: number): void;
|
|
23
|
+
loadStoredHeight(): number | null;
|
|
24
|
+
saveStoredHeight(height: number): void;
|
|
20
25
|
adjustMasterToViewport(): void;
|
|
21
26
|
handleMouseDown(event: ReactMouseEvent): void;
|
|
22
27
|
handleMouseUp(): void;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Component, createRef } from "react";
|
|
3
|
+
import { IStorageLocal } from "namirasoft-core";
|
|
3
4
|
import Styles from "./NSSplitter.module.css";
|
|
4
|
-
const MIN_MASTER_HEIGHT =
|
|
5
|
+
const MIN_MASTER_HEIGHT = 240;
|
|
5
6
|
export class NSSplitter extends Component {
|
|
6
7
|
constructor(props) {
|
|
7
8
|
super(props);
|
|
@@ -12,6 +13,7 @@ export class NSSplitter extends Component {
|
|
|
12
13
|
this.DragOffset = 0;
|
|
13
14
|
this.HasUserResized = false;
|
|
14
15
|
this.MediaQuery = null;
|
|
16
|
+
this.Storage = new IStorageLocal();
|
|
15
17
|
this.handleMouseDown = this.handleMouseDown.bind(this);
|
|
16
18
|
this.handleMouseUp = this.handleMouseUp.bind(this);
|
|
17
19
|
this.handleMouseMove = this.handleMouseMove.bind(this);
|
|
@@ -21,6 +23,8 @@ export class NSSplitter extends Component {
|
|
|
21
23
|
this.MediaQuery = window.matchMedia("(min-width: 992px)");
|
|
22
24
|
this.MediaQuery.addEventListener("change", this.handleViewportChange);
|
|
23
25
|
window.addEventListener("resize", this.handleViewportChange);
|
|
26
|
+
if (this.loadStoredHeight() !== null)
|
|
27
|
+
this.HasUserResized = true;
|
|
24
28
|
this.updateLayout(true);
|
|
25
29
|
}
|
|
26
30
|
componentDidUpdate(prevProps) {
|
|
@@ -48,7 +52,10 @@ export class NSSplitter extends Component {
|
|
|
48
52
|
if (!master_el || !this.MediaQuery)
|
|
49
53
|
return;
|
|
50
54
|
if (this.MediaQuery.matches && this.props.detail_content) {
|
|
51
|
-
|
|
55
|
+
let stored = this.loadStoredHeight();
|
|
56
|
+
if (stored !== null)
|
|
57
|
+
this.applyHeight(Math.max(MIN_MASTER_HEIGHT, stored));
|
|
58
|
+
else if (force || !this.HasUserResized)
|
|
52
59
|
this.adjustMasterToViewport();
|
|
53
60
|
}
|
|
54
61
|
else {
|
|
@@ -56,6 +63,31 @@ export class NSSplitter extends Component {
|
|
|
56
63
|
master_el.style.minHeight = "";
|
|
57
64
|
}
|
|
58
65
|
}
|
|
66
|
+
applyHeight(height) {
|
|
67
|
+
let master_el = this.MasterPaneRef.current;
|
|
68
|
+
if (master_el) {
|
|
69
|
+
master_el.style.height = height + "px";
|
|
70
|
+
master_el.style.minHeight = height + "px";
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
loadStoredHeight() {
|
|
74
|
+
let key = this.props.storage_key;
|
|
75
|
+
if (!key)
|
|
76
|
+
return null;
|
|
77
|
+
let raw = this.Storage.get(key, "");
|
|
78
|
+
if (!raw)
|
|
79
|
+
return null;
|
|
80
|
+
let value = parseInt(raw, 10);
|
|
81
|
+
if (isNaN(value))
|
|
82
|
+
return null;
|
|
83
|
+
return value;
|
|
84
|
+
}
|
|
85
|
+
saveStoredHeight(height) {
|
|
86
|
+
let key = this.props.storage_key;
|
|
87
|
+
if (!key)
|
|
88
|
+
return;
|
|
89
|
+
this.Storage.set(key, String(height));
|
|
90
|
+
}
|
|
59
91
|
adjustMasterToViewport() {
|
|
60
92
|
var _a, _b;
|
|
61
93
|
let master_el = this.MasterPaneRef.current;
|
|
@@ -64,8 +96,7 @@ export class NSSplitter extends Component {
|
|
|
64
96
|
let master_top = master_el.getBoundingClientRect().top;
|
|
65
97
|
let gutter_height = (_b = (_a = this.GutterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
|
|
66
98
|
let height = Math.max(MIN_MASTER_HEIGHT, window.innerHeight - master_top - gutter_height);
|
|
67
|
-
|
|
68
|
-
master_el.style.minHeight = height + "px";
|
|
99
|
+
this.applyHeight(height);
|
|
69
100
|
}
|
|
70
101
|
handleMouseDown(event) {
|
|
71
102
|
var _a;
|
|
@@ -82,6 +113,9 @@ export class NSSplitter extends Component {
|
|
|
82
113
|
window.removeEventListener("mousemove", this.handleMouseMove);
|
|
83
114
|
window.removeEventListener("mouseup", this.handleMouseUp);
|
|
84
115
|
(_a = this.SplitterRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(Styles.ns_splitter_resizing);
|
|
116
|
+
let master_el = this.MasterPaneRef.current;
|
|
117
|
+
if (master_el)
|
|
118
|
+
this.saveStoredHeight(master_el.offsetHeight);
|
|
85
119
|
}
|
|
86
120
|
handleMouseMove(event) {
|
|
87
121
|
if (this.AnimationFrame)
|
|
@@ -93,14 +127,12 @@ export class NSSplitter extends Component {
|
|
|
93
127
|
return;
|
|
94
128
|
let master_top = master_el.getBoundingClientRect().top;
|
|
95
129
|
let height = Math.max(MIN_MASTER_HEIGHT, event.clientY - this.DragOffset - master_top);
|
|
96
|
-
|
|
97
|
-
master_el.style.minHeight = height + "px";
|
|
130
|
+
this.applyHeight(height);
|
|
98
131
|
this.HasUserResized = true;
|
|
99
132
|
});
|
|
100
133
|
}
|
|
101
134
|
render() {
|
|
102
|
-
return (_jsxs("section", { ref: this.SplitterRef, className: Styles.ns_splitter, children: [_jsx("div", { ref: this.MasterPaneRef, className: Styles.ns_splitter_master, children: this.props.master_content }), this.props.detail_content
|
|
103
|
-
_jsxs(_Fragment, { children: [_jsx("button", { ref: this.GutterRef, className: Styles.ns_splitter_gutter, onMouseDown: this.handleMouseDown, children: _jsx("span", { className: Styles.ns_splitter_gutter_handle }) }), _jsx("div", { className: Styles.ns_splitter_detail, children: this.props.detail_content })] })] }));
|
|
135
|
+
return (_jsxs("section", { ref: this.SplitterRef, className: Styles.ns_splitter, children: [_jsx("div", { ref: this.MasterPaneRef, className: Styles.ns_splitter_master, children: this.props.master_content }), _jsx("button", { ref: this.GutterRef, className: Styles.ns_splitter_gutter, onMouseDown: this.handleMouseDown, children: _jsx("span", { className: Styles.ns_splitter_gutter_handle }) }), _jsx("div", { className: Styles.ns_splitter_detail, children: this.props.detail_content })] }));
|
|
104
136
|
}
|
|
105
137
|
}
|
|
106
138
|
//# sourceMappingURL=NSSplitter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSSplitter.js","sourceRoot":"","sources":["../../src/components/NSSplitter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C,MAAM,iBAAiB,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"NSSplitter.js","sourceRoot":"","sources":["../../src/components/NSSplitter.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"framework": "npm",
|
|
9
9
|
"application": "package",
|
|
10
10
|
"private": false,
|
|
11
|
-
"version": "1.4.
|
|
11
|
+
"version": "1.4.559",
|
|
12
12
|
"author": "Amir Abolhasani",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"main": "./dist/main.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@ant-design/icons": "^6.2.5",
|
|
25
25
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
26
26
|
"@babel/plugin-transform-private-property-in-object": "^7.29.7",
|
|
27
|
-
"@types/node": "^
|
|
27
|
+
"@types/node": "^26.0.0",
|
|
28
28
|
"@types/react": "^18.3.12",
|
|
29
29
|
"@types/react-bootstrap": "^1.1.0",
|
|
30
30
|
"@types/react-dom": "^18.3.1",
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { Component, createRef, MouseEvent as ReactMouseEvent, ReactNode } from "react";
|
|
2
|
+
import { IStorageLocal } from "namirasoft-core";
|
|
2
3
|
import Styles from "./NSSplitter.module.css";
|
|
3
4
|
|
|
4
|
-
const MIN_MASTER_HEIGHT =
|
|
5
|
+
const MIN_MASTER_HEIGHT = 240;
|
|
5
6
|
|
|
6
7
|
export interface NSSplitterProps
|
|
7
8
|
{
|
|
8
9
|
master_content?: ReactNode;
|
|
9
10
|
detail_content?: ReactNode;
|
|
11
|
+
storage_key?: string;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
export class NSSplitter extends Component<NSSplitterProps>
|
|
@@ -18,6 +20,7 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
18
20
|
private DragOffset = 0;
|
|
19
21
|
private HasUserResized = false;
|
|
20
22
|
private MediaQuery: MediaQueryList | null = null;
|
|
23
|
+
private Storage = new IStorageLocal();
|
|
21
24
|
|
|
22
25
|
constructor(props: NSSplitterProps)
|
|
23
26
|
{
|
|
@@ -33,6 +36,10 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
33
36
|
this.MediaQuery = window.matchMedia("(min-width: 992px)");
|
|
34
37
|
this.MediaQuery.addEventListener("change", this.handleViewportChange);
|
|
35
38
|
window.addEventListener("resize", this.handleViewportChange);
|
|
39
|
+
|
|
40
|
+
if (this.loadStoredHeight() !== null)
|
|
41
|
+
this.HasUserResized = true;
|
|
42
|
+
|
|
36
43
|
this.updateLayout(true);
|
|
37
44
|
}
|
|
38
45
|
|
|
@@ -71,7 +78,12 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
71
78
|
|
|
72
79
|
if (this.MediaQuery.matches && this.props.detail_content)
|
|
73
80
|
{
|
|
74
|
-
|
|
81
|
+
let stored = this.loadStoredHeight();
|
|
82
|
+
|
|
83
|
+
if (stored !== null)
|
|
84
|
+
this.applyHeight(Math.max(MIN_MASTER_HEIGHT, stored));
|
|
85
|
+
else if (force || !this.HasUserResized)
|
|
86
|
+
this.adjustMasterToViewport();
|
|
75
87
|
}
|
|
76
88
|
else
|
|
77
89
|
{
|
|
@@ -80,6 +92,46 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
80
92
|
}
|
|
81
93
|
}
|
|
82
94
|
|
|
95
|
+
applyHeight(height: number)
|
|
96
|
+
{
|
|
97
|
+
let master_el = this.MasterPaneRef.current;
|
|
98
|
+
|
|
99
|
+
if (master_el)
|
|
100
|
+
{
|
|
101
|
+
master_el.style.height = height + "px";
|
|
102
|
+
master_el.style.minHeight = height + "px";
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
loadStoredHeight(): number | null
|
|
107
|
+
{
|
|
108
|
+
let key = this.props.storage_key;
|
|
109
|
+
|
|
110
|
+
if (!key)
|
|
111
|
+
return null;
|
|
112
|
+
|
|
113
|
+
let raw = this.Storage.get(key, "");
|
|
114
|
+
|
|
115
|
+
if (!raw)
|
|
116
|
+
return null;
|
|
117
|
+
|
|
118
|
+
let value = parseInt(raw, 10);
|
|
119
|
+
|
|
120
|
+
if (isNaN(value))
|
|
121
|
+
return null;
|
|
122
|
+
|
|
123
|
+
return value;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
saveStoredHeight(height: number)
|
|
127
|
+
{
|
|
128
|
+
let key = this.props.storage_key;
|
|
129
|
+
|
|
130
|
+
if (!key) return;
|
|
131
|
+
|
|
132
|
+
this.Storage.set(key, String(height));
|
|
133
|
+
}
|
|
134
|
+
|
|
83
135
|
adjustMasterToViewport()
|
|
84
136
|
{
|
|
85
137
|
let master_el = this.MasterPaneRef.current;
|
|
@@ -90,8 +142,7 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
90
142
|
let gutter_height = this.GutterRef.current?.offsetHeight ?? 0;
|
|
91
143
|
let height = Math.max(MIN_MASTER_HEIGHT, window.innerHeight - master_top - gutter_height);
|
|
92
144
|
|
|
93
|
-
|
|
94
|
-
master_el.style.minHeight = height + "px";
|
|
145
|
+
this.applyHeight(height);
|
|
95
146
|
}
|
|
96
147
|
|
|
97
148
|
handleMouseDown(event: ReactMouseEvent)
|
|
@@ -112,6 +163,11 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
112
163
|
window.removeEventListener("mousemove", this.handleMouseMove);
|
|
113
164
|
window.removeEventListener("mouseup", this.handleMouseUp);
|
|
114
165
|
this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
|
|
166
|
+
|
|
167
|
+
let master_el = this.MasterPaneRef.current;
|
|
168
|
+
|
|
169
|
+
if (master_el)
|
|
170
|
+
this.saveStoredHeight(master_el.offsetHeight);
|
|
115
171
|
}
|
|
116
172
|
|
|
117
173
|
handleMouseMove(event: MouseEvent)
|
|
@@ -129,8 +185,7 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
129
185
|
let master_top = master_el.getBoundingClientRect().top;
|
|
130
186
|
let height = Math.max(MIN_MASTER_HEIGHT, event.clientY - this.DragOffset - master_top);
|
|
131
187
|
|
|
132
|
-
|
|
133
|
-
master_el.style.minHeight = height + "px";
|
|
188
|
+
this.applyHeight(height);
|
|
134
189
|
this.HasUserResized = true;
|
|
135
190
|
});
|
|
136
191
|
}
|
|
@@ -149,22 +204,17 @@ export class NSSplitter extends Component<NSSplitterProps>
|
|
|
149
204
|
{this.props.master_content}
|
|
150
205
|
</div>
|
|
151
206
|
|
|
152
|
-
|
|
153
|
-
this.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<div className={Styles.ns_splitter_detail}>
|
|
164
|
-
{this.props.detail_content}
|
|
165
|
-
</div>
|
|
166
|
-
</>
|
|
167
|
-
}
|
|
207
|
+
<button
|
|
208
|
+
ref={this.GutterRef}
|
|
209
|
+
className={Styles.ns_splitter_gutter}
|
|
210
|
+
onMouseDown={this.handleMouseDown}
|
|
211
|
+
>
|
|
212
|
+
<span className={Styles.ns_splitter_gutter_handle}></span>
|
|
213
|
+
</button>
|
|
214
|
+
|
|
215
|
+
<div className={Styles.ns_splitter_detail}>
|
|
216
|
+
{this.props.detail_content}
|
|
217
|
+
</div>
|
|
168
218
|
</section>
|
|
169
219
|
)
|
|
170
220
|
}
|