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

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_Panel_Panel_style = require('./Panel.style.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
var utils_hooks_useForwardRef = require('../../utils/hooks/useForwardRef.js');
var utils_hooks_useIsomorphicEffect = require('../../utils/hooks/useIsomorphicEffect.js');
var utils_hooks_useStyleVars = require('../../utils/hooks/useStyleVars.js');
var utils_hooks_usePortal = require('../../utils/hooks/usePortal.js');
var utils_general_throttle = require('../../utils/general/throttle.js');
var utils_general_clamp = require('../../utils/general/clamp.js');
require('styled-components');
require('polished');
require('../../color/colors.js');
require('react-dom');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Panel = utils_HOCs_withIris.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 = tslib_es6.__rest(_a, ["active", "attach", "className", "content", "forwardRef", "onDragStart", "onDragEnd", "onResize", "resizable", "screen", "style"]);
    var ref = utils_hooks_useForwardRef.useForwardRef(forwardRef);
    var _g = tslib_es6.__read(React.useState(160), 2), width = _g[0], widthSet = _g[1];
    var _h = tslib_es6.__read(React.useState(false), 2), dragging = _h[0], draggingSet = _h[1];
    var _j = tslib_es6.__read(React.useState(initialState), 2), dragConstraint = _j[0], dragConstraintSet = _j[1];
    utils_hooks_useIsomorphicEffect.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 &&
        utils_general_throttle.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 = utils_general_clamp.clamp(width_1, dragConstraint);
                widthSet(width_1);
                var eventIris = tslib_es6.__assign(tslib_es6.__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);
    }
    utils_hooks_useIsomorphicEffect.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["default"].createElement(components_Panel_Panel_style.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 = utils_hooks_useStyleVars.useStyleVars({
        transform: transform,
        transition: transition,
        width: width,
    });
    var childrenPortal = utils_hooks_usePortal.usePortal(React__default["default"].createElement(components_Panel_Panel_style.PanelStyled, tslib_es6.__assign({ attach: attach, className: className, ref: ref, style: tslib_es6.__assign(tslib_es6.__assign((_c = {}, _c[attach] = 0, _c), style), styleVars) }, props),
        content,
        handle));
    return childrenPortal;
}

exports.Panel = Panel;