[dome] TS port for errors

ivette/src/dome/src/renderer/errors.js → ivette/src/dome/src/renderer/errors.tsx

@@ -7,47 +7,53 @@
    @module dome/errors
 */
 
-import React from 'react' ;
-import { Label } from 'dome/controls/labels' ;
-import { Button } from 'dome/controls/buttons' ;
+import React from 'react';
+import { Label } from 'dome/controls/labels';
+import { Button } from 'dome/controls/buttons';
 
 // --------------------------------------------------------------------------
 // --- Error Boundaries
 // --------------------------------------------------------------------------
 
 /**
-   @summary React Error Boundaries.
-   @property {string} [label] - Default error box label
-   @property {function} [onError] - Alternative renderer
-   @description
-   Install an error boundary. In case of error, the default
-   rendering is a warning button that output on console the
-   catched error.
+   Alternative renderer in case of error.
+   @param reload - callback for re-rendering the faulty component
+ */
+export interface renderError {
+  (error: any, info: any, reload: () => void): JSX.Element;
+}
+
+export interface CatchProps {
+  /** Name of the error boundary. */
+  label?: string;
+  /** Alternative renderer callback in case of errors. */
+  onError?: JSX.Element | renderError;
+}
 
-   An alternative rendering can be supplied
-   with `onError:(error,info) => React.Element`.
+interface CatchState {
+  error?: any;
+  info?: any;
+}
 
+/**
+   React Error Boundaries.
  */
-export class Catch extends React.Component
-{
+export class Catch extends React.Component<CatchProps, CatchState, {}> {
 
-  constructor(props) {
+  constructor(props: CatchProps) {
     super(props);
-    this.state = { };
+    this.state = {};
     this.logerr = this.logerr.bind(this);
     this.reload = this.reload.bind(this);
   }
 
-  dumpError(error,info) {
-  }
-
-  componentDidCatch(error, info) {
+  componentDidCatch(error: any, info: any) {
     this.setState({ error, info });
   }
 
   logerr() {
-    const { error, info } = this.state ;
-    console.error('[dome] Catched error:',error,info);
+    const { error, info } = this.state;
+    console.error('[dome] Catched error:', error, info);
   }
 
   reload() {
@@ -55,23 +61,23 @@ export class Catch extends React.Component
   }
 
   render() {
-    const { error, info } = this.state ;
+    const { error, info } = this.state;
     if (error) {
-      const { onError, label='Error' } = this.props ;
-      if (typeof(onError)==='function')
-        return onError(error,info,this.reload);
+      const { onError, label = 'Error' } = this.props;
+      if (typeof (onError) === 'function')
+        return onError(error, info, this.reload);
       else
         return (
           <div>
             <Button icon='WARNING' kind='warning'
-                    title={error}
-                    onClick={this.logerr} />
+              title={error}
+              onClick={this.logerr} />
             <Button icon='RELOAD' onClick={this.reload} />
             <Label>{label}</Label>
           </div>
         );
     }
-    return this.props.children || null ;
+    return this.props.children || null;
   }
 }
 

ivette/src/frama-c/LabViews.tsx

@@ -329,7 +329,7 @@ const makeGridItem = (customize: any, onClose: any) => (comp: any) => {
       <Vfill className="labview-content">
         <Hbox className="labview-titlebar">
           <Hfill>
-            <Catch title={id}>
+            <Catch label={id}>
               <RenderItem id={`labview.title.${id}`}>
                 <Label className="labview-handle" label={label} title={title} />
               </RenderItem>
@@ -338,7 +338,7 @@ const makeGridItem = (customize: any, onClose: any) => (comp: any) => {
           {CLOSING}
         </Hbox>
         <TitleContext.Provider value={{ id, label, title }}>
-          <Catch title={id}>{children}</Catch>
+          <Catch label={id}>{children}</Catch>
         </TitleContext.Provider>
       </Vfill>
     </Grids.GridItem>