load inline js event handlers for inputs

Author: devxpy

app/components/CodeEditor.tsx

@@ -41,19 +41,13 @@ export default function CodeEditor({
   onChange: OnChange;
   state: Record<string, any>;
 }) {
-  const {
-    name,
-    defaultValue,
-    height,
-    label,
-    help,
-    tooltipPlacement,
-    ...restProps
-  } = props;
+  const { name, defaultValue, height, label, help, tooltipPlacement, ...args } =
+    props;
   const [inputRef, value, setValue] = useGooeyStringInput<HTMLTextAreaElement>({
     state,
     name,
     defaultValue,
+    args,
   });
   const handleChange = (val: string) => {
     setValue(val);
@@ -98,7 +92,7 @@ export default function CodeEditor({
         value={value}
         onChange={handleChange}
         extensions={[javascript(), lintGutter(), jsLinter(lintOptions)]}
-        {...restProps}
+        {...args}
       />
     </div>
   );

app/components/GooeySelect.tsx

@@ -25,6 +25,7 @@ export default function GooeySelect({
     defaultValue,
     name,
     onChange,
+    args,
   });
 
   // if the state value is changed by the server code, then update the value

app/gooeyInput.tsx

@@ -37,6 +37,7 @@ export function GooeyTextarea({
     state,
     name,
     defaultValue,
+    args,
   });
   return (
     <div className="gui-input gui-input-textarea">
@@ -74,6 +75,7 @@ export function GooeyInput({
     state,
     name,
     defaultValue,
+    args,
   });
   return (
     <div className={className}>
@@ -100,10 +102,12 @@ export function useGooeyStringInput<
   state,
   name,
   defaultValue,
+  args,
 }: {
   state: Record<string, any>;
   name: string;
   defaultValue: string;
+  args?: Record<string, any>;
 }): [
   inputRef: React.RefObject<E>,
   value: string,
@@ -117,6 +121,8 @@ export function useGooeyStringInput<
   // but to avoid reloading the page on every change with onChange (gets very annoying when typing), we need to use this extra state variable with a useEffect
   const [value, setValue] = useState<string>(state[name] || defaultValue);
 
+  loadEventHandlers(value, setValue, args);
+
   useEffect(() => {
     const element = inputRef.current;
     if (
@@ -234,3 +240,20 @@ export function useGooeyCheckedInput({
 
   return inputRef;
 }
+
+export function loadEventHandlers<T>(
+  value: T,
+  setValue: (value: T) => void,
+  args?: Record<string, any>
+) {
+  if (!args) return;
+  for (const [attr, body] of Object.entries(args)) {
+    if (!attr.startsWith("on")) continue;
+    args[attr] = (event: React.SyntheticEvent) => {
+      // new Function(...args, body)
+      const fn = new Function("event", "value", "setValue", body);
+      // fn.call(thisArg, ...args)
+      return fn.call(event.currentTarget, event.nativeEvent, value, setValue);
+    };
+  }
+}

app/jsonFormInput.tsx

@@ -1,21 +1,26 @@
 import React, { useEffect, useRef, useState } from "react";
+import { loadEventHandlers } from "./gooeyInput";
 
 export function useJsonFormInput<T>({
   defaultValue,
   name,
   onChange,
   encode = JSON.stringify,
   decode = JSON.parse,
+  args,
 }: {
   defaultValue: T;
   name: string;
   onChange?: () => void;
   encode?: (value: T) => string;
   decode?: (value: string) => T;
+  args?: Record<string, any>;
 }): [React.FunctionComponent, T, (value: T) => void] {
   const [value, setValue] = useState(defaultValue);
   const ref = useRef<HTMLInputElement>(null);
 
+  loadEventHandlers(value, setValue, args);
+
   useEffect(() => {
     if (!ref.current) return;
     if (!ref.current.value) {

app/renderer.tsx

@@ -621,6 +621,7 @@ export function GuiExpander({
     defaultValue: open,
     name,
     onChange,
+    args: props,
   });
 
   return (