Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
299 commits
Select commit Hold shift + click to select a range
afc7242
Provide a way of building a standalone/UMD JS file
asutherland May 27, 2015
8c3b3bf
Merge pull request #2 from asutherland/do-not-assume-event
tomkp May 27, 2015
e6b22ba
...
tomkp May 28, 2015
679b7eb
split vertically by default
tomkp May 28, 2015
9605946
improving tests
tomkp May 28, 2015
1317898
empty dist directory
tomkp May 29, 2015
3c51235
Merge pull request #3 from asutherland/standalone-dist
tomkp May 29, 2015
134aee0
Merge remote-tracking branch 'origin/master'
tomkp May 29, 2015
7b83485
added dist file
tomkp May 29, 2015
2a0b8f4
introducing eslint
tomkp May 29, 2015
781315b
eslinting
tomkp May 29, 2015
c0bc7cc
test
tomkp Jun 1, 2015
21780b0
remove eslinting, use root index.js
tomkp Jun 14, 2015
5885983
extra tag
tomkp Jun 14, 2015
a395d88
adding github urls
tomkp Jun 14, 2015
eccc6d4
es6 all the way
tomkp Jun 15, 2015
caa4f4c
0.0.4
tomkp Jun 15, 2015
0b6f6a9
code in es6, publish es5
tomkp Jun 16, 2015
26eb0e5
fixing dependencies
tomkp Jun 16, 2015
1da8b89
demo...
tomkp Jun 16, 2015
4468395
0.0.5
tomkp Jun 16, 2015
95e9fd0
updated README
tomkp Jun 16, 2015
c1b995e
0.0.6
tomkp Jun 16, 2015
077a16c
remove core-js shim
tomkp Jun 16, 2015
6f7612d
0.0.7
tomkp Jun 16, 2015
6bce88e
updated README
tomkp Jun 16, 2015
3bbc6ff
0.0.8
tomkp Jun 16, 2015
dccb065
use 'split' instead of 'orientation', reverse horizontal and vertical...
tomkp Jun 17, 2015
e186f67
0.1.0
tomkp Jun 17, 2015
7762417
default to vertically split
tomkp Jun 17, 2015
9aff833
0.1.1
tomkp Jun 17, 2015
41ca614
...
tomkp Jun 17, 2015
beb24de
0.1.2
tomkp Jun 17, 2015
4aefeb4
0.1.3
tomkp Jun 17, 2015
474ecb6
0.1.4
tomkp Jun 17, 2015
e696934
Update README.md
tomkp Jun 19, 2015
b5230eb
Update README.md
tomkp Jul 2, 2015
218e60d
added position relative to fix layout bug
tomkp Jul 5, 2015
db3c7bd
updated readme
tomkp Jul 5, 2015
4ca9be0
updated readme
tomkp Jul 5, 2015
1d5bd04
demo...
tomkp Jul 5, 2015
1758edf
updated readme
tomkp Jul 5, 2015
4ec451b
enforce compilation before building demo
tomkp Jul 5, 2015
6917c4c
bump packages
tomkp Jul 8, 2015
df49211
demo
tomkp Jul 8, 2015
5b8ab4b
unused
tomkp Jul 9, 2015
c7215f5
0.1.5
tomkp Jul 9, 2015
cd3c92d
export index.js
tomkp Jul 12, 2015
aa1877a
0.1.6
tomkp Jul 12, 2015
88c02e6
use index.js for demo
tomkp Jul 12, 2015
d69f73c
index.js to use es5 syntax
tomkp Jul 14, 2015
c77d757
0.1.7
tomkp Jul 14, 2015
6be04bc
npm update
tomkp Aug 4, 2015
05fb9cd
0.1.8
tomkp Aug 4, 2015
db29afb
update npm
tomkp Aug 14, 2015
3f25fa2
add compile:watch & demo:watch scripts
tomkp Aug 14, 2015
921435a
use chai instead of expect.js,
tomkp Aug 16, 2015
bd74a57
chnage back to exporting just the SplitPane
tomkp Aug 16, 2015
a3c31bd
assert on defaultSize
tomkp Aug 16, 2015
0a485a9
propTypes causes a warning - temporarily commented out
tomkp Aug 16, 2015
9c9792b
propTypes causes a warning - temporarily commented out
tomkp Aug 16, 2015
b492db2
split tests
tomkp Aug 16, 2015
0baba9a
remove test code for selecting resizer
tomkp Aug 16, 2015
55ce13c
0.1.9
tomkp Aug 16, 2015
4126490
remove webkit vendor prefix from tests
tomkp Aug 16, 2015
4f330b5
use vendor prefix function to enable tests to run locally (webkit) an…
tomkp Aug 16, 2015
6e93fc5
rename tests
tomkp Aug 17, 2015
81580c5
test refactor
tomkp Aug 17, 2015
2126b4a
demo update
tomkp Aug 17, 2015
24f07bb
test dsl refactor
tomkp Aug 17, 2015
84f3f5c
0.1.10
tomkp Aug 17, 2015
a0051b8
updated readme
tomkp Aug 17, 2015
4b5fd4a
npm package upgrade
tomkp Sep 28, 2015
d982c9d
export defaults
tomkp Sep 28, 2015
d578bf3
0.1.11
tomkp Sep 28, 2015
6a9d526
chore(package): pin dependencies
greenkeeperio-bot Oct 1, 2015
1e0ce6d
Merge pull request #8 from tomkp/greenkeeper-pin
tomkp Oct 3, 2015
79fa7e9
0.1.12
tomkp Oct 3, 2015
3ac5c41
Merge branch 'master' of https://github.com/tomkp/react-split-pane
tomkp Oct 3, 2015
573a865
Implement onChange prop to enable persistence
asutherland Oct 4, 2015
d5b8619
Merge pull request #9 from asutherland/persist
tomkp Oct 4, 2015
a9fb557
0.1.13
tomkp Oct 4, 2015
21e272e
react 0.14
tomkp Oct 7, 2015
f965e7d
react 0.14 - demo
tomkp Oct 7, 2015
9d75f7f
node version for travis
tomkp Oct 7, 2015
bc6aca9
revert
tomkp Oct 7, 2015
1b8c3d5
React 14
tomkp Oct 14, 2015
156b831
0.1.14
tomkp Oct 14, 2015
9d8df04
remove commented out lines
tomkp Oct 15, 2015
ba15d27
remove cruft
tomkp Oct 19, 2015
466801d
fix bug with default split orientation
tomkp Oct 24, 2015
daec01f
demo update
tomkp Oct 24, 2015
d0d8206
0.1.15
tomkp Oct 24, 2015
efb0fcd
chore(package): update browserify to version 12.0.0
greenkeeperio-bot Oct 26, 2015
dd34581
Merge pull request #12 from tomkp/greenkeeper-browserify-12.0.0
tomkp Oct 26, 2015
12e32b7
npm update
tomkp Nov 3, 2015
9aeaca3
Merge remote-tracking branch 'origin/master'
tomkp Nov 3, 2015
b1b91b6
0.1.16
tomkp Nov 3, 2015
0a581de
npm update
tomkp Nov 3, 2015
afca927
npm update - babel
tomkp Nov 3, 2015
ba37b1c
0.1.17
tomkp Nov 3, 2015
ae153d9
npm update
tomkp Nov 15, 2015
53c9d23
0.1.18
tomkp Nov 15, 2015
3059e89
npm update
tomkp Nov 16, 2015
9c6559d
npm update
tomkp Nov 22, 2015
6e90c53
0.1.19
tomkp Nov 22, 2015
970d56e
Fix resize with scrollbar
Nov 28, 2015
94777bb
Merge pull request #29 from qzchenwl/master
tomkp Nov 29, 2015
b62b5b3
updated demo
tomkp Nov 29, 2015
32c90d0
0.1.20
tomkp Nov 29, 2015
ad38d67
Added babel-plugins-add-module-exports
AnsonT Dec 15, 2015
10bf7c3
Merge pull request #31 from AnsonT/AnsonT-add-module-exports
tomkp Dec 15, 2015
cd21cf8
Allow text selection
rohn Dec 27, 2015
12006bb
Merge pull request #35 from rohn/allowSelect
tomkp Dec 28, 2015
283f08b
0.1.21
tomkp Dec 28, 2015
3622de9
Merge branch 'master' of https://github.com/tomkp/react-split-pane
tomkp Dec 28, 2015
f0a6450
0.1.22
tomkp Dec 28, 2015
8651fab
npm update
tomkp Dec 28, 2015
a354771
demo url reflects project name
tomkp Dec 28, 2015
e13ceb9
demo favicon
tomkp Dec 28, 2015
d2dfa7f
Add onDragFinished property
antal-bukos Jan 6, 2016
0d57454
chore(package): update browserify to version 13.0.0
greenkeeperio-bot Jan 12, 2016
3983035
Merge pull request #37 from antal-bukos/add-drag-finished-event
tomkp Jan 19, 2016
90fc9ec
moved react to dev & peer dependencies
tomkp Jan 21, 2016
4a418ea
Merge remote-tracking branch 'origin/master'
tomkp Jan 22, 2016
12a3ab2
0.1.23
tomkp Jan 23, 2016
a24c799
add onDragStart property
jirokun Feb 16, 2016
3165f13
chore(package): update babel-eslint to version 5.0.0
greenkeeperio-bot Feb 16, 2016
d8da58a
Check if defaultSize !== undefined
Meowtimer Feb 24, 2016
dd280af
Update Pane.js
aktenkundig Feb 25, 2016
841d926
Update SplitPane.js
aktenkundig Feb 25, 2016
42d8c72
Merge pull request #42 from tomkp/greenkeeper-babel-eslint-5.0.0
tomkp Feb 26, 2016
659476c
Merge pull request #39 from tomkp/greenkeeper-browserify-13.0.0
tomkp Feb 26, 2016
c803014
Merge pull request #45 from Meowtimer/patch-1
tomkp Feb 26, 2016
c005dd2
Merge pull request #46 from jirokun/master
tomkp Feb 26, 2016
429474e
Merge pull request #47 from neo6238/master
tomkp Feb 26, 2016
9cdccf2
change to newSize to 'let' form 'const'
tomkp Feb 26, 2016
950f2fe
npm upgrade
tomkp Feb 26, 2016
4cce60c
0.1.24
tomkp Feb 26, 2016
8bff188
ignore lcov.info
tomkp Feb 27, 2016
8bdddcb
investigate failing build on travis - downgrade mochify
tomkp Feb 27, 2016
c2c07eb
revert: investigate failing build on travis - downgrade mochify
tomkp Feb 27, 2016
df7f908
investigate failing build on travis - custom version of phantom2
tomkp Feb 27, 2016
76548a1
Adds new prop primary. It defines which Pane will keep its size.
Mar 3, 2016
e6cc893
Merge pull request #50 from machacekjan/master
tomkp Mar 4, 2016
58f7b61
continuous deployment of demo
tomkp Mar 5, 2016
cce6400
0.1.25
tomkp Mar 5, 2016
7fe464c
auto update npm version
tomkp Mar 5, 2016
922623e
revert: auto update npm version
tomkp Mar 5, 2016
18417a2
new demo js
tomkp Mar 5, 2016
c325e53
npm i surge for Continuous Deployment of demo
tomkp Mar 5, 2016
469473d
npm release hook
tomkp Mar 6, 2016
2ef63ca
npm release hook
tomkp Mar 6, 2016
5710a09
revert: npm release hook
tomkp Mar 6, 2016
350ba3f
remove overflow auto from Pane
tomkp Mar 28, 2016
8a7d881
packages update
tomkp Mar 28, 2016
7774698
0.1.26
tomkp Mar 28, 2016
dd4a6b9
Allow for optional class name for a SplitPane.
tomkp Mar 29, 2016
f722c4c
0.1.27
tomkp Mar 29, 2016
35e209a
onDragStart renamed to it's past tense form (to match onDragFinished)…
vlad-nica Mar 30, 2016
a739b47
Tests for resize callbacks
vlad-nica Mar 30, 2016
4009c55
separate css file for demo
tomkp Mar 30, 2016
3f3ff2f
Merge pull request #54 from Hubrus/master
tomkp Mar 30, 2016
a427f19
- Allow setting size through props
Mar 16, 2016
d6ec450
adding /lib directory
Mar 16, 2016
aad2ea0
lib files
Mar 16, 2016
f26e158
fixing initial mount size
Mar 16, 2016
07913d5
fixing de-syncing of position and mouse when user scrolls past minwid…
Mar 16, 2016
5165ec6
ignore the lib directory
tomkp Mar 30, 2016
5c32977
remove duplicate line from merge
tomkp Mar 30, 2016
648c480
Default minimum size. I *think* this is a good idea - but feel free t…
tomkp Mar 30, 2016
4204508
lib directory is not committed to source control - it gets built when…
tomkp Mar 30, 2016
6e3f8b0
fix up tests
tomkp Mar 30, 2016
52834da
updated demo code
tomkp Mar 30, 2016
decf1a5
npm update
tomkp Mar 30, 2016
852f6f1
0.1.28
tomkp Mar 30, 2016
4825fa3
inlined the css for the demo again (felt it was more useful this way)
tomkp Mar 30, 2016
0387211
npm bump
tomkp Mar 30, 2016
c1357b8
0.1.29
tomkp Mar 30, 2016
b4db70a
Added maxSize property
zerkms Mar 31, 2016
577941f
Added eslint based on airbnb config
zerkms Mar 31, 2016
e1eff52
Fixed travis PRs
zerkms Mar 31, 2016
894cb0c
Merge pull request #60 from zerkms/TRAVIS_PR_FIX
tomkp Mar 31, 2016
1cb47c5
Merge pull request #58 from zerkms/ISSUE-56_MAXSIZE_PROP
tomkp Mar 31, 2016
57311fc
updated demo
tomkp Mar 31, 2016
016bdc4
Merge pull request #59 from zerkms/ESLINT_AIRBNB
tomkp Mar 31, 2016
132398f
Style fixes for Pane and Resizer classes
zerkms Mar 31, 2016
8331ec0
Minor refactoring and style fixes for SplitPane
zerkms Mar 31, 2016
a34b10b
Merge pull request #61 from zerkms/STYLE_FIXES
tomkp Apr 1, 2016
e2be48a
0.1.30
tomkp Apr 1, 2016
ba83b54
Implemented tests for maxSize and minSize
zerkms Apr 1, 2016
bf85fff
Merge pull request #62 from zerkms/TESTS_MAXSIZE_MINSIZE
tomkp Apr 1, 2016
f0eeb2d
Get resizer children from user
thani-sh Apr 6, 2016
318b621
Add default split components
thani-sh Apr 6, 2016
ad08044
Update README.md
thani-sh Apr 6, 2016
624aba8
Merge pull request #2 from mnmtanish/resizer-children
Apr 6, 2016
24d6ca6
Update package.json
thani-sh Apr 8, 2016
6b25e19
Release v1.0.0.
thani-sh Apr 8, 2016
493c74e
Update to v15.0.0
arunoda Apr 9, 2016
d49f441
1.1.0
arunoda Apr 9, 2016
f871c37
Change package to @kadira/react-split-pane
arunoda Apr 9, 2016
8738b13
1.2.0
arunoda Apr 9, 2016
43a3fe9
accept string as size
ritz078 Apr 23, 2016
993f9df
Merge pull request #1 from ritz078/fix/proptype
arunoda Apr 23, 2016
8436f31
1.2.0
arunoda Apr 23, 2016
4e53f84
Change reponame to kadira
arunoda Apr 23, 2016
5dc4bcf
Merge branch 'master' of github.com:kadirahq/react-split-pane
arunoda Apr 23, 2016
7146ca0
1.3.0
arunoda Apr 23, 2016
9de315c
Remove vendor-prefixes to support SSR.
arunoda May 3, 2016
19ad120
1.3.0
arunoda May 3, 2016
f66defb
Update Changelog
arunoda May 3, 2016
0310346
Merge changes from master.
arunoda May 3, 2016
6d7178e
1.4.0
arunoda May 3, 2016
b411123
Use a .babelrc file
thani-sh May 13, 2016
c1e281d
Merge pull request #2 from kadirahq/fix-babel-issue
May 13, 2016
9e7ea4e
Release v1.4.1.
thani-sh May 13, 2016
2592588
Publish compiled code
thani-sh May 30, 2016
f113f9a
Release v1.4.2.
thani-sh May 30, 2016
543f24f
Remove default minSize
thani-sh Jun 3, 2016
fa6d3e4
Release v1.4.3.
thani-sh Jun 3, 2016
6bd56ee
Add storybook
thani-sh Jun 3, 2016
c89172c
Merge pull request #3 from kadirahq/add-storybook
Jun 3, 2016
dc84be4
Fix undefined variable
thani-sh Jun 3, 2016
c8f12b9
Add gh-pages script
thani-sh Jun 3, 2016
609cb66
Use react-storybook-story
thani-sh Jun 14, 2016
9797420
Update gh-pages
thani-sh Jun 14, 2016
e222f6e
1.4.4
thani-sh Jun 14, 2016
cde4d32
Refactor story
thani-sh Jun 14, 2016
7b2574c
Update react-storybook-story
thani-sh Jun 14, 2016
4ef0294
Update static build
thani-sh Jun 14, 2016
96a0fbd
Add displayName property
thani-sh Jun 15, 2016
fe90c55
Refactor webpack config
thani-sh Jun 15, 2016
a5688bf
Update demo page
thani-sh Jun 15, 2016
a4e3a51
Update dependencies
thani-sh Jun 15, 2016
6c803ac
Update dependencies
thani-sh Jun 15, 2016
12e4db4
1.4.5
thani-sh Jun 15, 2016
350df26
Fix default story
thani-sh Jun 15, 2016
a68c48e
Update dependencies
thani-sh Jun 15, 2016
75baca3
1.4.6
thani-sh Jun 15, 2016
1102e4c
Update dependencies
thani-sh Jun 15, 2016
8da6264
1.4.7
thani-sh Jun 15, 2016
ada2a83
Add PropType.string for defaultSize to allow "xx%"
Jul 16, 2016
736fc17
Merge pull request #4 from farmanrl/farmanrl-defaultSize-prop
ndelangen Apr 23, 2017
484a98f
Merge branch 'master' of github.com:storybooks/react-split-pane into …
ndelangen Apr 23, 2017
07ceb53
MOVE to packages
ndelangen Apr 23, 2017
0471f23
REMOVE lib (list) and FIX syntax-error
ndelangen Apr 23, 2017
3660b6c
FIX incorrect lint config
ndelangen Apr 23, 2017
2829f04
FIX linting
ndelangen Apr 23, 2017
1246d85
ADD lib (dist) to ignore
ndelangen Apr 23, 2017
e6b421a
ADD lib (dist) folder to eslint ignore
ndelangen Apr 23, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
dist
build
packages/split-pane/lib
coverage
node_modules
*.bundle.js
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@ coverage/
build
packages/examples/automated-*
yarn.lock
packages/split-pane/lib
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
[![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
[![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)

Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
Expand Down
7 changes: 7 additions & 0 deletions packages/split-pane/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": ["es2015", "stage-0", "react"],
"plugins": [
"add-module-exports",
"transform-object-assign"
]
}
13 changes: 13 additions & 0 deletions packages/split-pane/.scripts/gh-pages.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#!/bin/bash

set -e

npm run prepublish
rm -rf demo
./node_modules/.bin/build-storybook -o demo
cd demo
git init
git add .
git commit -m 'Build Storybook'
git push --force https://github.com/kadirahq/react-split-pane master:gh-pages
rm -rf .git
5 changes: 5 additions & 0 deletions packages/split-pane/.storybook/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { configure } from '@kadira/storybook';

configure(function () {
require('./stories/SplitPane');
}, module);
147 changes: 147 additions & 0 deletions packages/split-pane/.storybook/stories/SplitPane.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import Story from 'react-storybook-story';
import 'react-storybook-story/styles.css';

import SplitPane from '../../';
import { nomargin, HSplit } from './_utils';

const stories = storiesOf('SplitPane', module)
.addDecorator(nomargin);

// ---

stories.add('defaults', function (context) {
const info = `
Render with default properties.
`;

return (
<Story context={context} info={info}>
<SplitPane>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});

stories.add('horizontal', function (context) {
const info = `
Split the container horizontally.
`;

return (
<Story context={context} info={info}>
<SplitPane split='horizontal'>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});

[
{ parent: 'horizontal', child: 'horizontal' },
{ parent: 'horizontal', child: 'vertical' },
{ parent: 'vertical', child: 'horizontal' },
{ parent: 'vertical', child: 'vertical' },
].forEach(splits => {
stories.add(`${splits.parent}-${splits.child}`, function (context) {
const info = `
Nest a ${splits.child} split inside a ${splits.parent} split.
`;

return (
<Story context={context} info={info}>
<SplitPane split={splits.parent}>
<div>pane-1</div>
<SplitPane split={splits.child}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</SplitPane>
</Story>
);
});
});

stories.add('default-size', function (context) {
const info = `
Split the container with a default size.
`;

return (
<Story context={context} info={info}>
<SplitPane defaultSize={300}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});

stories.add('min-max-size', function (context) {
const info = `
Split the container with a minimum and maximum size limit.
`;

return (
<Story context={context} info={info}>
<SplitPane minSize={200} maxSize={400}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});

stories.add('disable-resize', function (context) {
const info = `
Split the container but do not allow resize.
`;

return (
<Story context={context} info={info}>
<SplitPane allowResize={false}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});

stories.add('event handlers', function (context) {
const info = `
The component supports \`drag-started\`, \`drag-finished\` and \`change\` events.
`;

return (
<Story context={context} info={info}>
<SplitPane
onChange={action('change')}
onDragStarted={action('started')}
onDragFinished={action('finished')}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});

stories.add('custom splitter', function (context) {
const info = `
Use a custom react component for splitter.
`;

return (
<Story context={context} propTables={[HSplit]} info={info}>
<SplitPane
split='horizontal'
resizerChildren={<HSplit header="Header" onClose={action('close')} />}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});
71 changes: 71 additions & 0 deletions packages/split-pane/.storybook/stories/_utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { PropTypes } from 'react';

export function nomargin(storyFn) {
const style = {
position: 'absolute',
overflow: 'auto',
top: 0, right: 0, bottom: 0, left: 0,
};
return <div style={style}>{storyFn()}</div>;
}

export function content(key) {
return (
<div key={key} style={{overflow: 'hidden', width: '100%', height: '100%'}}>
<p style={{margin: 10}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
);
}

export const HSplit = React.createClass({
render() {
const style = {
cursor: 'row-resize',
background: '#EEEEEE',
borderBottom: 'solid #E0E0E0 1px',
borderTop: 'solid #E0E0E0 1px',
width: '100%',
};

const headerStyle = {
color: '#888',
float: 'left',
fontFamily: 'sans-serif',
fontSize: '11px',
letterSpacing: '1px',
lineHeight: 1,
margin: 0,
padding: '8px 10px 8px 10px',
textTransform: 'uppercase',
};

const buttonStyle = {
background: 'transparent',
border: 'none',
color: '#888',
float: 'right',
fontFamily: 'sans-serif',
fontSize: '11px',
lineHeight: 1,
outline: 'none',
padding: '8px 15px 8px 10px',
};

const clearFix = {
clear: 'both',
};

return (
<div style={style}>
<h3 style={headerStyle}>{this.props.header}</h3>
<button style={buttonStyle} onClick={this.props.onClose}>✕</button>
<div style={clearFix}></div>
</div>
);
}
});

HSplit.propTypes = {
header: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired,
};
9 changes: 9 additions & 0 deletions packages/split-pane/.storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const path = require('path');

module.exports = {
module: {
loaders: [
{ test: /\.css?$/, loaders: ['style', 'raw'], include: path.resolve(__dirname, '../') },
],
},
};
7 changes: 7 additions & 0 deletions packages/split-pane/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Change Log

## v1.4.0
03-May-2016

* Remove vendor prefixes to support better SSR support.
* Also changed some code styles.
File renamed without changes.
91 changes: 91 additions & 0 deletions packages/split-pane/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# React Split Pane

Split-Pane component built with [React](http://facebook.github.io/react), can be split vertically or horizontally.


[![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)


Check out the [demo](http://react-split-pane.surge.sh/)


```html
<SplitPane split="vertical" minSize={50} defaultSize={100}>
<div></div>
<div></div>
</SplitPane>
```

```html
<SplitPane split="vertical" minSize={50}>
<div></div>
<SplitPane split="horizontal">
<div></div>
<div></div>
</SplitPane>
</SplitPane>
```

### Primary pane

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.
If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions,
set SplitPane prop `primary` to `second`. In case of 'horizontal' SplitPane the height of bottom pane remains the same.

Resizing can be disabled by passing the `enableResizing` prop as `false`. Resizing is enabled by default.

You can also set the size of the pane using the `size` prop. Note that a size set through props ignores the `defaultSize` and `minSize` properties.

In this example right pane keeps its width 200px while user is resizing browser window.

```html
<SplitPane split="vertical" defaultSize={200} primary="second">
<div></div>
<div></div>
</SplitPane>
```

### Persisting Positions

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.

For example, if you are comfortable with the trade-offs of localStorage, you
could do something like the following:

```html
<SplitPane split="vertical" minSize={50}
defaultSize={ localStorage.getItem('splitPos') }
onChange={ size => localStorage.setItem('splitPos', size) }>
<div></div>
<div></div>
</SplitPane>
```

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
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
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
use of localStorage.

### Resizing callbacks

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`.

### Customise Dividers

By default it gives a 5 pixel wide divider, but you can use your own elements for the divider with the `resizerChildren` property. Check the demo for a custom horizontal divider with a header and a button.
13 changes: 13 additions & 0 deletions packages/split-pane/cover.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#!/usr/bin/env node

const mochify = require('mochify');
const istanbul = require('mochify-istanbul');

mochify('./test/*.js', {
reporter: 'dot',
transform: ['babelify'],
})
.plugin(istanbul, {
report: ['lcovonly'],
})
.bundle();
Loading