feat: add search component on sidebar (#405)

Author: mortalYoung

.dumi/theme/slots/Sidebar/index.scss

@@ -1,6 +1,25 @@
 @import "../../style/const.scss";
 
+@media only screen and (max-width: 767px) {
+    .dt-theme-filter {
+        display: none;
+    }
+}
+
 @media only screen and (min-width: 767px) {
+    .dt-theme-filter {
+        width: calc(100% - 24px);
+        margin: 0 12px;
+        height: 40px;
+        padding: 16px;
+        color: #30363F;
+        font-size: 14px;
+        border: 1px solid #D0D5D8;
+        border-radius: 20px;
+        outline: none;
+        transition: all 0.3s;
+        background-color: transparent;
+    }
     .dumi-default-sidebar {
         height: 100vh;
         max-height: calc(100vh - 64px);

.dumi/theme/slots/Sidebar/index.tsx

@@ -1,26 +1,64 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Tooltip } from 'antd';
 import { NavLink, useSidebarData } from 'dumi';
 
 import { useMobile } from '../../hooks';
 import 'dumi/theme-default/slots/Sidebar/index.less';
 import './index.scss';
 
+function filterSideBar(arr: ReturnType<typeof useSidebarData>, search: string) {
+    if (!search) return arr;
+    return arr
+        .map((item) => {
+            const children = item.children.filter((child) =>
+                child.title.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+            );
+            return { ...item, children };
+        })
+        .filter((i) => i.children.length);
+}
+
 export default function Sidebar() {
     const sidebar = useSidebarData();
     const isMobile = useMobile();
+    const [search, setSearch] = useState('');
+
+    const isRenderSearch = sidebar.some((s) => s.title === '组件');
 
     if (!sidebar) return null;
 
     return (
         <div className="dumi-default-sidebar">
-            {sidebar.map((item, i) => (
+            {isRenderSearch && (
+                <input
+                    className="dt-theme-filter"
+                    placeholder="搜索组件..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            const firstLink = document.querySelector(
+                                '.dumi-default-sidebar-group dd a'
+                            );
+                            if (firstLink) {
+                                (firstLink as HTMLAnchorElement).click();
+                            }
+                        }
+                    }}
+                />
+            )}
+            {filterSideBar(sidebar, isRenderSearch ? search : '').map((item, i) => (
                 <dl className="dumi-default-sidebar-group" key={String(i)}>
                     {item.title && <dt>{item.title}</dt>}
                     {item.children.map((child) => {
                         const link = (
                             <dd key={child.link}>
-                                <NavLink to={child.link} title={child.title} end>
+                                <NavLink
+                                    to={child.link}
+                                    title={child.title}
+                                    end
+                                    onClick={() => setSearch('')}
+                                >
                                     {child.title}
                                 </NavLink>
                             </dd>