@pepperi-addons/ngx-composite-lib-react 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React wrappers for @pepperi-addons/ngx-composite-lib web components, plus registration bundles.",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,8 @@
     "*.d.ts",
     "components/*.js",
     "components/*.d.ts",
+    "utils/*.js",
+    "utils/*.d.ts",
     "elements/*",
     "README.md"
   ],
@@ -19,6 +21,7 @@
       "types": "./index.d.ts",
       "default": "./index.js"
     },
+    "./components/PepGroupButtonsSettingsReact.js": "./components/PepGroupButtonsSettingsReact.js",
     "./elements/register.js": "./elements/register.js",
     "./elements/register.auto.js": "./elements/register.auto.js",
     "./elements/styles.css": "./elements/styles.css",

package/utils/create-wrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type AnyProps = Record<string, any> & {
+    children?: React.ReactNode;
+};
+declare type WebComponent = HTMLElement & Record<string, any>;
+export declare function createPepWrapper<T extends WebComponent = WebComponent>(tagName: string, displayName: string): React.ForwardRefExoticComponent<Pick<AnyProps, string> & React.RefAttributes<T>>;
+export {};

package/utils/create-wrapper.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, forwardRef } from 'react';
+export function createPepWrapper(tagName, displayName) {
+    const Cmp = forwardRef((props, ref) => {
+        const localRef = useRef(null);
+        const setRef = (el) => {
+            localRef.current = el;
+            if (typeof ref === 'function')
+                ref(el);
+            else if (ref && 'current' in ref)
+                ref.current = el;
+        };
+        useEffect(() => {
+            const el = localRef.current;
+            const listeners = [];
+            if (el) {
+                Object.entries(props).forEach(([key, value]) => {
+                    if (key === 'children' || key === 'style' || key === 'className')
+                        return;
+                    if (key.startsWith('on') && typeof value === 'function') {
+                        const eventName = key.slice(2, 3).toLowerCase() + key.slice(3);
+                        const handler = (e) => value(e);
+                        el.addEventListener(eventName, handler);
+                        listeners.push([eventName, handler]);
+                    }
+                    else {
+                        try {
+                            el[key] = value;
+                        }
+                        catch {
+                            // ignore set errors
+                        }
+                    }
+                });
+            }
+            return () => {
+                const current = localRef.current;
+                listeners.forEach(([n, h]) => current?.removeEventListener(n, h));
+            };
+        }, [props]);
+        const { children, className, style } = props;
+        return React.createElement(tagName, { ref: setRef, className, style }, children);
+    });
+    Cmp.displayName = displayName;
+    return Cmp;
+}
+//# sourceMappingURL=create-wrapper.js.map