Close geosolutions-it#3025 Add boundary for draggable dialog

kasongoyo · Jul 30, 2019 · e4f5240 · e4f5240
1 parent 4527502
commit e4f5240
Showing 1 changed file with 34 additions and 3 deletions.
diff --git a/web/client/components/misc/Dialog.jsx b/web/client/components/misc/Dialog.jsx
@@ -12,6 +12,7 @@ const Draggable = require('react-draggable');
 const Spinner = require('react-spinkit');
 const assign = require('object-assign');
 const Message = require('../I18N/Message');
+const {withState, withHandlers, compose} = require('recompose');
 
 class Dialog extends React.Component {
     static propTypes = {
@@ -27,7 +28,10 @@ class Dialog extends React.Component {
         onClickOut: PropTypes.func,
         modal: PropTypes.bool,
         start: PropTypes.object,
-        draggable: PropTypes.bool
+        draggable: PropTypes.bool,
+        bounds: PropTypes.object,
+        noBounds: PropTypes.bool, // if true and dialog is draggable then the there will no no biundary for dragging
+        onDragStart: PropTypes.func
     };
 
     static defaultProps = {
@@ -72,6 +76,7 @@ class Dialog extends React.Component {
     };
 
     render() {
+        const { bounds, noBounds, onDragStart } = this.props;
         const body = (<div id={this.props.id} style={{zIndex: 3, ...this.props.style}} className={this.props.className + " modal-dialog-container"}>
             <div className={this.props.headerClassName + " draggable-header"}>
                 {this.renderRole('header')}
@@ -84,7 +89,7 @@ class Dialog extends React.Component {
                 {this.renderRole('footer')}
             </div> : <span/>}
         </div>);
-        const dialog = this.props.draggable ? (<Draggable defaultPosition={this.props.start} handle=".draggable-header, .draggable-header *">
+        const dialog = this.props.draggable ? (<Draggable defaultPosition={this.props.start} bounds={!noBounds ? bounds : null} onStart={onDragStart} onStop={this.handleStop} handle=".draggable-header, .draggable-header *">
             {body}
         </Draggable>) : body;
         let containerStyle = assign({}, this.props.style.display ? {display: this.props.style.display} : {}, this.props.backgroundStyle);
@@ -105,4 +110,30 @@ class Dialog extends React.Component {
     };
 }
 
-module.exports = Dialog;
+const enhance = compose(
+    withState('bounds', 'setBounds', null),
+    withHandlers({
+        onDragStart: props => (event, dragElement) => {
+            const dialog = dragElement.node.getBoundingClientRect();
+            const dialogContainer = dragElement.node.parentElement.getBoundingClientRect();
+            const remainedBottomSpace = dialogContainer.height - dialog.bottom;
+            const bounds = {};
+            bounds.left = -(dialog.left + (dialog.width * 0.7));
+            bounds.top = -(dialog.top);
+            bounds.bottom = dialog.height + (dialogContainer.height - dialog.bottom) * 0.8;
+            if (dialog.height > remainedBottomSpace) {
+                bounds.bottom = dialog.height + remainedBottomSpace * 0.5;
+            } else {
+                bounds.bottom = dialog.height + remainedBottomSpace * 0.8;
+            }
+            bounds.right = dialog.width + (dialogContainer.width - dialog.right) * 0.8;
+            if (!props.bounds) {
+                // This ensure the bounds is set only once
+                props.setBounds(bounds);
+            }
+        }
+    })
+);
+
+
+module.exports = enhance(Dialog);