From ffa59fd0885c8032750dd7ae4104b7030afacf78 Mon Sep 17 00:00:00 2001
From: zhuyue <zhu.yue@99cloud.net>
Date: Tue, 2 Nov 2021 18:49:42 +0800
Subject: [PATCH] feat: Make ipProtocol can be entered by user

Make ipProtocol can be entered by user

Change-Id: I74122014b9e209af331db467f7d84e56d70cfc50
---
 .../FormItem/SelectWithInput/index.jsx        | 70 +++++++++++++++++++
 src/components/FormItem/index.jsx             |  2 +
 src/locales/en.json                           |  1 +
 src/locales/zh.json                           |  1 +
 .../Detail/Rule/actions/Create.jsx            | 11 +--
 5 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 src/components/FormItem/SelectWithInput/index.jsx

diff --git a/src/components/FormItem/SelectWithInput/index.jsx b/src/components/FormItem/SelectWithInput/index.jsx
new file mode 100644
index 00000000..1302d692
--- /dev/null
+++ b/src/components/FormItem/SelectWithInput/index.jsx
@@ -0,0 +1,70 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { Component } from 'react';
+import { Select } from 'antd';
+
+export default class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined,
+      inputVal: undefined
+    };
+  }
+
+  onChange = (val) => {
+    this.setState({
+      value: val,
+      inputVal: undefined
+    }, () => {
+      const { formRef, onChange, name } = this.props;
+      formRef.current &&
+        formRef.current.setFieldsValue({ [name]: val });
+      onChange && onChange(val);
+    });
+  };
+
+  onSearch = (value) => {
+    !!value &&
+      this.setState({
+        inputVal: value
+      });
+  };
+
+  onBlur = () => {
+    const { inputVal } = this.state;
+    !!inputVal && this.onChange(inputVal);
+  };
+
+  render() {
+    const { options = [], filterOption = false } = this.props;
+    const { value } = this.state;
+    return (
+      <Select
+        showSearch
+        value={value}
+        style={{ width: "100%", height: '100%' }}
+        onChange={this.onChange}
+        onSearch={this.onSearch}
+        onBlur={this.onBlur}
+        filterOption={filterOption}
+        onFocus={this.onFocusSelect}
+        showArrow={false}
+        options={options}
+        getPopupContainer={() => document.body}
+      />
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/FormItem/index.jsx b/src/components/FormItem/index.jsx
index 6886ae23..c170b59b 100644
--- a/src/components/FormItem/index.jsx
+++ b/src/components/FormItem/index.jsx
@@ -58,6 +58,7 @@ import NetworkSelectTable from './NetworkSelectTable';
 import VolumeSelectTable from './VolumeSelectTable';
 import TabSelectTable from './TabSelectTable';
 import TreeSelect from './TreeSelect';
+import SelectWithInput from './SelectWithInput'
 // import styles from './index.less';
 
 export const type2component = {
@@ -103,6 +104,7 @@ export const type2component = {
   aceEditor: AceEditor,
   'input-json': JsonInput,
   'tree-select': TreeSelect,
+  'select-input': SelectWithInput,
 };
 
 export default class FormItem extends React.Component {
diff --git a/src/locales/en.json b/src/locales/en.json
index 8456d929..a1d2f918 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1162,6 +1162,7 @@
   "Please input name": "Please input name",
   "Please input port range": "Please input port range",
   "Please input prefix": "Please input prefix",
+  "Please input protocol number if it absent in select list.": "Please input protocol number if it absent in select list.",
   "Please input provider": "Please input provider",
   "Please input snapshot name": "Please input snapshot name",
   "Please input transfer id": "Please input transfer id",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 8ab18170..141bba76 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1162,6 +1162,7 @@
   "Please input name": "请输入名称",
   "Please input port range": "请输入端口范围",
   "Please input prefix": "请输入前缀",
+  "Please input protocol number if it absent in select list.": "如果选择列表中没有，请输入协议号。",
   "Please input provider": "请输入提供者",
   "Please input snapshot name": "请输入快照名称",
   "Please input transfer id": "请输入转让Id",
diff --git a/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Create.jsx b/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Create.jsx
index fc1a704f..e531d5a0 100644
--- a/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Create.jsx
+++ b/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Create.jsx
@@ -220,10 +220,11 @@ export default class Create extends ModalAction {
       {
         name: 'ipProtocol',
         label: t('IP Protocol'),
-        type: 'select',
+        type: 'select-input',
         options: ipProtocols,
         required: isCustomProtocol,
         hidden: !isCustomProtocol,
+        help: t('Please input protocol number if it absent in select list.'),
       },
       {
         name: 'icmpType',
@@ -305,14 +306,14 @@ export default class Create extends ModalAction {
         protocol === 'custom_icmp'
           ? icmpType
           : range
-          ? parseInt(ports[0], 10)
-          : null,
+            ? parseInt(ports[0], 10)
+            : null,
       port_range_max:
         protocol === 'custom_icmp'
           ? icmpCode
           : range
-          ? parseInt(ports[1] || ports[0], 10)
-          : null,
+            ? parseInt(ports[1] || ports[0], 10)
+            : null,
       protocol: newProtocol,
       ...rest,
     };