functional refs

RobMayer · Sep 3, 2023 · 55d7c52 · 55d7c52
1 parent d531316
commit 55d7c52
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "jsx-in-ttpg",
     "license": "UNLICENSE",
-    "version": "1.2.4",
+    "version": "1.3.0",
     "scripts": {
         "build": "tsup src/index.ts --format cjs,esm --dts --no-splitting",
         "clean": "rm -rf ./dist",

diff --git a/src/index.ts b/src/index.ts
@@ -111,6 +111,8 @@ export const render = (children: JSXNode): Widget => {
 
 type ArrayOr<T> = T | T[];
 
+type RefValue<T> = { current: T | null } | ((o: T) => void);
+
 export type JSXNode = JSX.Element;
 export type RefHandle<T> = { current: T | null; clear: () => void };
 export type RefObject<T> = { current: T | null };
@@ -306,15 +308,23 @@ const doCommon = <T extends Widget>(element: T, attrs: CommonElement<T>) => {
     element.setVisible(!attrs?.hidden);
     element.setEnabled(!attrs?.disabled);
     if (attrs.ref) {
-        attrs.ref.current = element;
+        if (typeof attrs.ref === "function") {
+            attrs.ref(element);
+        } else {
+            attrs.ref.current = element;
+        }
     }
 };
 
 const doTextlike = <T extends TextWidgetBase>(element: T, attrs: TextlikeObject<T>) => {
     element.setVisible(!attrs?.hidden);
     element.setEnabled(!attrs?.disabled);
     if (attrs.ref) {
-        attrs.ref.current = element;
+        if (typeof attrs.ref === "function") {
+            attrs.ref(element);
+        } else {
+            attrs.ref.current = element;
+        }
     }
     if (attrs.color) {
         const t = parseColor(attrs.color);
@@ -340,7 +350,11 @@ const doImagelike = <T extends ImageButton | ImageWidget>(element: T, attrs: Ima
     element.setVisible(!attrs?.hidden);
     element.setEnabled(!attrs?.disabled);
     if (attrs.ref) {
-        attrs.ref.current = element;
+        if (typeof attrs.ref === "function") {
+            attrs.ref(element);
+        } else {
+            attrs.ref.current = element;
+        }
     }
     if (attrs.color) {
         const t = parseColor(attrs.color);
@@ -365,7 +379,7 @@ const doImagelike = <T extends ImageButton | ImageWidget>(element: T, attrs: Ima
 };
 
 type CommonElement<T extends Widget> = {
-    ref?: RefObject<T>;
+    ref?: RefValue<T>;
     disabled?: boolean;
     hidden?: boolean;
 };