components.Table.hooks.useMouseDownResize.ts Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of n2o-react

The newest version!

import { MouseEvent as HtmlElementMouseEvent, MutableRefObject, RefObject, useCallback } from 'react'

type ResizableElement = RefObject | MutableRefObject

/**
 * Функция принимает HTMlElement и возвращает функцию, что будет менять размер переданного элемента
 */
export const useMouseDownResize = (resizableElement: ResizableElement) => (
    useCallback((event: HtmlElementMouseEvent) => {
        const cell = resizableElement.current

        if (!cell) {
            return
        }
        const initialWidth = parseFloat(
            window.getComputedStyle(cell, null).getPropertyValue('width'),
        )
        const initialMouseX = event.clientX

        const handleMouseMove = (event: MouseEvent) => {
            const offset = event.clientX - initialMouseX
            const newWidth = initialWidth + offset

            cell.style.width = `${newWidth}px`
        }

        const handleMouseUp = () => {
            document.removeEventListener('mousemove', handleMouseMove)
            document.removeEventListener('mouseup', handleMouseUp)
        }

        document.addEventListener('mousemove', handleMouseMove)
        document.addEventListener('mouseup', handleMouseUp)
    }, [resizableElement])
)