react-split-pane - npm Package Compare versions

Comparing version 0.1.87 to 0.1.89

package.json

@@ -12,3 +12,3 @@ {
   ],
-  "version": "0.1.87",
+  "version": "0.1.89",
   "repository": {
@@ -32,15 +32,19 @@ "type": "git",
   "scripts": {
-    "prebuild": "npm run clean",
+    "start": "parcel website/index.html",
+    "prebuild": "yarn run clean",
     "build": "rollup -c",
     "build:watch": "rollup -c --watch",
     "clean": "rimraf dist",
+    "clean:website": "rimraf build",
+    "prebuild:website": "yarn run clean:website",
+    "build:website": "parcel build website/index.html -d build --public-url /react-split-pane/",
     "test": "mochify -R spec --transform babelify",
     "test:watch": "mochify -R spec --watch --transform babelify",
     "test:coverage": "mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] --transform babelify && cat lcov.info | coveralls && rm lcov.info",
-    "website:start": "npm run start --prefix website",
-    "website:deploy": "npm run deploy --prefix website",
     "prettier": "prettier --write '{src,test}/**/*.js'",
     "lint": "eslint src test",
-    "release:patch": "npm test && npm run build && npm version patch && git push && npm publish",
-    "precommit": "lint-staged"
+    "release": "standard-version",
+    "precommit": "lint-staged",
+    "deploy": "gh-pages -d build",
+    "prepublishOnly": "yarn run test && yarn run build"
   },
@@ -61,2 +65,4 @@ "husky": {
     "@babel/preset-react": "^7.0.0",
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
     "@types/react": "^16.0.36",
@@ -71,3 +77,3 @@ "babel-eslint": "^10.0.1",
     "eslint-config-fbjs": "^2.1.0",
-    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-prettier": "^6.5.0",
     "eslint-config-react": "^1.1.7",
@@ -79,15 +85,19 @@ "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-react": "^7.9.1",
-    "eslint-plugin-relay": "^0.0.21",
+    "eslint-plugin-relay": "^0.0.28",
+    "gh-pages": "^2.1.1",
     "husky": "^1.2.0",
     "mochify": "^5.8.0",
     "mochify-istanbul": "^2.4.2",
+    "parcel-bundler": "^1.12.4",
     "prettier": "1.15.3",
     "pretty-quick": "^1.8.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": ">=15",
+    "react-dom": "^16.0.0-0",
+    "react-router-dom": "^5.1.2",
     "rimraf": "^2.6.2",
-    "rollup": "^0.60.7",
+    "rollup": "^0.68.2",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0"
+    "rollup-plugin-node-resolve": "^4.2.4",
+    "standard-version": "^7.0.0"
   },
@@ -94,0 +104,0 @@ "peerDependencies": {

README.md

@@ -10,5 +10,6 @@ # 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/)!
+Split-Pane React component, can be nested or split vertically or horizontally!
 
 ## Installing
+
 ```sh
@@ -23,17 +24,18 @@ npm install react-split-pane
 ## Example Usage
+
 ```jsx
- <SplitPane split="vertical" minSize={50} defaultSize={100}>
-     <div></div>
-     <div></div>
- </SplitPane>
+<SplitPane split="vertical" minSize={50} defaultSize={100}>
+  <div />
+  <div />
+</SplitPane>
 ```
 
 ```jsx
-  <SplitPane split="vertical" minSize={50}>
-      <div></div>
-      <SplitPane split="horizontal">
-          <div></div>
-          <div></div>
-      </SplitPane>
+<SplitPane split="vertical" minSize={50}>
+  <div />
+  <SplitPane split="horizontal">
+    <div />
+    <div />
   </SplitPane>
+</SplitPane>
 ```
@@ -44,2 +46,3 @@
 ### primary
+
 By dragging 'draggable' surface you can change size of the first pane.
@@ -58,9 +61,10 @@ The first pane keeps then its size while the second pane is resized by browser window.
 ```jsx
-    <SplitPane split="vertical" defaultSize={200} primary="second">
-        <div></div>
-        <div></div>
-    </SplitPane>
+<SplitPane split="vertical" defaultSize={200} primary="second">
+  <div />
+  <div />
+</SplitPane>
 ```
 
 ### maxSize
+
 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).
@@ -75,11 +79,15 @@ If you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning),
 ### step
+
 You can use the step prop to only allow resizing in fixed increments.
 
 ### 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.
@@ -91,11 +99,11 @@
 
- * `style` - Styling to be applied to the main container.
- * `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
+- `style` - Styling to be applied to the main container.
+- `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
+Each SplitPane accepts an onChange function prop. Used in conjunction with
 defaultSize and a persistence layer, you can ensure that your splitter choices
@@ -108,18 +116,21 @@ survive a refresh of your app.
 ```jsx
-    <SplitPane split="vertical" minSize={50}
-               defaultSize={ parseInt(localStorage.getItem('splitPos'), 10) }
-               onChange={ size => localStorage.setItem('splitPos', size) }>
-        <div></div>
-        <div></div>
-    </SplitPane>
+<SplitPane
+  split="vertical"
+  minSize={50}
+  defaultSize={parseInt(localStorage.getItem('splitPos'), 10)}
+  onChange={size => localStorage.setItem('splitPos', size)}
+>
+  <div />
+  <div />
+</SplitPane>
 ```
 
-Disclaimer: localStorage has a variety of performance trade-offs.  Browsers such
+Disclaimer: localStorage has a variety of performance trade-offs. Browsers such
 as Firefox have now optimized localStorage use so that they will asynchronously
 initiate a read of all saved localStorage data for an origin once they know the
-page will load.  If the data has not fully loaded by the time code accesses
+page will load. If the data has not fully loaded by the time code accesses
 localStorage, the code will cause the page's main thread to block until the
-database load completes.  When the main thread is blocked, no other JS code will
-run or layout will occur.  In multiprocess browsers and for users with fast
-disk storage, this will be less of a problem.  You *are* likely to get yelled at
+database load completes. When the main thread is blocked, no other JS code will
+run or layout will occur. In multiprocess browsers and for users with fast
+disk storage, this will be less of a problem. You _are_ likely to get yelled at
 if you use localStorage.
@@ -129,3 +140,3 @@
 https://github.com/mozilla/localForage although hooking it up will be slightly
-more involved.  You are likely to be admired by all for judiciously avoiding
+more involved. You are likely to be admired by all for judiciously avoiding
 use of localStorage.
@@ -137,59 +148,96 @@
 
-Thanks to ```background-clip: padding-box;``` for making transparent borders possible.
+Thanks to `background-clip: padding-box;` for making transparent borders possible.
 
-
 ```css
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
 
-    .Resizer {
-        background: #000;
-        opacity: .2;
-        z-index: 1;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        -moz-background-clip: padding;
-        -webkit-background-clip: padding;
-        background-clip: padding-box;
-    }
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
 
-     .Resizer:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
 
-     .Resizer.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-    }
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
 
-    .Resizer.horizontal:hover {
-        border-top: 5px solid rgba(0, 0, 0, 0.5);
-        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
 
-    .Resizer.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-    }
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}
+```
 
-    .Resizer.vertical:hover {
-        border-left: 5px solid rgba(0, 0, 0, 0.5);
-        border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
-    .Resizer.disabled {
-      cursor: not-allowed;
-    }
-    .Resizer.disabled:hover {
-      border-color: transparent;
-    }
+## New Version
 
- ```
+**I'm working on an updated version of this library, and looking for help:**
 
+Demo
+
+http://react-split-pane-v2.surge.sh/
+
+Install
+
+```sh
+npm install react-split-pane@next
+
+# or if you use yarn
+
+yarn add react-split-pane@next
+```
+
+Usage
+
+```jsx
+import SplitPane, { Pane } from 'react-split-pane';
+
+<SplitPane split="vertical">
+  <Pane initialSize="200px">You can use a Pane component</Pane>
+  <div>or you can use a plain old div</div>
+  <Pane initialSize="25%" minSize="10%" maxSize="500px">
+    Using a Pane allows you to specify any constraints directly
+  </Pane>
+</SplitPane>;
+```
+
+Pull request
+
+https://github.com/tomkp/react-split-pane/pull/240
+
+More discussion
+
+https://github.com/tomkp/react-split-pane/issues/233
+
 ## Contributing
@@ -201,4 +249,2 @@
 
-**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  
+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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of package files

7

increased by16.67%

Number of lines in readme file

241

increased by23.59%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

54486

decreased by-71.5%

Dev dependency count

38

increased by18.75%

Lines of code

1189

decreased by-74.19%

No dependency changes