🔍 Add search input to overview page (#24843)

site/theme/en-US.js

@@ -144,5 +144,6 @@ module.exports = {
     'app.docs.components.icon.pic-searcher.result-tip': 'Match the following icons for you:',
     'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
     'app.docs.components.icon.pic-searcher.th-score': 'Probability',
+    'app.components.overview.search': 'Search in components',
   },
 };

site/theme/template/Content/ComponentOverview.jsx

@@ -1,19 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'bisheng/router';
 import { useIntl } from 'react-intl';
-import { Divider, Row, Col, Card, Typography, Tag, Space } from 'antd';
+import debounce from 'lodash/debounce';
+import { Input, Divider, Row, Col, Card, Typography, Tag, Space } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { getMetaDescription, getLocalizedPathname, getThemeConfig, getMenuItems } from '../utils';
 import './ComponentOverview.less';
 
 const onClickCard = href => {
-  window.gtag('event', '点击', {
-    event_category: '组件总览卡片',
-    event_label: href,
-  });
+  if (window.gtag) {
+    window.gtag('event', '点击', {
+      event_category: '组件总览卡片',
+      event_label: href,
+    });
+  }
 };
 
+const reportSearch = debounce(value => {
+  if (window.gtag) {
+    window.gtag('event', '搜索', {
+      event_category: '组件总览卡片',
+      event_label: value,
+    });
+  }
+}, 500);
+
 const { Title } = Typography;
 const ComponentOverview = ({
   componentsData = [],
@@ -23,7 +36,7 @@ const ComponentOverview = ({
   },
   utils: { toReactComponent },
 }) => {
-  const { locale } = useIntl();
+  const { locale, formatMessage } = useIntl();
   const documentTitle = `${title} - Ant Design`;
   const contentChild = getMetaDescription(getChildren(content));
   const themeConfig = getThemeConfig();
@@ -33,6 +46,7 @@ const ComponentOverview = ({
     themeConfig.categoryOrder,
     themeConfig.typeOrder,
   );
+  const [search, setSearch] = useState('');
 
   return (
     <section className="markdown">
@@ -44,47 +58,69 @@ const ComponentOverview = ({
       <h1>{title}</h1>
       {toReactComponent(['section', { className: 'markdown' }].concat(getChildren(content)))}
       <Divider />
+      <Input
+        value={search}
+        placeholder={formatMessage({ id: 'app.components.overview.search' })}
+        className="components-overview-search"
+        onChange={e => {
+          setSearch(e.target.value);
+          reportSearch(e.target.value);
+        }}
+        autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+        suffix={<SearchOutlined />}
+      />
+      <Divider />
       {menuItems
         .filter(i => i.order > -1)
-        .map(group => (
-          <div key={group.title} className="components-overview">
-            <Title level={2} className="components-overview-group-title">
-              <Space align="center">
-                {group.title}
-                <Tag style={{ display: 'block' }}>{group.children.length}</Tag>
-              </Space>
-            </Title>
-            <Row gutter={[24, 24]}>
-              {group.children
-                .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
-                .map(component => {
-                  const url = `${component.filename
-                    .replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')
-                    .toLowerCase()}/`;
-                  const href = getLocalizedPathname(url, locale === 'zh-CN');
-                  return (
-                    <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
-                      <Link to={href} onClick={() => onClickCard(href)}>
-                        <Card
-                          size="small"
-                          className="components-overview-card"
-                          title={
-                            <div className="components-overview-title">
-                              {component.title} {component.subtitle}
+        .map(group => {
+          const components = group.children.filter(
+            component =>
+              !search.trim() ||
+              component.title.toLowerCase().includes(search.trim().toLowerCase()) ||
+              component.subtitle.toLowerCase().includes(search.trim().toLowerCase()),
+          );
+          return (
+            <div key={group.title} className="components-overview">
+              {components.length > 0 && (
+                <Title level={2} className="components-overview-group-title">
+                  <Space align="center">
+                    {group.title}
+                    <Tag style={{ display: 'block' }}>{components.length}</Tag>
+                  </Space>
+                </Title>
+              )}
+              <Row gutter={[24, 24]}>
+                {components
+                  .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
+                  .map(component => {
+                    const url = `${component.filename
+                      .replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')
+                      .toLowerCase()}/`;
+                    const href = getLocalizedPathname(url, locale === 'zh-CN');
+                    return (
+                      <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
+                        <Link to={href} onClick={() => onClickCard(href)}>
+                          <Card
+                            size="small"
+                            className="components-overview-card"
+                            title={
+                              <div className="components-overview-title">
+                                {component.title} {component.subtitle}
+                              </div>
+                            }
+                          >
+                            <div className="components-overview-img">
+                              <img src={component.cover} alt={component.title} />
                             </div>
-                          }
-                        >
-                          <div className="components-overview-img">
-                            <img src={component.cover} alt={component.title} />
-                          </div>
-                        </Card>
-                      </Link>
-                    </Col>
-                  );
-                })}
-            </Row>
-          </div>
-        ))}
+                          </Card>
+                        </Link>
+                      </Col>
+                    );
+                  })}
+              </Row>
+            </div>
+          );
+        })}
     </section>
   );
 };

site/theme/template/Content/ComponentOverview.less

@@ -26,3 +26,20 @@
     }
   }
 }
+
+.components-overview-search {
+  width: 100%;
+  padding: 0;
+  font-size: 20px;
+  border: 0;
+  box-shadow: none;
+
+  input {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 20px;
+  }
+
+  .anticon {
+    color: #bbb;
+  }
+}

site/theme/zh-CN.js

@@ -140,5 +140,6 @@ module.exports = {
     'app.docs.components.icon.pic-searcher.result-tip': '为您匹配到以下图标：',
     'app.docs.components.icon.pic-searcher.th-icon': '图标',
     'app.docs.components.icon.pic-searcher.th-score': '匹配度',
+    'app.components.overview.search': '搜索组件',
   },
 };