react-split-pane 0.1.85 → 0.1.91

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 (6) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/README.md +137 -91
  3. package/dist/index.cjs.js +43 -30
  4. package/dist/index.esm.js +40 -29
  5. package/index.d.ts +26 -8
  6. package/package.json +53 -39
package/CHANGELOG.md ADDED
@@ -0,0 +1,37 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
+
5
+ ### [0.1.91](https://github.com/tomkp/react-split-pane/compare/v0.1.89...v0.1.91) (2020-03-23)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * typescript typings ([ae3e41f](https://github.com/tomkp/react-split-pane/commit/ae3e41f0076903e02cc4c5011b31ea7eeadf2ac9))
11
+ * Update site title ([f61efff](https://github.com/tomkp/react-split-pane/commit/f61efff1f7676059d6b049774f004c4e49cb1e1f))
12
+
13
+ ### [0.1.90](https://github.com/tomkp/react-split-pane/compare/v0.1.89...v0.1.90) (2020-03-23)
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * typescript typings ([ae3e41f](https://github.com/tomkp/react-split-pane/commit/ae3e41f0076903e02cc4c5011b31ea7eeadf2ac9))
19
+ * Update site title ([f61efff](https://github.com/tomkp/react-split-pane/commit/f61efff1f7676059d6b049774f004c4e49cb1e1f))
20
+
21
+ ### [0.1.89](https://github.com/tomkp/react-split-pane/compare/v0.1.88...v0.1.89) (2019-11-12)
22
+
23
+
24
+ ### Bug Fixes
25
+
26
+ * also include named exports ([bfd16af](https://github.com/tomkp/react-split-pane/commit/bfd16afe8e4f186968ecfd73929a961a9525abed))
27
+ * ignore changelog in prettier ([7c0a6a4](https://github.com/tomkp/react-split-pane/commit/7c0a6a4f123fe266dece1d823bd0de580cca6507))
28
+
29
+ ### [0.1.88](https://github.com/tomkp/react-split-pane/compare/v0.1.87...v0.1.88) (2019-11-12)
30
+
31
+ ### Features
32
+
33
+ - new less complex site w parcel and gh-pages deploys ([#378](https://github.com/tomkp/react-split-pane/issues/378)) ([ea98d68](https://github.com/tomkp/react-split-pane/commit/ea98d6853f71c479b3b351a4dd23520fe7595409))
34
+
35
+ ### Bug Fixes
36
+
37
+ - excluded react and react-dom from bundle ([#349](https://github.com/tomkp/react-split-pane/issues/349)) ([eb6b2bc](https://github.com/tomkp/react-split-pane/commit/eb6b2bc92873f1b671243de4f8fba96029f119df))
package/README.md CHANGED
@@ -4,12 +4,13 @@
4
4
  ![NPM license](https://img.shields.io/npm/l/react-split-pane.svg?style=flat)
5
5
  [![NPM total downloads](https://img.shields.io/npm/dt/react-split-pane.svg?style=flat)](https://npmcharts.com/compare/react-split-pane?minimal=true)
6
6
  [![NPM monthly downloads](https://img.shields.io/npm/dm/react-split-pane.svg?style=flat)](https://npmcharts.com/compare/react-split-pane?minimal=true)
7
- [![Build Status](https://img.shields.io/travis/tomkp/react-split-pane/master.svg?style=flat-square)](https://travis-ci.org/tomkp/react-split-pane)
8
- [![Coverage Status](https://img.shields.io/coveralls/tomkp/react-split-pane/master.svg?style=flat-square)](https://coveralls.io/r/tomkp/react-split-pane)
7
+ [![Build Status](https://img.shields.io/travis/tomkp/react-split-pane/master.svg?style=flat)](https://travis-ci.org/tomkp/react-split-pane)
8
+ [![Coverage Status](https://img.shields.io/coveralls/tomkp/react-split-pane/master.svg?style=flat)](https://coveralls.io/r/tomkp/react-split-pane)
9
9
 
10
- Split-Pane React component, can be nested or split vertically or horizontally. Check out some demos [here](http://react-split-pane.surge.sh/)!
10
+ Split-Pane React component, can be nested or split vertically or horizontally!
11
11
 
12
12
  ## Installing
13
+
13
14
  ```sh
14
15
  npm install react-split-pane
15
16
 
@@ -19,26 +20,28 @@ yarn add react-split-pane
19
20
  ```
20
21
 
21
22
  ## Example Usage
23
+
22
24
  ```jsx
23
- <SplitPane split="vertical" minSize={50} defaultSize={100}>
24
- <div></div>
25
- <div></div>
26
- </SplitPane>
25
+ <SplitPane split="vertical" minSize={50} defaultSize={100}>
26
+ <div />
27
+ <div />
28
+ </SplitPane>
27
29
  ```
28
30
 
29
31
  ```jsx
30
- <SplitPane split="vertical" minSize={50}>
31
- <div></div>
32
- <SplitPane split="horizontal">
33
- <div></div>
34
- <div></div>
35
- </SplitPane>
32
+ <SplitPane split="vertical" minSize={50}>
33
+ <div />
34
+ <SplitPane split="horizontal">
35
+ <div />
36
+ <div />
36
37
  </SplitPane>
38
+ </SplitPane>
37
39
  ```
38
40
 
39
41
  ## Props
40
42
 
41
43
  ### primary
44
+
42
45
  By dragging 'draggable' surface you can change size of the first pane.
43
46
  The first pane keeps then its size while the second pane is resized by browser window.
44
47
  By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane.
@@ -52,13 +55,14 @@ You can also set the size of the pane using the `size` prop. Note that a size se
52
55
  In this example right pane keeps its width 200px while user is resizing browser window.
53
56
 
54
57
  ```jsx
55
- <SplitPane split="vertical" defaultSize={200} primary="second">
56
- <div></div>
57
- <div></div>
58
- </SplitPane>
58
+ <SplitPane split="vertical" defaultSize={200} primary="second">
59
+ <div />
60
+ <div />
61
+ </SplitPane>
59
62
  ```
60
63
 
61
64
  ### maxSize
65
+
62
66
  You can limit the maximal size of the 'fixed' pane using the maxSize parameter with a positive value (measured in pixels but state just a number).
63
67
  If you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning),
64
68
  then you'll need to limit the movement of the splitter (resizer) at the end of the SplitPane (otherwise it can be dragged outside the SplitPane
@@ -68,30 +72,34 @@ And more: if you set the maxSize to negative value (e.g. -200), then the splitte
68
72
  size of the 'resizable' pane in this case). This can be useful also in the full-screen case of use.
69
73
 
70
74
  ### step
75
+
71
76
  You can use the step prop to only allow resizing in fixed increments.
72
77
 
73
78
  ### onDragStarted
79
+
74
80
  This callback is invoked when a drag starts.
75
81
 
76
82
  ### onDragFinished
83
+
77
84
  This callback is invoked when a drag ends.
78
85
 
79
86
  ### onChange
87
+
80
88
  This callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.
81
89
 
82
90
  ### Inline Styles
83
91
 
84
92
  You can also pass inline styles to the components via props. These are:
85
93
 
86
- * `style` - Styling to be applied to the main container.
87
- * `paneStyle` - Styling to be applied to both panes
88
- * `pane1Style` - Styling to be applied to the first pane, with precedence over `paneStyle`
89
- * `pane2Style` - Styling to be applied to the second pane, with precedence over `paneStyle`
90
- * `resizerStyle` - Styling to be applied to the resizer bar
94
+ - `style` - Styling to be applied to the main container.
95
+ - `paneStyle` - Styling to be applied to both panes
96
+ - `pane1Style` - Styling to be applied to the first pane, with precedence over `paneStyle`
97
+ - `pane2Style` - Styling to be applied to the second pane, with precedence over `paneStyle`
98
+ - `resizerStyle` - Styling to be applied to the resizer bar
91
99
 
92
100
  ## Persisting Positions
93
101
 
94
- Each SplitPane accepts an onChange function prop. Used in conjunction with
102
+ Each SplitPane accepts an onChange function prop. Used in conjunction with
95
103
  defaultSize and a persistence layer, you can ensure that your splitter choices
96
104
  survive a refresh of your app.
97
105
 
@@ -99,89 +107,129 @@ For example, if you are comfortable with the trade-offs of localStorage, you
99
107
  could do something like the following:
100
108
 
101
109
  ```jsx
102
- <SplitPane split="vertical" minSize={50}
103
- defaultSize={ parseInt(localStorage.getItem('splitPos'), 10) }
104
- onChange={ size => localStorage.setItem('splitPos', size) }>
105
- <div></div>
106
- <div></div>
107
- </SplitPane>
110
+ <SplitPane
111
+ split="vertical"
112
+ minSize={50}
113
+ defaultSize={parseInt(localStorage.getItem('splitPos'), 10)}
114
+ onChange={size => localStorage.setItem('splitPos', size)}
115
+ >
116
+ <div />
117
+ <div />
118
+ </SplitPane>
108
119
  ```
109
120
 
110
- Disclaimer: localStorage has a variety of performance trade-offs. Browsers such
121
+ Disclaimer: localStorage has a variety of performance trade-offs. Browsers such
111
122
  as Firefox have now optimized localStorage use so that they will asynchronously
112
123
  initiate a read of all saved localStorage data for an origin once they know the
113
- page will load. If the data has not fully loaded by the time code accesses
124
+ page will load. If the data has not fully loaded by the time code accesses
114
125
  localStorage, the code will cause the page's main thread to block until the
115
- database load completes. When the main thread is blocked, no other JS code will
116
- run or layout will occur. In multiprocess browsers and for users with fast
117
- disk storage, this will be less of a problem. You *are* likely to get yelled at
126
+ database load completes. When the main thread is blocked, no other JS code will
127
+ run or layout will occur. In multiprocess browsers and for users with fast
128
+ disk storage, this will be less of a problem. You _are_ likely to get yelled at
118
129
  if you use localStorage.
119
130
 
120
131
  A potentially better idea is to use something like
121
132
  https://github.com/mozilla/localForage although hooking it up will be slightly
122
- more involved. You are likely to be admired by all for judiciously avoiding
133
+ more involved. You are likely to be admired by all for judiciously avoiding
123
134
  use of localStorage.
124
135
 
125
136
  ## Example styling
126
137
 
127
138
  This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.
128
139
 
129
- Thanks to ```background-clip: padding-box;``` for making transparent borders possible.
130
-
140
+ Thanks to `background-clip: padding-box;` for making transparent borders possible.
131
141
 
132
142
  ```css
143
+ .Resizer {
144
+ background: #000;
145
+ opacity: 0.2;
146
+ z-index: 1;
147
+ -moz-box-sizing: border-box;
148
+ -webkit-box-sizing: border-box;
149
+ box-sizing: border-box;
150
+ -moz-background-clip: padding;
151
+ -webkit-background-clip: padding;
152
+ background-clip: padding-box;
153
+ }
154
+
155
+ .Resizer:hover {
156
+ -webkit-transition: all 2s ease;
157
+ transition: all 2s ease;
158
+ }
159
+
160
+ .Resizer.horizontal {
161
+ height: 11px;
162
+ margin: -5px 0;
163
+ border-top: 5px solid rgba(255, 255, 255, 0);
164
+ border-bottom: 5px solid rgba(255, 255, 255, 0);
165
+ cursor: row-resize;
166
+ width: 100%;
167
+ }
168
+
169
+ .Resizer.horizontal:hover {
170
+ border-top: 5px solid rgba(0, 0, 0, 0.5);
171
+ border-bottom: 5px solid rgba(0, 0, 0, 0.5);
172
+ }
173
+
174
+ .Resizer.vertical {
175
+ width: 11px;
176
+ margin: 0 -5px;
177
+ border-left: 5px solid rgba(255, 255, 255, 0);
178
+ border-right: 5px solid rgba(255, 255, 255, 0);
179
+ cursor: col-resize;
180
+ }
181
+
182
+ .Resizer.vertical:hover {
183
+ border-left: 5px solid rgba(0, 0, 0, 0.5);
184
+ border-right: 5px solid rgba(0, 0, 0, 0.5);
185
+ }
186
+ .Resizer.disabled {
187
+ cursor: not-allowed;
188
+ }
189
+ .Resizer.disabled:hover {
190
+ border-color: transparent;
191
+ }
192
+ ```
193
+
194
+ ## New Version
195
+
196
+ **I'm working on an updated version of this library, and looking for help:**
133
197
 
134
- .Resizer {
135
- background: #000;
136
- opacity: .2;
137
- z-index: 1;
138
- -moz-box-sizing: border-box;
139
- -webkit-box-sizing: border-box;
140
- box-sizing: border-box;
141
- -moz-background-clip: padding;
142
- -webkit-background-clip: padding;
143
- background-clip: padding-box;
144
- }
145
-
146
- .Resizer:hover {
147
- -webkit-transition: all 2s ease;
148
- transition: all 2s ease;
149
- }
150
-
151
- .Resizer.horizontal {
152
- height: 11px;
153
- margin: -5px 0;
154
- border-top: 5px solid rgba(255, 255, 255, 0);
155
- border-bottom: 5px solid rgba(255, 255, 255, 0);
156
- cursor: row-resize;
157
- width: 100%;
158
- }
159
-
160
- .Resizer.horizontal:hover {
161
- border-top: 5px solid rgba(0, 0, 0, 0.5);
162
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
163
- }
164
-
165
- .Resizer.vertical {
166
- width: 11px;
167
- margin: 0 -5px;
168
- border-left: 5px solid rgba(255, 255, 255, 0);
169
- border-right: 5px solid rgba(255, 255, 255, 0);
170
- cursor: col-resize;
171
- }
172
-
173
- .Resizer.vertical:hover {
174
- border-left: 5px solid rgba(0, 0, 0, 0.5);
175
- border-right: 5px solid rgba(0, 0, 0, 0.5);
176
- }
177
- .Resizer.disabled {
178
- cursor: not-allowed;
179
- }
180
- .Resizer.disabled:hover {
181
- border-color: transparent;
182
- }
183
-
184
- ```
198
+ Demo
199
+
200
+ http://react-split-pane-v2.surge.sh/
201
+
202
+ Install
203
+
204
+ ```sh
205
+ npm install react-split-pane@next
206
+
207
+ # or if you use yarn
208
+
209
+ yarn add react-split-pane@next
210
+ ```
211
+
212
+ Usage
213
+
214
+ ```jsx
215
+ import SplitPane, { Pane } from 'react-split-pane';
216
+
217
+ <SplitPane split="vertical">
218
+ <Pane initialSize="200px">You can use a Pane component</Pane>
219
+ <div>or you can use a plain old div</div>
220
+ <Pane initialSize="25%" minSize="10%" maxSize="500px">
221
+ Using a Pane allows you to specify any constraints directly
222
+ </Pane>
223
+ </SplitPane>;
224
+ ```
225
+
226
+ Pull request
227
+
228
+ https://github.com/tomkp/react-split-pane/pull/240
229
+
230
+ More discussion
231
+
232
+ https://github.com/tomkp/react-split-pane/issues/233
185
233
 
186
234
  ## Contributing
187
235
 
@@ -189,6 +237,4 @@ I'm always happy to receive Pull Requests for contributions of any kind.
189
237
 
190
238
  Please include tests and/or update the examples if possible.
191
239
 
192
- **I'm working on an updated version of this library, and looking for help:** https://github.com/tomkp/react-split-pane/pull/240
193
-
194
- Thanks, Tom
240
+ Thanks, Tom
package/dist/index.cjs.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
6
 
5
7
  var React = _interopDefault(require('react'));
@@ -44,20 +46,35 @@ function _defineProperty(obj, key, value) {
44
46
  return obj;
45
47
  }
46
48
 
47
- function _objectSpread(target) {
49
+ function ownKeys(object, enumerableOnly) {
50
+ var keys = Object.keys(object);
51
+
52
+ if (Object.getOwnPropertySymbols) {
53
+ var symbols = Object.getOwnPropertySymbols(object);
54
+ if (enumerableOnly) symbols = symbols.filter(function (sym) {
55
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
56
+ });
57
+ keys.push.apply(keys, symbols);
58
+ }
59
+
60
+ return keys;
61
+ }
62
+
63
+ function _objectSpread2(target) {
48
64
  for (var i = 1; i < arguments.length; i++) {
49
65
  var source = arguments[i] != null ? arguments[i] : {};
50
- var ownKeys = Object.keys(source);
51
66
 
52
- if (typeof Object.getOwnPropertySymbols === 'function') {
53
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
54
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
55
- }));
67
+ if (i % 2) {
68
+ ownKeys(Object(source), true).forEach(function (key) {
69
+ _defineProperty(target, key, source[key]);
70
+ });
71
+ } else if (Object.getOwnPropertyDescriptors) {
72
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
73
+ } else {
74
+ ownKeys(Object(source)).forEach(function (key) {
75
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
76
+ });
56
77
  }
57
-
58
- ownKeys.forEach(function (key) {
59
- _defineProperty(target, key, source[key]);
60
- });
61
78
  }
62
79
 
63
80
  return target;
@@ -110,9 +127,7 @@ function _possibleConstructorReturn(self, call) {
110
127
  return _assertThisInitialized(self);
111
128
  }
112
129
 
113
- var Pane =
114
- /*#__PURE__*/
115
- function (_React$PureComponent) {
130
+ var Pane = /*#__PURE__*/function (_React$PureComponent) {
116
131
  _inherits(Pane, _React$PureComponent);
117
132
 
118
133
  function Pane() {
@@ -132,11 +147,11 @@ function (_React$PureComponent) {
132
147
  size = _this$props.size,
133
148
  eleRef = _this$props.eleRef;
134
149
  var classes = ['Pane', split, className];
135
- var style = Object.assign({}, styleProps || {}, {
150
+ var style = {
136
151
  flex: 1,
137
152
  position: 'relative',
138
153
  outline: 'none'
139
- });
154
+ };
140
155
 
141
156
  if (size !== undefined) {
142
157
  if (split === 'vertical') {
@@ -149,6 +164,7 @@ function (_React$PureComponent) {
149
164
  style.flex = 'none';
150
165
  }
151
166
 
167
+ style = Object.assign({}, style, styleProps || {});
152
168
  return React.createElement("div", {
153
169
  ref: eleRef,
154
170
  className: classes.join(' '),
@@ -172,9 +188,7 @@ Pane.defaultProps = {};
172
188
 
173
189
  var RESIZER_DEFAULT_CLASSNAME = 'Resizer';
174
190
 
175
- var Resizer =
176
- /*#__PURE__*/
177
- function (_React$Component) {
191
+ var Resizer = /*#__PURE__*/function (_React$Component) {
178
192
  _inherits(Resizer, _React$Component);
179
193
 
180
194
  function Resizer() {
@@ -280,9 +294,7 @@ function removeNullChildren(children) {
280
294
  });
281
295
  }
282
296
 
283
- var SplitPane =
284
- /*#__PURE__*/
285
- function (_React$Component) {
297
+ var SplitPane = /*#__PURE__*/function (_React$Component) {
286
298
  _inherits(SplitPane, _React$Component);
287
299
 
288
300
  function SplitPane(props) {
@@ -291,11 +303,11 @@ function (_React$Component) {
291
303
  _classCallCheck(this, SplitPane);
292
304
 
293
305
  _this = _possibleConstructorReturn(this, _getPrototypeOf(SplitPane).call(this, props));
294
- _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
295
- _this.onTouchStart = _this.onTouchStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
296
- _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
297
- _this.onTouchMove = _this.onTouchMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
298
- _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_assertThisInitialized(_this))); // order of setting panel sizes.
306
+ _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
307
+ _this.onTouchStart = _this.onTouchStart.bind(_assertThisInitialized(_this));
308
+ _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_this));
309
+ _this.onTouchMove = _this.onTouchMove.bind(_assertThisInitialized(_this));
310
+ _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this)); // order of setting panel sizes.
299
311
  // 1. size
300
312
  // 2. getDefaultSize(defaultSize, minsize, maxSize)
301
313
 
@@ -509,7 +521,7 @@ function (_React$Component) {
509
521
  var resizerClassNamesIncludingDefault = resizerClassName ? "".concat(resizerClassName, " ").concat(RESIZER_DEFAULT_CLASSNAME) : resizerClassName;
510
522
  var notNullChildren = removeNullChildren(children);
511
523
 
512
- var style = _objectSpread({
524
+ var style = _objectSpread2({
513
525
  display: 'flex',
514
526
  flex: 1,
515
527
  height: '100%',
@@ -540,9 +552,9 @@ function (_React$Component) {
540
552
 
541
553
  var classes = ['SplitPane', className, split, disabledClass];
542
554
 
543
- var pane1Style = _objectSpread({}, paneStyle, pane1StyleProps);
555
+ var pane1Style = _objectSpread2({}, paneStyle, {}, pane1StyleProps);
544
556
 
545
- var pane2Style = _objectSpread({}, paneStyle, pane2StyleProps);
557
+ var pane2Style = _objectSpread2({}, paneStyle, {}, pane2StyleProps);
546
558
 
547
559
  var pane1Classes = ['Pane1', paneClassName, pane1ClassName].join(' ');
548
560
  var pane2Classes = ['Pane2', paneClassName, pane2ClassName].join(' ');
@@ -655,4 +667,5 @@ SplitPane.defaultProps = {
655
667
  };
656
668
  reactLifecyclesCompat.polyfill(SplitPane);
657
669
 
658
- module.exports = SplitPane;
670
+ exports.Pane = Pane;
671
+ exports.default = SplitPane;
package/dist/index.esm.js CHANGED
@@ -40,20 +40,35 @@ function _defineProperty(obj, key, value) {
40
40
  return obj;
41
41
  }
42
42
 
43
- function _objectSpread(target) {
43
+ function ownKeys(object, enumerableOnly) {
44
+ var keys = Object.keys(object);
45
+
46
+ if (Object.getOwnPropertySymbols) {
47
+ var symbols = Object.getOwnPropertySymbols(object);
48
+ if (enumerableOnly) symbols = symbols.filter(function (sym) {
49
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
50
+ });
51
+ keys.push.apply(keys, symbols);
52
+ }
53
+
54
+ return keys;
55
+ }
56
+
57
+ function _objectSpread2(target) {
44
58
  for (var i = 1; i < arguments.length; i++) {
45
59
  var source = arguments[i] != null ? arguments[i] : {};
46
- var ownKeys = Object.keys(source);
47
60
 
48
- if (typeof Object.getOwnPropertySymbols === 'function') {
49
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
50
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
51
- }));
61
+ if (i % 2) {
62
+ ownKeys(Object(source), true).forEach(function (key) {
63
+ _defineProperty(target, key, source[key]);
64
+ });
65
+ } else if (Object.getOwnPropertyDescriptors) {
66
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
67
+ } else {
68
+ ownKeys(Object(source)).forEach(function (key) {
69
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
70
+ });
52
71
  }
53
-
54
- ownKeys.forEach(function (key) {
55
- _defineProperty(target, key, source[key]);
56
- });
57
72
  }
58
73
 
59
74
  return target;
@@ -106,9 +121,7 @@ function _possibleConstructorReturn(self, call) {
106
121
  return _assertThisInitialized(self);
107
122
  }
108
123
 
109
- var Pane =
110
- /*#__PURE__*/
111
- function (_React$PureComponent) {
124
+ var Pane = /*#__PURE__*/function (_React$PureComponent) {
112
125
  _inherits(Pane, _React$PureComponent);
113
126
 
114
127
  function Pane() {
@@ -128,11 +141,11 @@ function (_React$PureComponent) {
128
141
  size = _this$props.size,
129
142
  eleRef = _this$props.eleRef;
130
143
  var classes = ['Pane', split, className];
131
- var style = Object.assign({}, styleProps || {}, {
144
+ var style = {
132
145
  flex: 1,
133
146
  position: 'relative',
134
147
  outline: 'none'
135
- });
148
+ };
136
149
 
137
150
  if (size !== undefined) {
138
151
  if (split === 'vertical') {
@@ -145,6 +158,7 @@ function (_React$PureComponent) {
145
158
  style.flex = 'none';
146
159
  }
147
160
 
161
+ style = Object.assign({}, style, styleProps || {});
148
162
  return React.createElement("div", {
149
163
  ref: eleRef,
150
164
  className: classes.join(' '),
@@ -168,9 +182,7 @@ Pane.defaultProps = {};
168
182
 
169
183
  var RESIZER_DEFAULT_CLASSNAME = 'Resizer';
170
184
 
171
- var Resizer =
172
- /*#__PURE__*/
173
- function (_React$Component) {
185
+ var Resizer = /*#__PURE__*/function (_React$Component) {
174
186
  _inherits(Resizer, _React$Component);
175
187
 
176
188
  function Resizer() {
@@ -276,9 +288,7 @@ function removeNullChildren(children) {
276
288
  });
277
289
  }
278
290
 
279
- var SplitPane =
280
- /*#__PURE__*/
281
- function (_React$Component) {
291
+ var SplitPane = /*#__PURE__*/function (_React$Component) {
282
292
  _inherits(SplitPane, _React$Component);
283
293
 
284
294
  function SplitPane(props) {
@@ -287,11 +297,11 @@ function (_React$Component) {
287
297
  _classCallCheck(this, SplitPane);
288
298
 
289
299
  _this = _possibleConstructorReturn(this, _getPrototypeOf(SplitPane).call(this, props));
290
- _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
291
- _this.onTouchStart = _this.onTouchStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
292
- _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
293
- _this.onTouchMove = _this.onTouchMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
294
- _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_assertThisInitialized(_this))); // order of setting panel sizes.
300
+ _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
301
+ _this.onTouchStart = _this.onTouchStart.bind(_assertThisInitialized(_this));
302
+ _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_this));
303
+ _this.onTouchMove = _this.onTouchMove.bind(_assertThisInitialized(_this));
304
+ _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this)); // order of setting panel sizes.
295
305
  // 1. size
296
306
  // 2. getDefaultSize(defaultSize, minsize, maxSize)
297
307
 
@@ -505,7 +515,7 @@ function (_React$Component) {
505
515
  var resizerClassNamesIncludingDefault = resizerClassName ? "".concat(resizerClassName, " ").concat(RESIZER_DEFAULT_CLASSNAME) : resizerClassName;
506
516
  var notNullChildren = removeNullChildren(children);
507
517
 
508
- var style = _objectSpread({
518
+ var style = _objectSpread2({
509
519
  display: 'flex',
510
520
  flex: 1,
511
521
  height: '100%',
@@ -536,9 +546,9 @@ function (_React$Component) {
536
546
 
537
547
  var classes = ['SplitPane', className, split, disabledClass];
538
548
 
539
- var pane1Style = _objectSpread({}, paneStyle, pane1StyleProps);
549
+ var pane1Style = _objectSpread2({}, paneStyle, {}, pane1StyleProps);
540
550
 
541
- var pane2Style = _objectSpread({}, paneStyle, pane2StyleProps);
551
+ var pane2Style = _objectSpread2({}, paneStyle, {}, pane2StyleProps);
542
552
 
543
553
  var pane1Classes = ['Pane1', paneClassName, pane1ClassName].join(' ');
544
554
  var pane2Classes = ['Pane2', paneClassName, pane2ClassName].join(' ');
@@ -652,3 +662,4 @@ SplitPane.defaultProps = {
652
662
  polyfill(SplitPane);
653
663
 
654
664
  export default SplitPane;
665
+ export { Pane };
package/index.d.ts CHANGED
@@ -2,9 +2,9 @@ import * as React from 'react';
2
2
 
3
3
  export type Size = string | number;
4
4
 
5
- type Partial<T> = { [P in keyof T]?: T[P] };
5
+ export type Split = 'vertical' | 'horizontal';
6
6
 
7
- export interface Props {
7
+ export type SplitPaneProps = {
8
8
  allowResize?: boolean;
9
9
  className?: string;
10
10
  primary?: 'first' | 'second';
@@ -25,14 +25,17 @@ export interface Props {
25
25
  pane2Style?: React.CSSProperties;
26
26
  resizerClassName?: string;
27
27
  step?: number;
28
- }
28
+ };
29
29
 
30
- export interface State {
30
+ export type SplitPaneState = {
31
31
  active: boolean;
32
32
  resized: boolean;
33
- }
33
+ };
34
34
 
35
- declare class SplitPane extends React.Component<Props, State> {
35
+ declare class SplitPane extends React.Component<
36
+ SplitPaneProps,
37
+ SplitPaneState
38
+ > {
36
39
  constructor();
37
40
 
38
41
  onMouseDown(event: MouseEvent): void;
@@ -45,9 +48,24 @@ declare class SplitPane extends React.Component<Props, State> {
45
48
 
46
49
  onMouseUp(): void;
47
50
 
48
- static getSizeUpdate(props: Props, state: State): Partial<State>;
51
+ static getSizeUpdate(
52
+ props: SplitPaneProps,
53
+ state: SplitPaneState
54
+ ): Partial<SplitPaneState>;
49
55
 
50
- static defaultProps: Props;
56
+ static defaultProps: SplitPaneProps;
51
57
  }
52
58
 
53
59
  export default SplitPane;
60
+
61
+ export type PaneProps = {
62
+ className?: string;
63
+ size?: Size;
64
+ split?: Split;
65
+ style?: React.CSSProperties;
66
+ eleRef?: (el: HTMLDivElement) => void;
67
+ };
68
+
69
+ declare class Pane extends React.PureComponent<PaneProps> {}
70
+
71
+ export { Pane };
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "dist",
10
10
  "index.d.ts"
11
11
  ],
12
- "version": "0.1.85",
12
+ "version": "0.1.91",
13
13
  "repository": {
14
14
  "type": "git",
15
15
  "url": "https://github.com/tomkp/react-split-pane"
@@ -28,19 +28,22 @@
28
28
  "es6"
29
29
  ],
30
30
  "scripts": {
31
- "prebuild": "npm run clean",
31
+ "start": "parcel website/index.html",
32
+ "prebuild": "yarn run clean",
32
33
  "build": "rollup -c",
33
34
  "build:watch": "rollup -c --watch",
34
35
  "clean": "rimraf dist",
35
- "test": "mochify -R spec --transform babelify",
36
- "test:watch": "mochify -R spec --watch --transform babelify",
37
- "test:coverage": "mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] --transform babelify && cat lcov.info | coveralls && rm lcov.info",
38
- "website:start": "npm run start --prefix website",
39
- "website:deploy": "npm run deploy --prefix website",
36
+ "clean:website": "rimraf build",
37
+ "prebuild:website": "yarn run clean:website",
38
+ "build:website": "parcel build website/index.html -d build --public-url /react-split-pane/",
39
+ "test": "BABEL_ENV=test mochify -R spec --transform babelify",
40
+ "test:watch": "BABEL_ENV=test mochify -R spec --watch --transform babelify",
41
+ "test:coverage": "BABEL_ENV=test mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] --transform babelify && cat lcov.info | coveralls && rm lcov.info",
40
42
  "prettier": "prettier --write '{src,test}/**/*.js'",
41
43
  "lint": "eslint src test",
42
- "release:patch": "npm test && npm run build && npm version patch && git push && npm publish",
43
- "precommit": "lint-staged"
44
+ "release": "standard-version",
45
+ "deploy": "gh-pages -d build",
46
+ "prepublishOnly": "yarn run test && yarn run build"
44
47
  },
45
48
  "husky": {
46
49
  "hooks": {
@@ -48,42 +51,53 @@
48
51
  }
49
52
  },
50
53
  "dependencies": {
51
- "prop-types": "^15.5.10",
52
- "react": "^16.6.3",
53
- "react-dom": "^16.6.3",
54
+ "prop-types": "^15.7.2",
54
55
  "react-lifecycles-compat": "^3.0.4",
55
- "react-style-proptype": "^3.0.0"
56
+ "react-style-proptype": "^3.2.2"
56
57
  },
57
58
  "devDependencies": {
58
- "@babel/core": "^7.2.0",
59
- "@babel/preset-env": "^7.2.0",
60
- "@babel/preset-react": "^7.0.0",
61
- "@types/react": "^16.0.36",
62
- "babel-eslint": "^10.0.1",
59
+ "@babel/core": "^7.7.2",
60
+ "@babel/plugin-transform-modules-commonjs": "^7.7.0",
61
+ "@babel/preset-env": "^7.7.1",
62
+ "@babel/preset-react": "^7.7.0",
63
+ "@emotion/core": "^10.0.22",
64
+ "@emotion/styled": "^10.0.23",
65
+ "@types/react": "^16.9.11",
66
+ "babel-eslint": "^10.0.3",
63
67
  "babelify": "^10.0.0",
64
- "chai": "^4.0.2",
65
- "chai-spies": "^0.7.1",
66
- "coveralls": "^2.13.1",
67
- "cross-env": "^5.2.0",
68
- "eslint": "^4.19.1",
69
- "eslint-config-fbjs": "^2.1.0",
70
- "eslint-config-prettier": "^2.9.0",
68
+ "chai": "^4.2.0",
69
+ "chai-spies": "^1.0.0",
70
+ "coveralls": "^3.0.7",
71
+ "cross-env": "^7.0.0",
72
+ "eslint": "^6.6.0",
73
+ "eslint-config-fbjs": "^3.1.1",
74
+ "eslint-config-prettier": "^6.5.0",
71
75
  "eslint-config-react": "^1.1.7",
72
76
  "eslint-plugin-babel": "^5.1.0",
73
- "eslint-plugin-flowtype": "^2.49.3",
74
- "eslint-plugin-jsx-a11y": "^6.0.3",
75
- "eslint-plugin-prettier": "^2.6.0",
76
- "eslint-plugin-react": "^7.9.1",
77
- "eslint-plugin-relay": "^0.0.21",
78
- "husky": "^1.2.0",
79
- "mochify": "^5.8.0",
77
+ "eslint-plugin-flowtype": "^4.3.0",
78
+ "eslint-plugin-jsx-a11y": "^6.2.3",
79
+ "eslint-plugin-prettier": "^3.1.1",
80
+ "eslint-plugin-react": "^7.16.0",
81
+ "eslint-plugin-relay": "^1.3.12",
82
+ "gh-pages": "^2.1.1",
83
+ "husky": "^4.2.3",
84
+ "mochify": "^6.6.0",
80
85
  "mochify-istanbul": "^2.4.2",
81
- "prettier": "1.15.3",
82
- "pretty-quick": "^1.8.0",
83
- "rimraf": "^2.6.2",
84
- "rollup": "^0.60.7",
85
- "rollup-plugin-babel": "^4.0.3",
86
- "rollup-plugin-commonjs": "^9.1.3",
87
- "rollup-plugin-node-resolve": "^3.3.0"
86
+ "parcel-bundler": "^1.12.4",
87
+ "prettier": "1.19.1",
88
+ "pretty-quick": "^2.0.1",
89
+ "react": ">=15",
90
+ "react-dom": "^16.0.0-0",
91
+ "react-router-dom": "^5.1.2",
92
+ "rimraf": "^3.0.0",
93
+ "rollup": "^1.26.5",
94
+ "rollup-plugin-babel": "^4.3.3",
95
+ "rollup-plugin-commonjs": "^10.1.0",
96
+ "rollup-plugin-node-resolve": "^5.2.0",
97
+ "standard-version": "^7.0.0"
98
+ },
99
+ "peerDependencies": {
100
+ "react": "^16.0.0-0",
101
+ "react-dom": "^16.0.0-0"
88
102
  }
89
103
  }