react-split-pane - npm Package Compare versions

Comparing version 0.1.82 to 0.1.83

dist/index.cjs.js

@@ -405,2 +405,8 @@ 'use strict';
 
+function removeNullChildren(children) {
+  return React.Children.toArray(children).filter(function (c) {
+    return c;
+  });
+}
+
 var SplitPane = function (_React$Component) {
@@ -437,12 +443,3 @@ inherits(SplitPane, _React$Component);
       pane1Size: primary === 'first' ? initialSize : undefined,
-      pane2Size: primary === 'second' ? initialSize : undefined,
-
-      // previous props that we need in static methods
-      instanceProps: {
-        primary: primary,
-        size: size,
-        defaultSize: defaultSize,
-        minSize: minSize,
-        maxSize: maxSize
-      }
+      pane2Size: primary === 'second' ? initialSize : undefined
     };
@@ -634,2 +631,4 @@ return _this;
 
+      var notNullChildren = removeNullChildren(children);
+
       var style = Object.assign({}, {
@@ -692,3 +691,3 @@ display: 'flex',
           },
-          children[0]
+          notNullChildren[0]
         ),
@@ -719,3 +718,3 @@ React.createElement(Resizer, {
           },
-          children[1]
+          notNullChildren[1]
         )
@@ -732,4 +731,2 @@ );
     value: function setSize(props, state) {
-      var instanceProps = state.instanceProps;
-
       var newState = {};
@@ -739,7 +736,3 @@
 
-      var defaultSizeChanged = props.defaultSize !== instanceProps.defaultSize || props.minSize !== instanceProps.minSize || props.maxSize !== instanceProps.maxSize;
-
-      var shouldUpdateSize = props.size !== undefined ? props.size !== instanceProps.size : defaultSizeChanged;
-
-      if (props.size !== undefined && props.size !== state.draggedSize && shouldUpdateSize) {
+      if (props.size !== undefined) {
         newState.draggedSize = newSize;
@@ -750,20 +743,5 @@ }
 
-      if (shouldUpdateSize || props.primary !== state.instanceProps.primary) {
-        newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
-      }
+      newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+      newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
 
-      // unset the size on the non primary panel
-      if (props.primary !== state.instanceProps.primary) {
-        newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
-      }
-
-      // update the values in instanceProps
-      instanceProps.primary = props.primary;
-      instanceProps.size = props.size;
-      instanceProps.defaultSize = props.defaultSize;
-      instanceProps.minSize = props.minSize;
-      instanceProps.maxSize = props.maxSize;
-
-      newState.instanceProps = instanceProps;
-
       return newState;
@@ -770,0 +748,0 @@ }

dist/index.esm.js

@@ -401,2 +401,8 @@ import React from 'react';
 
+function removeNullChildren(children) {
+  return React.Children.toArray(children).filter(function (c) {
+    return c;
+  });
+}
+
 var SplitPane = function (_React$Component) {
@@ -433,12 +439,3 @@ inherits(SplitPane, _React$Component);
       pane1Size: primary === 'first' ? initialSize : undefined,
-      pane2Size: primary === 'second' ? initialSize : undefined,
-
-      // previous props that we need in static methods
-      instanceProps: {
-        primary: primary,
-        size: size,
-        defaultSize: defaultSize,
-        minSize: minSize,
-        maxSize: maxSize
-      }
+      pane2Size: primary === 'second' ? initialSize : undefined
     };
@@ -630,2 +627,4 @@ return _this;
 
+      var notNullChildren = removeNullChildren(children);
+
       var style = Object.assign({}, {
@@ -688,3 +687,3 @@ display: 'flex',
           },
-          children[0]
+          notNullChildren[0]
         ),
@@ -715,3 +714,3 @@ React.createElement(Resizer, {
           },
-          children[1]
+          notNullChildren[1]
         )
@@ -728,4 +727,2 @@ );
     value: function setSize(props, state) {
-      var instanceProps = state.instanceProps;
-
       var newState = {};
@@ -735,7 +732,3 @@
 
-      var defaultSizeChanged = props.defaultSize !== instanceProps.defaultSize || props.minSize !== instanceProps.minSize || props.maxSize !== instanceProps.maxSize;
-
-      var shouldUpdateSize = props.size !== undefined ? props.size !== instanceProps.size : defaultSizeChanged;
-
-      if (props.size !== undefined && props.size !== state.draggedSize && shouldUpdateSize) {
+      if (props.size !== undefined) {
         newState.draggedSize = newSize;
@@ -746,20 +739,5 @@ }
 
-      if (shouldUpdateSize || props.primary !== state.instanceProps.primary) {
-        newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
-      }
+      newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+      newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
 
-      // unset the size on the non primary panel
-      if (props.primary !== state.instanceProps.primary) {
-        newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
-      }
-
-      // update the values in instanceProps
-      instanceProps.primary = props.primary;
-      instanceProps.size = props.size;
-      instanceProps.defaultSize = props.defaultSize;
-      instanceProps.minSize = props.minSize;
-      instanceProps.maxSize = props.maxSize;
-
-      newState.instanceProps = instanceProps;
-
       return newState;
@@ -766,0 +744,0 @@ }

package.json

@@ -12,3 +12,3 @@ {
   ],
-  "version": "0.1.82",
+  "version": "0.1.83",
   "repository": {
@@ -66,4 +66,4 @@ "type": "git",
     "prettier": "^1.13.5",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "rimraf": "^2.6.2",
@@ -70,0 +70,0 @@ "rollup": "^0.60.7",

README.md

 # React Split Pane
 
-Split-Pane component built with [React](http://facebook.github.io/react), can be split vertically or horizontally.
-
-```
-npm install react-split-pane
-```
-
+[![NPM version](https://img.shields.io/npm/v/react-split-pane.svg?style=flat)](https://www.npmjs.com/package/react-split-pane)
+![NPM license](https://img.shields.io/npm/l/react-split-pane.svg?style=flat)
+[![NPM total downloads](https://img.shields.io/npm/dt/react-split-pane.svg?style=flat)](https://npmcharts.com/compare/react-split-pane?minimal=true)
+[![NPM monthly downloads](https://img.shields.io/npm/dm/react-split-pane.svg?style=flat)](https://npmcharts.com/compare/react-split-pane?minimal=true)
 [![Build Status](https://img.shields.io/travis/tomkp/react-split-pane/master.svg?style=flat-square)](https://travis-ci.org/tomkp/react-split-pane)
 [![Coverage Status](https://img.shields.io/coveralls/tomkp/react-split-pane/master.svg?style=flat-square)](https://coveralls.io/r/tomkp/react-split-pane)
 
+Split-Pane React component, can be nested or split vertically or horizontally. Check out some demos [here](http://react-split-pane.surge.sh/)!
 
-Check out the [demos](http://react-split-pane.surge.sh/)
+## Installing
+```sh
+npm install react-split-pane
 
+# or if you use yarn
 
-```html
-   <SplitPane split="vertical" minSize={50} defaultSize={100}>
-       <div></div>
-       <div></div>
-   </SplitPane>
+yarn add react-split-pane
 ```
 
-```html
-    <SplitPane split="vertical" minSize={50}>
-        <div></div>
-        <SplitPane split="horizontal">
-            <div></div>
-            <div></div>
-        </SplitPane>
-    </SplitPane>
+## Example Usage
+```jsx
+ <SplitPane split="vertical" minSize={50} defaultSize={100}>
+     <div></div>
+     <div></div>
+ </SplitPane>
 ```
 
-### Primary pane
+```jsx
+  <SplitPane split="vertical" minSize={50}>
+      <div></div>
+      <SplitPane split="horizontal">
+          <div></div>
+          <div></div>
+      </SplitPane>
+  </SplitPane>
+```
 
+## Props
+
+### primary
 By dragging 'draggable' surface you can change size of the first pane.
@@ -47,3 +54,3 @@ The first pane keeps then its size while the second pane is resized by browser window.
 
-```html
+```jsx
     <SplitPane split="vertical" defaultSize={200} primary="second">
@@ -67,4 +74,22 @@ <div></div>
 
-### Persisting Positions
+### onDragStarted
+This callback is invoked when a drag starts.
 
+### onDragFinished
+This callback is invoked when a drag ends.
+
+### onChange
+This callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.
+
+### Inline Styles
+
+You can also pass inline styles to the components via props. These are:
+
+ * `paneStyle` - Styling to be applied to both panes
+ * `pane1Style` - Styling to be applied to the first pane, with precedence over `paneStyle`
+ * `pane2Style` - Styling to be applied to the second pane, with precedence over `paneStyle`
+ * `resizerStyle` - Styling to be applied to the resizer bar
+
+## Persisting Positions
+
 Each SplitPane accepts an onChange function prop.  Used in conjunction with
@@ -77,3 +102,3 @@ defaultSize and a persistence layer, you can ensure that your splitter choices
 
-```html
+```jsx
     <SplitPane split="vertical" minSize={50}
@@ -102,9 +127,4 @@ defaultSize={ parseInt(localStorage.getItem('splitPos'), 10) }
 
-### Resizing callbacks
+## Example styling
 
-If you need more control over resizing, SplitPane can notify you about when resizing started
-and when it ended through two callbacks: `onDragStarted` and `onDragFinished`.
-
-### Example styling
-
 This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.
@@ -168,21 +188,11 @@
  ```
-### Inline Styles
 
-You can also pass inline styles to the components via props. These are:
+## Contributing
 
- * `paneStyle` - Styling to be applied to both panes
- * `pane1Style` - Styling to be applied to the first pane, with precedence over `paneStyle`
- * `pane2Style` - Styling to be applied to the second pane, with precedence over `paneStyle`
- * `resizerStyle` - Styling to be applied to the resizer bar
+I'm always happy to receive Pull Requests for contributions of any kind.
 
+Please include tests and/or update the examples if possible.
 
-### Contributing
+**I'm working on an updated version of this library, and looking for help:** https://github.com/tomkp/react-split-pane/pull/240
 
-I'm always happy to receive Pull Requests for contributions of any kind. 
-
-Please include tests and/or update the examples if possible.
-  
-**I'm working on an updated version of this library, and looking for help:** https://github.com/tomkp/react-split-pane/pull/240
-  
 Thanks, Tom  
-  

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

194

increased by5.43%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

64386

decreased by-1.93%

Lines of code

1427

decreased by-2.33%

No dependency changes