@vimeo/iris/utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.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 ReactDOM = require('react-dom');
var utils_hooks_usePortal_DEPRECATED_usePortal_DEPRECATED_style = require('./usePortal_DEPRECATED.style.js');
var utils_hooks_usePortal_DEPRECATED_useMountAnimations = require('./useMountAnimations.js');
var utils_hooks_usePortal_DEPRECATED_coordinates = require('./coordinates.js');
var utils_hooks_usePortal_DEPRECATED_Anchor = require('./Anchor.js');
var utils_hooks_useOutsideClick = require('../useOutsideClick.js');
var utils_DOM_SSR = require('../../DOM/SSR.js');
var utils_DOM_createPortalOutlet = require('../../DOM/createPortalOutlet.js');
require('styled-components');
require('../useIsomorphicEffect.js');
require('../../DOM/getComputedStyles.js');
require('../../DOM/animate.js');
require('../../events/onEvent.js');
require('polished');
require('../../DOM/createElement.js');

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

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

function usePortal_DEPRECATED(Component, portalConfig) {
    var screenRef = React.useRef(null);
    var childRef = React.useRef(null);
    var ref = React.useRef(null);
    var _a = portalConfig.allowPageInteraction, allowPageInteraction = _a === void 0 ? false : _a, _b = portalConfig.anchorToWindow, anchorToWindow = _b === void 0 ? false : _b, _c = portalConfig.attach, attach = _c === void 0 ? null : _c, forceActive = portalConfig.forceActive, _d = portalConfig.margin, margin = _d === void 0 ? 8 : _d, onChildClick = portalConfig.onClick, _e = portalConfig.screen, screen = _e === void 0 ? false : _e, _f = portalConfig.trigger, trigger = _f === void 0 ? 'click' : _f;
    var _g = utils_hooks_usePortal_DEPRECATED_useMountAnimations.useMountAnimations(portalConfig, { childRef: childRef, screenRef: screenRef }), open = _g.open, close = _g.close, active = _g.active, animationProps = _g.animationProps;
    var controlled = forceActive === true || forceActive === false;
    var toggle = function (e) { return (!controlled && active ? close(e) : open(e)); };
    var toggleWithChildClick = function (e) {
        onChildClick && onChildClick(e);
        toggle(e);
    };
    utils_hooks_useOutsideClick.useOutsideClick([ref, childRef], function (event) {
        if (allowPageInteraction)
            return;
        if (!controlled && trigger === 'click')
            close(event);
    });
    if (utils_DOM_SSR.SSR)
        return [null, null];
    var outlet = utils_DOM_createPortalOutlet.createPortalOutlet('iris-portals');
    var clickProps = { onClick: toggleWithChildClick };
    var hoverProps = { onMouseEnter: open, onMouseLeave: close };
    var clickable = !controlled && trigger === 'click' && clickProps;
    var hoverable = !controlled && trigger === 'hover' && hoverProps;
    var children = React.cloneElement(Component, tslib_es6.__assign({ ref: childRef }, animationProps));
    var Portal = ReactDOM.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(utils_hooks_usePortal_DEPRECATED_Anchor.Anchor, { anchor: ref, anchorToWindow: anchorToWindow, attach: utils_hooks_usePortal_DEPRECATED_coordinates.coordinates(attach, anchorToWindow), childRef: childRef, margin: margin, children: children }),
        screen && React__default["default"].createElement(utils_hooks_usePortal_DEPRECATED_usePortal_DEPRECATED_style.Screen, { ref: screenRef, onClick: toggle })), outlet);
    return [active && Portal, tslib_es6.__assign(tslib_es6.__assign({ ref: ref }, clickable), hoverable)];
}
function isForwardRef(type) {
    return (type.$$typeof &&
        type.$$typeof.toString() === 'Symbol(react.forward_ref)');
}
function isDOMElement(type) {
    return typeof type === 'string';
}
function validate(_a) {
    var type = _a.type;
    return isDOMElement(type) || isForwardRef(type);
}

exports.usePortal_DEPRECATED = usePortal_DEPRECATED;
exports.validate = validate;