fix: 重构MethodsList

client/components/ModalPostman/MethodsList.js

@@ -7,68 +7,20 @@ const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
 
-const inputComponent = (props) => {
-  let index = props.index
-  return <Input size="small" placeholder="请输入参数" disabled={!props.disabled} onChange={(e) => props.paramsInput(e.target.value, index)} />
-}
-
-inputComponent.propTypes = {
-  paramsInput: PropTypes.func,
-  index: PropTypes.number,
-  disabled: PropTypes.bool
-}
-
-const selectComponent = (props) => {
-  const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
-  let index = props.index;
-  return <Select placeholder="请选择" style={{ width: 150 }} size="small" disabled={!props.disabled} onChange={(e) => props.paramsInput(e, index)}>
-    {
-      subname.map((item, index) => {
-        return <Option value={item} key={index}>{item}</Option>
-      })
-    }
-  </Select>
-}
-selectComponent.propTypes = {
-  paramsInput: PropTypes.func,
-  index: PropTypes.number,
-  disabled: PropTypes.bool
-}
-
-
-// const handleChange = (v) => {
-//   console.log('value', v);
-// }
-
 const METHODS_LIST = [
   { name: 'md5', type: false },
   { name: 'lower', type: false },
   { name: 'length', type: false },
   { name: 'substr', type: true },
-  { name: 'sha', type: true, component: selectComponent, subname: ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'] },
+  { name: 'sha', type: true, component: "select", subname: ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'] },
   { name: 'base64', type: false },
   { name: 'unbase64', type: false },
-  { name: 'concat', type: true, component: inputComponent },
-  { name: 'lconcat', type: true, component: inputComponent },
+  { name: 'concat', type: true, component: "input" },
+  { name: 'lconcat', type: true, component: "input" },
   { name: 'upper', type: false }
 
 ]
 
-const MethodsListSource = (props) => {
-  // console.log("disabled",props.disabled);
-  return <div>
-    {props.component && <props.component disabled={props.disabled} paramsInput={props.paramsInput} index={props.paramsIndex} />}
-  </div>
-}
-
-
-MethodsListSource.propTypes = {
-  component: PropTypes.any,
-  paramsInput: PropTypes.func,
-  paramsIndex: PropTypes.number,
-  disabled: PropTypes.bool
-
-}
 
 class MethodsList extends Component {
   static propTypes = {
@@ -82,7 +34,6 @@ class MethodsList extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      filter: '',
       list: METHODS_LIST.slice(0, 4),
       moreFlag: true
     }
@@ -99,11 +50,26 @@ class MethodsList extends Component {
 
   }
 
-  // handleSelectMethod = (methodName)=>{
-  //   return ()=>{
+  inputComponent = (props) => {
+    let index = props.index
+    return <Input size="small" placeholder="请输入参数" disabled={!props.disabled} onChange={(e) => props.paramsInput(e.target.value, index)} />
+  }
 
-  //   }
-  // }
+  selectComponent = (props) => {
+    const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
+    let index = props.index;
+    return <Select placeholder="请选择" style={{ width: 150 }} size="small" disabled={!props.disabled} onChange={(e) => props.paramsInput(e, index)}>
+      {
+        subname.map((item, index) => {
+          return <Option value={item} key={index}>{item}</Option>
+        })
+      }
+    </Select>
+  }
+
+  handleParamsChange(){
+    
+  }
 
 
   // unshowMore = () => {
@@ -113,6 +79,22 @@ class MethodsList extends Component {
   //   })
   // }
 
+  handleComponent(item, paramsInput, clickIndex) {
+    let query = {
+      disabled: item.name === this.props.clickValue,
+      paramsInput: paramsInput,
+      index: clickIndex
+    }
+    switch (item.component) {
+      case 'select':
+        return this.selectComponent(query);
+      case 'input':
+        return this.inputComponent(query);
+      default:
+        break;
+    }
+  }
+
   render() {
     const { list, moreFlag } = this.state;
     const { click, paramsInput, clickValue, clickIndex } = this.props;
@@ -128,13 +110,7 @@ class MethodsList extends Component {
                 <RadioButton value={item.name}>
                   <span>{item.name}</span>
                   <span className="input-component">
-                    {item.type &&
-                      <MethodsListSource
-                        disabled={item.name === clickValue}
-                        paramsInput={paramsInput}
-                        component={item.component}
-                        paramsIndex={clickIndex} />
-                    }
+                    {item.type && this.handleComponent(item, paramsInput, clickIndex)}
                   </span>
                 </RadioButton>