Skip to content

Commit

Permalink
feat: new less complex site w parcel and gh-pages deploys (tomkp#378)
Browse files Browse the repository at this point in the history 
* new less complex site

* adding gh-pages dependency
  • Loading branch information
@wuweiweiwu
wuweiweiwu committed Nov 12, 2019
1 parent 5bd0193 commit ea98d68
Show file tree
Hide file tree
Showing 50 changed files with 4,982 additions and 12,378 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Expand Up @@ -36,3 +36,4 @@ lcov.info

dist
build
.cache
8 changes: 4 additions & 4 deletions .travis.yml
View file
Expand Up @@ -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'
9 changes: 5 additions & 4 deletions PULL_REQUEST_TEMPLATE.md
View file
Expand Up @@ -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.)
191 changes: 98 additions & 93 deletions README.md
View file
Expand Up @@ -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

Expand All @@ -19,26 +20,28 @@ yarn add 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>
```

## 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.
Expand All @@ -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
<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).
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
Expand All @@ -68,120 +72,124 @@ 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.

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

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

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

Expand All @@ -204,16 +212,15 @@ 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';

<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>
</SplitPane>;
```

Pull request
Expand All @@ -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

0 comments on commit ea98d68

Please sign in to comment.