react-split-pane - npm Package Compare versions

Comparing version 0.1.49 to 0.1.50

demo/Examples.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { render } from 'react-dom';
@@ -131,2 +131,80 @@ import SplitPane from '../lib/SplitPane';
 
+class SnapToPositionExample extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            size: undefined,
+            dragging: false,
+        };
+        this.handleDragStart = this.handleDragStart.bind(this);
+        this.handleDragEnd = this.handleDragEnd.bind(this);
+        this.handleDrag = this.handleDrag.bind(this);
+    }
+
+    handleDragStart() {
+        this.setState({
+            dragging: true,
+        });
+    }
+
+    handleDragEnd() {
+        this.setState({
+            dragging: false,
+        });
+        setTimeout(() => {
+            this.setState({ size: undefined });
+        }, 0);
+    }
+
+    handleDrag(width) {
+        if (width >= 300 && width <= 400) {
+            this.setState({ size: 300 });
+        } else if (width > 400 && width <= 500) {
+            this.setState({ size: 500 });
+        } else {
+            this.setState({ size: undefined });
+        }
+    }
+
+    render() {
+        const dropWarnStyle = {
+            backgroundColor: 'yellow',
+            left: 300,
+            width: 200,
+        };
+        const centeredTextStyle = {
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+        };
+        return (
+            <div style={{ height: '100%' }}>
+                <SplitPane
+                    size={this.state.dragging ? undefined : this.state.size}
+                    onChange={this.handleDrag}
+                    onDragStarted={this.handleDragStart}
+                    onDragFinished={this.handleDragEnd}
+                >
+                    <div style={{ backgroundColor: 'blue', height: '100%', zIndex: 1, opacity: 0.1 }} />
+                    <div />
+                </SplitPane>
+                <div style={Object.assign({}, centeredTextStyle, { left: 0, width: 300 })}>
+                    Can drop anywhere
+                </div>
+                <div style={Object.assign({}, centeredTextStyle, dropWarnStyle)}>
+                    Will snap to edges
+                </div>
+                <div style={Object.assign({}, centeredTextStyle, { left: 500, width: 'calc(100% - 500px)' })}>
+                    Can drop anywhere
+                </div>
+            </div>
+
+        );
+    }
+
+}
+
 if (document.getElementById('simple-nested-example')) render(<SimpleNestedExample />, document.getElementById('simple-nested-example'));
@@ -143,1 +221,2 @@ if (document.getElementById('basic-vertical-example')) render(<BasicVerticalExample />, document.getElementById('basic-vertical-example'));
 if (document.getElementById('inline-style-example')) render(<InlineStyleExample />, document.getElementById('inline-style-example'));
+if (document.getElementById('snap-to-position-example')) render(<SnapToPositionExample />, document.getElementById('snap-to-position-example'));

lib/SplitPane.js

@@ -193,2 +193,7 @@ 'use strict';
                 });
+                if (props.size !== state.draggedSize) {
+                    this.setState({
+                        draggedSize: newSize
+                    });
+                }
             }
@@ -195,0 +200,0 @@ }

package.json

@@ -5,3 +5,3 @@ {
   "main": "index.js",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "repository": {
@@ -8,0 +8,0 @@ "type": "git",

test/assertions/Asserter.js

@@ -102,2 +102,7 @@ import { render, findDOMNode } from 'react-dom';
 
+    const changeSize = (newSize, comp) => {
+        const parent = ReactTestUtils.findRenderedComponentWithType(splitPane, comp);
+        parent.setState({ size: newSize });
+    };
+
     const assertClass = (comp, expectedClassName) => {
@@ -159,4 +164,11 @@ expect(findDOMNode(comp).className).to.contain(expectedClassName, 'Incorrect className');
         },
+
+        assertSizePersists(comp) {
+            const pane = 'first';
+            changeSize(100, comp);
+            assertPaneStyles({ width: '100px' }, pane);
+            changeSize(undefined, comp);
+            assertPaneStyles({ width: '100px' }, pane);
+        },
     };
 };
-

test/vertical-split-pane-tests.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { Component } from 'react';
 import SplitPane from '../src/SplitPane';
@@ -44,3 +44,49 @@ import asserter from './assertions/Asserter';
 
+    describe('With size property', () => {
 
+        it('should set the width of the primary pane', () => {
+            const splitPane = (
+                <SplitPane size={100}>
+                    <div>one</div>
+                    <div>two</div>
+                </SplitPane>
+            );
+            asserter(splitPane).assertPaneWidth('100px');
+        });
+
+        it('should override the defaultSize', () => {
+            const splitPane = (
+                <SplitPane size={100} defaultSize={200}>
+                    <div>one</div>
+                    <div>two</div>
+                </SplitPane>
+            );
+            asserter(splitPane).assertPaneWidth('100px');
+        });
+
+        it('should maintain width after being unset', () => {
+            class PaneContainer extends Component {
+                constructor(props) {
+                    super(props);
+                    this.state = {
+                        size: 80,
+                    };
+                }
+
+                render() {
+                    return (
+                        <SplitPane size={this.state.size}>
+                            <div>one</div>
+                            <div>two</div>
+                        </SplitPane>
+                    );
+                }
+            }
+
+            const splitPane = <PaneContainer className="container" />;
+            asserter(splitPane).assertSizePersists(PaneContainer);
+        });
+    });
+
+
     describe('With primary property set to second', () => {
@@ -47,0 +93,0 @@

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

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

Improved metrics

Lines of code

25139

increased by1.24%

Worsened metrics

Total package byte prevSize

2095494

decreased by-0.97%

Number of package files

33

decreased by-21.43%

No dependency changes