119 lines
3.9 KiB
JavaScript
119 lines
3.9 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react'
|
|
|
|
export default function ResizableDiv ({ children, id, element = {}, disable = false, direction = 'col', min = 20, grow = false, onChange = () => {}, onResize = () => {}, className = '', style = {} }) {
|
|
const [isMounted, setIsMounted] = useState(false)
|
|
const [modelo, setModelo] = useState({ ...element })
|
|
// const [eventUpdate, setEventUpdate] = useState(0)
|
|
const [initialPosX, setInitialPosX] = useState(null)
|
|
const [initialSizeX, setInitialSizeX] = useState(null)
|
|
const [initialPosY, setInitialPosY] = useState(null)
|
|
const [initialSizeY, setInitialSizeY] = useState(null)
|
|
|
|
const divRef = useRef(null)
|
|
|
|
const initialX = (e) => {
|
|
if (divRef != null && divRef.current != null) {
|
|
const resizable = divRef.current // document.getElementById('Resizable');
|
|
setInitialPosX(e.clientX)
|
|
setInitialSizeX(resizable.offsetWidth)
|
|
}
|
|
}
|
|
|
|
const resizeX = (e) => {
|
|
// if (divRef != null && divRef.current != null) {
|
|
// let resizable = divRef.current // document.getElementById('Resizable');
|
|
// resizable.style.width = `${parseInt(initialSizeX) + parseInt(e.clientX - initialPosX)}px`
|
|
// }
|
|
const newWidth = parseInt(initialSizeX) + parseInt(e.clientX - initialPosX)
|
|
onChange('width', newWidth, modelo)
|
|
}
|
|
|
|
const initialY = (e) => {
|
|
if (divRef != null && divRef.current != null) {
|
|
const resizable = divRef.current // document.getElementById('Resizable');
|
|
setInitialPosY(e.clientY)
|
|
setInitialSizeY(resizable.offsetHeight)
|
|
}
|
|
}
|
|
|
|
const resizeY = (e) => {
|
|
// if (divRef != null && divRef.current != null) {
|
|
// let resizable = divRef.current // document.getElementById('Resizable');
|
|
// resizable.style.height = `${parseInt(initialSizeY) + parseInt(e.clientY - initialPosY)}px`
|
|
// }
|
|
const newHeight = parseInt(initialSizeY) + parseInt(e.clientY - initialPosY)
|
|
onChange('height', newHeight, modelo)
|
|
}
|
|
|
|
const applyResize = () => {
|
|
// console.log(' applyResize ')
|
|
if (divRef != null && divRef.current != null) {
|
|
const resizable = divRef.current // document.getElementById('Resizable');
|
|
if (!grow || grow === false) {
|
|
if (direction === 'col') {
|
|
resizable.style.height = `${modelo.height}px`
|
|
resizable.style.width = '100%'
|
|
}
|
|
if (direction === 'row') {
|
|
resizable.style.height = '100%'
|
|
resizable.style.width = `${modelo.width}px`
|
|
}
|
|
} else {
|
|
if (direction === 'col') {
|
|
resizable.style.height = '5rem'
|
|
resizable.style.width = '100%'
|
|
}
|
|
if (direction === 'row') {
|
|
resizable.style.height = '100%'
|
|
resizable.style.width = '5rem'
|
|
}
|
|
}
|
|
}
|
|
setTimeout(() => {
|
|
onResize()
|
|
}, 100)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (isMounted) {
|
|
applyResize()
|
|
}
|
|
}, [modelo, isMounted])
|
|
|
|
useEffect(() => {
|
|
if (isMounted) {
|
|
if (JSON.stringify({ ...element, _dz_background_image: null }) !== JSON.stringify({ ...modelo, _dz_background_image: null })) {
|
|
setModelo({ ...element })
|
|
}
|
|
}
|
|
}, [element])
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true)
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
ref={divRef}
|
|
id={id}
|
|
className={` relative flex items-center justify-center ${direction === 'col' ? 'w-full' : (grow ? ' w-4 ' : '')} ${direction === 'row' ? 'h-full' : (grow ? ' h-4 ' : '')} ${className}`}
|
|
style={grow ? { flexGrow: 1, ...style } : { ...style }}>
|
|
{children}
|
|
{ disable !== true && direction === 'col' &&
|
|
<div
|
|
className=' drag-resize-div-x bg-sky-300 '
|
|
draggable='true'
|
|
onDragStart={initialY}
|
|
onDragEnd={resizeY} />
|
|
}
|
|
{ disable !== true && direction === 'row' &&
|
|
<div
|
|
className=' drag-resize-div-y bg-sky-300 '
|
|
draggable='true'
|
|
onDragStart={initialX}
|
|
onDragEnd={resizeX} />
|
|
}
|
|
</div>
|
|
)
|
|
}
|