├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── demo
└── src
│ └── index.js
├── nwb.config.js
├── package-lock.json
├── package.json
├── src
├── Divider.js
├── Panel.js
├── PanelGroup.js
└── index.js
└── tests
├── .eslintrc
└── index-test.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | es
2 | lib
3 | demo
4 | node_modules
5 | umd
6 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: 'babel-eslint',
3 | extends: 'airbnb',
4 | env: {
5 | browser: true
6 | },
7 | rules: {
8 | 'comma-dangle': 0,
9 | 'no-param-reassign': 0, // comeback to this,
10 | 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
11 | 'react/sort-comp': 0,
12 | 'react/jsx-filename-extension': 0,
13 | 'react/no-string-refs': 0,
14 | 'react/forbid-prop-types': 0,
15 | 'jsx-a11y/no-static-element-interactions': 0,
16 | 'no-mixed-operators': 0,
17 | 'function-paren-newline': 0
18 | },
19 | overrides: [
20 | {
21 | files: ['tests/**/*test.js'],
22 | env: {
23 | mocha: true
24 | },
25 | rules: {
26 | 'import/extensions': 0,
27 | 'import/no-unresolved': 0,
28 | 'import/no-extraneous-dependencies': 0
29 | }
30 | }
31 | ]
32 | };
33 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /coverage
2 | /demo/dist
3 | /es
4 | /lib
5 | /node_modules
6 | /umd
7 | npm-debug.log*
8 | .babelrc
9 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | singleQuote: true,
3 | printWidth: 100,
4 | arrowParens: 'always'
5 | };
6 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 |
3 | language: node_js
4 | node_js:
5 | - 6
6 | - 8
7 |
8 | cache:
9 | directories:
10 | - node_modules
11 |
12 | before_install:
13 | - npm install codecov.io coveralls
14 |
15 | after_success:
16 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
17 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
18 |
19 | branches:
20 | only:
21 | - master
22 | - release
23 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Prerequisites
2 |
3 | [Node.js](http://nodejs.org/) >= v4 must be installed.
4 |
5 | ## Installation
6 |
7 | - Running `npm install` in the components's root directory will install everything you need for development.
8 |
9 | ## Demo Development Server
10 |
11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 |
13 | ## Running Tests
14 |
15 | - `npm test` will run the tests once.
16 |
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 |
19 | - `npm run test:watch` will run the tests on every change.
20 |
21 | ## Building
22 |
23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app.
24 |
25 | - `npm run clean` will delete built resources.
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Dan Fessler
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## [React-PanelGroup](https://danfessler.github.io/react-panelgroup/) [![Travis][build-badge]][build] [![PRs Welcome][pr-badge]][prwelcome]
2 |
3 | A React component for resizable panel group layouts
37 | panel 1
38 | panel 2
39 | panel 3
40 |
41 | ```
42 |
43 | ### Column layout
44 |
45 | Setting the direction prop to "column" will result in a vertical layout
46 |
47 | ```jsx
48 |
49 | panel 1
50 | panel 2
51 | panel 3
52 |
53 | ```
54 |
55 | ### Nested layout
56 |
57 | Nest multiple panelGroups for more complex layouts
58 |
59 | ```jsx
60 |
61 |
62 | panel 1
63 | panel 2
64 | panel 3
65 |
66 | panel 4
67 |
68 | panel 5
69 | panel 6
70 |
71 |
72 | ```
73 |
74 | ### Defined panel sizes
75 |
76 | Providing panelWidths with an array of objects defining each panel's size parameters will set the initial sizing for each panel. If any property is missing, it will resort to the default for that property.
77 |
78 | ```jsx
79 |
86 | panel 1
87 | panel 2
88 | panel 3
89 |
90 | ```
91 |
92 | ## Component Props
93 |
94 | * `spacing: number`
7 | panel 1
8 | panel 2
9 | panel 3
10 | `;
11 |
12 | var code2 = `
13 | panel 1
14 | panel 2
15 | panel 3
16 | `;
17 |
18 | var code3 = `
19 |
20 | panel 1
21 | panel 2
22 | panel 3
23 |
24 | panel 4
25 |
26 | panel 5
27 | panel 6
28 |
29 | `;
30 |
31 | var code4 = `
36 | panel 1
37 | panel 2
38 | panel 3
39 | `;
40 |
41 | class Demo extends React.Component {
42 | render() {
43 | var containerStyle = {
44 | width: 640,
45 | height: 320,
46 | flexGrow: 1,
47 | flexShrink: 1
48 | };
49 | var rowStyle = {
50 | display: "flex",
51 | marginBottom: 32,
52 | border: "1px solid grey",
53 | borderRadius: 8,
54 | overflow: "hidden"
55 | };
56 | var codeStyle = {
57 | flexGrow: 0,
58 | flexShrink: 0,
59 | width: 420,
60 | margin: 0,
61 | padding: 16,
62 | backgroundColor: "#DDD",
63 | overflowY: "auto",
64 | borderRight: "1px solid grey"
65 | };
66 | return (
67 |
68 |
React-PanelGroup Demo
69 |
70 |
Default Values
71 |
72 |
{code1}
73 |
74 |
76 |
77 |
78 |
Column layout
79 |
80 |
{code2}
81 |
82 |
84 |
85 |
86 |
Nested layout
87 |
88 |
{code3}
89 |
90 |
92 |
93 |
94 |
Defined panel sizes
95 |
96 |
{code4}
97 |
98 |
100 |
101 |
109 | panel 1
110 | panel 2
111 | panel 3
112 |
113 | );
114 | };
115 |
116 | let ColumnLayout = function(props) {
117 | return (
118 |
119 | panel 1
120 | panel 2
121 | panel 3
122 |
123 | );
124 | };
125 |
126 | let NestedLayout = function(props) {
127 | var containerStyle = {
128 | width: "100%",
129 | height: "100%",
130 | flexGrow: 1,
131 | flexShrink: 1
132 | };
133 | return (
134 |
135 |
136 | panel 1
137 | panel 2
138 | panel 3
139 |
140 | panel 4
141 |
142 | panel 5
143 | panel 6
144 |
145 |
146 | );
147 | };
148 |
149 | let DefinedLayout = function(props) {
150 | return (
151 |
160 | panel 1
161 | panel 2
162 | panel 3
163 |
164 | );
165 | };
166 |
167 | let Content = function(props) {
168 | return {props.children}
;
169 | };
170 |
171 | render( {
84 | this.node = node;
85 | }}
86 | className="panelWrapper"
87 | style={this.props.style}
88 | >
89 | {resizeObject}
90 | {this.props.children}
91 |
92 | );
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/PanelGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Panel from './Panel';
5 | import Divider from './Divider';
6 |
7 | export { Divider, Panel };
8 |
9 | export default class PanelGroup extends React.Component {
10 | static defaultProps = {
11 | spacing: 1,
12 | direction: 'row',
13 | panelWidths: [],
14 | onUpdate: undefined,
15 | onResizeStart: undefined,
16 | onResizeEnd: undefined,
17 | panelColor: undefined,
18 | borderColor: undefined,
19 | showHandles: false
20 | };
21 |
22 | static propTypes = {
23 | spacing: PropTypes.number,
24 | direction: PropTypes.string,
25 | panelWidths: PropTypes.array,
26 | children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
27 | onUpdate: PropTypes.func,
28 | onResizeStart: PropTypes.func,
29 | onResizeEnd: PropTypes.func,
30 | panelColor: PropTypes.string,
31 | borderColor: PropTypes.string,
32 | showHandles: PropTypes.bool
33 | };
34 | // Load initial panel configuration from props
35 | constructor(...args) {
36 | super(...args);
37 |
38 | this.state = this.loadPanels(this.props);
39 | }
40 |
41 | // reload panel configuration if props update
42 | componentWillReceiveProps(nextProps) {
43 | const nextPanels = nextProps.panelWidths;
44 |
45 | // Only update from props if we're supplying the props in the first place
46 | if (nextPanels.length) {
47 | // if the panel array is a different size we know to update
48 | if (this.state.panels.length !== nextPanels.length) {
49 | this.setState(this.loadPanels(nextProps));
50 | } else {
51 | // otherwise we need to iterate to spot any difference
52 | for (let i = 0; i < nextPanels.length; i++) {
53 | if (
54 | this.state.panels[i].size !== nextPanels[i].size ||
55 | this.state.panels[i].minSize !== nextPanels[i].minSize ||
56 | this.state.panels[i].maxSize !== nextPanels[i].maxSize ||
57 | this.state.panels[i].resize !== nextPanels[i].resize
58 | ) {
59 | this.setState(this.loadPanels(nextProps));
60 | break;
61 | }
62 | }
63 | }
64 | }
65 | }
66 | defaultResize = (props, index, defaultResize) => {
67 | let resize = defaultResize;
68 | if (props.panelWidths[index].resize) {
69 | resize = props.panelWidths[index].resize; // eslint-disable-line
70 | } else {
71 | resize = props.panelWidths[index].size ? 'dynamic' : resize;
72 | }
73 | return resize;
74 | };
75 | // load provided props into state
76 | loadPanels = (props) => {
77 | const panels = [];
78 |
79 | if (props.children) {
80 | // Default values if none were provided
81 | const defaultSize = 256;
82 | const defaultMinSize = 48;
83 | const defaultMaxSize = 0;
84 | const defaultResize = 'stretch';
85 |
86 | let stretchIncluded = false;
87 | const children = React.Children.toArray(props.children);
88 |
89 | for (let i = 0; i < children.length; i++) {
90 | if (i < props.panelWidths.length && props.panelWidths[i]) {
91 | const widthObj = {
92 | size: props.panelWidths[i].size !== undefined ? props.panelWidths[i].size : defaultSize,
93 | minSize:
94 | props.panelWidths[i].minSize !== undefined
95 | ? props.panelWidths[i].minSize
96 | : defaultMinSize,
97 | maxSize:
98 | props.panelWidths[i].maxSize !== undefined
99 | ? props.panelWidths[i].maxSize
100 | : defaultMaxSize,
101 | resize: this.defaultResize(props, i, defaultResize),
102 | snap: props.panelWidths[i].snap !== undefined ? props.panelWidths[i].snap : [],
103 | style: {
104 | // making the ability to not have to be so terse for style settings on panel
105 | ...this.getPanelClass().defaultProps.style,
106 | ...(props.panelWidths[i].style || {})
107 | }
108 | };
109 | panels.push(widthObj);
110 | } else {
111 | // default values if no props are given
112 | panels.push({
113 | size: defaultSize,
114 | resize: defaultResize,
115 | minSize: defaultMinSize,
116 | maxSize: defaultMaxSize,
117 | snap: [],
118 | style: {}
119 | });
120 | }
121 |
122 | // if none of the panels included was stretchy, make the last one stretchy
123 | if (panels[i].resize === 'stretch') stretchIncluded = true;
124 | if (!stretchIncluded && i === children.length - 1) panels[i].resize = 'stretch';
125 | }
126 | }
127 |
128 | return {
129 | panels
130 | };
131 | };
132 |
133 | // Pass internal state out if there's a callback for it
134 | // Useful for saving panel configuration
135 | onUpdate = (panels) => {
136 | if (this.props.onUpdate) {
137 | this.props.onUpdate(panels.slice());
138 | }
139 | };
140 |
141 | onResizeStart = () => {
142 | if (this.props.onResizeStart) {
143 | // actually this slice clones only array, underlying objects stays the same
144 | this.props.onResizeStart(this.state.panels.slice());
145 | }
146 | };
147 |
148 | onResizeEnd = () => {
149 | if (this.props.onResizeEnd) {
150 | this.props.onResizeEnd(this.state.panels.slice());
151 | }
152 | };
153 |
154 | // For styling, track which direction to apply sizing to
155 | getSizeDirection = (caps) => {
156 | if (caps) {
157 | return this.props.direction === 'column' ? 'Height' : 'Width';
158 | }
159 | return this.props.direction === 'column' ? 'height' : 'width';
160 | };
161 |
162 | getStyle() {
163 | const container = {
164 | width: '100%',
165 | height: '100%',
166 | [`min${this.getSizeDirection(true)}`]: this.getPanelGroupMinSize(this.props.spacing),
167 | display: 'flex',
168 | flexDirection: this.props.direction,
169 | flexGrow: 1
170 | };
171 |
172 | return {
173 | container,
174 | panel: {
175 | flexGrow: 0,
176 | display: 'flex'
177 | }
178 | };
179 | }
180 |
181 | getPanelStyle(index) {
182 | const { direction, panelColor } = this.props;
183 |
184 | const panel = this.state.panels[index];
185 | const { style } = panel;
186 |
187 | // setting up the style for this panel. Should probably be handled
188 | // in the child component, but this was easier for now
189 | let newPanelStyle = {
190 | [this.getSizeDirection()]: panel.size,
191 | [direction === 'row' ? 'height' : 'width']: '100%',
192 | [`min${this.getSizeDirection(true)}`]: panel.resize === 'stretch' ? 0 : panel.size,
193 |
194 | flexGrow: panel.resize === 'stretch' ? 1 : 0,
195 | flexShrink: panel.resize === 'stretch' ? 1 : 0,
196 | display: 'flex',
197 | overflow: 'hidden',
198 | position: 'relative',
199 | ...style
200 | };
201 | if (panelColor !== null) {
202 | // patch in the background color if it was supplied as a prop
203 | newPanelStyle = {
204 | ...newPanelStyle,
205 | backgroundColor: panelColor
206 | };
207 | }
208 |
209 | return newPanelStyle;
210 | }
211 |
212 | createPanelProps({ panelStyle, index, initialChildren }) {
213 | const panelState = this.state.panels[index];
214 | let stretchIncluded = false;
215 | // give position info to children
216 | const metadata = {
217 | isFirst: index === 0,
218 | isLast: index === initialChildren.length - 1,
219 | resize: panelState.resize,
220 |
221 | // window resize handler if this panel is stretchy
222 | onWindowResize: panelState.resize === 'stretch' ? this.setPanelSize : null
223 | };
224 |
225 | // if none of the panels included was stretchy, make the last one stretchy
226 | if (panelState.resize === 'stretch') stretchIncluded = true;
227 | if (!stretchIncluded && metadata.isLast) metadata.resize = 'stretch';
228 |
229 | return {
230 | style: panelStyle,
231 | key: index,
232 | panelID: index,
233 | ...metadata
234 | };
235 | }
236 |
237 | createPanel({ panelStyle, index, initialChildren }) {
238 | const Klass = this.getPanelClass();
239 | return (
240 |
241 | {initialChildren[index]}
242 |
243 | );
244 | }
245 | // eslint-disable-next-line class-methods-use-this
246 | getPanelClass() {
247 | // mainly for accessing default props of panels
248 | return Panel;
249 | }
250 |
251 | maybeDivide({ initialChildren, newChildren, index }) {
252 | // add a handle between panels
253 | if (index < initialChildren.length - 1) {
254 | newChildren.push(
255 | {
512 | this.node = node;
513 | }}
514 | >
515 | {newChildren}
516 |
517 | );
518 | }
519 | }
520 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import PanelGroup from './PanelGroup';
2 |
3 | export { default as Panel } from './Panel';
4 | export { default as Divider } from './Divider';
5 | export default PanelGroup;
6 | // ultimatley created this file due to
7 | // https://github.com/insin/nwb/issues/449
8 |
--------------------------------------------------------------------------------
/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/tests/index-test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 | import React from 'react';
3 | import { render, unmountComponentAtNode } from 'react-dom';
4 |
5 | import Component from 'src';
6 |
7 | describe('Component', () => {
8 | let node;
9 |
10 | beforeEach(() => {
11 | node = document.createElement('div');
12 | });
13 |
14 | afterEach(() => {
15 | unmountComponentAtNode(node);
16 | });
17 |
18 | it('PanelGroup renders', () => {
19 | render(