diff --git a/.gitignore b/.gitignore
index c17bd730..095b69a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,4 @@ lcov.info
dist
build
+.cache
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 1128f6e0..56ff5f45 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,11 +3,11 @@ sudo: required
dist: trusty
node_js:
-- stable
+ - stable
script:
-- npm test
+ - yarn run test
after_script:
-- npm run test:coverage
-- '[ "${TRAVIS_PULL_REQUEST}" = "false" ] && npm run demo:publish || false'
+ - yarn run test:coverage
+ - '[ "${TRAVIS_PULL_REQUEST}" = "false" ] && yarn run demo:publish || false'
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
index 2f9d488c..04e7c4a3 100644
--- a/PULL_REQUEST_TEMPLATE.md
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -2,12 +2,13 @@ Thanks for contributing to react-split-pane!
**Before submitting a pull request,** please complete the following checklist:
-- [ ] The existing test suites (`yarn test`) all pass
+- [ ] The existing test suites (`yarn run test`) all pass
- [ ] For any new features or bug fixes, both positive and negative test cases have been added
- [ ] For any new features, documentation has been added
- [ ] For any documentation changes, the text has been proofread and is clear to both experienced users and beginners.
-- [ ] Format your code with [prettier](https://github.com/prettier/prettier) (`npm run prettier`).
+- [ ] Format your code with [prettier](https://github.com/prettier/prettier) (`yarn run prettier`).
Here is a short checklist of additional things to keep in mind before submitting:
-* Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
-* Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)
+
+- Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
+- Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)
diff --git a/README.md b/README.md
index 410442ce..9fa267ce 100644
--- a/README.md
+++ b/README.md
@@ -7,9 +7,10 @@
[![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.now.sh/)!
+Split-Pane React component, can be nested or split vertically or horizontally!
## Installing
+
```sh
npm install react-split-pane
@@ -19,26 +20,28 @@ yarn add react-split-pane
```
## Example Usage
+
```jsx
-
-
-
-
+
+
+
+
```
```jsx
-
-
-
-
-
-
+
+
+
+
+
+
```
## Props
### primary
+
By dragging 'draggable' surface you can change size of the first pane.
The first pane keeps then its size while the second pane is resized by browser window.
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
In this example right pane keeps its width 200px while user is resizing browser window.
```jsx
-
-
-
-
+
+
+
+
```
### 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).
If you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning),
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
size of the 'resizable' pane in this case). This can be useful also in the full-screen case of use.
### 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.
### Inline Styles
You can also pass inline styles to the components via props. These are:
- * `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
survive a refresh of your app.
@@ -99,89 +107,89 @@ For example, if you are comfortable with the trade-offs of localStorage, you
could do something like the following:
```jsx
- localStorage.setItem('splitPos', size) }>
-
-
-
+ localStorage.setItem('splitPos', size)}
+>
+
+
+
```
-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.
A potentially better idea is to use something like
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.
## Example styling
This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.
-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: .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.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.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 {
+ 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: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: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: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
@@ -204,8 +212,7 @@ yarn add react-split-pane@next
Usage
```jsx
-import SplitPane from 'react-split-pane'
-import Pane from 'react-split-pane/lib/Pane'
+import SplitPane, { Pane } from 'react-split-pane';
You can use a Pane component
@@ -213,7 +220,7 @@ import Pane from 'react-split-pane/lib/Pane'
Using a Pane allows you to specify any constraints directly
-
+;
```
Pull request
@@ -224,12 +231,10 @@ More discussion
https://github.com/tomkp/react-split-pane/issues/233
-
## Contributing
I'm always happy to receive Pull Requests for contributions of any kind.
Please include tests and/or update the examples if possible.
-Thanks, Tom
-
+Thanks, Tom
diff --git a/package.json b/package.json
index 20d39066..e7229329 100644
--- a/package.json
+++ b/package.json
@@ -28,19 +28,23 @@
"es6"
],
"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"
},
"husky": {
"hooks": {
@@ -56,6 +60,8 @@
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
+ "@emotion/core": "^10.0.22",
+ "@emotion/styled": "^10.0.23",
"@types/react": "^16.0.36",
"babel-eslint": "^10.0.1",
"babelify": "^10.0.0",
@@ -73,18 +79,22 @@
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.9.1",
"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.68.2",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.1.3",
- "rollup-plugin-node-resolve": "^4.2.4"
+ "rollup-plugin-node-resolve": "^4.2.4",
+ "standard-version": "^7.0.0"
},
"peerDependencies": {
"react": "^16.0.0-0",
diff --git a/src/index.js b/src/index.js
index 77cda79f..2fc2200e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,5 @@
import SplitPane from './SplitPane';
+import Pane from './Pane';
export default SplitPane;
+export { Pane };
diff --git a/website/.prettierrc b/website/.prettierrc
deleted file mode 100644
index 1308d227..00000000
--- a/website/.prettierrc
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "singleQuote": true,
- "trailingComma": "es5",
- "overrides": [
- {
- "files": "*.js",
- "options": {
- "parser": "babylon"
- }
- },
- {
- "files": "*.css",
- "options": {
- "parser": "css"
- }
- }
- ]
-}
diff --git a/website/src/App.js b/website/App.js
similarity index 98%
rename from website/src/App.js
rename to website/App.js
index 10c445ac..2461c03d 100644
--- a/website/src/App.js
+++ b/website/App.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
import { HashRouter, Route, Redirect } from 'react-router-dom';
import Sidebar from './components/Sidebar';
diff --git a/website/src/App.module.css b/website/App.module.css
similarity index 100%
rename from website/src/App.module.css
rename to website/App.module.css
diff --git a/website/README.md b/website/README.md
deleted file mode 100644
index 1df94c00..00000000
--- a/website/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-This directory contains the source for [react-split-pane.surge.sh](https://react-split-pane.surge.sh).
-The website structure was created with [`create-react-app`](https://github.com/facebook/create-react-app), although it has since been ejected in order to add custom Webpack loaders.
-
-## Local development
-
-Run the NPM "build:watch" command in the project root to watch for changes to `react-split-pane` and rebuild:
-
-```sh
- cd /local/path/to/react-split-pane
- npm run build:watch
-```
-
-Lastly, run the NPM "start" command from the website directory to run the local webserver:
-
-```sh
-cd /local/path/to/react-split-pane/website
-npm run start
-```
-
-## Deployment
-
-To deploy this website to Surge, use the NPM "deploy" command from this directory:
-
-```sh
-cd /local/path/to/react-split-pane/website
-npm run deploy
-```
diff --git a/website/src/components/Sidebar.js b/website/components/Sidebar.js
similarity index 98%
rename from website/src/components/Sidebar.js
rename to website/components/Sidebar.js
index 2cd62638..3db43047 100644
--- a/website/src/components/Sidebar.js
+++ b/website/components/Sidebar.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
import { Link, NavLink } from 'react-router-dom';
const Container = styled('div')`
diff --git a/website/config/env.js b/website/config/env.js
deleted file mode 100644
index d0420e57..00000000
--- a/website/config/env.js
+++ /dev/null
@@ -1,91 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
- throw new Error(
- 'The NODE_ENV environment variable is required but was not specified.'
- );
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
- `${paths.dotenv}.${NODE_ENV}.local`,
- `${paths.dotenv}.${NODE_ENV}`,
- // Don't include `.env.local` for `test` environment
- // since normally you expect tests to produce the same
- // results for everyone
- NODE_ENV !== 'test' && `${paths.dotenv}.local`,
- paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set. Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
- if (fs.existsSync(dotenvFile)) {
- require('dotenv-expand')(
- require('dotenv').config({
- path: dotenvFile,
- })
- );
- }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
- .split(path.delimiter)
- .filter(folder => folder && !path.isAbsolute(folder))
- .map(folder => path.resolve(appDirectory, folder))
- .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
- const raw = Object.keys(process.env)
- .filter(key => REACT_APP.test(key))
- .reduce(
- (env, key) => {
- env[key] = process.env[key];
- return env;
- },
- {
- // Useful for determining whether we’re running in production mode.
- // Most importantly, it switches React into the correct mode.
- NODE_ENV: process.env.NODE_ENV || 'development',
- // Useful for resolving the correct path to static assets in `public`.
- // For example, .
- // This should only be used as an escape hatch. Normally you would put
- // images into the `src` and `import` them in code to get their paths.
- PUBLIC_URL: publicUrl,
- }
- );
- // Stringify all values so we can feed into Webpack DefinePlugin
- const stringified = {
- 'process.env': Object.keys(raw).reduce((env, key) => {
- env[key] = JSON.stringify(raw[key]);
- return env;
- }, {}),
- };
-
- return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;
diff --git a/website/config/jest/babelTransform.js b/website/config/jest/babelTransform.js
deleted file mode 100644
index bf54fb7f..00000000
--- a/website/config/jest/babelTransform.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const babelJest = require('babel-jest');
-
-module.exports = babelJest.createTransformer({
- presets: [require.resolve('babel-preset-react-app')],
-});
diff --git a/website/config/jest/cssTransform.js b/website/config/jest/cssTransform.js
deleted file mode 100644
index d3612352..00000000
--- a/website/config/jest/cssTransform.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
- process() {
- return 'module.exports = {};';
- },
- getCacheKey() {
- // The output is always the same.
- return 'cssTransform';
- },
-};
diff --git a/website/config/jest/fileTransform.js b/website/config/jest/fileTransform.js
deleted file mode 100644
index d882b79d..00000000
--- a/website/config/jest/fileTransform.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
- process(src, filename) {
- const assetFilename = JSON.stringify(path.basename(filename));
-
- if (filename.match(/\.svg$/)) {
- return `module.exports = {
- __esModule: true,
- default: ${assetFilename},
- ReactComponent: () => ${assetFilename},
- };`;
- }
-
- return `module.exports = ${assetFilename};`;
- },
-};
diff --git a/website/config/jest/graphqlTransform.js b/website/config/jest/graphqlTransform.js
deleted file mode 100644
index bad1bfaa..00000000
--- a/website/config/jest/graphqlTransform.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const loader = require('graphql-tag/loader');
-
-module.exports = {
- process(src) {
- return loader.call({ cacheable() {} }, src);
- },
-};
diff --git a/website/config/paths.js b/website/config/paths.js
deleted file mode 100644
index 269f4737..00000000
--- a/website/config/paths.js
+++ /dev/null
@@ -1,72 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
-const findMonorepo = require('react-dev-utils/workspaceUtils').findMonorepo;
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(path, needsSlash) {
- const hasSlash = path.endsWith('/');
- if (hasSlash && !needsSlash) {
- return path.substr(path, path.length - 1);
- } else if (!hasSlash && needsSlash) {
- return `${path}/`;
- } else {
- return path;
- }
-}
-
-const getPublicUrl = appPackageJson =>
- envPublicUrl || require(appPackageJson).homepage;
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// Webpack needs to know it to put the right
+
+