@rpcbase/client 0.208.0-nav.0 → 0.208.0
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.
package/package.json
CHANGED
|
@@ -1,76 +1,22 @@
|
|
|
1
|
-
import {useState, useRef} from "react"
|
|
2
1
|
import {createPortal} from "react-dom"
|
|
3
2
|
import {ResizableBox} from "react-resizable"
|
|
4
3
|
|
|
5
|
-
import {useStoredValue} from "../../../helpers/useStoredValue"
|
|
6
4
|
import {useContentViewContext} from "../ContentView/ContentViewContext"
|
|
7
5
|
|
|
8
6
|
import "./sidebar-container.scss"
|
|
9
7
|
|
|
10
8
|
|
|
11
|
-
const COLLAPSED_MIN_WIDTH = 40
|
|
12
9
|
const OPENED_MIN_WIDTH = 60
|
|
13
10
|
|
|
14
11
|
export const SidebarContainer = ({children}) => {
|
|
15
|
-
const {sidebarWidth, setSidebarWidth
|
|
16
|
-
|
|
17
|
-
const previousWidthRef = useRef(sidebarWidth)
|
|
18
|
-
|
|
19
|
-
// TODO: store this ?? (no we already store the sidebarWidth)
|
|
20
|
-
const [isCollapsed, setIsCollapsed] = useState(
|
|
21
|
-
sidebarWidth === COLLAPSED_MIN_WIDTH,
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
const storageKey = `${storageKeyPrefix}.sidebar_uncollapsed_width`
|
|
25
|
-
|
|
26
|
-
const [uncollapsedSidebarWidth, setUncollapsedSidebarWidth] = useStoredValue(
|
|
27
|
-
storageKey,
|
|
28
|
-
sidebarWidth,
|
|
29
|
-
)
|
|
30
|
-
|
|
12
|
+
const {sidebarWidth, setSidebarWidth} = useContentViewContext()
|
|
31
13
|
|
|
32
14
|
const onResize = (e, data) => {
|
|
33
15
|
const width = data.size.width
|
|
34
16
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
let direction
|
|
38
|
-
|
|
39
|
-
if (delta < 0) direction = "right"
|
|
40
|
-
else if (delta > 0) direction = "left"
|
|
41
|
-
|
|
42
|
-
// sidebar opening
|
|
43
|
-
if (width > COLLAPSED_MIN_WIDTH && direction === "right" && isCollapsed) {
|
|
44
|
-
setSidebarWidth(OPENED_MIN_WIDTH)
|
|
45
|
-
setIsCollapsed(false)
|
|
46
|
-
}
|
|
47
|
-
// collapsing
|
|
48
|
-
else if (
|
|
49
|
-
width <= OPENED_MIN_WIDTH &&
|
|
50
|
-
direction === "left" &&
|
|
51
|
-
!isCollapsed
|
|
52
|
-
) {
|
|
53
|
-
setSidebarWidth(COLLAPSED_MIN_WIDTH)
|
|
54
|
-
setIsCollapsed(true)
|
|
55
|
-
}
|
|
56
|
-
// normal case, but only apply new width if different from previous one
|
|
57
|
-
else if (width !== sidebarWidth) {
|
|
17
|
+
// only apply new width if different from previous one
|
|
18
|
+
if (width !== sidebarWidth) {
|
|
58
19
|
setSidebarWidth(width)
|
|
59
|
-
setUncollapsedSidebarWidth(width)
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// save width to compare on next event
|
|
63
|
-
previousWidthRef.current = width
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// quick collapse by double clicking on sidebar resize bar
|
|
67
|
-
const onDoubleClickResizeHandle = () => {
|
|
68
|
-
if (isCollapsed) {
|
|
69
|
-
setSidebarWidth(uncollapsedSidebarWidth)
|
|
70
|
-
setIsCollapsed(false)
|
|
71
|
-
} else {
|
|
72
|
-
setSidebarWidth(COLLAPSED_MIN_WIDTH)
|
|
73
|
-
setIsCollapsed(true)
|
|
74
20
|
}
|
|
75
21
|
}
|
|
76
22
|
|
|
@@ -82,19 +28,17 @@ export const SidebarContainer = ({children}) => {
|
|
|
82
28
|
<ResizableBox
|
|
83
29
|
id="sidebar"
|
|
84
30
|
width={sidebarWidth}
|
|
85
|
-
// height={height}
|
|
86
31
|
// style={{ position: "fixed", top: 45, bottom: 0, overflowX: "visible" }}
|
|
87
32
|
draggableOpts={{}}
|
|
88
33
|
handle={
|
|
89
34
|
<div
|
|
90
35
|
className="sidebar-resize-handle"
|
|
91
|
-
onDoubleClick={onDoubleClickResizeHandle}
|
|
92
36
|
/>
|
|
93
37
|
}
|
|
94
38
|
resizeHandles={["e"]}
|
|
95
39
|
axis="x"
|
|
96
|
-
minConstraints={[
|
|
97
|
-
maxConstraints={[
|
|
40
|
+
minConstraints={[OPENED_MIN_WIDTH]}
|
|
41
|
+
maxConstraints={[800]}
|
|
98
42
|
onResize={onResize}
|
|
99
43
|
style={{overflow: "hidden"}}
|
|
100
44
|
>
|