Remove React.createElement

mxcube · Jul 12, 2023 · d442906 · d442906
1 parent ee9bdb7
commit d442906
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 97 deletions.
diff --git a/ui/src/components/Equipment/PlateManipulatorMaintenance.js b/ui/src/components/Equipment/PlateManipulatorMaintenance.js
@@ -74,15 +74,14 @@ export class PlateManipulatorAction extends React.Component {
               onChange= {(e) => { this.handleInputChange(e); }}
               ref={(ref) => { this.inputRef = ref; }}
             />
-            {React.createElement(PlateManipulatorActionButton,
-              {
-                label: this.props.btn_label,
-                cmd: this.props.cmd,
-                args: this.state.input_value,
-                enabled: true,
-                send_command: this.props.send_command,
-                key: this.props.btn_label
-            })}
+            <PlateManipulatorActionButton
+              label = {this.props.btn_label}
+              cmd = {this.props.cmd}
+              args = {this.state.input_value}
+              enabled = {true}
+              send_command = {this.props.send_command}
+              key = {this.props.btn_label}
+            />
           </InputGroup>
         </Form.Group>
       </Form>
@@ -95,27 +94,27 @@ export class PlateManipulatorAction extends React.Component {
 
   render() {
     return (
-      React.createElement(PlateManipulatorActionGroup,
-        {
-          name: [`${this.props.header_msg} : ${this.props.value}`, this.props.viewComponent],
-          actionComponent: this.actionComponent(),
-          key: `${this.props.header_msg}:${this.props.value}`
-        })
+      <PlateManipulatorActionGroup
+        name = {[`${this.props.header_msg} : ${this.props.value}`, this.props.viewComponent]}
+        actionComponent = {this.actionComponent()}
+        key = {`${this.props.header_msg}:${this.props.value}`}
+      />
     );
   }
 }
 
 export default class PlateManipulatorMaintenance extends React.Component {
   buildActionButton(cmdinfo) {
-    return React.createElement(PlateManipulatorActionButton,
-      {
-        label: cmdinfo[1],
-        cmd: cmdinfo[0],
-        args: cmdinfo[3],
-        enabled: this.props.commands_state[cmdinfo[0]],
-        send_command: this.props.send_command,
-        key: cmdinfo[1]
-      });
+    return (
+      <PlateManipulatorActionButton
+        label = {cmdinfo[1]}
+        cmd = {cmdinfo[0]}
+        args = {cmdinfo[3]}
+        enabled = {this.props.commands_state[cmdinfo[0]]}
+        send_command = {this.props.send_command}
+        key = {cmdinfo[1]}
+      />
+    );
   }
 
   buildActionGroup(grpinfo) {
@@ -125,12 +124,13 @@ export default class PlateManipulatorMaintenance extends React.Component {
       butgrp.push(this.buildActionButton(cmdinfo));
     }
 
-    return React.createElement(PlateManipulatorActionGroup,
-      {
-        name: grpinfo[0],
-        actionComponent: <ButtonGroup>{butgrp}</ButtonGroup>,
-        key: grpinfo[0]
-      });
+    return (
+      <PlateManipulatorActionGroup
+        name = {grpinfo[0]}
+        actionComponent = {<ButtonGroup>{butgrp}</ButtonGroup>}
+        key = {grpinfo[0]}
+      />
+    );
   }
 
   render() {
@@ -175,36 +175,32 @@ export default class PlateManipulatorMaintenance extends React.Component {
           </Card>
         ) : null
         }
-        {React.createElement(PlateManipulatorAction,
-          {
-            btn_label: 'Get Scan Limits',
-            label: 'Desire Scan Speed',
-            cmd: 'getOmegaMotorDynamicScanLimits',
-            args: this.props.desireScanSpeed,
-            send_command: this.props.send_command,
-            global_state: this.props.global_state,
-            header_msg: 'Omega Motor Dynamic ScanLimits Interval is',
-            value: scan_limits,
-            inputType: 'number',
-            viewComponent: '',
-            key: 'Scan Limits'
-          })
-        }
-        {React.createElement(PlateManipulatorAction,
-          {
-            btn_label: 'Set Plate Barcode',
-            label: 'Plate Barcode',
-            cmd: 'setPlateBarcode',
-            args: this.props.desireScanSpeed,
-            send_command: this.props.send_command,
-            global_state: this.props.global_state,
-            header_msg: 'Actual Plate Barcode is',
-            value: plateBarcode,
-            inputType: 'text',
-            viewComponent: '',
-            key: 'plate barcode'
-          })
-        }
+        <PlateManipulatorAction
+          btn_label = 'Get Scan Limits'
+          label = 'Desire Scan Speed'
+          cmd = 'getOmegaMotorDynamicScanLimits'
+          args = {this.props.desireScanSpeed}
+          send_command = {this.props.send_command}
+          global_state = {this.props.global_state}
+          header_msg = 'Omega Motor Dynamic ScanLimits Interval is'
+          value = {scan_limits}
+          inputType = 'number'
+          viewComponent = ''
+          key = 'Scan Limits'
+        />
+        <PlateManipulatorAction
+          btn_label = 'Set Plate Barcode'
+          label = 'Plate Barcode'
+          cmd = 'setPlateBarcode'
+          args = {this.props.desireScanSpeed}
+          send_command = {this.props.send_command}
+          global_state = {this.props.global_state}
+          header_msg = 'Actual Plate Barcode is'
+          value = {plateBarcode}
+          inputType = 'text'
+          viewComponent = ''
+          key = 'plate barcode'
+        />
       </div>
     );
   }

diff --git a/ui/src/components/Equipment/SampleChanger.js b/ui/src/components/Equipment/SampleChanger.js
@@ -238,30 +238,33 @@ export default class SampleChanger extends React.Component {
         childNodes.push(this.buildTree(c));
       }
 
-      return React.createElement(SampleChangerTreeNode,
-        {
-          label: node.name,
-          selected: node.selected,
-          root,
-          dm: node.id,
-          select: this.props.select,
-          status: node.status,
-          scan: this.props.scan,
-          refresh: this.props.refresh,
-          key: node.name
-        },
-        childNodes);
+      return (
+        <SampleChangerTreeNode
+          label= {node.name}
+          selected = {node.selected}
+          root
+          dm = {node.id}
+          select = {this.props.select}
+          status =  {node.status}
+          scan = {this.props.scan}
+          refresh = {this.props.refresh}
+          key = {node.name}
+        >
+          {childNodes}
+        </SampleChangerTreeNode>
+        );
     }
 
-    return React.createElement(SampleChangerTreeItem,
-      {
-        label: node.name,
-        dm: node.id,
-        load: this.props.load,
-        status: node.status,
-        unload: this.props.unload,
-        key: node.name
-      });
+    return (
+      <SampleChangerTreeItem
+        label= {node.name}
+        dm = {node.id}
+        load = {this.props.load}
+        status = {node.status}
+        unload = {this.props.unload}
+        key = {node.name}
+      />
+    );
   }
 
   // display some buttons depending on available features

diff --git a/ui/src/components/Equipment/SampleChangerMaintenance.js b/ui/src/components/Equipment/SampleChangerMaintenance.js
@@ -42,15 +42,16 @@ export class SampleChangerActionGroup extends React.Component {
 
 export default class SampleChangerMaintenance extends React.Component {
   buildActionButton(cmdinfo) {
-    return React.createElement(SampleChangerActionButton,
-      {
-        label: cmdinfo[1],
-        cmd: cmdinfo[0],
-        args: cmdinfo[3],
-        enabled: this.props.commands_state[cmdinfo[0]],
-        send_command: this.props.send_command,
-        key: cmdinfo[1]
-      });
+    return (
+      <SampleChangerActionButton
+        label = {cmdinfo[1]}
+        cmd = {cmdinfo[0]}
+        args = {cmdinfo[3]}
+        enabled = {this.props.commands_state[cmdinfo[0]]}
+        send_command= {this.props.send_command}
+        key =  {cmdinfo[1]}
+      />
+    );
   }
 
   buildActionGroup(grpinfo) {
@@ -60,12 +61,13 @@ export default class SampleChangerMaintenance extends React.Component {
       butgrp.push(this.buildActionButton(cmdinfo));
     }
 
-    return React.createElement(SampleChangerActionGroup,
-      {
-        name: grpinfo[0],
-        buttons: butgrp,
-        key: grpinfo[0]
-      });
+    return ( 
+      <SampleChangerActionGroup
+        name= {grpinfo[0]}
+        buttons = {butgrp}
+        key = {grpinfo[0]}
+      />
+    );
   }
 
   render() {