From 317fef58793a781f33c5ef8dfa545dfde0be9ba3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Nov=C3=A1k?= Date: Thu, 7 Dec 2017 20:41:26 +0100 Subject: [PATCH] build --- lib/HandleBar.js | 25 ++- lib/Helpers.js | 32 ++++ lib/Pane.js | 19 ++- lib/Splitter.js | 412 ++++++++++++++++++++--------------------------- lib/index.js | 4 + 5 files changed, 245 insertions(+), 247 deletions(-) create mode 100644 lib/index.js diff --git a/lib/HandleBar.js b/lib/HandleBar.js index e9b38a9..b8f5999 100644 --- a/lib/HandleBar.js +++ b/lib/HandleBar.js @@ -11,21 +11,30 @@ var __extends = (this && this.__extends) || (function () { })(); Object.defineProperty(exports, "__esModule", { value: true }); var React = require("react"); -var HandleBar = (function (_super) { +var ReactDOM = require("react-dom"); +var HandleBar = /** @class */ (function (_super) { __extends(HandleBar, _super); function HandleBar() { - return _super !== null && _super.apply(this, arguments) || this; + var _this = _super !== null && _super.apply(this, arguments) || this; + _this.getDivInstance = function () { + return ReactDOM.findDOMNode(_this.div); + }; + return _this; } HandleBar.prototype.render = function () { + var _this = this; var _a = this.props, position = _a.position, handleMouseDown = _a.handleMouseDown, allowResize = _a.allowResize; - var allowResizeClass = allowResize ? '' : 'resize-not-allowed'; - return (React.createElement("div", { className: "handle-bar " + position + " " + allowResizeClass, onMouseDown: function (e) { return handleMouseDown(e); }, onTouchStart: function (e) { return handleMouseDown(e); } }, + var classNames = [ + 'handle-bar', + position, + !allowResize && 'resize-not-allowed', + ].filter(function (cls) { return cls; }).join(' '); + return (React.createElement("div", { className: classNames, ref: function (node) { return _this.div = node; }, onMouseDown: function (e) { return handleMouseDown(e); }, onTouchStart: function (e) { return handleMouseDown(e); } }, React.createElement("span", { className: "handle-bar_drag" }))); }; - ; + HandleBar.defaultProps = { + allowResize: true + }; return HandleBar; }(React.Component)); -HandleBar.defaultProps = { - allowResize: true -}; exports.default = HandleBar; diff --git a/lib/Helpers.js b/lib/Helpers.js index 8da3922..db91967 100644 --- a/lib/Helpers.js +++ b/lib/Helpers.js @@ -9,3 +9,35 @@ function unselectAll() { } } exports.unselectAll = unselectAll; +function getPrimaryPaneWidth(position, lastX, lastY, maxMousePosition, handleBarOffsetFromParent, primaryPaneMinHeight, primaryPaneMinWidth) { + var primaryPanePosition; + switch (position) { + case 'horizontal': { + if (lastY > maxMousePosition) { + primaryPanePosition = maxMousePosition - handleBarOffsetFromParent; + } + else if ((lastY - handleBarOffsetFromParent) <= primaryPaneMinHeight) { + primaryPanePosition = primaryPaneMinHeight + 0.001; + } + else { + primaryPanePosition = lastY - handleBarOffsetFromParent; + } + break; + } + case 'vertical': + default: { + if (lastX >= maxMousePosition) { + primaryPanePosition = maxMousePosition - handleBarOffsetFromParent; + } + else if ((lastX - handleBarOffsetFromParent) <= primaryPaneMinWidth) { + primaryPanePosition = primaryPaneMinWidth + 0.001; + } + else { + primaryPanePosition = lastX - handleBarOffsetFromParent; + } + break; + } + } + return primaryPanePosition; +} +exports.getPrimaryPaneWidth = getPrimaryPaneWidth; diff --git a/lib/Pane.js b/lib/Pane.js index 1f2c9b2..33a8adb 100644 --- a/lib/Pane.js +++ b/lib/Pane.js @@ -11,15 +11,26 @@ var __extends = (this && this.__extends) || (function () { })(); Object.defineProperty(exports, "__esModule", { value: true }); var React = require("react"); -var Pane = (function (_super) { +var ReactDOM = require("react-dom"); +var Pane = /** @class */ (function (_super) { __extends(Pane, _super); function Pane() { - return _super !== null && _super.apply(this, arguments) || this; + var _this = _super !== null && _super.apply(this, arguments) || this; + _this.getDivInstance = function () { + return ReactDOM.findDOMNode(_this.div); + }; + return _this; } Pane.prototype.render = function () { + var _this = this; var _a = this.props, hasDetailPane = _a.hasDetailPane, id = _a.id, style = _a.style, position = _a.position, className = _a.className; - var isDetailPane = hasDetailPane ? 'bottom-detail-pane' : ''; - return (React.createElement("div", { id: id, className: "pane " + position + " " + isDetailPane + " " + (className || ''), style: style }, this.props.children)); + var classNames = [ + 'pane', + hasDetailPane && 'bottom-detail-pane', + position, + className + ].filter(function (cls) { return cls; }).join(' '); + return (React.createElement("div", { id: id, ref: function (node) { return _this.div = node; }, className: classNames, style: style }, this.props.children)); }; return Pane; }(React.Component)); diff --git a/lib/Splitter.js b/lib/Splitter.js index c0d50a2..9e06171 100644 --- a/lib/Splitter.js +++ b/lib/Splitter.js @@ -21,245 +21,186 @@ var Helpers_1 = require("./Helpers"); require("./splitters.css"); // TODO: // * uložit stav splitteru do localStorage,nebo někam jinam, bude na to callback funkce -var Splitter = (function (_super) { +var Splitter = /** @class */ (function (_super) { __extends(Splitter, _super); - function Splitter() { - var _this = _super.call(this) || this; - _this.handleMouseDown = _this.handleMouseDown.bind(_this); - _this.handleMouseUp = _this.handleMouseUp.bind(_this); - _this.handleMouseMove = _this.handleMouseMove.bind(_this); - _this.getSize = _this.getSize.bind(_this); - _this.state = { - isDragging: false - }; - return _this; - } - Splitter.prototype.getSize = function (cX, cY) { - /******************************** - * This function calculates the max position of a mouse in the current splitter from given percentage. - /********************************/ - var maxMousePosition; - var nodeWrapperSize; - var primaryPaneOffset; - var wrapper = ReactDOM.findDOMNode(this.paneWrapper).getBoundingClientRect(); - var primaryPane = ReactDOM.findDOMNode(this.panePrimary).getBoundingClientRect(); - var handleBarSize = ReactDOM.findDOMNode(this.handlebar).getBoundingClientRect(); - var posInHandleBar = this.props.position === 'vertical' - ? handleBarSize.left - cX - : handleBarSize.top - cY; - // find only letters from string - var regEx = new RegExp(/\D+/gi); - if (this.props.position === 'vertical') { - // split the maxWidth/maxHeight string to string and numbers - var maxWidthStr = this.props.primaryPaneMaxWidth.match(regEx)[0].toLowerCase(); - var maxWidthNum = parseFloat(this.props.primaryPaneMaxWidth.split(regEx)[0]); - nodeWrapperSize = wrapper.width; - primaryPaneOffset = primaryPane.left; - if (maxWidthStr === '%') { - maxMousePosition = - Math.floor((nodeWrapperSize * (maxWidthNum / 100)) + primaryPaneOffset - (handleBarSize.width + posInHandleBar)); + function Splitter(props) { + var _this = _super.call(this, props) || this; + _this.handleMouseDown = function (e) { + /******************************** + * If the right button was clicked - stop the function + * If there is more then one pane, we get the sizes of panes + max pos of mouse in splitter + * add event listener for touch move and mouse move + ********************************/ + if (e.button === 2 || _this.props.allowResize === false) { + return; } - else if (maxWidthStr === 'px') { - maxMousePosition = - Math.floor((maxWidthNum + primaryPaneOffset) - handleBarSize.width); + var handleBarOffsetFromParent; + var clientX; + var clientY; + if (e.type === 'mousedown') { + clientX = e.clientX; + clientY = e.clientY; } - } - else { - var maxHeightStr = this.props.primaryPaneMaxHeight.match(regEx)[0].toLowerCase(); - var maxHeightNum = parseFloat(this.props.primaryPaneMaxHeight.split(regEx)[0]); - nodeWrapperSize = wrapper.height; - primaryPaneOffset = primaryPane.top; - if (maxHeightStr === '%') { - maxMousePosition = - Math.floor((nodeWrapperSize * (maxHeightNum / 100)) + primaryPaneOffset - (handleBarSize.height + posInHandleBar)); + else if (e.type === 'touchstart') { + clientX = e.touches[0].clientX; + clientY = e.touches[0].clientY; } - else if (maxHeightStr === 'px') { - maxMousePosition = - Math.floor((maxHeightNum + primaryPaneOffset) - handleBarSize.height); + if (React.Children.count(_this.props.children) > 1) { + _this.getSize(clientX, clientY); } - } - this.setState({ - maxMousePosition: maxMousePosition - }); - }; - Splitter.prototype.componentDidMount = function () { - /******************************** - * Sets event listeners after component is mounted. - * If there is only one pane, the resize event listener won't be added - ********************************/ - document.addEventListener('mouseup', this.handleMouseUp); - document.addEventListener('touchend', this.handleMouseUp); - if (React.Children.count(this.props.children) > 1) { - window.addEventListener('resize', this.getSize); - } - }; - Splitter.prototype.handleMouseDown = function (e) { - /******************************** - * If the right button was clicked - stop the function - * If there is more then one pane, we get the sizes of panes + max pos of mouse in splitter - * add event listener for touch move and mouse move - ********************************/ - if (e.button === 2 || this.props.allowResize === false) { - return; - } - var handleBarOffsetFromParent; - var clientX; - var clientY; - if (e.type === 'mousedown') { - clientX = e.clientX; - clientY = e.clientY; - } - else if (e.type === 'touchstart') { - clientX = e.touches[0].clientX; - clientY = e.touches[0].clientY; - } - if (React.Children.count(this.props.children) > 1) { - this.getSize(clientX, clientY); - } - if (this.props.position === 'horizontal') { - handleBarOffsetFromParent = clientY - e.target.offsetTop; - } - else if (this.props.position === 'vertical') { - handleBarOffsetFromParent = clientX - e.target.offsetLeft; - } - this.setState({ - isDragging: true, - handleBarOffsetFromParent: handleBarOffsetFromParent - }); - document.addEventListener('mousemove', this.handleMouseMove); - document.addEventListener('touchmove', this.handleMouseMove); - }; - Splitter.prototype.handleMouseMove = function (e) { - /******************************** - * check if the state is still isDragging, if not, stop the function - * unselectAll - unselect all selected text - * check position of mouse in the splitter and and set the width or height of primary pane - * save last positions of X and Y coords (that is necessary for touch screen) - ********************************/ - if (!this.state.isDragging) { - return; - } - Helpers_1.unselectAll(); - var _a = this.state, handleBarOffsetFromParent = _a.handleBarOffsetFromParent, maxMousePosition = _a.maxMousePosition; - var _b = this.props, position = _b.position, primaryPaneMinWidth = _b.primaryPaneMinWidth, primaryPaneMinHeight = _b.primaryPaneMinHeight, postPoned = _b.postPoned; - var clientX; - var clientY; - if (e.type === 'mousemove') { - clientX = e.clientX; - clientY = e.clientY; - } - else if (e.type === 'touchmove') { - clientX = e.touches[0].clientX; - clientY = e.touches[0].clientY; - } - var primaryPanePosition; - switch (position) { - case 'horizontal': { - if (clientY > maxMousePosition) { - primaryPanePosition = maxMousePosition - handleBarOffsetFromParent; - } - else if ((clientY - handleBarOffsetFromParent) <= primaryPaneMinHeight) { - primaryPanePosition = primaryPaneMinHeight + 0.001; - } - else { - primaryPanePosition = clientY - handleBarOffsetFromParent; - } - break; + if (_this.props.position === 'horizontal') { + handleBarOffsetFromParent = clientY - e.target.offsetTop; } - case 'vertical': - default: { - if (clientX > maxMousePosition) { - primaryPanePosition = maxMousePosition - handleBarOffsetFromParent; - // TODO: blink the handlebar on max size - } - else if ((clientX - handleBarOffsetFromParent) <= primaryPaneMinWidth) { - primaryPanePosition = primaryPaneMinWidth + 0.001; - } - else { - primaryPanePosition = clientX - handleBarOffsetFromParent; - } - break; + else if (_this.props.position === 'vertical') { + handleBarOffsetFromParent = clientX - e.target.offsetLeft; } - } - if (postPoned) { - this.setState({ - handleBarClonePosition: primaryPanePosition, - lastX: clientX, - lastY: clientY, - isVisible: true + _this.setState({ + isDragging: true, + handleBarOffsetFromParent: handleBarOffsetFromParent }); - } - else { - this.setState({ - primaryPane: primaryPanePosition, - lastX: clientX, - lastY: clientY - }); - } - }; - Splitter.prototype.handleMouseUp = function (e) { - /******************************** - * Dispatch event is for components which resizes on window resize - ********************************/ - if (!this.state.isDragging) { - return; - } - var _a = this.state, handleBarOffsetFromParent = _a.handleBarOffsetFromParent, lastX = _a.lastX, lastY = _a.lastY; - var primaryPanePosition; - switch (this.props.position) { - case 'horizontal': { - if (lastY > this.state.maxMousePosition) { - primaryPanePosition = this.state.maxMousePosition - handleBarOffsetFromParent; - } - else if ((lastY - handleBarOffsetFromParent) <= this.props.primaryPaneMinHeight) { - primaryPanePosition = this.props.primaryPaneMinHeight + 0.001; + document.addEventListener('mousemove', _this.handleMouseMove); + document.addEventListener('touchmove', _this.handleMouseMove); + }; + _this.handleMouseMove = function (e) { + /******************************** + * check if the state is still isDragging, if not, stop the function + * unselectAll - unselect all selected text + * check position of mouse in the splitter and and set the width or height of primary pane + * save last positions of X and Y coords (that is necessary for touch screen) + ********************************/ + if (!_this.state.isDragging) { + return; + } + Helpers_1.unselectAll(); + var _a = _this.state, handleBarOffsetFromParent = _a.handleBarOffsetFromParent, maxMousePosition = _a.maxMousePosition; + var _b = _this.props, position = _b.position, primaryPaneMinWidth = _b.primaryPaneMinWidth, primaryPaneMinHeight = _b.primaryPaneMinHeight, postPoned = _b.postPoned; + var clientX; + var clientY; + if (e.type === 'mousemove') { + clientX = e.clientX; + clientY = e.clientY; + } + else if (e.type === 'touchmove') { + clientX = e.touches[0].clientX; + clientY = e.touches[0].clientY; + } + var primaryPanePosition = Helpers_1.getPrimaryPaneWidth(position, clientX, clientY, maxMousePosition, handleBarOffsetFromParent, primaryPaneMinHeight, primaryPaneMinWidth); + if (postPoned) { + _this.setState({ + handleBarClonePosition: primaryPanePosition, + lastX: clientX, + lastY: clientY, + isVisible: true + }); + } + else { + _this.setState({ + primaryPane: primaryPanePosition, + lastX: clientX, + lastY: clientY + }); + } + }; + _this.handleMouseUp = function (e) { + /******************************** + * Dispatch event is for components which resizes on window resize + ********************************/ + if (!_this.state.isDragging) { + return; + } + var _a = _this.state, handleBarOffsetFromParent = _a.handleBarOffsetFromParent, lastX = _a.lastX, lastY = _a.lastY, maxMousePosition = _a.maxMousePosition; + var _b = _this.props, position = _b.position, primaryPaneMinWidth = _b.primaryPaneMinWidth, primaryPaneMinHeight = _b.primaryPaneMinHeight, postPoned = _b.postPoned; + var primaryPanePosition = Helpers_1.getPrimaryPaneWidth(position, lastX, lastY, maxMousePosition, handleBarOffsetFromParent, primaryPaneMinHeight, primaryPaneMinWidth); + if (postPoned) { + _this.setState({ + isDragging: false, + isVisible: false, + primaryPane: primaryPanePosition + }); + } + else { + _this.setState({ + isDragging: false, + primaryPane: primaryPanePosition + }); + } + document.removeEventListener('mousemove', _this.handleMouseMove); + document.removeEventListener('touchmove', _this.handleMouseMove); + // call resize event to trigger method for updating of DataGrid width + // TODO: add this event for IE11 + if (typeof _this.props.dispatchResize === 'boolean') { + window.dispatchEvent(new Event('resize')); + } + // callback function from parent component + if (typeof _this.props.onDragFinished === 'function') { + _this.props.onDragFinished(); + } + if (React.Children.count(_this.props.children) > 1) { + _this.getSize(lastX, lastY); + } + }; + _this.getSize = function (cX, cY) { + /******************************** + * This function calculates the max position of a mouse in the current splitter from given percentage. + /********************************/ + var maxMousePosition; + var nodeWrapperSize; + var primaryPaneOffset; + var wrapper = ReactDOM.findDOMNode(_this.paneWrapper).getBoundingClientRect(); + var primaryPane = _this.panePrimary.getDivInstance().getBoundingClientRect(); + var handleBarSize = _this.handlebar.getDivInstance().getBoundingClientRect(); + var posInHandleBar = _this.props.position === 'vertical' + ? handleBarSize.left - cX + : handleBarSize.top - cY; + // find only letters from string + var regEx = new RegExp(/\D+/gi); + if (_this.props.position === 'vertical') { + // split the maxWidth/maxHeight string to string and numbers + var maxWidthStr = _this.props.primaryPaneMaxWidth.match(regEx)[0].toLowerCase(); + var maxWidthNum = parseFloat(_this.props.primaryPaneMaxWidth.split(regEx)[0]); + nodeWrapperSize = wrapper.width; + primaryPaneOffset = primaryPane.left; + if (maxWidthStr === '%') { + maxMousePosition = + Math.floor((nodeWrapperSize * (maxWidthNum / 100)) + primaryPaneOffset - (handleBarSize.width + posInHandleBar)); } - else { - primaryPanePosition = lastY - handleBarOffsetFromParent; + else if (maxWidthStr === 'px') { + maxMousePosition = + Math.floor((maxWidthNum + primaryPaneOffset) - handleBarSize.width); } - break; } - case 'vertical': - default: { - if (lastX >= this.state.maxMousePosition) { - primaryPanePosition = this.state.maxMousePosition - handleBarOffsetFromParent; - // TODO: blink the handlebar on max size + else { + var maxHeightStr = _this.props.primaryPaneMaxHeight.match(regEx)[0].toLowerCase(); + var maxHeightNum = parseFloat(_this.props.primaryPaneMaxHeight.split(regEx)[0]); + nodeWrapperSize = wrapper.height; + primaryPaneOffset = primaryPane.top; + if (maxHeightStr === '%') { + maxMousePosition = + Math.floor((nodeWrapperSize * (maxHeightNum / 100)) + primaryPaneOffset - (handleBarSize.height + posInHandleBar)); } - else if ((lastX - handleBarOffsetFromParent) <= this.props.primaryPaneMinWidth) { - primaryPanePosition = this.props.primaryPaneMinWidth + 0.001; + else if (maxHeightStr === 'px') { + maxMousePosition = + Math.floor((maxHeightNum + primaryPaneOffset) - handleBarSize.height); } - else { - primaryPanePosition = lastX - handleBarOffsetFromParent; - } - break; } - } - if (this.props.postPoned) { - this.setState({ - isDragging: false, - isVisible: false, - primaryPane: primaryPanePosition - }); - } - else { - this.setState({ - isDragging: false, - primaryPane: primaryPanePosition + _this.setState({ + maxMousePosition: maxMousePosition }); - } - document.removeEventListener('mousemove', this.handleMouseMove); - document.removeEventListener('touchmove', this.handleMouseMove); - // call resize event to trigger method for updating of DataGrid width - // TODO: add this event for IE11 - if (typeof this.props.dispatchResize === 'boolean') { - window.dispatchEvent(new Event('resize')); - } - // callback function from parent component - if (typeof this.props.onDragFinished === 'function') { - this.props.onDragFinished(); - } + }; + _this.state = { + isDragging: false + }; + return _this; + } + Splitter.prototype.componentDidMount = function () { + /******************************** + * Sets event listeners after component is mounted. + * If there is only one pane, the resize event listener won't be added + ********************************/ + document.addEventListener('mouseup', this.handleMouseUp); + document.addEventListener('touchend', this.handleMouseUp); if (React.Children.count(this.props.children) > 1) { - this.getSize(lastX, lastY); + window.addEventListener('resize', this.getSize); } }; Splitter.prototype.render = function () { @@ -319,6 +260,8 @@ var Splitter = (function (_super) { } break; } + default: + return null; } if (!children[1]) { var onePaneStyle = { @@ -346,18 +289,17 @@ var Splitter = (function (_super) { : null)); var _c; }; - ; + Splitter.defaultProps = { + position: 'vertical', + postPoned: false, + dispatchResize: false, + primaryPaneMaxWidth: '80%', + primaryPaneMinWidth: 300, + primaryPaneWidth: '50%', + primaryPaneMaxHeight: '80%', + primaryPaneMinHeight: 300, + primaryPaneHeight: '50%' + }; return Splitter; }(React.Component)); -Splitter.defaultProps = { - position: 'vertical', - postPoned: false, - dispatchResize: false, - primaryPaneMaxWidth: '80%', - primaryPaneMinWidth: 300, - primaryPaneWidth: '50%', - primaryPaneMaxHeight: '80%', - primaryPaneMinHeight: 300, - primaryPaneHeight: '50%' -}; exports.Splitter = Splitter; diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..db11f72 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,4 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var Splitter_1 = require("./Splitter"); +exports.default = Splitter_1.Splitter;