Merge pull request #404 from vtfk/dialog-draggable

Dialog draggable

Author: runely

src/ui/Dialog/Dialog.stories.js

@@ -161,3 +161,54 @@ export function PreventScrollingBehind () {
     </>
   )
 }
+
+export function Draggable () {
+  const [dialogOpen, setIsDialogOpen] = useState(false)
+  const [dialog2Open, setDialog2Open] = useState(false)
+
+  return (
+    <>
+      <div>
+        <Button onClick={() => { setIsDialogOpen(!dialogOpen) }}>{`${!dialogOpen ? 'Åpne' : 'Lukk'} modal`}</Button>
+      </div>
+      <p />
+
+      <Dialog
+        isOpen={dialogOpen}
+        onDismiss={() => { setIsDialogOpen(false) }}
+        showCloseButton
+        draggable
+        contained
+        width='60%'
+        height='50%'
+      >
+        <DialogTitle>This is the first dialog</DialogTitle>
+        <DialogBody>
+          Click and drag the top part of the dialog to move it.<br />
+          This dialog is <b>contained</b> and is not allowed to move outside it's parents bounds
+        </DialogBody>
+        <DialogActions>
+          <Button size='small' onClick={() => setDialog2Open(true)}>Open nested dialog</Button>
+          <Button size='small' type='secondary' onClick={() => { setIsDialogOpen(false) }}>Close</Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog
+        isOpen={dialog2Open}
+        onDismiss={() => setDialog2Open(false)}
+        width='50%'
+        draggable
+        height='30%'
+      >
+        <DialogTitle>
+          Draggable nested dialog
+        </DialogTitle>
+        <DialogBody>
+          This dialog is also draggable, but it is not <b>contained</b>
+        </DialogBody>
+        <DialogActions>
+          <Button size='small' onClick={() => setDialog2Open(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/ui/Dialog/index.js

@@ -6,19 +6,14 @@ import { ReactComponent as CloseIcon } from './icon-close.svg'
 
 import './styles.scss'
 import ScrollLock from 'react-scrolllock'
+import { Draggable } from '../Draggable'
 
-export function Dialog ({ isOpen, title, className, persistent, width, height, showCloseButton, onDismiss, onCloseBtnClick, onClickOutside, onPressEscape, style, ...props }) {
+export function Dialog ({ isOpen, title, className, persistent, width, height, draggable, contained, showCloseButton, onDismiss, onCloseBtnClick, onClickOutside, onPressEscape, style, ...props }) {
   // Set an unique ID for the dialog
   const [id] = useState(`${nanoid()}`)
 
   const [clickStartedInsideDialog, setClickStartedInsideDialog] = useState(undefined)
-
-  const parsedStyles = useMemo(() => {
-    const _style = { ...style }
-    if (width) _style.width = width
-    if (height) _style.height = height
-    return _style
-  }, [style, width, height])
+  const [isDragging, setIsDragging] = useState(false)
 
   // onCreated lifecycle-hook
   useEffect(() => {
@@ -40,19 +35,27 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, s
       }
     }
 
-    function handleMouseUp(e) {
-      setClickStartedInsideDialog(false);
+    function handleMouseUp (e) {
+      setClickStartedInsideDialog(false)
+      setIsDragging(false)
     }
 
     // Register eventhandlers
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mouseup', handleMouseUp)
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keydown', handleKeyDown)
       document.removeEventListener('mouseup', handleMouseUp)
     }
   })
 
+  const dialogClasses = useMemo(() => {
+    let classes = 'dialog'
+    if (isDragging) classes += ' dialog-no-select'
+
+    return classes
+  }, [isDragging])
+
   // Plays the shaking animation-effect when the dialog is persistent
   function shakeDialogBox () {
     const dialog = document.getElementById(`dialog-${id}`)
@@ -66,7 +69,7 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, s
   }
 
   function handleBackdropClick (e) {
-    if(clickStartedInsideDialog) return;
+    if (clickStartedInsideDialog) return
     const clickedBackdrop = e.target.id === `dialog-backdrop-${id}`
 
     if (isOpen && clickedBackdrop) {
@@ -86,22 +89,26 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, s
     isOpen === true &&
       <ScrollLock isActive={isOpen}>
         <div id={`dialog-backdrop-${id}`} className={`dialog-backdrop ${className}`} onMouseUp={(e) => handleBackdropClick(e)}>
-          <div
-            id={`dialog-${id}`}
-            className='dialog'
-            aria-label='dialog'
-            aria-modal='true'
-            role='dialog'
-            style={parsedStyles}
-            onMouseDown={(e) => { setClickStartedInsideDialog(true); e.preventDefault(); e.stopPropagation(); }}
-          >
-            {!persistent && showCloseButton &&
-              <button className='dialog-close-btn' onClick={(e) => { handleCloseBtnClick(); e.preventDefault() }} aria-label='Lukk'>
-                <CloseIcon alt='' />
-              </button>}
-            {props.children}
-          </div>
+          <Draggable active={draggable && isDragging} contained={contained} width={width} height={height}>
+            <div
+              id={`dialog-${id}`}
+              className={dialogClasses}
+              aria-label='dialog'
+              aria-modal='true'
+              role='dialog'
+              style={style}
+              onMouseDown={() => { setClickStartedInsideDialog(true) }}
+            >
+              { draggable && <div className='dialog-drag-area' onMouseDown={() => setIsDragging(true)} /> }
+              {!persistent && showCloseButton &&
+                <button className='dialog-close-btn' onClick={(e) => { handleCloseBtnClick(); e.preventDefault() }} aria-label='Lukk'>
+                  <CloseIcon alt='' />
+                </button>}
+              {props.children}
+            </div>
+          </Draggable>
         </div>
+
       </ScrollLock>
   )
 }
@@ -133,6 +140,8 @@ export function DialogActions ({ children, style }) {
 Dialog.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
+  contained: PropTypes.bool,
+  draggable: PropTypes.bool,
   height: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
   onClickOutside: PropTypes.func,

src/ui/Dialog/styles.scss

@@ -21,6 +21,8 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
   gap: 0.5rem;
   border-radius: 10px;
   min-width: 200px;
@@ -39,6 +41,19 @@
   z-index: 1001;
 }
 
+.dialog-drag-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $baseUnit * 4;
+  cursor: move;
+}
+
+.dialog-no-select {
+  user-select: none!important;
+}
+
 .dialog-title {
   font-weight: 500;
   font-size: x-large;

src/ui/Draggable/index.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import './styles.scss'
+
+export function Draggable ({ children, active, contained, width, height }) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [coordinates, setCoordinates] = useState(undefined)
+  const [mouseSelfDelta, setMouseSelfDelta] = useState(undefined)
+  const thisRef = useRef(undefined)
+
+  const parsedStyle = useMemo(() => {
+    const _s = { width, height }
+    if (coordinates?.x && coordinates?.y) {
+      _s.top = `${coordinates.y}px`
+      _s.left = `${coordinates.x}px`
+    }
+    return _s
+  }, [width, height, coordinates])
+
+  useEffect(() => {
+    /**
+     *
+     * @param {MouseEvent} e
+     * @returns
+     */
+    function handleMouseMove (e) {
+      if (!active || !isDragging) return
+
+      if (thisRef?.current) {
+        let x = e.clientX - mouseSelfDelta.x
+        let y = e.clientY - mouseSelfDelta.y
+
+        const width = thisRef.current.clientWidth
+        const height = thisRef.current.clientHeight
+        const bboxRight = x + thisRef.current.clientWidth
+        const bboxBottom = y + height
+        const parentWidth = thisRef.current.parentNode.clientWidth
+        const parentHeight = thisRef.current.parentNode.clientHeight
+
+        if (contained) {
+          if (x <= 1) x = 1
+          else if (bboxRight >= parentWidth) x = parentWidth - width
+          if (y <= 1) y = 1
+          else if (bboxBottom >= parentHeight) y = parentHeight - height
+        } else {
+          if (x === 0) x = -1
+          if (y === 0) y = -1
+        }
+
+        setCoordinates({
+          x,
+          y
+        })
+      }
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [active, isDragging])
+
+  useEffect(() => {
+    function handleMouseUp () {
+      setIsDragging(false)
+    }
+
+    document.addEventListener('mouseup', handleMouseUp)
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  })
+
+  function handleDragStart (e) {
+    if (thisRef) {
+      setIsDragging(true)
+      setMouseSelfDelta({
+        x: e.clientX - thisRef.current.offsetLeft,
+        y: e.clientY - thisRef.current.offsetTop
+      })
+      setCoordinates({
+        x: thisRef.current.offsetLeft,
+        y: thisRef.current.offsetTop
+      })
+    }
+  }
+
+  function handleDragEnd (e) {
+    setIsDragging(false)
+  }
+
+  return (
+    <div className='draggable' ref={thisRef} onMouseDown={(e) => handleDragStart(e)} style={parsedStyle} onMouseUp={(e) => handleDragEnd(e)}>
+      {children && children}
+    </div>
+  )
+}
+
+Draggable.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  contained: PropTypes.bool,
+  height: PropTypes.string,
+  width: PropTypes.string
+}

src/ui/Draggable/styles.scss

@@ -0,0 +1,3 @@
+.draggable {
+  position: absolute;
+}