namirasoft-site-react 1.4.556 → 1.4.557

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.
Files changed (7) hide show
  1. package/dist/components/NSSplitter.d.ts +12 -3
  2. package/dist/components/NSSplitter.js +73 -15
  3. package/dist/components/NSSplitter.js.map +1 -1
  4. package/dist/components/NSSplitter.module.css +1 -0
  5. package/package.json +1 -1
  6. package/src/components/NSSplitter.module.css +1 -0
  7. package/src/components/NSSplitter.tsx +93 -18
package/dist/components/NSSplitter.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, ReactNode } from "react";
1
+ import { Component, MouseEvent as ReactMouseEvent, ReactNode } from "react";
2
2
  export interface NSSplitterProps {
3
3
  master_content?: ReactNode;
4
4
  detail_content?: ReactNode;
@@ -6,10 +6,19 @@ export interface NSSplitterProps {
6
6
  export declare class NSSplitter extends Component<NSSplitterProps> {
7
7
  private SplitterRef;
8
8
  private MasterPaneRef;
9
- private DetailPaneRef;
9
+ private GutterRef;
10
10
  private AnimationFrame;
11
+ private DragOffset;
12
+ private HasUserResized;
13
+ private MediaQuery;
11
14
  constructor(props: NSSplitterProps);
12
- handleMouseDown(): void;
15
+ componentDidMount(): void;
16
+ componentDidUpdate(prevProps: NSSplitterProps): void;
17
+ componentWillUnmount(): void;
18
+ handleViewportChange(): void;
19
+ updateLayout(force: boolean): void;
20
+ adjustMasterToViewport(): void;
21
+ handleMouseDown(event: ReactMouseEvent): void;
13
22
  handleMouseUp(): void;
14
23
  handleMouseMove(event: MouseEvent): void;
15
24
  render(): import("react").JSX.Element;
package/dist/components/NSSplitter.js CHANGED
@@ -1,48 +1,106 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Component, createRef } from "react";
3
3
  import Styles from "./NSSplitter.module.css";
4
+ const MIN_MASTER_HEIGHT = 238;
4
5
  export class NSSplitter extends Component {
5
6
  constructor(props) {
6
7
  super(props);
7
8
  this.SplitterRef = createRef();
8
9
  this.MasterPaneRef = createRef();
9
- this.DetailPaneRef = createRef();
10
+ this.GutterRef = createRef();
10
11
  this.AnimationFrame = null;
12
+ this.DragOffset = 0;
13
+ this.HasUserResized = false;
14
+ this.MediaQuery = null;
11
15
  this.handleMouseDown = this.handleMouseDown.bind(this);
12
16
  this.handleMouseUp = this.handleMouseUp.bind(this);
13
17
  this.handleMouseMove = this.handleMouseMove.bind(this);
18
+ this.handleViewportChange = this.handleViewportChange.bind(this);
14
19
  }
15
- handleMouseDown() {
20
+ componentDidMount() {
21
+ this.MediaQuery = window.matchMedia("(min-width: 992px)");
22
+ this.MediaQuery.addEventListener("change", this.handleViewportChange);
23
+ window.addEventListener("resize", this.handleViewportChange);
24
+ this.updateLayout(true);
25
+ }
26
+ componentDidUpdate(prevProps) {
27
+ let had_detail = !!prevProps.detail_content;
28
+ let has_detail = !!this.props.detail_content;
29
+ if (had_detail !== has_detail) {
30
+ this.HasUserResized = false;
31
+ this.updateLayout(true);
32
+ }
33
+ }
34
+ componentWillUnmount() {
35
+ var _a;
36
+ (_a = this.MediaQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.handleViewportChange);
37
+ window.removeEventListener("resize", this.handleViewportChange);
38
+ window.removeEventListener("mousemove", this.handleMouseMove);
39
+ window.removeEventListener("mouseup", this.handleMouseUp);
40
+ if (this.AnimationFrame)
41
+ cancelAnimationFrame(this.AnimationFrame);
42
+ }
43
+ handleViewportChange() {
44
+ this.updateLayout(false);
45
+ }
46
+ updateLayout(force) {
47
+ let master_el = this.MasterPaneRef.current;
48
+ if (!master_el || !this.MediaQuery)
49
+ return;
50
+ if (this.MediaQuery.matches && this.props.detail_content) {
51
+ if (force || !this.HasUserResized)
52
+ this.adjustMasterToViewport();
53
+ }
54
+ else {
55
+ master_el.style.height = "";
56
+ master_el.style.minHeight = "";
57
+ }
58
+ }
59
+ adjustMasterToViewport() {
16
60
  var _a, _b;
17
- (_a = this.SplitterRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousemove", this.handleMouseMove);
18
- (_b = this.SplitterRef.current) === null || _b === void 0 ? void 0 : _b.classList.add(Styles.ns_splitter_resizing);
61
+ let master_el = this.MasterPaneRef.current;
62
+ if (!master_el)
63
+ return;
64
+ let master_top = master_el.getBoundingClientRect().top;
65
+ let gutter_height = (_b = (_a = this.GutterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
66
+ let height = Math.max(MIN_MASTER_HEIGHT, window.innerHeight - master_top - gutter_height);
67
+ master_el.style.height = height + "px";
68
+ master_el.style.minHeight = height + "px";
69
+ }
70
+ handleMouseDown(event) {
71
+ var _a;
72
+ let master_el = this.MasterPaneRef.current;
73
+ if (!master_el)
74
+ return;
75
+ this.DragOffset = event.clientY - master_el.getBoundingClientRect().bottom;
76
+ window.addEventListener("mousemove", this.handleMouseMove);
19
77
  window.addEventListener("mouseup", this.handleMouseUp);
78
+ (_a = this.SplitterRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(Styles.ns_splitter_resizing);
20
79
  }
21
80
  handleMouseUp() {
22
- var _a, _b;
23
- (_a = this.SplitterRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("mousemove", this.handleMouseMove);
24
- (_b = this.SplitterRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(Styles.ns_splitter_resizing);
81
+ var _a;
82
+ window.removeEventListener("mousemove", this.handleMouseMove);
25
83
  window.removeEventListener("mouseup", this.handleMouseUp);
84
+ (_a = this.SplitterRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(Styles.ns_splitter_resizing);
26
85
  }
27
86
  handleMouseMove(event) {
28
87
  if (this.AnimationFrame)
29
88
  return;
30
89
  this.AnimationFrame = requestAnimationFrame(() => {
31
90
  this.AnimationFrame = null;
32
- let splitter_el = this.SplitterRef.current;
33
91
  let master_el = this.MasterPaneRef.current;
34
- if (!splitter_el || !master_el)
92
+ if (!master_el)
35
93
  return;
36
- let delta = event.clientY - master_el.getBoundingClientRect().bottom;
37
- let master_el_height = master_el.clientHeight + delta - 12;
38
- master_el_height = +Math.max(238, Math.min(master_el_height, 538)).toFixed(0);
39
- master_el.style.height = master_el_height + "px";
40
- master_el.style.minHeight = master_el_height + "px";
94
+ let master_top = master_el.getBoundingClientRect().top;
95
+ let height = Math.max(MIN_MASTER_HEIGHT, event.clientY - this.DragOffset - master_top);
96
+ master_el.style.height = height + "px";
97
+ master_el.style.minHeight = height + "px";
98
+ this.HasUserResized = true;
41
99
  });
42
100
  }
43
101
  render() {
44
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 &&
45
- _jsxs(_Fragment, { children: [_jsx("button", { className: Styles.ns_splitter_gutter, onMouseDown: this.handleMouseDown, children: _jsx("span", { className: Styles.ns_splitter_gutter_handle }) }), _jsx("div", { ref: this.DetailPaneRef, className: Styles.ns_splitter_detail, children: 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 })] })] }));
46
104
  }
47
105
  }
48
106
  //# sourceMappingURL=NSSplitter.js.map
package/dist/components/NSSplitter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSSplitter.js","sourceRoot":"","sources":["../../src/components/NSSplitter.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSSplitter.js","sourceRoot":"","sources":["../../src/components/NSSplitter.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSSplitter.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  .ns_splitter.ns_splitter_resizing,
13
13
  .ns_splitter.ns_splitter_resizing * {
14
14
  cursor: row-resize !important;
15
+ user-select: none !important;
15
16
  }
16
17
 
17
18
  .ns_splitter_master,
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.4.556",
11
+ "version": "1.4.557",
12
12
  "author": "Amir Abolhasani",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
package/src/components/NSSplitter.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  .ns_splitter.ns_splitter_resizing,
13
13
  .ns_splitter.ns_splitter_resizing * {
14
14
  cursor: row-resize !important;
15
+ user-select: none !important;
15
16
  }
16
17
 
17
18
  .ns_splitter_master,
package/src/components/NSSplitter.tsx CHANGED
@@ -1,6 +1,8 @@
1
- import { Component, createRef, ReactNode } from "react";
1
+ import { Component, createRef, MouseEvent as ReactMouseEvent, ReactNode } from "react";
2
2
  import Styles from "./NSSplitter.module.css";
3
3
 
4
+ const MIN_MASTER_HEIGHT = 238;
5
+
4
6
  export interface NSSplitterProps
5
7
  {
6
8
  master_content?: ReactNode;
@@ -11,8 +13,11 @@ export class NSSplitter extends Component<NSSplitterProps>
11
13
  {
12
14
  private SplitterRef = createRef<HTMLElement>();
13
15
  private MasterPaneRef = createRef<HTMLDivElement>();
14
- private DetailPaneRef = createRef<HTMLDivElement>();
16
+ private GutterRef = createRef<HTMLButtonElement>();
15
17
  private AnimationFrame: number | null = null;
18
+ private DragOffset = 0;
19
+ private HasUserResized = false;
20
+ private MediaQuery: MediaQueryList | null = null;
16
21
 
17
22
  constructor(props: NSSplitterProps)
18
23
  {
@@ -20,20 +25,93 @@ export class NSSplitter extends Component<NSSplitterProps>
20
25
  this.handleMouseDown = this.handleMouseDown.bind(this);
21
26
  this.handleMouseUp = this.handleMouseUp.bind(this);
22
27
  this.handleMouseMove = this.handleMouseMove.bind(this);
28
+ this.handleViewportChange = this.handleViewportChange.bind(this);
23
29
  }
24
30
 
25
- handleMouseDown()
31
+ override componentDidMount()
26
32
  {
27
- this.SplitterRef.current?.addEventListener("mousemove", this.handleMouseMove);
28
- this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
33
+ this.MediaQuery = window.matchMedia("(min-width: 992px)");
34
+ this.MediaQuery.addEventListener("change", this.handleViewportChange);
35
+ window.addEventListener("resize", this.handleViewportChange);
36
+ this.updateLayout(true);
37
+ }
38
+
39
+ override componentDidUpdate(prevProps: NSSplitterProps)
40
+ {
41
+ let had_detail = !!prevProps.detail_content;
42
+ let has_detail = !!this.props.detail_content;
43
+
44
+ if (had_detail !== has_detail)
45
+ {
46
+ this.HasUserResized = false;
47
+ this.updateLayout(true);
48
+ }
49
+ }
50
+
51
+ override componentWillUnmount()
52
+ {
53
+ this.MediaQuery?.removeEventListener("change", this.handleViewportChange);
54
+ window.removeEventListener("resize", this.handleViewportChange);
55
+ window.removeEventListener("mousemove", this.handleMouseMove);
56
+ window.removeEventListener("mouseup", this.handleMouseUp);
57
+
58
+ if (this.AnimationFrame) cancelAnimationFrame(this.AnimationFrame);
59
+ }
60
+
61
+ handleViewportChange()
62
+ {
63
+ this.updateLayout(false);
64
+ }
65
+
66
+ updateLayout(force: boolean)
67
+ {
68
+ let master_el = this.MasterPaneRef.current;
69
+
70
+ if (!master_el || !this.MediaQuery) return;
71
+
72
+ if (this.MediaQuery.matches && this.props.detail_content)
73
+ {
74
+ if (force || !this.HasUserResized) this.adjustMasterToViewport();
75
+ }
76
+ else
77
+ {
78
+ master_el.style.height = "";
79
+ master_el.style.minHeight = "";
80
+ }
81
+ }
82
+
83
+ adjustMasterToViewport()
84
+ {
85
+ let master_el = this.MasterPaneRef.current;
86
+
87
+ if (!master_el) return;
88
+
89
+ let master_top = master_el.getBoundingClientRect().top;
90
+ let gutter_height = this.GutterRef.current?.offsetHeight ?? 0;
91
+ let height = Math.max(MIN_MASTER_HEIGHT, window.innerHeight - master_top - gutter_height);
92
+
93
+ master_el.style.height = height + "px";
94
+ master_el.style.minHeight = height + "px";
95
+ }
96
+
97
+ handleMouseDown(event: ReactMouseEvent)
98
+ {
99
+ let master_el = this.MasterPaneRef.current;
100
+
101
+ if (!master_el) return;
102
+
103
+ this.DragOffset = event.clientY - master_el.getBoundingClientRect().bottom;
104
+
105
+ window.addEventListener("mousemove", this.handleMouseMove);
29
106
  window.addEventListener("mouseup", this.handleMouseUp);
107
+ this.SplitterRef.current?.classList.add(Styles.ns_splitter_resizing);
30
108
  }
31
109
 
32
110
  handleMouseUp()
33
111
  {
34
- this.SplitterRef.current?.removeEventListener("mousemove", this.handleMouseMove);
112
+ window.removeEventListener("mousemove", this.handleMouseMove);
113
+ window.removeEventListener("mouseup", this.handleMouseUp);
35
114
  this.SplitterRef.current?.classList.remove(Styles.ns_splitter_resizing);
36
- window.removeEventListener("mouseup", this.handleMouseUp)
37
115
  }
38
116
 
39
117
  handleMouseMove(event: MouseEvent)
@@ -44,17 +122,16 @@ export class NSSplitter extends Component<NSSplitterProps>
44
122
  {
45
123
  this.AnimationFrame = null;
46
124
 
47
- let splitter_el = this.SplitterRef.current;
48
125
  let master_el = this.MasterPaneRef.current;
49
126
 
50
- if (!splitter_el || !master_el) return;
127
+ if (!master_el) return;
51
128
 
52
- let delta = event.clientY - master_el.getBoundingClientRect().bottom;
53
- let master_el_height = master_el.clientHeight + delta - 12;
54
- master_el_height = +Math.max(238, Math.min(master_el_height, 538)).toFixed(0);
129
+ let master_top = master_el.getBoundingClientRect().top;
130
+ let height = Math.max(MIN_MASTER_HEIGHT, event.clientY - this.DragOffset - master_top);
55
131
 
56
- master_el.style.height = master_el_height + "px";
57
- master_el.style.minHeight = master_el_height + "px";
132
+ master_el.style.height = height + "px";
133
+ master_el.style.minHeight = height + "px";
134
+ this.HasUserResized = true;
58
135
  });
59
136
  }
60
137
 
@@ -76,16 +153,14 @@ export class NSSplitter extends Component<NSSplitterProps>
76
153
  this.props.detail_content &&
77
154
  <>
78
155
  <button
156
+ ref={this.GutterRef}
79
157
  className={Styles.ns_splitter_gutter}
80
158
  onMouseDown={this.handleMouseDown}
81
159
  >
82
160
  <span className={Styles.ns_splitter_gutter_handle}></span>
83
161
  </button>
84
162
 
85
- <div
86
- ref={this.DetailPaneRef}
87
- className={Styles.ns_splitter_detail}
88
- >
163
+ <div className={Styles.ns_splitter_detail}>
89
164
  {this.props.detail_content}
90
165
  </div>
91
166
  </>