@synerise/ds-panels-resizer 1.0.11 → 1.0.12
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/CHANGELOG.md +8 -79
- package/README.md +9 -7
- package/dist/PanelsResizer.d.ts +3 -4
- package/dist/PanelsResizer.js +8 -4
- package/dist/Resizer/Resizer.d.ts +1 -2
- package/dist/utils/calculatePanelsWidth.js +3 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [1.0.
|
|
6
|
+
## [1.0.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.11...@synerise/ds-panels-resizer@1.0.12) (2025-07-01)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
9
9
|
|
|
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
## [1.0.
|
|
14
|
+
## [1.0.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.10...@synerise/ds-panels-resizer@1.0.11) (2025-06-24)
|
|
15
15
|
|
|
16
16
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
17
17
|
|
|
@@ -19,159 +19,88 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
## [1.0.
|
|
22
|
+
## [1.0.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.9...@synerise/ds-panels-resizer@1.0.10) (2025-06-05)
|
|
23
23
|
|
|
24
24
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
25
25
|
|
|
26
|
+
## [1.0.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.8...@synerise/ds-panels-resizer@1.0.9) (2025-05-26)
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
29
29
|
|
|
30
30
|
## [1.0.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.7...@synerise/ds-panels-resizer@1.0.8) (2025-05-19)
|
|
31
31
|
|
|
32
32
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
34
|
## [1.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.6...@synerise/ds-panels-resizer@1.0.7) (2025-05-07)
|
|
39
35
|
|
|
40
36
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
41
37
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
38
|
## [1.0.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.5...@synerise/ds-panels-resizer@1.0.6) (2025-04-24)
|
|
47
39
|
|
|
48
40
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
49
41
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
42
|
## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.4...@synerise/ds-panels-resizer@1.0.5) (2025-04-16)
|
|
55
43
|
|
|
56
44
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
57
45
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
46
|
## [1.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.3...@synerise/ds-panels-resizer@1.0.4) (2025-04-02)
|
|
63
47
|
|
|
64
48
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
65
49
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
50
|
## [1.0.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.2...@synerise/ds-panels-resizer@1.0.3) (2025-03-31)
|
|
71
51
|
|
|
72
52
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
73
53
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
54
|
## [1.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.1...@synerise/ds-panels-resizer@1.0.2) (2025-03-26)
|
|
79
55
|
|
|
80
56
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
81
57
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
58
|
## [1.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.0...@synerise/ds-panels-resizer@1.0.1) (2025-03-18)
|
|
87
59
|
|
|
88
60
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
89
61
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
62
|
## [0.2.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.2.3...@synerise/ds-panels-resizer@0.2.4) (2025-03-10)
|
|
95
63
|
|
|
96
64
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
97
65
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
66
|
## [0.2.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.2.2...@synerise/ds-panels-resizer@0.2.3) (2025-03-04)
|
|
103
67
|
|
|
104
68
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
105
69
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
70
|
## [0.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.2.1...@synerise/ds-panels-resizer@0.2.2) (2025-02-27)
|
|
111
71
|
|
|
112
72
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
113
73
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
74
|
## [0.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.2.0...@synerise/ds-panels-resizer@0.2.1) (2025-02-14)
|
|
119
75
|
|
|
120
76
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
121
77
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
78
|
# [0.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.1.4...@synerise/ds-panels-resizer@0.2.0) (2025-01-29)
|
|
127
79
|
|
|
128
|
-
|
|
129
80
|
### Features
|
|
130
81
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
82
|
+
- antd@4.24 react@18 ([d97a667](https://github.com/Synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
|
|
136
83
|
|
|
137
84
|
## [0.1.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.1.3...@synerise/ds-panels-resizer@0.1.4) (2025-01-21)
|
|
138
85
|
|
|
139
86
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
140
87
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
88
|
## [0.1.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.1.2...@synerise/ds-panels-resizer@0.1.3) (2025-01-15)
|
|
146
89
|
|
|
147
90
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
148
91
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
92
|
## [0.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.1.1...@synerise/ds-panels-resizer@0.1.2) (2025-01-07)
|
|
154
93
|
|
|
155
|
-
|
|
156
94
|
### Bug Fixes
|
|
157
95
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
96
|
+
- panel styles ([83623cf](https://github.com/Synerise/synerise-design/commit/83623cf4de7cc1a43c217cc761d0c891da7c4c2f))
|
|
163
97
|
|
|
164
98
|
## [0.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@0.1.0...@synerise/ds-panels-resizer@0.1.1) (2024-12-16)
|
|
165
99
|
|
|
166
100
|
**Note:** Version bump only for package @synerise/ds-panels-resizer
|
|
167
101
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
102
|
# 0.1.0 (2024-12-06)
|
|
173
103
|
|
|
174
|
-
|
|
175
104
|
### Features
|
|
176
105
|
|
|
177
|
-
|
|
106
|
+
- PanelsResizer component with resizable left and right panels ([57c2175](https://github.com/Synerise/synerise-design/commit/57c2175a4e3b458fecd6139cde75977b5aab1776))
|
package/README.md
CHANGED
|
@@ -3,11 +3,12 @@ id: panels-resizer
|
|
|
3
3
|
title: PanelResizer
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
The `PanelsResizer` component allows you to create a layout with resizable left and right panels, separated by a draggable resizer.
|
|
6
|
+
The `PanelsResizer` component allows you to create a layout with resizable left and right panels, separated by a draggable resizer.
|
|
7
7
|
|
|
8
8
|
Users can adjust the width of the panels by dragging the resizer, providing a flexible and customizable interface.
|
|
9
9
|
|
|
10
10
|
## Installation
|
|
11
|
+
|
|
11
12
|
```
|
|
12
13
|
npm i @synerise/ds-panels-resizer
|
|
13
14
|
or
|
|
@@ -15,6 +16,7 @@ yarn add @synerise/ds-panels-resizer
|
|
|
15
16
|
```
|
|
16
17
|
|
|
17
18
|
## Usage
|
|
19
|
+
|
|
18
20
|
```
|
|
19
21
|
import { PanelsResizer } from '@synerise/ds-panels-resizer';
|
|
20
22
|
|
|
@@ -35,9 +37,9 @@ const App = () => (
|
|
|
35
37
|
|
|
36
38
|
## API
|
|
37
39
|
|
|
38
|
-
| Property
|
|
39
|
-
|
|
|
40
|
-
| leftPanel
|
|
41
|
-
| rightPanel | The content to display in the right panel.
|
|
42
|
-
| initial
|
|
43
|
-
| scrollable | Whether the panels should be scrollable when their content overflows.
|
|
40
|
+
| Property | Description | Type | Default |
|
|
41
|
+
| ---------- | ---------------------------------------------------------------------------------- | ----------------------------------------------- | ------- |
|
|
42
|
+
| leftPanel | The content to display in the left panel. | React.ReactNode | --- |
|
|
43
|
+
| rightPanel | The content to display in the right panel. | React.ReactNode | --- |
|
|
44
|
+
| initial | Initial widths of the panels. Can specify leftPanel or rightPanel width in pixels. | { leftPanel: number } \| { rightPanel: number } | --- |
|
|
45
|
+
| scrollable | Whether the panels should be scrollable when their content overflows. | boolean | false |
|
package/dist/PanelsResizer.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type
|
|
3
|
-
import type { InitialVectorOptions } from './utils';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
|
+
import { type InitialVectorOptions } from './utils';
|
|
4
3
|
type PanelsResizerProps = {
|
|
5
4
|
leftPanel: ReactNode;
|
|
6
5
|
rightPanel: ReactNode;
|
|
7
6
|
initial?: InitialVectorOptions;
|
|
8
7
|
scrollable?: boolean;
|
|
9
8
|
};
|
|
10
|
-
export declare const PanelsResizer: ({ leftPanel, rightPanel, initial, scrollable }: PanelsResizerProps) => React.JSX.Element;
|
|
9
|
+
export declare const PanelsResizer: ({ leftPanel, rightPanel, initial, scrollable, }: PanelsResizerProps) => React.JSX.Element;
|
|
11
10
|
export {};
|
package/dist/PanelsResizer.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
-
import React, { useCallback,
|
|
2
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import * as S from './PanelResizer.styles';
|
|
3
4
|
import { Resizer } from './Resizer';
|
|
4
5
|
import { calculateLeftPanelWidth, calculateRightPanelWidth, getInitialVector } from './utils';
|
|
5
|
-
import * as S from './PanelResizer.styles';
|
|
6
6
|
export var PanelsResizer = function PanelsResizer(_ref) {
|
|
7
7
|
var leftPanel = _ref.leftPanel,
|
|
8
8
|
rightPanel = _ref.rightPanel,
|
|
@@ -25,7 +25,9 @@ export var PanelsResizer = function PanelsResizer(_ref) {
|
|
|
25
25
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
26
|
}, []);
|
|
27
27
|
var handleMouseMove = useCallback(function (event) {
|
|
28
|
-
if (!isResizing)
|
|
28
|
+
if (!isResizing) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
29
31
|
var deltaX = event.clientX - startClientXRef.current;
|
|
30
32
|
setVector(function (prevVector) {
|
|
31
33
|
return prevVector !== null ? prevVector + deltaX : deltaX;
|
|
@@ -33,7 +35,9 @@ export var PanelsResizer = function PanelsResizer(_ref) {
|
|
|
33
35
|
startClientXRef.current = event.clientX;
|
|
34
36
|
}, [isResizing]);
|
|
35
37
|
var handleMouseUpOrLeave = useCallback(function () {
|
|
36
|
-
if (!isResizing)
|
|
38
|
+
if (!isResizing) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
37
41
|
setIsResizing(false);
|
|
38
42
|
}, [isResizing]);
|
|
39
43
|
var handleMouseDownOnResizer = useCallback(function (event) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-panels-resizer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "PanelResizer UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-icon": "^1.5.
|
|
37
|
+
"@synerise/ds-icon": "^1.5.4"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"@synerise/ds-core": "*",
|
|
41
41
|
"react": ">=16.9.0 <= 18.3.1",
|
|
42
42
|
"styled-components": "^5.3.3"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "4512641033ba3581a3df208143c547fcfed45895"
|
|
45
45
|
}
|