@vimeo/iris/components/Panel/Panel.esm.js

Vimeo Design System

import { b as __rest, _ as __read, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useState } from 'react';
import { DragEdge, PanelStyled } from './Panel.style.esm.js';
import { withIris } from '../../utils/HOCs/withIris.esm.js';
import { useForwardRef } from '../../utils/hooks/useForwardRef.esm.js';
import { useIsomorphicEffect } from '../../utils/hooks/useIsomorphicEffect.esm.js';
import { useStyleVars } from '../../utils/hooks/useStyleVars.esm.js';
import { usePortal } from '../../utils/hooks/usePortal.esm.js';
import { throttle } from '../../utils/general/throttle.esm.js';
import { clamp } from '../../utils/general/clamp.esm.js';
import 'styled-components';
import 'polished';
import '../../color/colors.esm.js';
import 'react-dom';

var Panel = withIris(PanelComponent);
var initialState = { min: 0, max: 600 };
function PanelComponent(_a) {
    var _b, _c;
    var active = _a.active, _d = _a.attach, attach = _d === void 0 ? 'right' : _d, className = _a.className, content = _a.content, forwardRef = _a.forwardRef, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onResize = _a.onResize, _e = _a.resizable, resizable = _e === void 0 ? false : _e; _a.screen; var style = _a.style, props = __rest(_a, ["active", "attach", "className", "content", "forwardRef", "onDragStart", "onDragEnd", "onResize", "resizable", "screen", "style"]);
    var ref = useForwardRef(forwardRef);
    var _g = __read(useState(160), 2), width = _g[0], widthSet = _g[1];
    var _h = __read(useState(false), 2), dragging = _h[0], draggingSet = _h[1];
    var _j = __read(useState(initialState), 2), dragConstraint = _j[0], dragConstraintSet = _j[1];
    useIsomorphicEffect(function () {
        if (!resizable)
            return;
        var _a = getComputedStyle(ref.current), minWidth = _a.minWidth, maxWidth = _a.maxWidth;
        var min = parseFloat(minWidth) || dragConstraint.min;
        var max = parseFloat(maxWidth) || dragConstraint.max;
        dragConstraintSet({ min: min, max: max });
    }, [style, className]);
    var onMouseMove = resizable &&
        throttle(function (event) {
            if (dragging) {
                event.preventDefault();
                var clientX = event.clientX;
                var _a = document.body, offsetWidth = _a.offsetWidth, offsetLeft = _a.offsetLeft;
                var width_1;
                if (attach === 'right')
                    width_1 = offsetWidth - clientX;
                if (attach === 'left')
                    width_1 = clientX - offsetLeft;
                width_1 = clamp(width_1, dragConstraint);
                widthSet(width_1);
                var eventIris = __assign(__assign({}, dragConstraint), { current: width_1 });
                onResize === null || onResize === void 0 ? void 0 : onResize(event, eventIris);
            }
        }, 16);
    function onMouseDown(event) {
        if (!resizable)
            return;
        event.preventDefault();
        draggingSet(true);
        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
    }
    function onMouseUp(event) {
        if (!resizable)
            return;
        draggingSet(false);
        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event);
    }
    useIsomorphicEffect(function () {
        if (!resizable)
            return;
        var htmlStyle = document.documentElement.style;
        if (dragging)
            htmlStyle.cursor = 'col-resize';
        document.addEventListener('mouseup', onMouseUp, true);
        document.addEventListener('mousemove', onMouseMove, true);
        return function () {
            htmlStyle.removeProperty('cursor');
            document.removeEventListener('mouseup', onMouseUp, true);
            document.removeEventListener('mousemove', onMouseMove, true);
        };
    }, [dragging]);
    var handle = resizable && active && (React__default.createElement(DragEdge, { dragging: dragging, onMouseDown: onMouseDown, style: (_b = {}, _b[attach] = 'calc(100% - 1rem)', _b) }));
    var visible = 'translateX(0)';
    var shift = attach === 'left' ? -1 : 1;
    var hidden = "translateX(".concat(shift * 100, "%)");
    var transform = active ? visible : hidden;
    var duration = Math.round(width / 6 + 90);
    var transition = dragging
        ? 'none'
        : "transform ".concat(duration, "ms ease-in-out");
    var styleVars = useStyleVars({
        transform: transform,
        transition: transition,
        width: width,
    });
    var childrenPortal = usePortal(React__default.createElement(PanelStyled, __assign({ attach: attach, className: className, ref: ref, style: __assign(__assign((_c = {}, _c[attach] = 0, _c), style), styleVars) }, props),
        content,
        handle));
    return childrenPortal;
}

export { Panel };