refactor(ui): convert ParametersInput to functional components (#11894)

argoproj · Sep 30, 2023 · 14df2e4 · 14df2e4
1 parent 68ad039
commit 14df2e4
Showing 1 changed file with 29 additions and 55 deletions.
diff --git a/ui/src/app/shared/components/parameters-input/parameters-input.tsx b/ui/src/app/shared/components/parameters-input/parameters-input.tsx
@@ -1,38 +1,24 @@
 import {Select, Tooltip} from 'argo-ui';
-import * as React from 'react';
+import React from 'react';
 import {Parameter} from '../../../../models';
 import {Utils} from '../../utils';
 
 interface ParametersInputProps {
     parameters: Parameter[];
-    onChange?: (parameters: Parameter[]) => void;
+    onChange: (parameters: Parameter[]) => void;
 }
 
-export class ParametersInput extends React.Component<ParametersInputProps, {parameters: Parameter[]}> {
-    constructor(props: ParametersInputProps) {
-        super(props);
-        this.state = {parameters: props.parameters || []};
+export function ParametersInput(props: ParametersInputProps) {
+    function onParameterChange(parameter: Parameter, value: string) {
+        const newParameters: Parameter[] = props.parameters.map(p => ({
+            name: p.name,
+            value: p.name === parameter.name ? value : Utils.getValueFromParameter(p),
+            enum: p.enum
+        }));
+        props.onChange(newParameters);
     }
 
-    public render() {
-        return (
-            <>
-                {this.props.parameters.map((parameter, index) => (
-                    <div key={parameter.name + '_' + index} style={{marginBottom: 14}}>
-                        <label>{parameter.name}</label>
-                        {parameter.description && (
-                            <Tooltip content={parameter.description}>
-                                <i className='fa fa-question-circle' style={{marginLeft: 4}} />
-                            </Tooltip>
-                        )}
-                        {(parameter.enum && this.displaySelectFieldForEnumValues(parameter)) || this.displayInputFieldForSingleValue(parameter)}
-                    </div>
-                ))}
-            </>
-        );
-    }
-
-    private displaySelectFieldForEnumValues(parameter: Parameter) {
+    function displaySelectFieldForEnumValues(parameter: Parameter) {
         return (
             <Select
                 key={parameter.name}
@@ -41,40 +27,28 @@ export class ParametersInput extends React.Component<ParametersInputProps, {para
                     value,
                     title: value
                 }))}
-                onChange={e => {
-                    const newParameters: Parameter[] = this.state.parameters.map(p => ({
-                        name: p.name,
-                        value: p.name === parameter.name ? e.value : Utils.getValueFromParameter(p),
-                        enum: p.enum
-                    }));
-                    this.setState({parameters: newParameters});
-                    this.onParametersChange(newParameters);
-                }}
+                onChange={e => onParameterChange(parameter, e.value)}
             />
         );
     }
 
-    private displayInputFieldForSingleValue(parameter: Parameter) {
-        return (
-            <textarea
-                className='argo-field'
-                value={Utils.getValueFromParameter(parameter)}
-                onChange={e => {
-                    const newParameters: Parameter[] = this.state.parameters.map(p => ({
-                        name: p.name,
-                        value: p.name === parameter.name ? e.target.value : Utils.getValueFromParameter(p),
-                        enum: p.enum
-                    }));
-                    this.setState({parameters: newParameters});
-                    this.onParametersChange(newParameters);
-                }}
-            />
-        );
+    function displayInputFieldForSingleValue(parameter: Parameter) {
+        return <textarea className='argo-field' value={Utils.getValueFromParameter(parameter)} onChange={e => onParameterChange(parameter, e.target.value)} />;
     }
 
-    private onParametersChange(parameters: Parameter[]) {
-        if (this.props.onChange) {
-            this.props.onChange(parameters);
-        }
-    }
+    return (
+        <>
+            {props.parameters.map((parameter, index) => (
+                <div key={parameter.name + '_' + index} style={{marginBottom: 14}}>
+                    <label>{parameter.name}</label>
+                    {parameter.description && (
+                        <Tooltip content={parameter.description}>
+                            <i className='fa fa-question-circle' style={{marginLeft: 4}} />
+                        </Tooltip>
+                    )}
+                    {(parameter.enum && displaySelectFieldForEnumValues(parameter)) || displayInputFieldForSingleValue(parameter)}
+                </div>
+            ))}
+        </>
+    );
 }