react-resizable-panels 0.0.2 → 0.0.4

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 (27) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +4 -5
  3. package/dist/react-resizable-panels.d.ts +10 -10
  4. package/dist/react-resizable-panels.d.ts.map +1 -1
  5. package/dist/react-resizable-panels.js +132 -74
  6. package/dist/react-resizable-panels.js.map +1 -1
  7. package/dist/react-resizable-panels.module.js +130 -72
  8. package/dist/react-resizable-panels.module.js.map +1 -1
  9. package/package.json +4 -12
  10. package/src/Panel.tsx +23 -7
  11. package/src/PanelContexts.ts +5 -4
  12. package/src/PanelGroup.tsx +140 -60
  13. package/src/PanelResizeHandle.tsx +12 -7
  14. package/src/index.ts +1 -1
  15. package/src/types.ts +3 -4
  16. package/.proxyrc +0 -8
  17. package/dist/index.8be10522.js +0 -28334
  18. package/dist/index.8be10522.js.map +0 -1
  19. package/dist/index.d85b50e4.css +0 -95
  20. package/dist/index.d85b50e4.css.map +0 -1
  21. package/dist/index.html +0 -9
  22. package/tsconfig.json +0 -6
  23. package/website/demo.tsx +0 -140
  24. package/website/index.html +0 -9
  25. package/website/index.tsx +0 -12
  26. package/website/root.css +0 -15
  27. package/website/styles.module.css +0 -77
package/dist/index.d85b50e4.css DELETED
@@ -1,95 +0,0 @@
1
- :root, html, body {
2
- width: 100vw;
3
- height: 100vh;
4
- color: #fff;
5
- background-color: #081120;
6
- margin: 0;
7
- padding: 0;
8
- overflow: hidden;
9
- }
10
-
11
- #root {
12
- width: calc(100vw - 1rem);
13
- height: calc(100vh - 1rem);
14
- }
15
-
16
- .zJLQMW_FullHeightAndWidth {
17
- width: calc(100vw - 1rem);
18
- height: calc(100vh - 1rem);
19
- margin: .5rem;
20
- }
21
-
22
- .zJLQMW_Grower {
23
- width: 100%;
24
- height: 100%;
25
- }
26
-
27
- .zJLQMW_HorizontalFiller, .zJLQMW_HorizontalFillerLeft, .zJLQMW_HorizontalFillerRight, .zJLQMW_VerticalFillerBottom, .zJLQMW_VerticalFillerTop {
28
- height: 100%;
29
- width: 100%;
30
- background-color: #192230;
31
- flex-direction: column;
32
- justify-content: center;
33
- align-items: center;
34
- display: flex;
35
- overflow: hidden;
36
- }
37
-
38
- .zJLQMW_HorizontalFiller {
39
- border-radius: .5rem;
40
- }
41
-
42
- .zJLQMW_VerticalFillerTop {
43
- border-top-left-radius: .5rem;
44
- border-top-right-radius: .5rem;
45
- }
46
-
47
- .zJLQMW_VerticalFillerBottom {
48
- border-bottom-right-radius: .5rem;
49
- border-bottom-left-radius: .5rem;
50
- }
51
-
52
- .zJLQMW_PanelRow {
53
- flex-direction: row;
54
- display: flex;
55
- }
56
-
57
- .zJLQMW_PanelColumn {
58
- flex-direction: column;
59
- display: flex;
60
- }
61
-
62
- .zJLQMW_HorizontalResizeHandle {
63
- padding: 0 .25rem;
64
- }
65
-
66
- .zJLQMW_VerticalResizeBar {
67
- height: 4px;
68
- width: 100%;
69
- background-color: #2a3343;
70
- border-top: 1px solid #454950;
71
- border-bottom: 1px solid #454950;
72
- }
73
-
74
- .zJLQMW_HorizontalResizeBar {
75
- height: 100%;
76
- width: 4px;
77
- background-color: #2a3343;
78
- border-left: 1px solid #454950;
79
- border-right: 1px solid #454950;
80
- }
81
-
82
- .zJLQMW_ResetButton {
83
- color: #fff;
84
- cursor: pointer;
85
- background: #2a3343;
86
- border: 1px solid #18181a;
87
- border-radius: .25rem;
88
- padding: .25rem .5rem;
89
- }
90
-
91
- .zJLQMW_ResetButton:hover {
92
- background: #454950;
93
- }
94
-
95
- /*# sourceMappingURL=index.d85b50e4.css.map */
package/dist/index.d85b50e4.css.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":"AAAA;;;;;;;;;;AAWA;;;;;ACXA;;;;;;AAMA;;;;;AAKA;;;;;;;;;;;AAcA;;;;AAGA;;;;;AAIA;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;;;AAQA;;;;;;;;AAQA;;;;;;;;;AAQA","sources":["website/root.css","website/styles.module.css"],"sourcesContent":[":root, html, body {\n width: 100vw;\n height: 100vh;\n padding: 0;\n margin: 0;\n overflow: hidden;\n\n background-color: #081120;\n color: #ffffff;\n}\n\n#root {\n width: calc(100vw - 1rem);\n height: calc(100vh - 1rem);\n}",".FullHeightAndWidth {\n width: calc(100vw - 1rem);\n height: calc(100vh - 1rem);\n margin: 0.5rem;\n}\n\n.Grower {\n width: 100%;\n height: 100%;\n}\n\n.HorizontalFiller,\n.HorizontalFillerLeft,\n.HorizontalFillerRight,\n.VerticalFillerBottom,\n.VerticalFillerTop {\n height: 100%;\n width: 100%;\n background-color: #192230;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.HorizontalFiller {\n border-radius: 0.5rem;\n}\n.VerticalFillerTop {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n}\n.VerticalFillerBottom {\n border-bottom-left-radius: 0.5rem;\n border-bottom-right-radius: 0.5rem;\n}\n\n.PanelRow {\n display: flex;\n flex-direction: row;\n}\n.PanelColumn {\n display: flex;\n flex-direction: column;\n}\n\n.HorizontalResizeHandle {\n padding: 0 0.25rem;\n}\n\n.VerticalResizeBar {\n height: 4px;\n width: 100%;\n background-color: #2a3343;\n border-bottom: 1px solid #454950;\n border-top: 1px solid #454950;\n}\n\n.HorizontalResizeBar {\n height: 100%;\n width: 4px;\n background-color: #2a3343;\n border-left: 1px solid #454950;\n border-right: 1px solid #454950;\n}\n\n.ResetButton {\n color: #ffffff;\n background: #2a3343;\n border: 1px solid #18181a;\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n}\n.ResetButton:hover {\n background: #454950;\n}\n"],"names":[],"version":3,"file":"index.d85b50e4.css.map","sourceRoot":"/__parcel_source_root/"}
package/dist/index.html DELETED
@@ -1,9 +0,0 @@
1
- <html>
2
- <html>
3
- <link rel="stylesheet" href="/index.d85b50e4.css">
4
- </html>
5
- <body>
6
- <div id="root"></div>
7
- <script src="/index.8be10522.js" defer=""></script>
8
- </body>
9
- </html>
package/tsconfig.json DELETED
@@ -1,6 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "lib": ["ES2015", "DOM"],
4
- "jsx": "react-jsx"
5
- }
6
- }
package/website/demo.tsx DELETED
@@ -1,140 +0,0 @@
1
- import AutoSizer from "react-virtualized-auto-sizer";
2
-
3
- import { Panel, PanelGroup, PanelResizeHandle } from "../src";
4
-
5
- import styles from "./styles.module.css";
6
-
7
- function clearSavedSizes() {
8
- localStorage.removeItem("PanelGroup:sizes:inner-horizontal");
9
- localStorage.removeItem("PanelGroup:sizes:outer-horizontal");
10
- localStorage.removeItem("PanelGroup:sizes:vertical");
11
-
12
- window.location.reload();
13
- }
14
-
15
- export default function App() {
16
- return (
17
- <div className={styles.FullHeightAndWidth}>
18
- <AutoSizer>
19
- {({ height, width }) => (
20
- <PanelGroup
21
- height={height}
22
- width={width}
23
- autoSaveId="outer-horizontal"
24
- direction="horizontal"
25
- >
26
- <Panel className={styles.PanelRow} defaultSize={0.2} id="left">
27
- <div className={styles.HorizontalFiller}>
28
- left [1]
29
- <br />
30
- <br />
31
- <button
32
- className={styles.ResetButton}
33
- onClick={clearSavedSizes}
34
- >
35
- reset sizes
36
- </button>
37
- </div>
38
- </Panel>
39
- <Panel className={styles.PanelRow} defaultSize={0.4} id="middle">
40
- <PanelResizeHandle
41
- className={styles.HorizontalResizeHandle}
42
- panelBefore="left"
43
- panelAfter="middle"
44
- />
45
- <div className={styles.HorizontalFiller}>middle [3]</div>
46
- <PanelResizeHandle
47
- className={styles.HorizontalResizeHandle}
48
- panelBefore="middle"
49
- panelAfter="stacked"
50
- />
51
- </Panel>
52
- <Panel className={styles.PanelRow} defaultSize={0.3} id="stacked">
53
- <div className={styles.Grower}>
54
- <AutoSizer>
55
- {({ height, width }) => (
56
- <PanelGroup
57
- height={height}
58
- width={width}
59
- autoSaveId="vertical"
60
- direction="vertical"
61
- >
62
- <Panel
63
- className={styles.PanelRow}
64
- defaultSize={0.4}
65
- id="top"
66
- >
67
- <div className={styles.VerticalFillerTop}>
68
- top [2, 1]
69
- </div>
70
- </Panel>
71
- <Panel
72
- className={styles.PanelColumn}
73
- defaultSize={0.6}
74
- id="bottom"
75
- >
76
- <PanelResizeHandle
77
- panelBefore="top"
78
- panelAfter="bottom"
79
- >
80
- <div className={styles.VerticalResizeBar} />
81
- </PanelResizeHandle>
82
- <div className={styles.VerticalFillerBottom}>
83
- <AutoSizer>
84
- {({ height, width }) => (
85
- <PanelGroup
86
- height={height}
87
- width={width}
88
- autoSaveId="inner-horizontal"
89
- direction="horizontal"
90
- >
91
- <Panel
92
- className={styles.PanelRow}
93
- defaultSize={0.5}
94
- id="bottom-left"
95
- >
96
- <div className={styles.HorizontalFillerLeft}>
97
- bottom-left [2, 2, 1]
98
- </div>
99
- </Panel>
100
- <Panel
101
- className={styles.PanelRow}
102
- defaultSize={0.5}
103
- id="bottom-right"
104
- >
105
- <PanelResizeHandle
106
- panelBefore="bottom-left"
107
- panelAfter="bottom-right"
108
- >
109
- <div
110
- className={styles.HorizontalResizeBar}
111
- />
112
- </PanelResizeHandle>
113
- <div className={styles.HorizontalFillerRight}>
114
- bottom-right [2, 2, 1]
115
- </div>
116
- </Panel>
117
- </PanelGroup>
118
- )}
119
- </AutoSizer>
120
- </div>
121
- </Panel>
122
- </PanelGroup>
123
- )}
124
- </AutoSizer>
125
- </div>
126
- </Panel>
127
- <Panel className={styles.PanelRow} defaultSize={0.2} id="right">
128
- <PanelResizeHandle
129
- className={styles.HorizontalResizeHandle}
130
- panelBefore="stacked"
131
- panelAfter="right"
132
- />
133
- <div className={styles.HorizontalFiller}>right [1]</div>
134
- </Panel>
135
- </PanelGroup>
136
- )}
137
- </AutoSizer>
138
- </div>
139
- );
140
- }
package/website/index.html DELETED
@@ -1,9 +0,0 @@
1
- <html>
2
- <html>
3
- <link rel="stylesheet" href="./root.css" />
4
- </html>
5
- <body>
6
- <div id="root"></div>
7
- <script type="module" src="index.tsx"></script>
8
- </body>
9
- </html>
package/website/index.tsx DELETED
@@ -1,12 +0,0 @@
1
- import { StrictMode } from "react";
2
- import { createRoot } from "react-dom/client";
3
-
4
- import Demo from "./demo";
5
-
6
- const rootElement = document.getElementById("root");
7
- const root = createRoot(rootElement);
8
- root.render(
9
- <StrictMode>
10
- <Demo />
11
- </StrictMode>
12
- );
package/website/root.css DELETED
@@ -1,15 +0,0 @@
1
- :root, html, body {
2
- width: 100vw;
3
- height: 100vh;
4
- padding: 0;
5
- margin: 0;
6
- overflow: hidden;
7
-
8
- background-color: #081120;
9
- color: #ffffff;
10
- }
11
-
12
- #root {
13
- width: calc(100vw - 1rem);
14
- height: calc(100vh - 1rem);
15
- }
package/website/styles.module.css DELETED
@@ -1,77 +0,0 @@
1
- .FullHeightAndWidth {
2
- width: calc(100vw - 1rem);
3
- height: calc(100vh - 1rem);
4
- margin: 0.5rem;
5
- }
6
-
7
- .Grower {
8
- width: 100%;
9
- height: 100%;
10
- }
11
-
12
- .HorizontalFiller,
13
- .HorizontalFillerLeft,
14
- .HorizontalFillerRight,
15
- .VerticalFillerBottom,
16
- .VerticalFillerTop {
17
- height: 100%;
18
- width: 100%;
19
- background-color: #192230;
20
- display: flex;
21
- flex-direction: column;
22
- align-items: center;
23
- justify-content: center;
24
- overflow: hidden;
25
- }
26
- .HorizontalFiller {
27
- border-radius: 0.5rem;
28
- }
29
- .VerticalFillerTop {
30
- border-top-left-radius: 0.5rem;
31
- border-top-right-radius: 0.5rem;
32
- }
33
- .VerticalFillerBottom {
34
- border-bottom-left-radius: 0.5rem;
35
- border-bottom-right-radius: 0.5rem;
36
- }
37
-
38
- .PanelRow {
39
- display: flex;
40
- flex-direction: row;
41
- }
42
- .PanelColumn {
43
- display: flex;
44
- flex-direction: column;
45
- }
46
-
47
- .HorizontalResizeHandle {
48
- padding: 0 0.25rem;
49
- }
50
-
51
- .VerticalResizeBar {
52
- height: 4px;
53
- width: 100%;
54
- background-color: #2a3343;
55
- border-bottom: 1px solid #454950;
56
- border-top: 1px solid #454950;
57
- }
58
-
59
- .HorizontalResizeBar {
60
- height: 100%;
61
- width: 4px;
62
- background-color: #2a3343;
63
- border-left: 1px solid #454950;
64
- border-right: 1px solid #454950;
65
- }
66
-
67
- .ResetButton {
68
- color: #ffffff;
69
- background: #2a3343;
70
- border: 1px solid #18181a;
71
- border-radius: 0.25rem;
72
- padding: 0.25rem 0.5rem;
73
- cursor: pointer;
74
- }
75
- .ResetButton:hover {
76
- background: #454950;
77
- }