Improve typing for react states

Author: gaolinai8888

packages/base/src/dialogs/ProcessingFormDialog.tsx

@@ -16,6 +16,7 @@ export interface IProcessingFormDialogOptions extends IBaseFormProps {
   sourceData: IDict;
   title: string;
   syncData: (props: IDict) => void;
+  cancel?: () => void;
   syncSelectedPropField?: (
     id: string | null,
     value: any,
@@ -37,19 +38,25 @@ export interface IProcessingFormWrapperProps
 const ProcessingFormWrapper: React.FC<IProcessingFormWrapperProps> = props => {
   const [ready, setReady] = React.useState<boolean>(false);
 
-  const okSignal = React.useRef<Signal<Dialog<any>, number>>();
-  const formErrorSignal = React.useRef<Signal<Dialog<any>, boolean>>();
+  const okSignal = React.useRef<Signal<Dialog<any>, number> | undefined>(
+    undefined,
+  );
+  const formErrorSignal = React.useRef<
+    Signal<Dialog<any>, boolean> | undefined
+  >(undefined);
 
   Promise.all([
     props.okSignalPromise.promise,
-    props.formErrorSignalPromise?.promise,
+    props.formErrorSignalPromise
+      ? props.formErrorSignalPromise.promise
+      : Promise.resolve(undefined),
   ]).then(([ok, formChanged]) => {
     okSignal.current = ok;
-    formErrorSignal.current = formChanged;
+    formErrorSignal.current = formChanged || undefined;
     setReady(true);
   });
 
-  let FormComponent;
+  let FormComponent: React.ComponentType<any>;
   switch (props.processingType) {
     case 'Dissolve':
       FormComponent = DissolveForm;
@@ -138,6 +145,12 @@ export class ProcessingFormDialog extends Dialog<IDict> {
           okSignalPromise={okSignalPromise}
           formErrorSignalPromise={formErrorSignalPromise}
           syncData={syncData} // Use the modified sync function
+          cancel={
+            options.cancel ??
+            (() => {
+              /* no action needed on cancel */
+            })
+          }
         />
       </div>
     );
@@ -157,9 +170,14 @@ export class ProcessingFormDialog extends Dialog<IDict> {
     formErrorSignal.connect((_, extraErrors) => {
       const invalid = extraErrors || !!this.node.querySelector(':invalid');
       if (invalid) {
-        this.node
-          .getElementsByClassName('jp-mod-accept')[0]
-          .setAttribute('disabled', '');
+        const okBtn = this.node.getElementsByClassName(
+          'jp-mod-accept',
+        )[0] as HTMLButtonElement;
+        if (invalid) {
+          okBtn.setAttribute('disabled', '');
+        } else {
+          okBtn.removeAttribute('disabled');
+        }
       } else {
         this.node
           .getElementsByClassName('jp-mod-accept')[0]
@@ -183,5 +201,5 @@ export class ProcessingFormDialog extends Dialog<IDict> {
     }
   }
 
-  private okSignal: Signal<Dialog<any>, number>;
+  private okSignal: Signal<Dialog<IDict>, number>;
 }

packages/base/src/dialogs/symbology/symbologyDialog.tsx

@@ -46,9 +46,10 @@ const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
   cancel,
 }) => {
   const [selectedLayer, setSelectedLayer] = useState<string | null>(null);
-  const [componentToRender, setComponentToRender] = useState<any>(null);
+  const [componentToRender, setComponentToRender] =
+    useState<JSX.Element | null>(null);
 
-  let LayerSymbology: React.JSX.Element;
+  let LayerSymbology: React.JSX.Element | null = null;
 
   useEffect(() => {
     const handleClientStateChanged = () => {