47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useSearch, AnchorLink } from 'dumi/theme';
|
|
import './SearchBar.less';
|
|
|
|
export default () => {
|
|
const [keywords, setKeywords] = useState<string>('');
|
|
const [items, setItems] = useState([]);
|
|
const input = useRef<HTMLInputElement>();
|
|
const result = useSearch(keywords);
|
|
|
|
useEffect(() => {
|
|
if (Array.isArray(result)) {
|
|
setItems(result);
|
|
} else if (typeof result === 'function') {
|
|
result(`.${input.current.className}`);
|
|
}
|
|
}, [result]);
|
|
|
|
return (
|
|
<div className="__dumi-default-search">
|
|
<input
|
|
className="__dumi-default-search-input"
|
|
type="search"
|
|
ref={input}
|
|
{...(Array.isArray(result)
|
|
? {
|
|
value: keywords,
|
|
onChange: (ev) => setKeywords(ev.target.value),
|
|
}
|
|
: {})}
|
|
/>
|
|
<ul>
|
|
{items.map((meta) => (
|
|
<li key={meta.path} onClick={() => setKeywords('')}>
|
|
<AnchorLink to={meta.path}>
|
|
{meta.parent?.title && (
|
|
<span>{meta.parent.title}</span>
|
|
)}
|
|
{meta.title}
|
|
</AnchorLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|