@vime/react/dist/cjs/lib.jsx

React bindings for the Vime media player.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createComponent = exports.define = void 0;
/* eslint-disable react/prop-types */
var compose_react_refs_1 = __importDefault(require("@seznam/compose-react-refs"));
var react_1 = require("react");
var define = function (tagName, clazz) {
    var isClient = typeof window !== 'undefined';
    if (isClient && !customElements.get(tagName))
        customElements.define(tagName, clazz);
};
exports.define = define;
var dashToPascalCase = function (str) {
    return str
        .toLowerCase()
        .split('-')
        .map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
        .join('');
};
var isEvent = function (prop) { var _a; return prop.indexOf('on') === 0 && prop[2] === ((_a = prop[2]) === null || _a === void 0 ? void 0 : _a.toUpperCase()); };
var toDomEventName = function (prop) {
    return prop.charAt(2).toLowerCase() + prop.substring(3);
};
function createComponent(tagName, componentProps) {
    var Component = (0, react_1.forwardRef)(function (_a, forwardedRef) {
        var children = _a.children, props = __rest(_a, ["children"]);
        var _b = (0, react_1.useState)(null), ref = _b[0], setRef = _b[1];
        var setRefCb = (0, react_1.useCallback)(function (node) {
            setRef(node);
        }, []);
        var eventHandlers = (0, react_1.useRef)(new Map());
        var domProps = (0, react_1.useMemo)(function () {
            return Object.keys(props)
                .filter(function (prop) { return !componentProps.has(prop) && !isEvent(prop); })
                .reduce(function (p, c) {
                var _a;
                return (__assign(__assign({}, p), (_a = {}, _a[c] = props[c], _a)));
            }, {});
        }, [props]);
        var wcProps = (0, react_1.useMemo)(function () {
            return Object.keys(props)
                .filter(function (prop) { return componentProps.has(prop) || isEvent(prop); })
                .reduce(function (p, c) {
                var _a;
                return (__assign(__assign({}, p), (_a = {}, _a[c] = props[c], _a)));
            }, {});
        }, [props]);
        var listen = (0, react_1.useCallback)(function (prop, handler) {
            var _a;
            var domEvent = toDomEventName(prop);
            (_a = eventHandlers.current.get(domEvent)) === null || _a === void 0 ? void 0 : _a();
            if (!ref || !handler)
                return;
            ref.addEventListener(domEvent, handler);
            eventHandlers.current.set(domEvent, function () {
                ref.removeEventListener(domEvent, handler);
            });
        }, [ref]);
        var cleanup = (0, react_1.useCallback)(function () {
            eventHandlers.current.forEach(function (fn) { return fn(); });
            eventHandlers.current.clear();
        }, []);
        (0, react_1.useEffect)(function () { return function () {
            cleanup();
        }; }, []);
        (0, react_1.useEffect)(function () {
            if (!ref)
                return;
            Object.keys(wcProps).forEach(function (prop) {
                if (isEvent(prop)) {
                    listen(prop, wcProps[prop]);
                    return;
                }
                if (ref[prop] !== wcProps[prop]) {
                    ref[prop] = wcProps[prop];
                }
            });
        }, [ref, wcProps]);
        return (0, react_1.createElement)(tagName, __assign({ ref: (0, compose_react_refs_1.default)(setRefCb, forwardedRef) }, domProps), children);
    });
    Component.displayName = dashToPascalCase(tagName);
    return Component;
}
exports.createComponent = createComponent;