feat: Make ipProtocol can be entered by user

Make ipProtocol can be entered by user

Change-Id: I74122014b9e209af331db467f7d84e56d70cfc50

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}
+      />
+    );
+  }
+}

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 {

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",

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",

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',