Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 4x 4x | //Hooks from React
import { useEffect, useRef, useCallback } from 'react';
//CustomFunction
import { DragPosCalc } from './utils/DraggerUtil';
//GlobalConfig
import { getDotLibraryConfig } from '../../Provider/Config';
//Props
import defaultProps from './props/defaultProps';
import propTypes from './props/propTypes';
//CSS
import style from './css/Dragger.module.css';
export default function useDragger({ isActive, ChildRef, boundaryLimit = getDotLibraryConfig('boundaryLimit') }) {
const draggableEle = useRef(null);
const parentEle = useRef(null);
const offset = useRef({ x: 0, y: 0 });
const draggable = useRef(false);
useEffect(() => {
Eif(isActive){
parentEle.current =
ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
}
}, [isActive]);
//calculateDragPosition --> To sperate Dom action
const calculateDragPosition = useCallback((x, y) => {
if (parentEle.current && draggableEle.current) {
return DragPosCalc({
x,
y,
dragWrapper: parentEle.current,
element: draggableEle.current,
boundaryLimit
});
} else {
return { x, y };
}
}, []);
const elementDrag = useCallback(
(e) => {
e = e || window.event;
e.preventDefault();
if (draggable.current) {
const left = offset.current.x + e.clientX;
const top = offset.current.y + e.clientY;
const { x, y } = calculateDragPosition(left, top);
draggableEle.current.style.left = x + 'px';
draggableEle.current.style.top = y + 'px';
}
},
[calculateDragPosition]
);
const closeDragElement = useCallback(() => {
document.removeEventListener('mouseup', closeDragElement);
document.removeEventListener('mousemove', elementDrag);
}, []);
const dragMouseDown = useCallback((e) => {
e = e || window.event;
// e.preventDefault();
const draggableEleRect = draggableEle.current.getBoundingClientRect();
const style = draggableEle.current.style;
const { width } = draggableEleRect;
const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : { left: 0, top: 0 };
const relativeRect = {
left: draggableEleRect.left - parentEleRect.left,
top: draggableEleRect.top - parentEleRect.top
};
const { top, left } = relativeRect;
style.top = `${top}px`;
style.left = `${left}px`;
style.width = `${width}px`;
style.position = 'fixed';
offset.current.x = draggableEle.current.offsetLeft - e.clientX;
offset.current.y = draggableEle.current.offsetTop - e.clientY;
draggable.current = true;
document.addEventListener('mouseup', closeDragElement);
document.addEventListener('mousemove', elementDrag);
}, []);
const removeListener = useCallback((draggableEle) => {
let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
Iif (dragController) {
dragController.removeEventListener('mousedown', dragMouseDown);
draggableEle.current = null;
}
}, []);
useEffect(() => {
if (isActive) {
draggableEle.current = ChildRef.current.closest('[data-drag-container=true]');
let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
dragController && dragController.addEventListener('mousedown', dragMouseDown);
dragController && dragController.classList.add(style.dragCursor);
} else E{
removeListener(draggableEle);
}
return () => {
removeListener(draggableEle);
};
}, [ChildRef.current, isActive]);
return null;
}
//Props
useDragger.propTypes = propTypes;
useDragger.defaultProps = defaultProps;
|