@wazespace/wme-react-components/dist/utils/create-react-component.js

A package with useful replications of the Waze Map Editor components to use in userscripts

import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Component } from 'react';
import { camelToDashCase, dashToPascalCase, pascalToDashCase } from './case-converters';
import { attachPropsToDOMElement, isEventCoveredByReact } from './custom-element-synchronizer';
import { mergeRefs } from './merge-refs';
import { createForwardRef } from './create-forward-ref';
export function createReactComponent(elementTag) {
    const componentName = dashToPascalCase(elementTag);
    const ElementComponent = class extends Component {
        componentElement = null;
        setComponentElement = (element) => this.componentElement = element;
        componentDidMount() {
            this.componentDidUpdate?.(this.props);
        }
        componentDidUpdate(prevProps) {
            if (this.componentElement)
                attachPropsToDOMElement(this.componentElement, this.props, prevProps);
        }
        render() {
            const { children, forwardedRef, style, className, ref, ...otherProps } = this.props;
            const slotsContent = new Map();
            const processedProps = Object.keys(otherProps).reduce((accumulatedProps, propName) => {
                const propValue = otherProps[propName];
                if (propName.indexOf("on") === 0 && propName[2] === propName[2].toUpperCase()) {
                    const eventName = propName.substring(2).toLowerCase();
                    // Check if the event is covered by React before adding it
                    if (typeof document !== "undefined" && isEventCoveredByReact(eventName)) {
                        accumulatedProps[propName] = propValue;
                    }
                }
                else if (propName.toLowerCase() !== 'slot' && propName.startsWith('slot') && propName[4] === propName[4].toUpperCase()) {
                    const slotName = propName.substring(4);
                    const originalSlotName = pascalToDashCase(slotName);
                    slotsContent.set(originalSlotName, propValue);
                }
                else {
                    const valueType = typeof propValue;
                    // Include only string, boolean, and number types in the processedProps
                    if (valueType === "string" || valueType === "boolean" || valueType === "number") {
                        accumulatedProps[camelToDashCase(propName)] = propValue;
                    }
                }
                return accumulatedProps;
            }, {});
            const finalProps = {
                ...processedProps,
                style,
                ref: mergeRefs(forwardedRef, this.setComponentElement),
            };
            const elementChildren = (_jsxs(_Fragment, { children: [children, Array.from(slotsContent.keys()).map((slotName) => {
                        const slotValue = slotsContent.get(slotName);
                        if (!slotValue)
                            return null;
                        return React.cloneElement(slotValue, {
                            ...slotValue?.props,
                            slot: slotName,
                        });
                    })] }));
            return React.createElement(elementTag, finalProps, elementChildren);
        }
        static get displayName() {
            return componentName;
        }
    };
    return createForwardRef(ElementComponent);
}
//# sourceMappingURL=create-react-component.js.map