@ducor/react/dist/components/resizer.js

admin template ui interface

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createRef } from "react";
import { twMerge } from "tailwind-merge";
class Resizer extends React.Component {
    constructor(props) {
        super(props);
        this.ref = createRef();
        this.isResizing = false;
        this.state = {
            height: null,
            width: null,
            isVertical: ["top", "bottom"].includes(this.props.target),
            active: false,
        };
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleTouchMove = this.handleTouchMove.bind(this);
        this.handleTouchEnd = this.handleTouchEnd.bind(this);
        this.handleTouchStart = this.handleTouchStart.bind(this);
        this.handleActive = this.handleActive.bind(this);
    }
    handleMouseMove(e) {
        if (!this.isResizing || !this.ref.current)
            return;
        let newSize = {
            width: null,
            height: null,
        };
        if (this.state.isVertical) {
            newSize = {
                height: e.clientY - this.ref.current.offsetTop,
                width: null,
            };
        }
        else {
            let newWidth = e.clientX - this.ref.current.offsetLeft;
            // Apply maxWidth limit
            if (typeof this.props.maxWidth === "number" &&
                newWidth > this.props.maxWidth) {
                return;
            }
            if (typeof this.props.minWidth === "number" &&
                this.props.minWidth > newWidth) {
                return;
            }
            newSize = {
                height: null,
                width: newWidth,
            };
        }
        this.setState(newSize);
        if (typeof this.props.onChange === "function") {
            this.props.onChange(newSize);
        }
    }
    handleTouchMove(e) {
        if (!this.isResizing || !this.ref.current)
            return;
        const touch = e.touches[0];
        let newSize = {
            width: null,
            height: null,
        };
        if (this.state.isVertical) {
            newSize = {
                height: touch.clientY - this.ref.current.offsetTop,
                width: null,
            };
        }
        else {
            let newWidth = touch.clientX - this.ref.current.offsetLeft;
            // Apply maxWidth limit
            if (this.props.maxWidth && newWidth > this.props.maxWidth) {
                newWidth = this.props.maxWidth;
            }
            newSize = {
                height: null,
                width: newWidth,
            };
        }
        this.setState(newSize);
        if (typeof this.props.onChange === "function") {
            this.props.onChange(newSize);
        }
    }
    handleMouseUp() {
        this.isResizing = false;
        document.removeEventListener("mousemove", this.handleMouseMove);
        document.removeEventListener("mouseup", this.handleMouseUp);
    }
    handleTouchEnd() {
        this.isResizing = false;
        document.removeEventListener("touchmove", this.handleTouchMove);
        document.removeEventListener("touchend", this.handleTouchEnd);
    }
    handleMouseDown() {
        this.isResizing = true;
        document.addEventListener("mousemove", this.handleMouseMove);
        document.addEventListener("mouseup", this.handleMouseUp);
    }
    handleTouchStart() {
        this.isResizing = true;
        document.addEventListener("touchmove", this.handleTouchMove);
        document.addEventListener("touchend", this.handleTouchEnd);
    }
    handleActive(isActive) {
        if (typeof this.props.onActive === "function") {
            this.props.onActive(isActive);
        }
        this.setState({ active: isActive });
    }
    getStyle() {
        return !this.state.isVertical
            ? { width: this.state.width ? `${this.state.width}px` : "100%" }
            : { height: this.state.height ? `${this.state.height}px` : "100%" };
    }
    render() {
        if (this.props.disabled) {
            return this.props.children;
        }
        return (_jsx("div", { ref: this.ref, className: 'box-border w-full h-full', children: _jsxs("div", { className: 'box-rsbar', style: this.getStyle(), children: [_jsx("div", { className: 'box-rsbar-body-col', children: this.props.children }), _jsx("div", { className: twMerge("box-rsbar-resize-col", this.props.barClassName || ""), onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, children: _jsx("div", {}) })] }) }));
    }
    componentWillUnmount() {
        document.removeEventListener("mousemove", this.handleMouseMove);
        document.removeEventListener("mouseup", this.handleMouseUp);
        document.removeEventListener("touchmove", this.handleTouchMove);
        document.removeEventListener("touchend", this.handleTouchEnd);
    }
}
export default Resizer;