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

admin template ui interface

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createRef } from "react";
import { twMerge } from "tailwind-merge";
var Resizer = /** @class */ (function (_super) {
    __extends(Resizer, _super);
    function Resizer(props) {
        var _this = _super.call(this, props) || this;
        _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);
        return _this;
    }
    Resizer.prototype.handleMouseMove = function (e) {
        if (!this.isResizing || !this.ref.current)
            return;
        var newSize = {
            width: null,
            height: null,
        };
        if (this.state.isVertical) {
            newSize = {
                height: e.clientY - this.ref.current.offsetTop,
                width: null,
            };
        }
        else {
            var 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);
        }
    };
    Resizer.prototype.handleTouchMove = function (e) {
        if (!this.isResizing || !this.ref.current)
            return;
        var touch = e.touches[0];
        var newSize = {
            width: null,
            height: null,
        };
        if (this.state.isVertical) {
            newSize = {
                height: touch.clientY - this.ref.current.offsetTop,
                width: null,
            };
        }
        else {
            var 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);
        }
    };
    Resizer.prototype.handleMouseUp = function () {
        this.isResizing = false;
        document.removeEventListener("mousemove", this.handleMouseMove);
        document.removeEventListener("mouseup", this.handleMouseUp);
    };
    Resizer.prototype.handleTouchEnd = function () {
        this.isResizing = false;
        document.removeEventListener("touchmove", this.handleTouchMove);
        document.removeEventListener("touchend", this.handleTouchEnd);
    };
    Resizer.prototype.handleMouseDown = function () {
        this.isResizing = true;
        document.addEventListener("mousemove", this.handleMouseMove);
        document.addEventListener("mouseup", this.handleMouseUp);
    };
    Resizer.prototype.handleTouchStart = function () {
        this.isResizing = true;
        document.addEventListener("touchmove", this.handleTouchMove);
        document.addEventListener("touchend", this.handleTouchEnd);
    };
    Resizer.prototype.handleActive = function (isActive) {
        if (typeof this.props.onActive === "function") {
            this.props.onActive(isActive);
        }
        this.setState({ active: isActive });
    };
    Resizer.prototype.getStyle = function () {
        return !this.state.isVertical
            ? { width: this.state.width ? "".concat(this.state.width, "px") : "100%" }
            : { height: this.state.height ? "".concat(this.state.height, "px") : "100%" };
    };
    Resizer.prototype.render = function () {
        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", {}) })] }) }));
    };
    Resizer.prototype.componentWillUnmount = function () {
        document.removeEventListener("mousemove", this.handleMouseMove);
        document.removeEventListener("mouseup", this.handleMouseUp);
        document.removeEventListener("touchmove", this.handleTouchMove);
        document.removeEventListener("touchend", this.handleTouchEnd);
    };
    return Resizer;
}(React.Component));
export default Resizer;