feat: support search in the global navigation

Support search menu in the global navagition

Change-Id: I4c12e5d57650f6ef2641ed8680e98d6919432124

releasenotes/notes/Support-Global-Navigation-45412aa3603c4f14.yaml

@@ -0,0 +1,10 @@
+---
+features:
+  - |
+    Support the global navigation at the top-left position of the page:
+
+    * The global navigation displays all the expanded menu items.
+
+    * The global navigation supports the search of the menu items.
+
+    * Update the UI and UE of the menu items.

src/components/Layout/GlobalNav/Right/index.jsx

@@ -14,11 +14,14 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Input } from 'antd';
 import PropTypes from 'prop-types';
 import { navItemPropType } from '../common';
 
 import styles from './index.less';
 
+const { Search } = Input;
+
 export default class Right extends React.Component {
   static propTypes = {
     items: PropTypes.arrayOf(navItemPropType),
@@ -29,6 +32,51 @@ export default class Right extends React.Component {
     items: [],
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentItems: props.items || [],
+    };
+  }
+
+  onInputChange = (e) => {
+    const { value } = e.target;
+    this.getNavItemsBySearch(value);
+  };
+
+  onSearch = (value) => {
+    this.getNavItemsBySearch(value);
+  };
+
+  getNavItemsBySearch = (search) => {
+    const checkWords = (search || '').toLowerCase().trim();
+    const { items } = this.props;
+    const currentItems = [];
+    items.forEach((first) => {
+      if (!checkWords) {
+        currentItems.push(first);
+      } else {
+        const { name, children = [] } = first;
+        if (name.toLowerCase().includes(checkWords)) {
+          currentItems.push(first);
+        } else {
+          const cItems = children.filter((c) => {
+            return c.name.toLowerCase().includes(checkWords);
+          });
+          if (cItems.length) {
+            currentItems.push({
+              ...first,
+              children: cItems,
+            });
+          }
+        }
+      }
+    });
+    this.setState({
+      currentItems,
+    });
+  };
+
   renderNavItemChildren = (item) => {
     const { children = [] } = item;
     const currentChildren = children.length ? children : [item];
@@ -59,15 +107,31 @@ export default class Right extends React.Component {
     );
   };
 
-  render() {
+  renderSearch() {
-    const { items } = this.props;
+    return (
-    if (!items.length) {
+      <div className={styles.search}>
-      return null;
+        <Search
+          placeholder={t('Search')}
+          allowClear
+          onChange={this.onInputChange}
+          onSearch={this.onSearch}
+        />
+      </div>
+    );
   }
 
+  renderNavItems() {
+    const { currentItems = [] } = this.state;
     return (
-      <div className={styles.right} id="global-nav-right">
+      <div className={styles.right}>{currentItems.map(this.renderNavItem)}</div>
-        {items.map(this.renderNavItem)}
+    );
+  }
+
+  render() {
+    return (
+      <div id="global-nav-right">
+        {this.renderSearch()}
+        {this.renderNavItems()}
       </div>
     );
   }

src/components/Layout/GlobalNav/Right/index.less

@@ -36,3 +36,10 @@
     color: #000;
   }
 }
+
+.search {
+  width: 90%;
+  margin-top: -8px;
+  margin-bottom: 16px;
+  margin-left: 0;
+}

src/locales/en.json

@@ -2034,6 +2034,7 @@
   "Saving": "Saving",
   "Scheduler Hints": "Scheduler Hints",
   "Scheduling": "Scheduling",
+  "Search": "Search",
   "Sec for DPD delay, > 0": "Sec for DPD delay, > 0",
   "Sec for DPD timeout, > 0 & > DPD Interval": "Sec for DPD timeout, > 0 & > DPD Interval",
   "Security Group": "Security Group",

src/locales/zh.json

@@ -2034,6 +2034,7 @@
   "Saving": "保存中",
   "Scheduler Hints": "调度程序提示",
   "Scheduling": "调度中",
+  "Search": "搜索",
   "Sec for DPD delay, > 0": "设置DPD检查的最大延时时间。",
   "Sec for DPD timeout, > 0 & > DPD Interval": "设置DPD检查的超时时间，超时时间必须大于最大延迟时间。",
   "Security Group": "安全组",