react-split-pane
Advanced tools
react-split-pane - npm Package Compare versions
Comparing version 0.1.44 to 0.1.45
| import React from 'react'; | ||
| import {render} from 'react-dom'; | ||
| import { render } from 'react-dom'; | ||
| import SplitPane from '../lib/SplitPane'; | ||
@@ -9,6 +9,6 @@ | ||
| <SplitPane split="vertical" minSize={50} maxSize={300} defaultSize={100} className="primary"> | ||
| <div></div> | ||
| <div /> | ||
| <SplitPane split="horizontal"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -22,4 +22,4 @@ </SplitPane> | ||
| <SplitPane split="vertical"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -32,4 +32,4 @@ ); | ||
| <SplitPane split="horizontal"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -42,4 +42,4 @@ ); | ||
| <SplitPane defaultSize="50%"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -52,4 +52,4 @@ ); | ||
| <SplitPane defaultSize="50%" split="horizontal"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -62,4 +62,4 @@ ); | ||
| <SplitPane defaultSize="40%" split="vertical"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -72,4 +72,4 @@ ); | ||
| <SplitPane defaultSize="40%" split="horizontal"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -82,6 +82,6 @@ ); | ||
| <SplitPane split="vertical" defaultSize="33%"> | ||
| <div></div> | ||
| <div /> | ||
| <SplitPane split="vertical" defaultSize="50%"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -95,6 +95,6 @@ </SplitPane> | ||
| <SplitPane split="horizontal" defaultSize="33%"> | ||
| <div></div> | ||
| <div /> | ||
| <SplitPane split="horizontal" defaultSize="50%"> | ||
| <div></div> | ||
| <div></div> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
@@ -105,2 +105,16 @@ </SplitPane> | ||
| const SubComponentExample = () => { | ||
| return ( | ||
| <div className="parent"> | ||
| <div className="header">Header</div> | ||
| <div className="wrapper"> | ||
| <SplitPane split="horizontal" defaultSize="50%"> | ||
| <div /> | ||
| <div /> | ||
| </SplitPane> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| const InlineStyleExample = () => { | ||
@@ -118,3 +132,3 @@ const styleA = { background: '#eee' }; | ||
| resizerStyle={styleC}> | ||
| <div></div> | ||
| <div /> | ||
| <SplitPane split="horizontal" paneStyle={styleD} pane2Style={styleB}> | ||
@@ -137,2 +151,3 @@ <div>Hello...</div> | ||
| if (document.getElementById('multiple-horizontal-example')) render(<MultipleHorizontalExample />, document.getElementById('multiple-horizontal-example')); | ||
| if (document.getElementById('subcomponent-example')) render(<SubComponentExample />, document.getElementById('subcomponent-example')); | ||
| if (document.getElementById('inline-style-example')) render(<InlineStyleExample />, document.getElementById('inline-style-example')); |
@@ -27,3 +27,3 @@ 'use strict'; | ||
| function Pane() { | ||
| var _Object$getPrototypeO; | ||
| var _ref; | ||
@@ -36,3 +36,3 @@ _classCallCheck(this, Pane); | ||
| var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Pane)).call.apply(_Object$getPrototypeO, [this].concat(args))); | ||
| var _this = _possibleConstructorReturn(this, (_ref = Pane.__proto__ || Object.getPrototypeOf(Pane)).call.apply(_ref, [this].concat(args))); | ||
@@ -79,3 +79,4 @@ _this.state = {}; | ||
| className: _react.PropTypes.string.isRequired, | ||
| children: _react.PropTypes.object.isRequired | ||
| children: _react.PropTypes.object.isRequired, | ||
| style: _react.PropTypes.object | ||
| }; | ||
@@ -82,0 +83,0 @@ |
@@ -25,3 +25,3 @@ 'use strict'; | ||
| function Resizer() { | ||
| var _Object$getPrototypeO; | ||
| var _ref; | ||
@@ -34,3 +34,3 @@ _classCallCheck(this, Resizer); | ||
| var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Resizer)).call.apply(_Object$getPrototypeO, [this].concat(args))); | ||
| var _this = _possibleConstructorReturn(this, (_ref = Resizer.__proto__ || Object.getPrototypeOf(Resizer)).call.apply(_ref, [this].concat(args))); | ||
@@ -49,2 +49,4 @@ _this.onMouseDown = _this.onMouseDown.bind(_this); | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var _props = this.props; | ||
@@ -55,3 +57,11 @@ var split = _props.split; | ||
| var classes = ['Resizer', split, className]; | ||
| return _react2.default.createElement('span', { className: classes.join(' '), style: this.props.style || {}, onMouseDown: this.onMouseDown }); | ||
| return _react2.default.createElement('span', { | ||
| className: classes.join(' '), | ||
| style: this.props.style || {}, | ||
| onMouseDown: this.onMouseDown, | ||
| onTouchStart: function onTouchStart(event) { | ||
| event.preventDefault(); | ||
| _this2.props.onTouchStart(event); | ||
| } | ||
| }); | ||
| } | ||
@@ -65,4 +75,6 @@ }]); | ||
| onMouseDown: _react.PropTypes.func.isRequired, | ||
| onTouchStart: _react.PropTypes.func.isRequired, | ||
| split: _react.PropTypes.oneOf(['vertical', 'horizontal']), | ||
| className: _react.PropTypes.string.isRequired | ||
| className: _react.PropTypes.string.isRequired, | ||
| style: _react.PropTypes.object | ||
| }; | ||
@@ -69,0 +81,0 @@ |
@@ -39,3 +39,3 @@ 'use strict'; | ||
| function SplitPane() { | ||
| var _Object$getPrototypeO; | ||
| var _ref; | ||
@@ -48,6 +48,8 @@ _classCallCheck(this, SplitPane); | ||
| var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SplitPane)).call.apply(_Object$getPrototypeO, [this].concat(args))); | ||
| var _this = _possibleConstructorReturn(this, (_ref = SplitPane.__proto__ || Object.getPrototypeOf(SplitPane)).call.apply(_ref, [this].concat(args))); | ||
| _this.onMouseDown = _this.onMouseDown.bind(_this); | ||
| _this.onTouchStart = _this.onTouchStart.bind(_this); | ||
| _this.onMouseMove = _this.onMouseMove.bind(_this); | ||
| _this.onTouchMove = _this.onTouchMove.bind(_this); | ||
| _this.onMouseUp = _this.onMouseUp.bind(_this); | ||
@@ -68,2 +70,3 @@ | ||
| document.addEventListener('mousemove', this.onMouseMove); | ||
| document.addEventListener('touchmove', this.onTouchMove); | ||
| } | ||
@@ -79,3 +82,5 @@ }, { | ||
| document.removeEventListener('mouseup', this.onMouseUp); | ||
| document.removeEventListener('touchend', this.onMouseUp); | ||
| document.removeEventListener('mousemove', this.onMouseMove); | ||
| document.removeEventListener('touchmove', this.onTouchMove); | ||
| } | ||
@@ -85,5 +90,12 @@ }, { | ||
| value: function onMouseDown(event) { | ||
| event.touches = [{ clientX: event.clientX, clientY: event.clientY }]; | ||
| this.onTouchStart(event); | ||
| } | ||
| }, { | ||
| key: 'onTouchStart', | ||
| value: function onTouchStart(event) { | ||
| console.log('here'); | ||
| if (this.props.allowResize && !this.props.size) { | ||
| this.unFocus(); | ||
| var position = this.props.split === 'vertical' ? event.clientX : event.clientY; | ||
| var position = this.props.split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY; | ||
| if (typeof this.props.onDragStarted === 'function') { | ||
@@ -101,2 +113,8 @@ this.props.onDragStarted(); | ||
| value: function onMouseMove(event) { | ||
| event.touches = [{ clientX: event.clientX, clientY: event.clientY }]; | ||
| this.onTouchMove(event); | ||
| } | ||
| }, { | ||
| key: 'onTouchMove', | ||
| value: function onTouchMove(event) { | ||
| if (this.props.allowResize && !this.props.size) { | ||
@@ -106,3 +124,3 @@ if (this.state.active) { | ||
| var isPrimaryFirst = this.props.primary === 'first'; | ||
| var ref = isPrimaryFirst ? this.refs.pane1 : this.refs.pane2; | ||
| var ref = isPrimaryFirst ? this.pane1 : this.pane2; | ||
| if (ref) { | ||
@@ -114,3 +132,3 @@ var node = _reactDom2.default.findDOMNode(ref); | ||
| var height = node.getBoundingClientRect().height; | ||
| var current = this.props.split === 'vertical' ? event.clientX : event.clientY; | ||
| var current = this.props.split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY; | ||
| var size = this.props.split === 'vertical' ? width : height; | ||
@@ -122,3 +140,3 @@ var position = this.state.position; | ||
| if (this.props.maxSize !== undefined && this.props.maxSize <= 0) { | ||
| var splPane = _reactDom2.default.findDOMNode(this.refs.splitPane); | ||
| var splPane = this.splitPane; | ||
| if (this.props.split === 'vertical') { | ||
@@ -175,3 +193,3 @@ maxSize = splPane.getBoundingClientRect().width + this.props.maxSize; | ||
| value: function setSize(props, state) { | ||
| var ref = this.props.primary === 'first' ? this.refs.pane1 : this.refs.pane2; | ||
| var ref = this.props.primary === 'first' ? this.pane1 : this.pane2; | ||
| var newSize = void 0; | ||
@@ -197,2 +215,4 @@ if (ref) { | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var _props = this.props; | ||
@@ -244,13 +264,25 @@ var split = _props.split; | ||
| 'div', | ||
| { className: classes.join(' '), style: style, ref: 'splitPane' }, | ||
| { className: classes.join(' '), style: style, ref: function ref(node) { | ||
| _this2.splitPane = node; | ||
| } }, | ||
| _react2.default.createElement( | ||
| _Pane2.default, | ||
| { ref: 'pane1', key: 'pane1', className: 'Pane1', style: pane1Style, split: split }, | ||
| { | ||
| ref: function ref(node) { | ||
| _this2.pane1 = node; | ||
| }, | ||
| key: 'pane1', className: 'Pane1', | ||
| style: pane1Style, | ||
| split: split | ||
| }, | ||
| children[0] | ||
| ), | ||
| _react2.default.createElement(_Resizer2.default, { | ||
| ref: 'resizer', | ||
| ref: function ref(node) { | ||
| _this2.resizer = node; | ||
| }, | ||
| key: 'resizer', | ||
| className: disabledClass, | ||
| onMouseDown: this.onMouseDown, | ||
| onTouchStart: this.onTouchStart, | ||
| style: this.props.resizerStyle || {}, | ||
@@ -261,3 +293,11 @@ split: split | ||
| _Pane2.default, | ||
| { ref: 'pane2', key: 'pane2', className: 'Pane2', style: pane2Style, split: split }, | ||
| { | ||
| ref: function ref(node) { | ||
| _this2.pane2 = node; | ||
| }, | ||
| key: 'pane2', | ||
| className: 'Pane2', | ||
| style: pane2Style, | ||
| split: split | ||
| }, | ||
| children[1] | ||
@@ -283,2 +323,7 @@ ) | ||
| onChange: _react.PropTypes.func, | ||
| style: _react.PropTypes.object, | ||
| resizerStyle: _react.PropTypes.object, | ||
| paneStyle: _react.PropTypes.object, | ||
| pane1Style: _react.PropTypes.object, | ||
| pane2Style: _react.PropTypes.object, | ||
| className: _react.PropTypes.string, | ||
@@ -285,0 +330,0 @@ children: _react.PropTypes.arrayOf(_react.PropTypes.node).isRequired |
@@ -5,3 +5,3 @@ { | ||
| "main": "index.js", | ||
| "version": "0.1.44", | ||
| "version": "0.1.45", | ||
| "repository": { | ||
@@ -25,7 +25,7 @@ "type": "git", | ||
| "devDependencies": { | ||
| "babel-cli": "^6.11.4", | ||
| "babel-cli": "^6.14.0", | ||
| "babel-eslint": "^6.1.2", | ||
| "babel-plugin-add-module-exports": "^0.2.1", | ||
| "babel-plugin-transform-object-assign": "^6.8.0", | ||
| "babel-preset-es2015": "^6.9.0", | ||
| "babel-preset-es2015": "^6.14.0", | ||
| "babel-preset-react": "^6.11.1", | ||
@@ -37,14 +37,14 @@ "babelify": "^7.3.0", | ||
| "coveralls": "^2.11.12", | ||
| "eslint": "^3.2.0", | ||
| "eslint-config-airbnb": "^9.0.1", | ||
| "eslint-plugin-import": "^1.12.0", | ||
| "eslint-plugin-jsx-a11y": "^2.0.1", | ||
| "eslint-plugin-react": "^5.2.2", | ||
| "eslint": "^3.4.0", | ||
| "eslint-config-airbnb": "^12.0.0", | ||
| "eslint-plugin-import": "^1.14.0", | ||
| "eslint-plugin-jsx-a11y": "^2.2.1", | ||
| "eslint-plugin-react": "^6.2.0", | ||
| "express": "^4.14.0", | ||
| "mochify": "^2.18.1", | ||
| "mochify-istanbul": "^2.4.1", | ||
| "phantomjs-prebuilt": "^2.1.9", | ||
| "react": "^15.3.0", | ||
| "react-addons-test-utils": "^15.3.0", | ||
| "react-dom": "^15.3.0", | ||
| "phantomjs-prebuilt": "^2.1.12", | ||
| "react": "^15.3.1", | ||
| "react-addons-test-utils": "^15.3.1", | ||
| "react-dom": "^15.3.1", | ||
| "surge": "^0.18.0", | ||
@@ -51,0 +51,0 @@ "watchify": "^3.7.0" |
@@ -1,10 +0,10 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { render, findDOMNode } from 'react-dom'; | ||
| import chai from 'chai'; | ||
| import spies from 'chai-spies'; | ||
| import ReactTestUtils from 'react-addons-test-utils'; | ||
| import SplitPane from '../../src/SplitPane'; | ||
| import Resizer from '../../src/Resizer'; | ||
| import Pane from '../../src/Pane'; | ||
| import chai from 'chai'; | ||
| import spies from 'chai-spies'; | ||
| const expect = chai.expect; | ||
| import ReactTestUtils from 'react-addons-test-utils'; | ||
@@ -17,10 +17,9 @@ chai.use(spies); | ||
| */ | ||
| const render = (jsx, renderToDOM) => { | ||
| const renderComponent = (jsx, renderToDOM) => { | ||
| if (renderToDOM) { | ||
| const testDiv = document.createElement('div'); | ||
| document.body.appendChild(testDiv); | ||
| return ReactDOM.render(jsx, testDiv); | ||
| } else { | ||
| return ReactTestUtils.renderIntoDocument(jsx); | ||
| return render(jsx, testDiv); | ||
| } | ||
| return ReactTestUtils.renderIntoDocument(jsx); | ||
| }; | ||
@@ -30,39 +29,25 @@ | ||
| export default (jsx, renderToDom = false) => { | ||
| const splitPane = render(jsx, renderToDom); | ||
| const splitPane = renderComponent(jsx, renderToDom); | ||
| const component = ReactTestUtils.findRenderedComponentWithType(splitPane, SplitPane); | ||
| const findPanes = () => ReactTestUtils.scryRenderedComponentsWithType(component, Pane); | ||
| const findPanes = () => { | ||
| return ReactTestUtils.scryRenderedComponentsWithType(component, Pane); | ||
| }; | ||
| const findTopPane = () => findPanes()[0]; | ||
| const findBottomPane = () => findPanes()[1]; | ||
| const findTopPane = () => { | ||
| return findPanes()[0]; | ||
| }; | ||
| const findPaneByOrder = (paneString) => (paneString === 'first' ? findTopPane() : findBottomPane()); | ||
| const findBottomPane = () => { | ||
| return findPanes()[1]; | ||
| }; | ||
| const findResizer = () => ReactTestUtils.scryRenderedComponentsWithType(splitPane, Resizer); | ||
| const findPaneByOrder = (paneString) => { | ||
| return paneString === 'first' ? findTopPane() : findBottomPane(); | ||
| }; | ||
| const findResizer = () => { | ||
| return ReactTestUtils.scryRenderedComponentsWithType(splitPane, Resizer); | ||
| }; | ||
| const assertStyles = (componentName, actualStyles, expectedStyles) => { | ||
| for (let prop in expectedStyles) { | ||
| if (expectedStyles.hasOwnProperty(prop)) { | ||
| //console.log(prop + ': \'' + actualStyles[prop] + '\','); | ||
| if (expectedStyles[prop] && expectedStyles[prop] !== '') { | ||
| //console.log(prop + ': \'' + actualStyles[prop] + '\','); | ||
| expect(actualStyles[prop]).to.equal(expectedStyles[prop], `${componentName} has incorrect css property for '${prop}'`); | ||
| } | ||
| //expect(actualStyles[prop]).to.equal(expectedStyles[prop], `${componentName} has incorrect css property for '${prop}'`); | ||
| Object.keys(expectedStyles).forEach(prop => { | ||
| // console.log(`${prop}: '${actualStyles[prop]}',`); | ||
| if (expectedStyles[prop] && expectedStyles[prop] !== '') { | ||
| // console.log(`${prop}: '${actualStyles[prop]}',`); | ||
| expect(actualStyles[prop]).to.equal(expectedStyles[prop], | ||
| `${componentName} has incorrect css property for '${prop}'` | ||
| ); | ||
| } | ||
| } | ||
| }); | ||
| return this; | ||
@@ -74,3 +59,3 @@ }; | ||
| const pane = findPaneByOrder(paneString); | ||
| return assertStyles(`${paneString} Pane`, ReactDOM.findDOMNode(pane).style, expectedStyles); | ||
| return assertStyles(`${paneString} Pane`, findDOMNode(pane).style, expectedStyles); | ||
| }; | ||
@@ -86,3 +71,3 @@ | ||
| const getResizerPosition = () => { | ||
| const resizerNode = ReactDOM.findDOMNode(findResizer()[0]); | ||
| const resizerNode = findDOMNode(findResizer()[0]); | ||
| return resizerNode.getBoundingClientRect(); | ||
@@ -94,11 +79,11 @@ }; | ||
| const resizerPosition = getResizerPosition(); | ||
| let mouseMove = { | ||
| const mouseMove = { | ||
| start: { | ||
| clientX: resizerPosition.left, | ||
| clientY: resizerPosition.top | ||
| clientY: resizerPosition.top, | ||
| }, | ||
| end: { | ||
| clientX: resizerPosition.left, | ||
| clientY: resizerPosition.top | ||
| } | ||
| clientY: resizerPosition.top, | ||
| }, | ||
| }; | ||
@@ -122,4 +107,4 @@ | ||
| const assertClass = (component, expectedClassName) => { | ||
| expect(ReactDOM.findDOMNode(component).className).to.contain(expectedClassName, `Incorrect className`); | ||
| const assertClass = (comp, expectedClassName) => { | ||
| expect(findDOMNode(comp).className).to.contain(expectedClassName, 'Incorrect className'); | ||
| return this; | ||
@@ -130,3 +115,3 @@ }; | ||
| assertOrientation(expectedOrientation) { | ||
| expect(ReactDOM.findDOMNode(component).className).to.contain(expectedOrientation, `Incorrect orientation`); | ||
| expect(findDOMNode(component).className).to.contain(expectedOrientation, 'Incorrect orientation'); | ||
| return this; | ||
@@ -136,3 +121,3 @@ }, | ||
| assertSplitPaneClass(expectedClassName) { | ||
| assertClass(component, expectedClassName); | ||
| assertClass(component, expectedClassName); | ||
| }, | ||
@@ -149,6 +134,4 @@ | ||
| const panes = findPanes(); | ||
| let values = panes.map((pane) => { | ||
| return ReactDOM.findDOMNode(pane).textContent; | ||
| }); | ||
| expect(values).to.eql(expectedContents, `Incorrect contents for Pane`); | ||
| const values = panes.map(pane => findDOMNode(pane).textContent); | ||
| expect(values).to.eql(expectedContents, 'Incorrect contents for Pane'); | ||
| return this; | ||
@@ -158,5 +141,5 @@ }, | ||
| assertContainsResizer(){ | ||
| expect(findResizer().length).to.equal(1, `Expected the SplitPane to have a single Resizer`); | ||
| expect(findPanes().length).to.equal(2, `Expected the SplitPane to have 2 panes`); | ||
| assertContainsResizer() { | ||
| expect(findResizer().length).to.equal(1, 'Expected the SplitPane to have a single Resizer'); | ||
| expect(findPanes().length).to.equal(2, 'Expected the SplitPane to have 2 panes'); | ||
| return this; | ||
@@ -167,3 +150,3 @@ }, | ||
| assertPaneWidth(expectedWidth, pane = 'first') { | ||
| return assertPaneStyles({width: expectedWidth}, pane); | ||
| return assertPaneStyles({ width: expectedWidth }, pane); | ||
| }, | ||
@@ -173,3 +156,3 @@ | ||
| assertPaneHeight(expectedHeight, pane = 'first') { | ||
| return assertPaneStyles({height: expectedHeight}, pane); | ||
| return assertPaneStyles({ height: expectedHeight }, pane); | ||
| }, | ||
@@ -186,5 +169,5 @@ | ||
| return assertCallbacks(expectedDragStartedCallback, expectedDragFinishedCallback); | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| }; | ||
| }; | ||
| import React from 'react'; | ||
| import SplitPane from '../src/SplitPane'; | ||
| import Resizer from '../src/Resizer'; | ||
| import asserter from './assertions/Asserter'; | ||
| import chai from 'chai'; | ||
| import spies from 'chai-spies'; | ||
| import SplitPane from '../src/SplitPane'; | ||
| import asserter from './assertions/Asserter'; | ||
| chai.use(spies); | ||
| describe('Default SplitPane', function () { | ||
| describe('Default SplitPane', () => { | ||
@@ -20,12 +20,12 @@ const splitPane = ( | ||
| it('should render the child panes', function () { | ||
| asserter(splitPane).assertPaneContents(['one', 'two']); | ||
| it('should render the child panes', () => { | ||
| asserter(splitPane).assertPaneContents(['one', 'two']); | ||
| }); | ||
| it('should have vertical orientation', function () { | ||
| asserter(splitPane).assertOrientation('vertical'); | ||
| it('should have vertical orientation', () => { | ||
| asserter(splitPane).assertOrientation('vertical'); | ||
| }); | ||
| it('should contain a Resizer', function () { | ||
| asserter(splitPane).assertContainsResizer(); | ||
| it('should contain a Resizer', () => { | ||
| asserter(splitPane).assertContainsResizer(); | ||
| }); | ||
@@ -36,3 +36,3 @@ | ||
| describe('SplitPane can have a specific class', function () { | ||
| describe('SplitPane can have a specific class', () => { | ||
@@ -47,3 +47,3 @@ const splitPane = ( | ||
| it('should have the specified class', function () { | ||
| it('should have the specified class', () => { | ||
| asserter(splitPane).assertSplitPaneClass('some-class'); | ||
@@ -55,10 +55,13 @@ }); | ||
| describe('SplitPane can have resizing callbacks', function () { | ||
| const onDragStartedCallback = chai.spy(function() { }); | ||
| const onDragFinishedCallback = chai.spy(function() { }); | ||
| describe('SplitPane can have resizing callbacks', () => { | ||
| const onDragStartedCallback = chai.spy(() => { | ||
| }); | ||
| const onDragFinishedCallback = chai.spy(() => { | ||
| }); | ||
| const splitPane = ( | ||
| <SplitPane className="some-class" | ||
| onDragStarted = { onDragStartedCallback } | ||
| onDragFinished = { onDragFinishedCallback } | ||
| <SplitPane | ||
| className="some-class" | ||
| onDragStarted={onDragStartedCallback} | ||
| onDragFinished={onDragFinishedCallback} | ||
| > | ||
@@ -71,6 +74,6 @@ <div>one</div> | ||
| it('should call callbacks on resizing', function () { | ||
| it('should call callbacks on resizing', () => { | ||
| asserter(splitPane).assertResizeCallbacks( | ||
| onDragStartedCallback, | ||
| onDragFinishedCallback | ||
| onDragStartedCallback, | ||
| onDragFinishedCallback | ||
| ); | ||
@@ -82,3 +85,3 @@ }); | ||
| describe('Internal Panes have class', function () { | ||
| describe('Internal Panes have class', () => { | ||
@@ -93,3 +96,3 @@ const splitPane = ( | ||
| it('should have the specified classname', function () { | ||
| it('should have the specified classname', () => { | ||
| asserter(splitPane).assertPaneClasses('Pane1', 'Pane2'); | ||
@@ -96,0 +99,0 @@ }); |
| import React from 'react'; | ||
| import SplitPane from '../src/SplitPane'; | ||
| import Resizer from '../src/Resizer'; | ||
| import asserter from './assertions/Asserter'; | ||
| describe('Horizontal SplitPane', () => { | ||
| describe('Horizontal SplitPane', function () { | ||
| describe('Defaults', () => { | ||
| describe('Defaults', function () { | ||
| const splitPane = ( | ||
@@ -20,3 +18,3 @@ <SplitPane split="horizontal"> | ||
| it('should render the SplitPane', function () { | ||
| it('should render the SplitPane', () => { | ||
| asserter(splitPane).assertPaneContents(['one', 'two']); | ||
@@ -26,3 +24,3 @@ }); | ||
| it('should render the child panes', function () { | ||
| it('should render the child panes', () => { | ||
| asserter(splitPane).assertPaneContents(['one', 'two']); | ||
@@ -32,3 +30,3 @@ }); | ||
| it('should have horizontal orientation', function () { | ||
| it('should have horizontal orientation', () => { | ||
| asserter(splitPane).assertOrientation('horizontal'); | ||
@@ -38,3 +36,3 @@ }); | ||
| it('should contain a Resizer', function () { | ||
| it('should contain a Resizer', () => { | ||
| asserter(splitPane).assertContainsResizer(); | ||
@@ -44,6 +42,4 @@ }); | ||
| describe('With defaultSize property', () => { | ||
| describe('With defaultSize property', function () { | ||
| const splitPane = ( | ||
@@ -57,3 +53,3 @@ <SplitPane split="horizontal" defaultSize={99} > | ||
| it('should have correct height for the top Pane', function () { | ||
| it('should have correct height for the top Pane', () => { | ||
| asserter(splitPane).assertPaneHeight('99px'); | ||
@@ -63,3 +59,3 @@ }); | ||
| describe('With primary property set to second', function () { | ||
| describe('With primary property set to second', () => { | ||
@@ -74,3 +70,3 @@ const splitPane = ( | ||
| it('should have correct height for the bottom Pane', function () { | ||
| it('should have correct height for the bottom Pane', () => { | ||
| asserter(splitPane).assertPaneHeight('99px', 'second'); | ||
@@ -80,3 +76,3 @@ }); | ||
| describe('Resizer move up and down', function () { | ||
| describe('Resizer move up and down', () => { | ||
@@ -92,3 +88,3 @@ const splitPane = ( | ||
| it('after move down, the first pane should be larger than before', function () { | ||
| it('after move down, the first pane should be larger than before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveDown, { height: '400px' }); | ||
@@ -99,3 +95,3 @@ }); | ||
| it('after move up, the first pane should be smaller than before', function () { | ||
| it('after move up, the first pane should be smaller than before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveUp, { height: '80px' }); | ||
@@ -106,3 +102,3 @@ }); | ||
| it('after move up, the first pane should not be smaller than `minSize`', function () { | ||
| it('after move up, the first pane should not be smaller than `minSize`', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveUpExtreme, { height: '50px' }); | ||
@@ -113,3 +109,3 @@ }); | ||
| it('after move down, the first pane should not be larger than `maxSize`', function () { | ||
| it('after move down, the first pane should not be larger than `maxSize`', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveDownExtreme, { height: '450px' }); | ||
@@ -119,3 +115,3 @@ }); | ||
| describe('Resizer move up and down and primary prop is set to second', function () { | ||
| describe('Resizer move up and down and primary prop is set to second', () => { | ||
@@ -131,3 +127,3 @@ const splitPane = ( | ||
| it('after move down, the second pane should be smaller then before', function () { | ||
| it('after move down, the second pane should be smaller then before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveToRight, { height: '240px' }); | ||
@@ -138,3 +134,3 @@ }); | ||
| it('after move up, the second pane should be larger then before', function () { | ||
| it('after move up, the second pane should be larger then before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveToLeft, { height: '511px' }); | ||
@@ -144,4 +140,1 @@ }); | ||
| }); | ||
| import React from 'react'; | ||
| import SplitPane from '../src/SplitPane'; | ||
| import Resizer from '../src/Resizer'; | ||
| import asserter from './assertions/Asserter'; | ||
| describe('Vertical SplitPane', function () { | ||
| describe('Vertical SplitPane', () => { | ||
| describe('Defaults', () => { | ||
| describe('Defaults', function () { | ||
| const splitPane = ( | ||
@@ -20,22 +18,16 @@ <SplitPane split="vertical"> | ||
| it('should render the SplitPane', function () { | ||
| asserter(splitPane).assertPaneContents(['one', 'two']); | ||
| }); | ||
| it('should render the SplitPane', () => asserter(splitPane).assertPaneContents(['one', 'two'])); | ||
| it('should have vertical orientation', function () { | ||
| asserter(splitPane).assertOrientation('vertical'); | ||
| }); | ||
| it('should have vertical orientation', () => asserter(splitPane).assertOrientation('vertical')); | ||
| it('should contain a Resizer', function () { | ||
| asserter(splitPane).assertContainsResizer(); | ||
| }); | ||
| it('should contain a Resizer', () => asserter(splitPane).assertContainsResizer()); | ||
| }); | ||
| describe('With defaultSize property', function () { | ||
| describe('With defaultSize property', () => { | ||
| const splitPane = ( | ||
| <SplitPane split="vertical" defaultSize={99} > | ||
| <SplitPane split="vertical" defaultSize={99}> | ||
| <div>one</div> | ||
@@ -47,3 +39,3 @@ <div>two</div> | ||
| it('should have correct width for the left Pane', function () { | ||
| it('should have correct width for the left Pane', () => { | ||
| asserter(splitPane).assertPaneWidth('99px'); | ||
@@ -55,6 +47,6 @@ asserter(splitPane).assertPaneWidth(null, 'second'); | ||
| describe('With primary property set to second', function () { | ||
| describe('With primary property set to second', () => { | ||
| const splitPane = ( | ||
| <SplitPane split="vertical" defaultSize={99} primary="second" > | ||
| <SplitPane split="vertical" defaultSize={99} primary="second"> | ||
| <div>one</div> | ||
@@ -66,3 +58,3 @@ <div>two</div> | ||
| it('should have correct width for the right Pane', function () { | ||
| it('should have correct width for the right Pane', () => { | ||
| asserter(splitPane).assertPaneWidth(null); | ||
@@ -74,3 +66,3 @@ asserter(splitPane).assertPaneWidth('99px', 'second'); | ||
| describe('Resizer move to the right and left', function () { | ||
| describe('Resizer move to the right and left', () => { | ||
@@ -86,3 +78,3 @@ const splitPane = ( | ||
| it('after move to right, the first pane should be larger than before', function () { | ||
| it('after move to right, the first pane should be larger than before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveToRight, { width: '400px' }); | ||
@@ -93,3 +85,3 @@ }); | ||
| it('after move to left, the first pane should be smaller than before', function () { | ||
| it('after move to left, the first pane should be smaller than before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveToLeft, { width: '80px' }); | ||
@@ -100,3 +92,3 @@ }); | ||
| it('after move to left, the first pane should not be smaller than `minSize`', function () { | ||
| it('after move to left, the first pane should not be smaller than `minSize`', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveLeftExtreme, { width: '50px' }); | ||
@@ -107,3 +99,3 @@ }); | ||
| it('after move to right, the first pane should not be larger than `minSize`', function () { | ||
| it('after move to right, the first pane should not be larger than `minSize`', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveRightExtreme, { width: '450px' }); | ||
@@ -113,3 +105,3 @@ }); | ||
| describe('Resizer move to the right and left and primary prop is set to second', function () { | ||
| describe('Resizer move to the right and left and primary prop is set to second', () => { | ||
@@ -125,3 +117,3 @@ const splitPane = ( | ||
| it('after move to right, the second pane should be smaller then before', function () { | ||
| it('after move to right, the second pane should be smaller then before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveToRight, { width: '240px' }); | ||
@@ -132,3 +124,3 @@ }); | ||
| it('after move to left, the second pane should be larger then before', function () { | ||
| it('after move to left, the second pane should be larger then before', () => { | ||
| asserter(splitPane, true).assertResizeByDragging(moveToLeft, { width: '511px' }); | ||
@@ -135,0 +127,0 @@ }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.21%
2093170
- Number of package files
- increased by7.5%
43
- Lines of code
- increased by0.4%
24592
No dependency changes