Port Event Triggers node to react. Fixes #6578

web/pgadmin/static/js/components/CodeMirror.jsx

@@ -9,26 +9,57 @@
 
 import React, { useEffect, useRef } from 'react';
 import {default as OrigCodeMirror} from 'bundled_codemirror';
+import {useOnScreen} from 'sources/custom_hooks';
 import PropTypes from 'prop-types';
 
 /* React wrapper for CodeMirror */
-export default function CodeMirror({name, value, options}) {
+export default function CodeMirror({name, value, options, events, ...props}) {
   const taRef = useRef();
   const cmObj = useRef();
+  const cmWrapper = useRef();
+  const isVisibleTrack = useRef();
 
   useEffect(()=>{
     /* Create the object only once on mount */
     cmObj.current = new OrigCodeMirror.fromTextArea(
       taRef.current, options);
+
+    if(cmObj.current) {
+      try {
+        cmWrapper.current = cmObj.current.getWrapperElement();
+      } catch(e) {
+        cmWrapper.current = null;
+      }
+    }
+
+    Object.keys(events||{}).forEach((eventName)=>{
+      cmObj.current.on(eventName, events[eventName]);
+    });
   }, []);
 
   useEffect(()=>{
+    /* Refresh when value changes async */
+    if(props.isAsync) {
+      if(cmObj.current) {
+        cmObj.current.setValue(value);
+        cmObj.current.refresh();
+      }
+    }
+  }, [value]);
+
+  const onScreenVisible = useOnScreen(cmWrapper);
+  if(!isVisibleTrack.current && onScreenVisible) {
+    isVisibleTrack.current = true;
+
     /* Refresh when value changes */
     if(cmObj.current) {
       cmObj.current.setValue(value);
       cmObj.current.refresh();
     }
-  }, [value]);
+    cmObj.current.refresh();
+  } else if(!onScreenVisible) {
+    isVisibleTrack.current = false;
+  }
 
   return <textarea ref={taRef} name={name} />;
 }
@@ -36,5 +67,8 @@ export default function CodeMirror({name, value, options}) {
 CodeMirror.propTypes = {
   name: PropTypes.string,
   value: PropTypes.string,
-  options: PropTypes.object
+  options: PropTypes.object,
+  change: PropTypes.func,
+  events: PropTypes.object,
+  isAsync: PropTypes.bool
 };

web/pgadmin/static/js/components/FormComponents.jsx

@@ -127,8 +127,9 @@ FormInput.propTypes = {
   testcid: PropTypes.any,
 };
 
-export function InputSQL({value, options}) {
+export function InputSQL({value, options, onChange, ...props}) {
   const classes = useStyles();
+
   return (
     <CodeMirror
       value={value||''}
@@ -138,18 +139,26 @@ export function InputSQL({value, options}) {
         ...options,
       }}
       className={classes.sql}
+      events={{
+        change: (cm)=>{
+          onChange && onChange(cm.getValue(), cm);
+        },
+      }}
+      {...props}
     />
   );
 }
 InputSQL.propTypes = {
   value: PropTypes.string,
   options: PropTypes.object,
+  onChange: PropTypes.func
+
 };
 
-export function FormInputSQL({hasError, required, label, className, helpMessage, testcid, value, controlProps}) {
+export function FormInputSQL({hasError, required, label, className, helpMessage, testcid, value, controlProps, ...props}) {
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
-      <InputSQL value={value} options={controlProps}/>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} >
+      <InputSQL value={value} options={controlProps} {...props}/>
     </FormInput>
   );
 }
@@ -162,6 +171,7 @@ FormInputSQL.propTypes = {
   testcid: PropTypes.string,
   value: PropTypes.string,
   controlProps: PropTypes.object,
+  change: PropTypes.func,
 };